From d3e157448addb80c0ce411ff8a47426bf86fcfe4 Mon Sep 17 00:00:00 2001 From: Hwang Juhee Date: Thu, 18 Nov 2021 15:51:27 +0900 Subject: [PATCH 1/3] =?UTF-8?q?init:=20:construction:=20juhee=20=EB=B8=8C?= =?UTF-8?q?=EB=9E=9C=EC=B9=98=20=EC=B2=AB=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- juhee/assets/icons/btn_search.png | Bin 0 -> 918 bytes juhee/index.html | 196 ++++++++++++++++-------------- juhee/styles/common.css | 52 ++++++-- juhee/styles/header.css | 122 +++++++++++++++++++ juhee/styles/main.css | 68 +++++++++-- juhee/styles/menu.css | 1 - 6 files changed, 332 insertions(+), 107 deletions(-) create mode 100644 juhee/assets/icons/btn_search.png create mode 100644 juhee/styles/header.css delete mode 100644 juhee/styles/menu.css diff --git a/juhee/assets/icons/btn_search.png b/juhee/assets/icons/btn_search.png new file mode 100644 index 0000000000000000000000000000000000000000..02f04666d55f72e8ba8271af381fc5b310294e8e GIT binary patch literal 918 zcmV;H18Mw;P)q@24q}S`C*{UMB*XQ%yC;55e zz43T_u%e=(OdNAY0xA&O-9o@bEEbz=Z*Tw2;zTxr&d$!5!{P7~JI!zi)I=hYhOx1+ zqBH`IrUHEsyazAscKc5$2N@U`h_lmQz|1g=ZVU#4=>$~0AC!W3RP7K8r5uHwEOc~q ze8ij+c{n;<8Ud&RDvs$B+nkqHDdH#*L9msfmI4(k2nbLo14CM^HY%+_D9$5_ge0%L zyj;0r4v5JFolxla`_=1#{+GHOP%@ItU5I6aaw0ODd z_(&7jAEX?G4%~p+$=bb~fF%$JcvE8(Hk-{yz!U5eK{7fzTA3>WO|c1eQCu*-!-L}D z;_qn$qAiiz(&8;{!fqQL9^Ur9#3CWjMI~o`mSHon;+xiJG-;2Xylku8;M6~-EWe0G zqmQ{f)Aag^b0xNbBC3gL0>^Oe0heizYdt+Z^BD<*jE|2Oc|4v@770{R(G2cqZ2b#I z5vE#+#G4s!N7pjH8(XX|1+(BPB(ER|Wh4+{Fc=DWvKt_1A;AG$CBTXO2d%^}#u^Y3 z1u%XJsIRnd$24a%Uu1b_`moJ4B_83~NB4w0J3hkj#dEic2}w+}u1b{zv$@ zMtrTryk`Cu-Slv2Cm9J=E6HzY04-n+4D#*niaCX}4k8{sx7)2x{sW3Psh|HC(P8Ve s10kYytyXJ6I2`Wgcu(S5pcDK50?MG0<{2WN`2YX_07*qoM6N<$g7fE-00000 literal 0 HcmV?d00001 diff --git a/juhee/index.html b/juhee/index.html index 5754225..9d08722 100644 --- a/juhee/index.html +++ b/juhee/index.html @@ -5,9 +5,10 @@ Olive Young by JH + - +
@@ -21,17 +22,37 @@
- -
-
-
+
+ +
+
+ + + + +
+
Black등급 황주희님,
반갑습니다 올리브영입니다!
+
+
+
    +
  • 이번달 올영 Pick!
    • +
  • 일주일 특가
    • +
  • 진행중인 이벤트
    • +
+
    +
  • 마이페이지
    • +
  • 쿠폰 3장
    • +
  • 포인트 11,000P
    • +
  • 장바구니
    • +
  • 관심 매장 소식
    • +
  • 최근 본 상품
    • +
-
-
- +
-
- -
-
- - - 기초 화장품 - -
-
- - - 더모 코스메틱 - -
-
- - - 메이크업/네일 - -
-
- - - 바디케어 - -
-
- - - 헤어케어 - -
-
- - - 향수/디퓨저 - -
-
- - - 미용소품 - -
-
- - - 남성 - -
-
- - - 건강/위생용품 - -
-
- - - 건강식품 - -
-
- +
+
9월 최대 70% 올영 세일!
+
오늘 단 하루!
추가할인
+
포텐터지는 오늘의 특가 보러가기!
-
- - - - - - +
+
+ +
+
+
+ + + 기초 화장품 +
+
+ + + 더모 코스메틱 +
+
+ + + 메이크업/네일 +
+
+ + + 바디케어 +
+
+ + + 헤어케어 +
+
+ + + 향수/디퓨저 +
+
+ + + 미용소품 +
+
+ + + 남성 +
+
+ + + 건강/위생용품 +
+
+ + + 건강식품 +
+ +
+ + + + + + +
+
@@ -242,7 +260,6 @@

오직 올리브영에서만!
-

@@ -260,7 +277,6 @@

고기능 클린 자연주의 구달

한국의 재질 원물을 신선하게 Fresh Catch! 순하지만 피부의 변화가 느껴지는 고기능 클린 스킨케어 솔루션을 지향합니다.

-
@@ -336,7 +352,7 @@

고객센터

- + diff --git a/juhee/styles/footer.css b/juhee/styles/footer.css new file mode 100644 index 0000000..3fba99e --- /dev/null +++ b/juhee/styles/footer.css @@ -0,0 +1,34 @@ +/* header영역 스타일시트입니다 */ + +.footer { + width: 100%; + height: 483px; + background-color: #eeeeee; +} + +.footer_contents { + width: 1020px; + margin: 80px auto auto auto; +} + +.footer_contents_list { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer_first_column { + color: #333333; + width: 248px; +} + +.footer_second_column > p { + color: #333333; + font-size: 16px; + align-items: center; +} + +.footer_last_column > li { + display: flex; + flex-direction: column; +} diff --git a/juhee/styles/main.css b/juhee/styles/main.css index cf98d20..c544cd2 100644 --- a/juhee/styles/main.css +++ b/juhee/styles/main.css @@ -73,8 +73,10 @@ } .product_title { + width: 100%; display: flex; justify-content: space-between; + align-items: center; } .product_name > h2 { @@ -110,9 +112,7 @@ .product_list { display: flex; justify-content: space-between; -} - -.product_contents { + margin-top: 10px; } .product_info { @@ -144,9 +144,303 @@ justify-content: space-between; } -.second_banner { +.second_banner_bg { + position: relative; width: 100%; height: 600px; - margin-top: 100px; + margin-top: 214px; background-image: url('/juhee/assets/images/main_bg.png'); } + +.second_banner { + position: absolute; + top: -114px; + left: 450px; + width: 1020px; + display: flex; + justify-content: space-between; +} + +.event_list { + position: absolute; + top: 165px; + left: 450px; + width: 970px; + height: 362px; +} + +.event_list > h2 { + font-size: 24px; + text-align: center; +} + +.event_content { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 30px; +} + +.event_content > a { + display: flex; + flex-direction: column; + font-size: 24px; + align-items: center; +} + +.event_content > a > span { + margin-top: 11px; +} + +.slide_pick { + margin: 15px; +} + +.brand_banner_wrap { + width: 100%; + margin-top: 100px; + justify-content: center; +} + +.brand_banner { + display: flex; + justify-content: space-between; + align-items: center; + width: 1122px; + height: 440px; + margin: 0px auto; +} + +.brand_list { + width: 970px; + display: flex; + justify-content: space-between; +} + +.brand_contents { + position: relative; + align-items: center; +} + +.brand_contents > h2 { + position: absolute; + width: 266px; + top: 291px; + left: 35px; + font-size: 24px; + color: white; +} + +.brand_contents > h3 { + position: absolute; + width: 266px; + top: 349px; + left: 35px; + font-size: 15px; + color: white; +} + +.brand_left_btn { + border: 0; + background-color: transparent; + width: 20px; + height: 38px; + background-image: url('/juhee/assets/icons/left_gray.png'); +} + +.brand_right_btn { + border: 0; + background-color: transparent; + width: 20px; + height: 38px; + background-image: url('/juhee/assets/icons/right_gray.png'); +} + +.view_ranking { + width: 1020px; + margin-left: 450px; + margin-top: 100px; +} + +.ranking_title { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.rank_contents { + width: 965px; + margin: 0px auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.rank_product { + display: flex; + justify-content: space-between; +} + +.rank_product_info { + margin-left: 15px; +} + +.rank_product_list { + font-size: 24px; + color: #aaaaaa; + height: 200px; + display: flex; + justify-content: space-between; + flex-direction: column; +} + +.rank_product_list :hover { + color: #333333; + font-weight: bold; + text-shadow: transparent; +} + +.main_bottom { + width: 950px; + margin: 107px auto 0px auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.announcement { + width: 440px; + height: 170px; +} + +.announcement_title { + font-weight: bold; + font-size: 24px; + text-align: center; + display: flex; + justify-content: center; +} + +.announcement > ul { + font-size: 18px; + color: #777777; + height: 126px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-inline-start: 0px; +} + +.event_tag { + padding: 2px 11px; + width: 37px; + height: 10px; + border-radius: 25px; + background-color: #ee7d6c; + color: white; + font-size: 12px; +} + +.gen_tag { + padding: 2px 17px; + width: 37px; + height: 10px; + border-radius: 25px; + background-color: #a6cd48; + color: white; + font-size: 12px; +} + +.cs_center { + width: 440px; + height: 183px; +} + +.cs_center_title { + font-weight: bold; + font-size: 24px; + text-align: center; + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.cs_center > ul { + width: 100%; + padding-inline-start: 0px; +} + +.cs_center_info { + height: 30px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +} + +.call_name { + text-align: center; + font-size: 18px; + color: #777777; +} + +.call_num { + width: 202px; + text-align: right; + letter-spacing: 4px; + font-size: 30px; + font-weight: bold; + color: #a6cd48; +} + +.cs_information { + font-size: 12px; + display: flex; + flex-direction: column; +} + +.cs_center_last { + width: 100%; + display: flex; + justify-content: space-between; +} + +.cs_btn { + border: 0; + background-color: #aaaaaa; + color: white; + width: 85px; + height: 48px; + font-size: 12px; +} + +.main_last { + margin: 30px auto 100px auto; + width: 1020px; + display: flex; + justify-content: space-between; +} + +.bottom_menu { + width: 489px; + height: 30px; +} + +.bottom_menu_list { + color: #333333; + font-size: 12px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.menu_list { + margin: 0 0 0 10px; + font-size: 12px; +} + +.cj_family { + color: #777777; +}