diff --git a/README.md b/README.md index cc6a3b23..bdb4cc5e 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,77 @@ -[참고 내용] +# Aesop 웹사이트 클론코딩 + +Aesop 대한민국의 스킨케어 페이지를 HTML, css, JS를 이용해 클론한 프로젝트 + +원본 링크 : https://www.aesop.com/kr/c/skin/ +클론 데모 : https://aesop-clone-yfe.netlify.app/ +*** +
+
-👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +## 📅 프로젝트 기간 +2023.07.24 ~ 2023.07.28 +
-과제 수행 및 제출 방법 -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +## 프로젝트 소개 +- `header`, `nav`, `section`, `footer` 등 시멘틱 태그 활용 +- `flex`, `grid` 를 이용한 레이아웃 구조 +- `swiper.js`를 이용한 슬라이더 구현 +- `hover` 시 css 애니메이션 동작 +
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +## 🖥 구현 내용 -필수 요구사항 +| 헤더 + 메인 | 제품 카테고리 | +| :--: | :--: | +| | | +| 제품 슬라이더 | 피부 타입 | +| | | +| 블렌딩 추천 | 아티클 | +| | | + | 푸터 | | + | | | -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. -선택 요구사항 + +## 🕹 주요 기능 -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) +![Jul-28-2023 19-42-15](https://github.com/joanShim/clone-easop/assets/35457850/4db62678-1edf-4761-9ce7-8a0508eadc53) +1. 스크롤 내릴때 나타나는 요쇼들 fade in 효과 +
+
-손쉬운 이미지 추출 방법 +![Jul-28-2023 19-42-15](https://github.com/joanShim/clone-easop/assets/35457850/516cd7f3-baa0-46cd-905a-12de43d97c74) +2. 스크롤에 따라 사라지고 나타나는 헤더 +
+
+ +![Jul-28-2023 19-43-14](https://github.com/joanShim/clone-easop/assets/35457850/61becdf4-2ba4-437c-bd07-65fda071102f) +3. swiper.js 라이브러리를 이용한 제품 슬라이더 +
+
+ +![Jul-28-2023 20-05-43](https://github.com/joanShim/clone-easop/assets/35457850/dbc60eac-cf21-43a6-9563-946c1ba93e44) +4. 그리드 디스플레이와 hover시 이미지가 어두워지는 효과 +
+
+ +*** + + + +## JS를 사용한 부분 + +1. 슬라이더 구현 (Swiper.js 라이브러리) +2. 스크롤 이벤트에 따라 사라지고 나타나는 헤더 구현 +3. 최초 스크롤 시 지정 요소들 fade in 되는 효과 구현 + + + +## 보완하고 싶은 부분 +- 반응형 레이아웃 추가 +- `::after` `::before`등을 이용한 장식적으로 사용된 요소들(화살표 등) 치환. 더 간결한 마크업 +- 반복적으로 사용되는 css 요소들 클래스화 -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..78f56817 --- /dev/null +++ b/css/common.css @@ -0,0 +1,82 @@ +:root { + /* color */ + --color-black: #252525; + --color-white: #fffef2; + +} + +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: var( --color-white); + overflow-x: hidden; +} + +.hidden{ + display: none; +} + +.fade{ + opacity: 0; + transition: .4s; +} + +.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 var(--color-white); + color: var(--color-white); +} + +.btn--white:hover { + background: var(--color-white); + color: #333; +} +.btn--blank--dark { + border: 1px solid rgba(51,51,51,.2); + color: #333; +} + +.btn--blank--dark:hover { + background: #333; + color: var(--color-white); +} + +.btn--dark { + background-color:#000; + color: #f6f5e8; +} + diff --git a/css/index.css b/css/index.css new file mode 100644 index 00000000..04176aaf --- /dev/null +++ b/css/index.css @@ -0,0 +1,492 @@ +/* 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: var(--color-white); + font-size: 24px; + font-weight: 600; + z-index: 2; +} + +/* best item */ +.best-item .swiper { + margin: 0 80px 40px; + overflow-x: unset; +} + +.best-item .swiper-wrapper { + 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; + overflow: hidden; +} + +.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 { + height: 2px; + width: 100%; +} + +.swiper-btn-prev, +.swiper-btn-next { + position: absolute; + top: calc(50% - 80px); + width: 80px; + height: 80px; + background: #333; + color: var(--color-white); + 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: -160px; +} +.swiper-btn-next { + right: -160px; +} + +.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 .material-symbols-outlined { + position: absolute; + margin-left: 5px; +} + +.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: var(--color-white); + 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: var(--color-white); + margin-bottom: 30px; +} +.find-skin-type .desc { + margin-bottom: 30px; +} + + +/* blend */ +.blend { + margin-top: 50px; + margin-bottom: 50px; +} + +.blend .title-wrap{ + padding-top: 80px; + grid-column-start: 1; + grid-column-end: 4; +} + +.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 .grid-blend { + margin-top: 60px; + grid-template-columns: repeat(3, 1fr); +} +.blend .grid-item { + /* width: calc(100% / 3); */ + padding: 40px 40px 65px; + text-align: center; + transition: .3s cubic-bezier(.215,.61,.355,1); + position: relative; +} + +.blend .grid-item:hover { + background-color: #f0efe1; +} + +.blend .grid-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; + max-width: 1440px; + margin: 0 auto; +} + +.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; +} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 00000000..2cb343a1 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,188 @@ +/* header */ +header { + position: relative; + position: sticky; + top: -44px; + width: 100%; + z-index: 99; + transition: top 0.2s ease-in-out; +} + +.banner { + background-color: var(--color-black); + padding: 12px 20px 8px; +} + +.open-modal { + display: flex; + color: var(--color-white); + margin: 0 auto; + padding: 0; +} + +.open-modal .content { + display: block; + line-height: 1.5; + padding-right: 10px; + font-weight: lighter; +} + + +.nav-wrap { + display: flex; + justify-content: space-between; + width: 100%; + padding-left: 40px; + padding-right: 40px; + height: 80px; + align-items: center; + background-color: var(--color-white); + 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: 0.75vw; + padding: 4px; + cursor: pointer; +} + +.header-menu .header-menu-item:last-child { + margin-right: 0; +} + +.float-inquiry { + position: fixed; + color: var(--color-white); + background-color: var( --color-black); + border: 1px solid var(--color-white); + border-radius: 50%; + background-color: var( --color-black); + height: 40px; + width: 40px; + right: 40px; + bottom: 90px; + padding: 5px; + z-index: 99; + display: flex; + justify-content: center; + align-items: center; +} + + +/* footer */ + +footer { + color: var(--color-white); + background-color: var( --color-black); + 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 var(--color-white); + 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 var(--color-white); + 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 var(--color-white); + padding: 10px 20px 10px 10px; + cursor: default; +} + +input[type="email"] { + border: 1px solid var(--color-white); + border-right: 0px; + background: transparent; + width: 100%; + height: 37px; + color: var(--color-white); + padding-left: 10px; +} + +input[type="email"]::placeholder { + color: var(--color-white); + padding: 10px 10px 20px 0px; +} + +input[type="email"]:focus { + outline: none; + cursor: pointer; +} +button[type="submit"] { + border: 1px solid var(--color-white); + height: 37px; + width: 37px; + color: var(--color-white); + 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/responsive.css b/css/responsive.css new file mode 100644 index 00000000..4620f9a2 --- /dev/null +++ b/css/responsive.css @@ -0,0 +1,252 @@ +@media screen and (max-width: 1920px) { + .nav_wrap { + font-size: 14px; + } + .main-vis { + background-image: url(https://www.aesop.com/u1nb1km7t5q7/6kOLyJtxJU5KM2xHJe3FGP/39ea9c3c38991617f239eb154969e732/Aesop_Category_Skin_Care_Primary_Full_Bleed_Desktop_XL_5120x1856px.jpg); + background-position: center center; + } + .find-skin-type { + background-image: url(https://www.aesop.com/u1nb1km7t5q7/LS81zP3L48qTAlSReBJC3/b9f1c61e11b035bbaeffab6e6be4dbf0/Aesop_Healthy_Skin_Care_and_Support_2022_Web_Homepage_Primary_Consultant_Full_Bleed_Desktop_XL_5120x1856px.jpg)center center / cover no-repeat; + } + +} + +@media screen and (max-width: 1100px) { + .nav_wrap { + font-size: calc(10px + 0.3vw); + } + .header-menu .header-menu-item { + margin-right: .45vw; + } +} + +@media screen and (max-width: 1025px) { + .sub-nav { + padding: 12px 0px; + width: 100%; + overflow: hidden; + overflow-x:scroll; + } + /* .sub-nav ul{ + width: 100%; + overflow: hidden; + } */ + + .sub-nav::-webkit-scrollbar { + display: none; + } + .sub-nav .selected { + flex-shrink: 0; + margin-left: 34px; + + } + .sub-nav .sub-nav-item { + padding: 0 10px; + flex-shrink: 0; + } + + .grid-category { + grid-template-columns: repeat(4, 1fr); + } + + .grid-category .grid-item-title{ + font-size: 20px; + } + + .grid-skin-type .grid-item { + margin-bottom: 0; + } + + .blend .grid-blend { + grid-template-columns: 1fr 1fr; + } + .blend .title-wrap { + grid-column-start: auto; + grid-column-end: auto; + order: 1; + padding: 80px 34px 50px 40px; + } + .blend .title-wrap > * { + padding-left: 0; + padding-right: 0; + } + .grid .desc { + padding: 0; + width: auto; + } + .blend .grid-item:nth-child(1) { + order: 1; + } + .blend .grid-item:nth-child(2) { + order: 3; + } + .blend .grid-item:nth-child(3) { + order: 4; + } + + .inquiry { + display: block; + } + .inquiry .left-block, + .inquiry .right-block { + width: 100%; + padding-left: 16%; + padding-right: 16%; + } + .inquiry .section-title { + padding-left: 0; + } + + .articles .flex { + flex-direction: column; + width: calc(66.66667% - 45.33333px); + margin: 0 auto; + } + + footer .grid{ + grid-template-columns: 1fr 1fr 1fr; + } + footer .grid .grid-item:first-child { + grid-column-start: 1; + grid-column-end: 4; + } + footer .grid .grid-item:nth-child(7) { + display: none; + } + +} + +@media screen and (max-width: 625px) { + body { + overflow-x: hidden; + } + .nav-wrap .nav-primary{ + display: none; + } + .nav-wrap { + padding: 20px; + /* background: transparent; */ + } + + .nav-wrap .logo.hidden { + display: block; + width: 70px; + } + + .main-vis { + position: relative; + background-image: url(https://images.ctfassets.net/u1nb1km7t5q7/1ImHDZcfCHVObmERhgmltw/d0bba361449ac0d21a82111be2863145/Aesop_Category_Skin_Care_Primary_Full_Bleed_Desktop_2880x1044px.jpg); + background-size: cover; + padding-top: 40px; + margin-top: -120px; + height: 600px; + background-position: 60%; + } + + + .main-vis .logo { + display: none; + } + .main-vis .txt-wrap { + /* position: absolute; + top: 100%; */ + display: none; + } + + .section-title { + font-size: 25px; + padding: 0 20px; + margin-bottom: 30px; + } + + .all-category { + padding-top: 50px; + } + + .grid-category { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(4,clamp(160px,12.5vh,200px)); + } + .grid-category .grid-item-title{ + font-size: 16px; + padding: 10px; + } + .best-item .swiper { + margin: 0 20px 20px; + } + .swiper-btn-prev, + .swiper-btn-next { + display: none; + } + + .skin-type { + padding: 80px 20px; + } + + .skin-type > * { + padding: 0; + } + + .grid-skin-type { + grid-template-columns: repeat(2, 1fr); + margin-bottom: 0; + } + .grid-skin-type .grid-item .link > * { + font-size: 14px; + } + + .find-skin-type { + height: 80vh; + background-image: 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); + background-size: cover; + background-position: center; + } + .find-skin-type .title-wrap{ + position: static; + margin: 0 20px; + } + .find-skin-type .section-sub-title { + font-size: 24px; + } + .find-skin-type .desc { + font-size: 16px; + } + .find-skin-type .btn { + width: 100%; + } + + .blend .grid-blend { + grid-template-columns: 1fr; + order: unset; + } + .blend .grid-blend .title-wrap { + order: 1; + } + .blend .grid-blend .grid-item:nth-child(1) { + order: 2; + } + .blend .grid-blend .grid-item:nth-child(2) { + order: 3; + } + .blend .grid-blend .grid-item:last-child { + order: 4; + } + + .articles .flex{ + width: fit-content; + } + + footer .grid{ + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto 1fr; + gap:20px; + font-size: 13px; + padding: 35px 20px; + } + footer .grid .grid-item:first-child { + grid-column-start: 1; + grid-column-end: 3; + } + +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..2990eb5c --- /dev/null +++ b/css/style.css @@ -0,0 +1,8 @@ +@import "reset.css"; +@import "common.css"; +@import "layout.css"; + +/* all subpage css */ +@import "index.css"; + +@import "responsive.css" \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..028866f1 --- /dev/null +++ b/index.html @@ -0,0 +1,506 @@ + + + + + + 스킨 케어 | Aesop 대한민국 + + + + + + + + + +
+ + +
+ mode_comment +
+
+ +
+
+ +
+

스킨 케어

+

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

+
+
+ +
+
+

스킨 케어 제품 보기

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

신제품 및 사랑받는 제품

+
+
+
+
+
+ +
+
+

프리시피터스

+

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

+
+
+
+
+ +
+
+

이그절티드 아이 세럼

+

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

+
+
+
+
+ +
+
+

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

+

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

+
+
+
+
+ +
+
+

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

+

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

+
+
+
+
+ +
+
+

비 트리플 씨 페이셜 밸런싱 젤

+

비타민 B를 함유해 풍부한 영양을 선사하는 젤

+
+
+
+
+ +
+
+

파슬리 씨드 안티 옥시던트 페이셜 토너

+

중성, 건성, 민감성 피부

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

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

+
+ +
+
+
+

피부 상태에 대한 이해

+

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

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

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

+

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

+
+
+
+ +
+

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

+

₩150,000 / 2 제품

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

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

+

₩69,000 / 2 제품

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

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

+

₩147,000 / 2 제품

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

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

+
+
+

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

+ +
+
+
+
+
+
+ +
+ Lessons from the lab + +
+
+
+ +
+ Lessons from the lab + +
+
+
+ +
+ Lessons from the lab + +
+
+
+
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..e735795a --- /dev/null +++ b/js/main.js @@ -0,0 +1,58 @@ +new Swiper('.best-item .swiper', { + slidesPerView: 2, + navigation: { + nextEl: '.swiper-btn-next', + prevEl: '.swiper-btn-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, + breakpoints: { + 625: { + slidesPerView: 2, + }, + 1100: { + slidesPerView: 3, + }, + 1920: { + slidesPerView: 4, + }, + }, +}); + +// 스크롤 헤더 +let lastScrollTop = 0; + +window.addEventListener('scroll', function (event) { + let scrollTop = window.scrollY || document.documentElement.scrollTop; + const header = document.querySelector('header'); + + if (scrollTop > lastScrollTop) { + header.style.top = '-124px'; + } else { + header.style.top = '-44px'; + } + + lastScrollTop = scrollTop; + + // 스크롤 위치가 0일 때 헤더를 화면 상단에 고정 + if (scrollTop === 0) { + header.style.top = '0'; + } +}); + +// 스크롤 시 요소 fade in +const observer = new IntersectionObserver((e) => { + e.forEach((v, i) => { + if (v.isIntersecting) { + v.target.style.opacity = "1"; + } + }) +}) + +const fadeEls = document.querySelectorAll(".fade") + +fadeEls.forEach((fadeEl) => { + observer.observe(fadeEl); +}) \ No newline at end of file