Skip to content

Commit

Permalink
Feat: Done Row Card Section
Browse files Browse the repository at this point in the history 
사각형의 카드로 구성된 row Cards section 구현 완료
  • Loading branch information
@jyc-coder
jyc-coder committed Jan 5, 2023
1 parent bd73df8 commit 05de87a
Show file tree
Hide file tree
Showing 3 changed files with 392 additions and 1 deletion.
209 changes: 208 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h1 class="hero__content__title">
</div>
</div>
</section>
<!-- sircle-card section -->
<!-- sircle-cards section -->
<section class="container">
<div class="circle-cards">
<a href="#">
Expand Down Expand Up @@ -196,6 +196,213 @@ <h6>Stickers</h6>
</a>
</div>
</section>
<!-- row-cards section -->
<section class="container">
<div class="row-cards">
<div class="row-cards__list">
<div class="row-cards__list__header">
<div class="row-cards__list__header__box">
<p class="title">Top Icons</p>
</div>

<a href="#" class="link-arrow">
view all <i class="fa-solid fa-arrow-right"></i
></a>
</div>
<div class="row-cards__list__content">
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/9/9314/9314665-video-conference_3x2.jpg"
alt="video Conference"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Video Conference</span>
</div>
<div class="row-cards-name__box__icons">
<span>50 icons</span>
</div>
</div>
</div>
</a>
</article>
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/0/111/111666-beautiful-camera_3x2.jpg"
alt="Camera"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Beatiful Camera</span>
</div>
<div class="row-cards-name__box__icons">
<span>94 icons</span>
</div>
</div>
</div>
</a>
</article>
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/9/9308/9308203-party-avatars_3x2.jpg"
alt="party Avatars"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Party Avatars</span>
</div>
<div class="row-cards-name__box__icons">
<span>50 icons</span>
</div>
</div>
</div>
</a>
</article>
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/0/274/274658-print_3x2.jpg"
alt="print"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Print</span>
</div>
<div class="row-cards-name__box__icons">
<span>100 icons</span>
</div>
</div>
</div>
</a>
</article>
</div>
</div>
<div class="row-cards__list">
<div class="row-cards__list__header">
<div class="row-cards__list__header__box">
<p class="title">Top Stickers</p>
</div>

<a href="#" class="link-arrow">
view all <i class="fa-solid fa-arrow-right"></i
></a>
</div>
<div class="row-cards__list__content">
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/9/9006/9006586-christmas_3x2.jpg"
alt="christmas"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Christmas</span>
</div>
<div class="row-cards-name__box__icons">
<span>20 Stickers</span>
</div>
</div>
</div>
</a>
</article>
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/9/9007/9007965-christmas-cracker_3x2.jpg"
alt="christmas cracker"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Christmas Cracker</span>
</div>
<div class="row-cards-name__box__icons">
<span>20 stickers</span>
</div>
</div>
</div>
</a>
</article>
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src="https://cdn-share-sprites.flaticon.com/pack/9/9028/9028908-essentials_3x2.jpg"
alt="essentials"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Essentials</span>
</div>
<div class="row-cards-name__box__icons">
<span>20 stickers</span>
</div>
</div>
</div>
</a>
</article>
<article class="row-cards__list__content__box">
<a href="#" class="row-cards-link">
<div class="img-holder">
<picture>
<img
src=" https://cdn-share-sprites.flaticon.com/pack/9/9055/9055594-street-food_3x2.jpg"
alt="street food"
/>
</picture>
</div>
<div class="row-cards-name">
<div class="row-cards-name__box">
<div class="row-cards-name__box__name">
<span>Street Food</span>
</div>
<div class="row-cards-name__box__icons">
<span>20 stickers</span>
</div>
</div>
</div>
</a>
</article>
</div>
</div>
</div>
</section>
</section>
</body>
</html>
82 changes: 82 additions & 0 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,4 +394,86 @@ h6 {
font-size: 14px;
font-weight: 400;
margin-bottom: 20px;
}

.row-cards {
margin-bottom: 50px;
}
.row-cards__list {
margin-bottom: 40px;
}
.row-cards__list__header {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.row-cards__list__header__box {
flex: 1;
}
.row-cards__list__header__box .title {
font-size: 26px;
font-weight: 600;
color: #0b2239;
display: inline-block;
margin-bottom: 10px;
}
.row-cards__list__header .link-arrow {
color: #008b71;
}
.row-cards__list__content {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: calc(100% + 20px);
margin-left: -10px;
}
.row-cards__list__content__box {
min-width: 320px;
padding: 10px;
flex: 1;
}
.row-cards__list__content__box .row-cards-link {
border-radius: 8px;
display: block;
border: 1px solid #cfd9e0;
overflow: hidden;
background-color: #fff;
}
.row-cards__list__content__box .img-holder {
overflow: hidden;
}
.row-cards__list__content__box .img-holder img {
margin: 5px auto;
max-width: 100%;
width: 300px;
height: 188px;
display: block;
}
.row-cards__list__content__box .row-cards-name {
height: unset;
padding: 5px 20px;
color: #1d262d;
line-height: 44px;
background-color: #fff;
font-size: 14px;
font-weight: 600;
}
.row-cards__list__content__box .row-cards-name__box {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.row-cards__list__content__box .row-cards-name__box__name {
padding-right: 5px;
flex: 1;
}
.row-cards__list__content__box .row-cards-name__box__name span {
text-transform: capitalize;
}
.row-cards__list__content__box .row-cards-name__box__icons span {
font-size: 13px;
color: #5f7d95;
text-transform: uppercase;
}/*# sourceMappingURL=main.css.map */

0 comments on commit 05de87a

Please sign in to comment.