Merge pull request #39 from urther/develop

design : #11 add dailyshoes part
JJongBin · Nov 16, 2021 · 039aa0b · 039aa0b
2 parents 0fcd86b + 88c4c95
commit 039aa0b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 12 deletions.
diff --git a/src/index.html b/src/index.html
@@ -174,25 +174,33 @@ <h2 class="sr-only">진행중인 드로우</h2>
 					</ul>
 					<button aria-label="진행중인 드로우로 이동" type="button">더보기</button>
 				</section>
+
+				<!-- 데일리 -->
 				<section class="daily">
 					<h2 class="daily__h2 daily__h2--medium">DAILY SHOES</h2>
 					<ul class="daily__ul">
 						<li>
 							<span>@zzamjonbin</span>
 							<figure>
-								<!-- <img src="./assets/images/shoes.jpeg" alt="데일리룩"> -->
+								<img class="daily__img" src="./assets/images/shoes.jpeg" alt="데일리룩">
 							</figure>
 						</li>
 						<li>
 							<span>@chihanna</span>
 							<figure>
-								<img src="./assets/images/shoes.jpeg" alt="데일리룩">
+								<img class="daily__img" src="./assets/images/shoes.jpeg" alt="데일리룩">
 							</figure>
 						</li>
 						<li>
 							<span>@quaqwakim</span>
 							<figure>
-								<img src="./assets/images/shoes.jpeg" alt="데일리룩">
+								<img class="daily__img" src="./assets/images/shoes.jpeg" alt="데일리룩">
+							</figure>
+						</li>
+						<li>
+							<span>@mingmango</span>
+							<figure>
+								<img class="daily__img" src="./assets/images/shoes.jpeg" alt="데일리룩">
 							</figure>
 						</li>
 					</ul>

diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
@@ -1,19 +1,14 @@
 @use './../utils' as *;
 
 
-.main-wrapper{
-  background-color: blue;
-  max-width: rem(1200px);
-  margin: 0 auto;
-}
 
 // 비디오 첫페이지
 .video{
   position: relative;
   // 비디오 container
   &__iframe-container{
     background-color: $navy;
-    width: 100vw;
+    width: 100%;
     height:100vh;
   }
   &__iframe{
@@ -49,18 +44,24 @@
     left:5%;
     color: $white;
     font-size: rem(60px);
-    letter-spacing: rem(-10px);
+    letter-spacing: rem(-5px);
     @include desktop{
       top:30%;
+      letter-spacing: rem(-10px);
       font-size: rem(90px);
     }
     &--bold{
+      margin-top: rem(10px);
       font-weight: 700;
     }
   }
-
+  
 }
 
+.main-wrapper{
+  max-width: rem(1200px);
+  margin: 0 auto;
+}
 
 // 베스트 드로우
 .best{
@@ -134,6 +135,48 @@
 }
 
 
+// 데일리쇼즈, 진행중인 드로우 heading
+.daily__h2{
+  font-weight: 700;
+  font-size: rem(26px);
+  margin:rem(10px);
 
+}
 
-
+// 데일리룩
+.daily{
+  &__ul{
+    display: flex;
+    flex-wrap: nowrap;
+    // justify-content: center;
+    justify-items: flex-start;
+    // li 요소
+    li{
+      position: relative;
+      width: rem(240px);
+      height:rem(280px);
+      overflow: hidden;
+      margin-left:rem(10px);
+      border-radius: rem(30px);
+      @include mobile{
+        min-width: rem(150px);
+      }
+      // 인스타그램 아이디
+      span{
+        color: $black;
+        position: absolute;
+        bottom: 5%;
+        left:5%;
+      }
+      figure{
+        width: 100%;
+        height:100%;
+      }
+    }
+  }
+  &__img{
+    width: 100%;
+    height:100%;
+    object-fit: cover;
+  }
+}