From 1bed355139af42cec8726dbbd89aa2ab65668da1 Mon Sep 17 00:00:00 2001 From: joanShim Date: Fri, 28 Jul 2023 14:13:27 +0900 Subject: [PATCH 01/12] Fix: header position:sticky --- css/common.css | 66 +++++ css/index.css | 680 +++++++++++++++++++++++++++++++++++++++++++++++++ css/reset.css | 63 +++++ css/style.css | 6 + index.html | 486 +++++++++++++++++++++++++++++++++++ js/main.js | 46 ++++ 6 files changed, 1347 insertions(+) create mode 100644 css/common.css create mode 100644 css/index.css create mode 100644 css/reset.css create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..5ca06340 --- /dev/null +++ b/css/common.css @@ -0,0 +1,66 @@ +body { + font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", sans-serif; + color: #333; + font-size: 14px; + font-weight: 400; + line-height: 1.6; + background-color: #fffef2;; + overflow-x: hidden; +} + +.material-symbols-outlined { + font-variation-settings: 'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24 +} + +a { + cursor: pointer; +} + +.grid { + display: grid; +} + +.grid--3 { + grid-template-columns: repeat(3, 1fr); +} + +.flex { + display: flex; +} + +.btn { + text-align: left; + min-width: 300px; + font-weight: 700; + padding: 19px 23px; + color: inherit; + transition: .3s cubic-bezier(.215,.61,.355,1); + display: flex; + justify-content: space-between; +} + + +.btn--white { + border: 1px solid #fffef2; + color: #fffef2; +} + +.btn--white:hover { + background: #fffef2; + color: #333; +} +.btn--blank--dark { + border: 1px solid rgba(51,51,51,.2); + color: #333; +} + +.btn--blank--dark:hover { + background: #333; + color: #fffef2; +} + +.btn--dark { + background-color:#000; + color: #f6f5e8; +} + diff --git a/css/index.css b/css/index.css new file mode 100644 index 00000000..2b8c4639 --- /dev/null +++ b/css/index.css @@ -0,0 +1,680 @@ +header { + position: relative; + position: sticky; + top: 0; + width: 100%; + top: -44px; + z-index: 99; + transition: top 0.2s ease-in-out; +} + +.nav-up { + top: -80px; +} + +.banner { + background-color: #252525; + padding: 12px 20px 8px; +} + +.open-modal { + display: flex; + color: #fffef2; + margin: 0 auto; + padding: 0; +} + +.open-modal .content { + display: block; + line-height: 1.5; + padding-right: 10px; +} + + +.nav-wrap { + + display: flex; + justify-content: space-between; + width: 100%; + padding-left: 40px; + padding-right: 40px; + height: 80px; + align-items: center; + background-color: #fffef2; + font-size: calc(10px + 0.3vw); + border-bottom: 1px solid rgba(51, 51, 51, 0.2); +} + +.header-menu { + display: flex; +} + +.header-menu .header-menu-item { + margin-right: 20px; + padding: 4px; + cursor: pointer; +} + +.header-menu .header-menu-item:last-child { + margin-right: 0; +} + +.float-inquiry { + position: fixed; + color: #fffef2; + background-color: #252525; + border: 1px solid #fffef2; + border-radius: 50%; + background-color: #252525; + height: 40px; + width: 40px; + right: 40px; + bottom: 90px; + padding: 5px; + z-index: 99; + display: flex; + justify-content: center; + align-items: center; +} + + +/* main-vis */ +.main-vis { + background-image: url(https://images.ctfassets.net/u1nb1km7t5q7/1ImHDZcfCHVObmERhgmltw/d0bba361449ac0d21a82111be2863145/Aesop_Category_Skin_Care_Primary_Full_Bleed_Desktop_2880x1044px.jpg); + background-size: cover; + background-position: center bottom; + width: 100%; + height: 100%; + padding-top: 110px; + padding-bottom: 180px; + display: flex; +} + +.main-vis .logo svg{ + margin-left: 40px; + width: 120px; + height: 40px; +} + +.main-vis .txt-wrap { + margin-left: 5%; + width: calc(33.33333% - 80px); + +} + +.main-vis .txt-wrap .main-vis-title { + font-size: 30px; + margin-bottom: 15px; +} + +.main-vis .txt-wrap .desc { + font-size: 16px; + line-height: 1.7; + margin-bottom: 30px; +} + +/* sub-nav */ +.sub-nav { + background-color: #ebeade ; + padding: 45px 40px; + color: #666; + display: flex; +} + +.selected { + border-bottom: 1px solid; + position: relative; +} + +.selected::after { + content: "|"; + height: 100%; + position: absolute; + width: 1px; + padding: 0 15px; +} + +.sub-nav ul { + display: flex; + padding-left: 20px; +} + +.sub-nav .sub-nav-item { + padding: 0 10px; +} + +.sub-nav .sub-nav-item::after { + content: ""; + display: block; + transform: scaleX(0); + transform-origin: left; + transition: transform .25s ease-in; + border-bottom: 1px solid; + margin-top: 0; +} + + +.sub-nav .sub-nav-item:hover::after { + transform: scaleX(1); +} + +.section-title { + padding: 50px 80px 60px 80px; + color: #333; + font-size: 30px; +} + +.grid-category { + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(2, 300px); + margin-bottom: 100px; +} + +.grid-category .grid-item { + border: 0.5px solid #fff; + overflow: hidden; + position: relative; + cursor: pointer; +} +.grid-category .item-thumb { + height: 100%; + +} + +.grid-category .item-thumb img{ + object-fit: cover; + width: 100%; + height: 100%; +} + +.grid-category .item-thumb::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.001) 0%, + rgba(0, 0, 0, 0.2) 50% + ); + opacity: 0; + transition: .4s cubic-bezier(.215,.61,.355,1); +} + + +.grid-category .grid-item:hover .item-thumb::before { + opacity: 1; +} + +.grid-category .grid-item-title{ + position: absolute; + padding: 20px; + color: #fffef2; + font-size: 24px; + font-weight: 600; + z-index: 2; +} + +/* best item */ +.best-item .swiper { + margin-bottom: 80px; + width: 100%; +} + +.best-item .swiper-wrapper { + padding-left: 48px; + padding-right: 48px; + position: relative; +} + +.best-item .swiper-slide { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 422px; + height: 100%; + align-items: center; + text-align: center; + cursor: pointer; +} + +.swiper-slide .img-wrap { + width: 100%; + height: 400px; +} + +.swiper-slide .img-wrap img { + object-fit: contain; + width: 100%; + height: 100%; +} + +.swiper-slide .txt-wrap { + margin-bottom: 50px; +} + +.swiper-slide .product-name{ + font-weight: 700; + margin: 10px 0; +} + +.swiper-button-disabled { + display: none; +} + +.swiper-scrollbar.swiper-scrollbar-horizontal { + margin-left:80px; + height: 2px; + width: 100%; +} + +.swiper-btn-prev, +.swiper-btn-next { + position: absolute; + top: calc(50% - 80px); + width: 80px; + height: 80px; + background: #333; + color: #fffef2; + z-index: 1; + cursor: pointer; + outline: none; + display: flex; + justify-content: center; + align-items: center; + transition: all .5s cubic-bezier(.215,.61,.355,1); +} + +.swiper-btn-prev { + left: -80px; +} +.swiper-btn-next { + right: -80px; +} + +.swiper:hover .swiper-btn-prev{ + transform: translateX(80px); +} + +.swiper:hover .swiper-btn-next { + transform: translateX(-80px); +} + +.swiper-button-disabled { + display: none; +} + + +.skin-type { + background-color: #ebeade; + padding-top: 100px; +} + +.skin-type .section-title { + padding-bottom: 20px; +} +.grid-skin-type { + grid-template-columns: repeat(3, 1fr); + padding: 0 80px; + column-gap: 40px; + margin-bottom: 150px; +} + +.grid-skin-type .grid-item { + margin: 40px 0; + border-top: 1px solid; +} + +.grid-skin-type .item-name { +font-size: 18px; +padding-top: 20px; +margin-bottom: 15px; +font-weight: 700; +width: fit-content; +} + +.grid-skin-type .item-desc { + font-size: 16px; + color: #666; +} + +.grid-skin-type .item-name::after { + content: ""; + display: block; + transform: scaleX(0); + transform-origin: left; + transition: transform .25s ease-in; + border-bottom: 1px solid; + margin-top: 0; +} + + +.grid-skin-type .grid-item:hover .item-name:after { + transform: scaleX(1); +} + + + +.find-skin-type { + color: #fffef2; + background: url(https://www.aesop.com/u1nb1km7t5q7/3YaJbvUsAnHr9Wnb6GTU7m/9ce27fe81388b8726f41d3ce91bb2c77/Aesop_Healthy_Skin_Care_and_Support_2022_Web_Homepage_Primary_Consultant_Full_Bleed_Desktop_L_2880x1044px.jpg) center center / cover no-repeat; + width: 100%; + height: 0; + padding-top: calc((29 / 80) * 100%); + position: relative; +} + +.find-skin-type .title-wrap { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 8%; +} + + + + +.find-skin-type .section-sub-title { + font-size: 30px; + color: #fffef2; + margin-bottom: 30px; +} +.find-skin-type .desc { + margin-bottom: 30px; +} + + +/* blend */ +.blend { + margin-top: 50px; + margin-bottom: 50px; +} + +.blend .title-wrap{ + padding-top: 80px; +} + +.blend .title-add { + font-size: 14px; + padding-left: 80px; + font-weight: 700; +} + +.blend .section-title{ + padding-top: 20px; + padding-bottom: 30px; +} + +.blend .desc { + padding-left: 80px; + width: 40%; +} +.blend .flex-blend { + margin-top: 60px; +} +.blend .flex-item { + width: calc(100% / 3); + padding: 40px 40px 65px; + text-align: center; + transition: .3s cubic-bezier(.215,.61,.355,1); + position: relative; +} + +.blend .flex-item:hover { + background-color: #f0efe1; +} + +.blend .flex-item:hover .btn-more { + opacity: 1; +} + +.blend .img-wrap { + width: 100%; + padding: 20px; +} + +.blend .img-wrap img { + max-width: 100%; +} + +.blend .product-name { + line-height: 1.7; + margin-bottom: 7px; +} +.blend .product-price { + height: 60px; +} + +.blend .info-wrap { + text-align: left; + border-top: 2px solid #4a4a4a; +} + +.blend .info-wrap { + margin-top: 14px; +} +.blend .info-row { + display: flex; + padding: 20px 0 20px; + border-bottom: 1px solid #d5d4c9; +} +.blend .info-title { + padding-right: 15px; + font-weight: 700; + width: 90px; +} +.blend .info-desc { + width: 100%; +} + +.blend .btn-more { + width: 100%; + text-align: center; + position: absolute; + bottom: 0; + left: 0; + opacity: 0; + transition: .3s cubic-bezier(.215,.61,.355,1); + justify-content: center; +} + + +.inquiry { + padding: 150px 0; + background-color: #ebe2d5; + display: flex; +} +.inquiry .section-title { + padding-top: 0; +} +.inquiry .left-block { + width: 40%; +} + +.inquiry .right-block { + width: 60%; + padding-left: 8px; +} + +.inquiry .right-block .desc { + font-size: 16px; +} + +.inquiry .right-block .btn{ + margin-top: 30px; + margin-bottom: 20px; +} + + +/* articles */ + +.articles { + padding: 150px 20px 150px; +} + +.articles .flex-item { + padding: 0 20px; +} + +.flex-article .img-wrap { + width: 100%; +} + +.flex-article .img-wrap img { + width: 100%; +} + + +.articles .flex-item img{ + transition: 1s cubic-bezier(.215,.61,.355,1); +} + +.articles .flex-item:hover img{ + filter: grayscale(100%); +} + +.articles .lab { + display: block; + margin: 20px 0 14px; + padding-bottom: 14px; + border-bottom: 1px solid rgba(51,51,51,.2); + font-weight: 700; +} + +.articles .lab::after { + content:"•"; + padding: 0 10px; +} + +.articles .article-title { + width: fit-content; + color: #4a4a4a; + font-size: 30px; + padding-bottom: 1.5px; + border-bottom: 1px solid transparent; +} +.articles .flex-item:hover .article-title { + border-bottom: 1px solid #4a4a4a; + transition: 1s cubic-bezier(.215,.61,.355,1); +} + +.articles .reading-time { + display: block; + color: #666; + font-size: 16px; + margin: 15px 0; + font-weight: 700; +} + +footer { + color: #fffef2; + background-color: #252525; + font-weight: lighter; +} + +footer .grid { + padding: 50px 40px; + grid-template-columns: 2fr 1fr 1fr 1fr; + grid-gap: 40px; +} + +.footer-title { + position: relative; + font-size: 15px; +} +.footer-divider { + border-bottom: 1px solid #fffef2; + margin: 16px 0; +} + + +.footer-list { + margin-bottom: 15px; + display: flex; + cursor: pointer; + position: relative; + align-items: center; +} +.footer-list.block { + display: block; + cursor: default; +} + +.footer-list .material-symbols-outlined { + font-size: 16px; + margin-left: 5px; +} + +input[type="checkbox"] { + display: none; +} + +input[type="checkbox"] + label { + display: inline-block; + width: 15px; + height: 15px; + border:1px solid #fffef2; + position: relative; + margin-right: 10px; + transform: translateY(4px); +} + +input[type="checkbox"]:checked + label::after { + content:'✓'; + text-align: center; + position: absolute; + left: 0; + top:-3px; +} + +.check-desc { + border: 1px solid #fffef2; + padding: 10px 20px 10px 10px; + cursor: default; +} + +input[type="email"] { + border: 1px solid #fffef2; + border-right: 0px; + background: transparent; + width: 100%; + height: 37px; + color: #fffef2; + padding-left: 10px; +} + +input[type="email"]::placeholder { + color: #fffef2; + padding: 10px 10px 20px 0px; +} + +input[type="email"]:focus { + outline: none; + cursor: pointer; +} +button[type="submit"] { + border: 1px solid #fffef2; + height: 37px; + width: 37px; + color: #fffef2; + display: flex; + align-items: center; + cursor: pointer; +} + + .choice { + text-decoration: underline; + cursor: pointer; +} + +.footer-bottom { + height: 72px; + padding-left: 40px; + font-size: 16px; + font-weight: normal; + display: flex; + align-items: center; + border-top: 3px solid #d6d5cb; +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..5492c5ff --- /dev/null +++ b/css/reset.css @@ -0,0 +1,63 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +a{color: inherit; + text-decoration: none; +} +img{vertical-align: top;} + +input,button,select{ + box-sizing:border-box; + font: inherit; + border:none; +} + +button { + background: none; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..58c17bcf --- /dev/null +++ b/css/style.css @@ -0,0 +1,6 @@ +@import "reset.css"; +@import "common.css"; +@import "layout.css"; + +/* all subpage css */ +@import "index.css"; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..59d4dbed --- /dev/null +++ b/index.html @@ -0,0 +1,486 @@ + + + + + + 스킨 케어 | Aesop 대한민국 + + + + + + + + + +
+ +
+ +
+
    +
  • 로그인
    • +
  • 위시리스트
    • +
  • 카트
    • +
+
+
+
+ mode_comment +
+
+ +
+
+ +
+

스킨 케어

+

피부는 환경과 라이프스타일, 식단에 따라 항상 변화하고 있습니다. 이솝 레인지는 이런 점을 고려해 다양한 선호와 니즈에 맞춰 피부 건강을 우수한 상태로 가꿀 수 있도록 도와줍니다.

+
+
+ +
+
+

스킨 케어 제품 보기

+
+
+
+
클렌저
+ + + + + decorative + +
+
+
각질 제거
+ + + + + decorative + +
+
+
트리트먼트 & 마스크
+ + + + + decorative + +
+
+
토너
+ + + + + decorative + +
+
+
하이드레이터
+ + + + + decorative + +
+
+
립 & 아이
+ + + + + decorative + +
+
+
쉐이빙
+ + + + + decorative + +
+
+
선 케어
+ + + + + decorative + +
+
+
키트
+ + + + + decorative + +
+
+
번들
+ + + + + decorative + +
+
+
스킨케어 플러스
+ + + + + decorative + +
+
+
파슬리 씨드
+ + + + + decorative + +
+
+
+
+
+

신제품 및 사랑받는 제품

+
+
+
+
+
+ +
+
+

프리시피터스

+

대부분의 피부 타입, 특히 도시 거주자에게 적합

+
+
+
+
+ +
+
+

이그절티드 아이 세럼

+

비타민이 풍부한 가벼운 세럼

+
+
+
+
+ +
+
+

파슬리 씨드 안티 옥시던트 인텐스 세럼

+

피부를 탄탄하게 가꿔주는 하이드레이팅 세럼

+
+
+
+
+ +
+
+

퓨리파잉 엑스폴리언트 페이스트

+

딥 클렌징을 선사하는 각질 관리 크림

+
+
+
+
+ arrow_back_ios +
+
+ arrow_forward_ios +
+
+
+
+
+
+

대부분의 피부 타입과 고민을 돕는 제품들

+
+
+
+ +
중성 피부
+ +
유분이 많지도 건조하지도 않는 ‘균형’ 잡힌 피부
+ +
+
+ +
건성 피부
+
피지 부족으로 인해 연약하고 각질이 있으며 칙칙해 보이는 피부
+ +
+
+ +
지성 피부
+
과도한 피지 생성으로 모공이 넓어지고 자주 번들거리는 피부
+ +
+
+ +
복합성 피부
+
과도한 피지와 건조한 피부 특성을 모두 나타내며 변화와 반응에 민감한 피부
+ +
+
+ +
노화 피부
+
피지 생성과 보습 유지의 저하로 자연스럽게 약화된 피부
+ +
+
+ +
민감성 피부
+
섬세하고 상태 악화와 반응성에 취약한 상태로, 다양한 피부 타입에 나타날 수 있는 피부
+ +
+
+
+
+

피부 상태에 대한 이해

+

피부 특성을 파악하고 가장 적합한 제품을 추천해 드립니다.

+ +
+
+
+
+
+ 컨설턴트의 추천 +

추가적인 효능을 위한 블렌딩

+

이솝의 사랑받는 제품 사용법 중, 두 가지 이상의 제품을 블렌딩해 사용하는 방법을 통해 영양을 보다 풍부하게 공급하거나 만족스러운 텍스처를 즐길 수 있습니다. 또한 다른 성분들이 동시에 작용하여 피부에 복합적인 효과를 선사합니다.

+
+
+
+
+ +
+

안티 옥시던트 하이드레이션 블렌드

+

₩150,000 / 2 제품

+
+
+
번들 소개
+
활성산소의 해로운 영향으로부터 피부를 탄탄하게 강화시키는 항산화 성분이 풍부한 블렌드
+
+
+
구성품
+
파슬리 씨드 안티 옥시던트 페이셜 트리트먼트, 파슬리 씨드 안티 옥시던트 하이드레이터
+
+
+ 더 알아보기 +
+
+
+ +
+

건성 피부용 메이크업 리무버 듀오

+

₩69,000 / 2 제품

+
+
+
번들 소개
+
메이크업을 깨끗하게 지워주는, 부드럽지만 효과적 블렌드
+
+
+
구성품
+
리무버, 퓨리파잉 페이셜 크림 클렌저
+
+
+ 더 알아보기 +
+
+
+ +
+

지성 피부와 복합성 피부용 인핸스드 하이드레이션

+

₩147,000 / 2 제품

+
+
+
번들 소개
+
모공이 잘 막히는 피부에 부담을 주지 않으면서 균형을 잡아주는 수분을 공급하는 블렌드
+
+
+
구성품
+
+ 페뷸러스 페이스 오일, 라이트웨이트 페이셜 하이드레이팅 세럼
+
+
+ 더 알아보기 +
+
+
+
+
+

추가적인 도움이 필요한 경우

+
+
+

제품 선택에 보다 자세한 조언이 필요하시면 문의하기를 통해 도움을 받으세요.

+ +
+
+
+
+
+
+ +
+ Lessons from the lab +
+

스킨 케어 루틴을 관리하는 방법

 + 7분 독서 +
+
+
+
+ +
+ Lessons from the lab +
+

피부의 해부학과 생리학

 + 5분 독서 +
+
+
+
+ +
+ Lessons from the lab +
+

피부의 수분 공급을 위한 가이드

 + 7분 독서 +
+
+
+
+
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..ee41e06b --- /dev/null +++ b/js/main.js @@ -0,0 +1,46 @@ +new Swiper('.best-item .swiper', { + slidesPerView: 3, + navigation: { + nextEl: '.swiper-btn-next', + prevEl: '.swiper-btn-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + + +let delta = 0; +const header = document.querySelector('.nav-wrap'); +const navbarHeight = header.outerHeight(); + +$(window).scroll(function(event) { + let didScroll = true; +}) + +setInterval(function() { + if(didScroll) { + hasScrolled(); + didScroll = false; + } +},250); + +function hasScrolled() { + let st = $(this).scrollTop(); + if(Math.abs(lastScrollTop - st) <= delta) { + return; + } +} + +if((st > lastScrollTop) && (st > navbarHeight)) { + // scroll down + header.removeClass('nav-down').addClass('nav-up'); +} else { + //scroll up + if (st + $(window).height() < $(document).height()) { + header.removeClass('nav-up').addClass('nav-down'); + } +} + +lastScrollTop = st; \ No newline at end of file From 847220623f44e61e7889dfb9f4d8ac05349e6930 Mon Sep 17 00:00:00 2001 From: joanShim Date: Fri, 28 Jul 2023 20:46:00 +0900 Subject: [PATCH 02/12] Docs: add readme.md --- css/common.css | 5 +++++ css/index.css | 31 ++++++++++---------------- index.html | 57 ++++++++++++++++++++++++++++++----------------- js/main.js | 60 +++++++++++++++++++++++++------------------------- 4 files changed, 84 insertions(+), 69 deletions(-) diff --git a/css/common.css b/css/common.css index 5ca06340..56580310 100644 --- a/css/common.css +++ b/css/common.css @@ -8,6 +8,11 @@ body { overflow-x: hidden; } +.fade{ + opacity: 0; + transition: .4s; +} + .material-symbols-outlined { font-variation-settings: 'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24 } diff --git a/css/index.css b/css/index.css index 2b8c4639..5931b987 100644 --- a/css/index.css +++ b/css/index.css @@ -1,17 +1,12 @@ header { position: relative; position: sticky; - top: 0; - width: 100%; top: -44px; + width: 100%; z-index: 99; transition: top 0.2s ease-in-out; } -.nav-up { - top: -80px; -} - .banner { background-color: #252525; padding: 12px 20px 8px; @@ -32,7 +27,6 @@ header { .nav-wrap { - display: flex; justify-content: space-between; width: 100%; @@ -219,13 +213,11 @@ header { /* best item */ .best-item .swiper { - margin-bottom: 80px; - width: 100%; + margin: 0 80px 40px; + overflow-x: unset; } .best-item .swiper-wrapper { - padding-left: 48px; - padding-right: 48px; position: relative; } @@ -265,7 +257,6 @@ header { } .swiper-scrollbar.swiper-scrollbar-horizontal { - margin-left:80px; height: 2px; width: 100%; } @@ -288,10 +279,10 @@ header { } .swiper-btn-prev { - left: -80px; + left: -160px; } .swiper-btn-next { - right: -80px; + right: -160px; } .swiper:hover .swiper-btn-prev{ @@ -340,6 +331,11 @@ width: fit-content; color: #666; } +.grid-skin-type .material-symbols-outlined { + position: absolute; + margin-left: 5px; +} + .grid-skin-type .item-name::after { content: ""; display: block; @@ -355,8 +351,6 @@ width: fit-content; transform: scaleX(1); } - - .find-skin-type { color: #fffef2; background: url(https://www.aesop.com/u1nb1km7t5q7/3YaJbvUsAnHr9Wnb6GTU7m/9ce27fe81388b8726f41d3ce91bb2c77/Aesop_Healthy_Skin_Care_and_Support_2022_Web_Homepage_Primary_Consultant_Full_Bleed_Desktop_L_2880x1044px.jpg) center center / cover no-repeat; @@ -373,9 +367,6 @@ width: fit-content; left: 8%; } - - - .find-skin-type .section-sub-title { font-size: 30px; color: #fffef2; @@ -568,6 +559,8 @@ width: fit-content; font-weight: 700; } +/* footer */ + footer { color: #fffef2; background-color: #252525; diff --git a/index.html b/index.html index 59d4dbed..ffb7bfc8 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@
-
+
@@ -59,7 +59,7 @@

스킨 케어

피부는 환경과 라이프스타일, 식단에 따라 항상 변화하고 있습니다. 이솝 레인지는 이런 점을 고려해 다양한 선호와 니즈에 맞춰 피부 건강을 우수한 상태로 가꿀 수 있도록 도와줍니다.

-