diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..917beeb Binary files /dev/null and b/.DS_Store differ diff --git a/images/3.png b/images/3.png new file mode 100644 index 0000000..791e6f4 Binary files /dev/null and b/images/3.png differ diff --git a/images/banner.png b/images/banner.png new file mode 100644 index 0000000..0582bbe Binary files /dev/null and b/images/banner.png differ diff --git a/images/magazine1.jpg b/images/magazine1.jpg new file mode 100644 index 0000000..6e00f34 Binary files /dev/null and b/images/magazine1.jpg differ diff --git a/images/magazine2.jpg b/images/magazine2.jpg new file mode 100644 index 0000000..482c035 Binary files /dev/null and b/images/magazine2.jpg differ diff --git a/images/style1.jpg b/images/style1.jpg new file mode 100644 index 0000000..00461a3 Binary files /dev/null and b/images/style1.jpg differ diff --git a/images/style2.jpg b/images/style2.jpg new file mode 100644 index 0000000..b6bfadb Binary files /dev/null and b/images/style2.jpg differ diff --git a/images/style3.jpg b/images/style3.jpg new file mode 100644 index 0000000..295c2c9 Binary files /dev/null and b/images/style3.jpg differ diff --git a/images/style4.jpg b/images/style4.jpg new file mode 100644 index 0000000..61d0391 Binary files /dev/null and b/images/style4.jpg differ diff --git a/index.css b/index.css index 5fa447c..6d2daa9 100644 --- a/index.css +++ b/index.css @@ -201,7 +201,7 @@ body{ .Mainscreen2{ display: block; width: 100%; - height: 1435px; + height: 1713px; /* border: 2px solid #ff0000; */ } @@ -213,7 +213,8 @@ body{ gap: 10px; /* position: static; */ padding-left: 187px; - top: 140px; + /* top: 140px; */ + margin-top: 140px; } .itembox1{ font-family: musi; @@ -253,6 +254,8 @@ body{ .product-box{ + position: static; + margin-left: 0px; position: absolute; margin-top: 110px; } @@ -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; } \ No newline at end of file diff --git a/index.html b/index.html index 3784bd1..62fb158 100644 --- a/index.html +++ b/index.html @@ -94,6 +94,126 @@
4.7 (175)
+ + +
+
비슷한 연령대 남성이 찾은
+
포멀/ 어반 캐주얼
+ +
+
+ +
+
+
라퍼지스토어
+
[무료반품] [유튜버 PICK] [넥타이 SET]
+ 솔리드 오버핏 옥스포드 타이셔츠_Taupe Gray
+
68,900원
+
4.7 (175)
+
+
+
+ + +
+ +
+ +
+ +
+ +
+
ㅣ스타일
+ +
+
+
브랜드 스냅
+
+
+
코디숍
+
+
+
코디맵
+
+
+
브랜드 룩북
+
+
+
+
+ +
캐주얼
+
오버핏 꾸안꾸 룩
+
24.04.17 ㅣ 조회 63
+
+
+ +
걸리시
+
봄 니트 스타일링
+
24.04.19 ㅣ 조회 53
+
+
+ +
아메카지
+
스프링 아메카지 룩
+
24.04.20 ㅣ 조회 50
+
+
+ +
캐주얼
+
빈티지한 느낌
+
24.04.23 ㅣ 조회 91
+
+
+
+
+ +
+ +
+ +
+
ㅣ매거진
+ +
+
+
스타일
+
+
+
코디
+
+
+
아이템
+
+
+
리포트
+
+
+
+
+ +
다시 돌아온 '폴로 랄프 로렌'
+
옷장 속 넣어둔 폴로 셔츠를 꺼내야 할때
+
+
+ +
빈티지한 볼캡들을 만나보세요
+
사랑하는 연인과 함께, 폴로로 완성한 빈티지 룩
+
+
+ +
단정함의 끝판왕을 만나봐요
+
학생, 직장인 어느 누구나 자신의 단정함을 뽐내봐요
+
+
+ +
니트에 계절이 돌아왔어요!
+
사랑하는 연인과 함께! 커플룩으로 안성맞춤
+
+
+
+
\ No newline at end of file