Skip to content

Commit

Permalink
05.18
Browse files Browse the repository at this point in the history
  • Loading branch information
@nuykeeh
nuykeeh committed May 18, 2024
1 parent eb887e4 commit 1d36143
Show file tree
Hide file tree
Showing 11 changed files with 278 additions and 2 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
Binary file added images/3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/banner.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/magazine1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/magazine2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/style1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/style2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/style3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/style4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
160 changes: 158 additions & 2 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ body{
.Mainscreen2{
display: block;
width: 100%;
height: 1435px;
height: 1713px;
/* border: 2px solid #ff0000; */
}

Expand All @@ -213,7 +213,8 @@ body{
gap: 10px;
/* position: static; */
padding-left: 187px;
top: 140px;
/* top: 140px; */
margin-top: 140px;
}
.itembox1{
font-family: musi;
Expand Down Expand Up @@ -253,6 +254,8 @@ body{


.product-box{
position: static;
margin-left: 0px;
position: absolute;
margin-top: 110px;
}
Expand Down Expand Up @@ -311,4 +314,157 @@ body{
font-family: pre;
font-weight: 500;
font-size: 13px
}

/* 비슷한 연령대 포멀어반 */
.Similarage{
display: flex;
flex-direction: column;
position: absolute;
gap: 10px;
margin-top: 797px;
margin-left: 187px;
/* border: 3px solid #ff0000; */
}
.itembox2{
font-family: musi;
font-size: 32px;
color: #000000;
}
.itembox2:nth-child(2){
font-family: musi;
font-size: 32px;
color: #0066FF;
}
.price2{
color: #000000;
margin-top: 20px;
font-family: pre;
font-weight: 600;
font-size: 16px
}
/*--------------------------메인3----------------------------*/
.Mainscreen3{
display: block;
width: 100%;
height: 680px;
/* border: 2px solid #ff0000; */
}
.imgbanner{
width: 100%;
}
/*---------------------------메인4----------------------------*/
.Mainscreen4{
display: block;
width: 100%;
height: 1090px;
border: 2px solid #ff0000;
}
/*---------------------------메인5----------------------------*/
.Mainscreen5{
display: block;
width: 100%;
height: 1080px;
border: 2px solid #ff0000;
}
.style{
margin-left: 187px;
margin-top: 65px;
}
.itembox4{
font-family: musi;
font-size: 32px;
color: #000000;
}
.category2{
display: flex;
flex-direction: row;
position: absolute;
padding-top: 30px;
}
.catbox2{
display: flex;
align-items: center; /* 수직 중앙 정렬 */
justify-content: center; /* 수평 중앙 정렬 */
border: 1.5px solid #CCCCCC; /* 라인 박스 테두리 */
padding: 10px 20px;
border-radius: 40px;
flex: 0 1 auto; /* 내부 콘텐츠에 따라 크기 조정 */
}
.catbox2:nth-child(3){
background-color: #111111;
border: none;
}
.catbox-text2{
font-family: pre;
font-size: 18px;
font-weight: 500;
color: #999999;
}
.catbox-text2:nth-child(3){
color: #ffffff;
}
.style1{
width: 379px;
height: 553px;
}
.styleproduct-box{
display: flex;
gap: 10px;
margin-top: 92px;
}

/* 스타일부분 상품상세 */
.category{
font-family: pre;
font-size: 15px;
font-weight: 500;
margin-top: 15px;
}
.title{
font-family: pre;
font-size: 18px;
font-weight: 600;
margin-top: 3px;
}
.date{
font-family: musi;
font-size: 16px;
margin-top: 10px;
color: #808080;
}
/*---------------------------메인6----------------------------*/
.Mainscreen6{
display: block;
width: 100%;
height: 1080px;
border: 2px solid #ff0000;
}
/*---------------------------메인7----------------------------*/
.Mainscreen7{
display: block;
width: 100%;
height: 1080px;
border: 2px solid #ff0000;
}
.magazine1{
width: 379px;
height: 553px;
}
.magazine-product-box{
display: flex;
gap: 10px;
margin-top: 92px;
}
.title2{
font-family: pre;
font-size: 18px;
font-weight: 600;
margin-top: 18px;
}
.date2{
font-family: musi;
font-size: 16px;
margin-top: 15px;
color: #808080;
}
120 changes: 120 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,126 @@
<div class="reviews">4.7 (175)</div>
</div>
</div>
</div>
<!--비슷한 연령대-->
<div class="Similarage">
<div class="itembox2">비슷한 연령대 남성이 찾은</div>
<div class="itembox2">포멀/ 어반 캐주얼</div>
<!--상품-->
<div class="product-box">
<div class="image-container">
<img src="./images/3.png">
</div>
<div class="product-info">
<div class="brand">라퍼지스토어</div>
<div class="name">[무료반품] [유튜버 PICK] [넥타이 SET]<br>
솔리드 오버핏 옥스포드 타이셔츠_Taupe Gray</div>
<div class="price2">68,900원</div>
<div class="reviews">4.7 (175)</div>
</div>
</div>
</div><!--대체 뭘 닫는지 모르겠지만 없으면 오류 뜸-->
</div>
<!-------------메인3---------------->
<div class="Mainscreen3">
<div class="banner"><img src="./images/banner.png" class="imgbanner" alt="띠배너"></div>
</div>
<!-------------메인4---------------->
<div class="Mainscreen4"></div>
<!-------------메인5---------------->
<div class="Mainscreen5">
<!-- 스타일-->
<div class="style">
<div class="itembox4">ㅣ스타일</div>
<!-- 스타일 카테고리 -->
<div class="category2">
<div class="catbox2">
<div class="catbox-text2">브랜드 스냅</div>
</div>
<div class="catbox2">
<div class="catbox-text">코디숍</div>
</div>
<div class="catbox2">
<div class="catbox-text">코디맵</div>
</div>
<div class="catbox2">
<div class="catbox-text">브랜드 룩북</div>
</div>
</div>
<div class="styleproduct-box">
<div class="slstyleproduct-info1">
<img src="./images/style1.jpg" class="style1">
<div class="category">캐주얼</div>
<div class="title">오버핏 꾸안꾸 룩</div>
<div class="date">24.04.17 ㅣ 조회 63</div>
</div>
<div class="slstyleproduct-info1">
<img src="./images/style2.jpg" class="style1">
<div class="category">걸리시</div>
<div class="title">봄 니트 스타일링</div>
<div class="date">24.04.19 ㅣ 조회 53</div>
</div>
<div class="slstyleproduct-info1">
<img src="./images/style3.jpg" class="style1">
<div class="category">아메카지</div>
<div class="title">스프링 아메카지 룩</div>
<div class="date">24.04.20 ㅣ 조회 50</div>
</div>
<div class="slstyleproduct-info1">
<img src="./images/style4.jpg" class="style1">
<div class="category">캐주얼</div>
<div class="title">빈티지한 느낌</div>
<div class="date">24.04.23 ㅣ 조회 91</div>
</div>
</div>
</div><!--대체 뭘 닫는지 모르겠지만 없으면 오류 뜸-->
</div>
<!-------------메인6---------------->
<div class="Mainscreen6"></div>
<!-------------메인7---------------->
<div class="Mainscreen7">
<!-- 스타일-->
<div class="style">
<div class="itembox4">ㅣ매거진</div>
<!-- 스타일 카테고리 -->
<div class="category2">
<div class="catbox2">
<div class="catbox-text2">스타일</div>
</div>
<div class="catbox2">
<div class="catbox-text">코디</div>
</div>
<div class="catbox2">
<div class="catbox-text">아이템</div>
</div>
<div class="catbox2">
<div class="catbox-text">리포트</div>
</div>
</div>
<div class="magazine-product-box">
<div class="magazine-eproduct-info1">
<img src="./images/magazine1.jpg" class="magazine1">
<div class="title2">다시 돌아온 '폴로 랄프 로렌'</div>
<div class="date2">옷장 속 넣어둔 폴로 셔츠를 꺼내야 할때</div>
</div>
<div class="slstyleproduct-info1">
<img src="./images/magazine2.jpg" class="magazine1">
<div class="title2">빈티지한 볼캡들을 만나보세요</div>
<div class="date2">사랑하는 연인과 함께, 폴로로 완성한 빈티지 룩</div>
</div>
<div class="slstyleproduct-info1">
<img src="./images/magazine3.jpg" class="magazine1">
<div class="title2">단정함의 끝판왕을 만나봐요</div>
<div class="date2">학생, 직장인 어느 누구나 자신의 단정함을 뽐내봐요</div>
</div>
<div class="slstyleproduct-info1">
<img src="./images/magazine4.jpg" class="magazine1">
<div class="title2">니트에 계절이 돌아왔어요!</div>
<div class="date2">사랑하는 연인과 함께! 커플룩으로 안성맞춤</div>
</div>
</div>
</div><!--대체 뭘 닫는지 모르겠지만 없으면 오류 뜸-->
</div>
</div>
</body>
</html>

0 comments on commit 1d36143

Please sign in to comment.