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 과제가 아니니까 가볍게 구현하시길 추천해요)
+
+1. 스크롤 내릴때 나타나는 요쇼들 fade in 효과
+
+
-손쉬운 이미지 추출 방법
+
+2. 스크롤에 따라 사라지고 나타나는 헤더
+
+
+
+
+3. swiper.js 라이브러리를 이용한 제품 슬라이더
+
+
+
+
+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
+
+
+
+
+
+
+
+
+
+
스킨 케어
+
피부는 환경과 라이프스타일, 식단에 따라 항상 변화하고 있습니다. 이솝 레인지는 이런 점을 고려해 다양한 선호와 니즈에 맞춰 피부 건강을 우수한 상태로 가꿀 수 있도록 도와줍니다.
+
+
+
+
+
+
스킨 케어 제품 보기
+
+
+
+
클렌저
+
+
+
+
+
+
+
+
+
각질 제거
+
+
+
+
+
+
+
+
+
트리트먼트 & 마스크
+
+
+
+
+
+
+
+
+
토너
+
+
+
+
+
+
+
+
+
하이드레이터
+
+
+
+
+
+
+
+
+
립 & 아이
+
+
+
+
+
+
+
+
+
쉐이빙
+
+
+
+
+
+
+
+
+
선 케어
+
+
+
+
+
+
+
+
+
키트
+
+
+
+
+
+
+
+
+
번들
+
+
+
+
+
+
+
+
+
스킨케어 플러스
+
+
+
+
+
+
+
+
+
파슬리 씨드
+
+
+
+
+
+
+
+
+
+
+
+
신제품 및 사랑받는 제품
+
+
+
+
+
+

+
+
+
프리시피터스
+
대부분의 피부 타입, 특히 도시 거주자에게 적합
+
+
+
+
+

+
+
+
이그절티드 아이 세럼
+
비타민이 풍부한 가벼운 세럼
+
+
+
+
+

+
+
+
파슬리 씨드 안티 옥시던트 인텐스 세럼
+
피부를 탄탄하게 가꿔주는 하이드레이팅 세럼
+
+
+
+
+

+
+
+
퓨리파잉 엑스폴리언트 페이스트
+
딥 클렌징을 선사하는 각질 관리 크림
+
+
+
+
+

+
+
+
비 트리플 씨 페이셜 밸런싱 젤
+
비타민 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