diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..4b6df53f --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/.DS_STORE \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..e26eea9e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "printWidth": 200 +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index cc6a3b23..6dbc81db 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,49 @@ -[참고 내용] +# ⚡️패스트캠퍼스 클론코딩 프로젝트⚡️ -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +## ✨ 프로젝트 소개 -과제 수행 및 제출 방법 +메종 프란시스 커정 공식 홈페이지를 클론코딩한 프로젝트입니다. -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +- 원본 홈페이지 : https://www.franciskurkdjian.com/eu-en +- 구현한 홈페이지 : https://lilviolie.github.io/kurkdjian/ +## ✨ 필수 요구사항 -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +- 과제에 대한 설명을 포함한 `README.md` 파일 제공 +- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소 명시 +- 과정에서 사용한 프로젝트 폴더/파일 모두 제출 +- 실제 서비스로 배포하고 접근 가능한 배포 링크 추가 -필수 요구사항 +## ✨ 기술 스택 -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +
+ + + +
-선택 요구사항 +## ✨ 주요 개발 기능 -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) +- 각각의 상품 이미지에 트랜지션 적용 + +- Intersection Observer API를 이용해 스크롤 애니메이션 적용 + +- swiper.js를 이용해 슬라이드 구현 + -손쉬운 이미지 추출 방법 +## ✨ 구현하지 못한 기능 -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. +- 상단 메뉴에 마우스 호버 시 드롭다운 메뉴가 나타나는 기능 +- 장바구니 기능 -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! +## ✨ 배운점 + +- 정말 많은 요소에 트랜지션을 적용하면서 트랜지션에 좀 더 익숙해 질 수 있었습니다. 다음에는 애니메이션 속성을 이용해 더 다양한 디자인을 구현해보고 싶습니다. +- 자바스크립트에서 제공하는 `IntersectionObserver` API를 사용해 보았습니다. 요소가 뷰포트에 포함되는지의 여부에 따라 더욱 풍부한 트랜지션을 적용할 수 있었습니다. +- 바닐라 자바스크립트 대신 swiper 라이브러리를 이용하여 더욱 빠르고 간단하게 슬라이드를 구현하는 방법을 알게 되었습니다. + +## ✨ 아쉬운점 + +- 한정된 시간에 비해 구현할 요소가 굉장히 많았던 웹사이트를 선택해서 기간 내에 구현을 마치기 힘들었습니다. 웹사이트를 구성하는 것이 생각보다 훨씬 신경써야 할 게 많았기 때문에 주제 선정에 좀 더 신경써야겠다는 생각이 들었습니다. +- 헤더 메뉴에 마우스 호버 시 드롭다운 메뉴가 나타나는 기능을 구현하지 못했습니다. 아직 제 수준으로 구현하기에는 어려운 기능이라고 느꼈기에 트랜지션, z-index, 자바스크립트 등에 대해 훨씬 더 많은 공부가 필요하다는 것을 느꼈습니다. +- 반복되는 코드가 굉장히 많았는데 시간이 부족하다보니 깔끔하게 코드를 작성하는 데 어려움을 겪었습니다. 적절한 시간 분배와 클린코드의 작성에 대한 중요성을 많이 느꼈고, 다음에는 css 전처리기를 사용해서 더 효율적으로 코드를 작성해보고 싶습니다. diff --git a/assets/fonts/BauerBodoni-italic.woff b/assets/fonts/BauerBodoni-italic.woff new file mode 100644 index 00000000..e9d276a0 Binary files /dev/null and b/assets/fonts/BauerBodoni-italic.woff differ diff --git a/assets/fonts/BauerBodoni-italic.woff2 b/assets/fonts/BauerBodoni-italic.woff2 new file mode 100644 index 00000000..025abc5a Binary files /dev/null and b/assets/fonts/BauerBodoni-italic.woff2 differ diff --git a/assets/fonts/BauerBodoni.woff b/assets/fonts/BauerBodoni.woff new file mode 100644 index 00000000..7aa2ec10 Binary files /dev/null and b/assets/fonts/BauerBodoni.woff differ diff --git a/assets/fonts/BauerBodoni.woff2 b/assets/fonts/BauerBodoni.woff2 new file mode 100644 index 00000000..6d6e49fb Binary files /dev/null and b/assets/fonts/BauerBodoni.woff2 differ diff --git a/assets/fonts/PostGrotesk-Book.woff b/assets/fonts/PostGrotesk-Book.woff new file mode 100644 index 00000000..70308a4e Binary files /dev/null and b/assets/fonts/PostGrotesk-Book.woff differ diff --git a/assets/fonts/PostGrotesk-Book.woff2 b/assets/fonts/PostGrotesk-Book.woff2 new file mode 100644 index 00000000..4bc08793 Binary files /dev/null and b/assets/fonts/PostGrotesk-Book.woff2 differ diff --git a/assets/fonts/PostGrotesk-Light.woff b/assets/fonts/PostGrotesk-Light.woff new file mode 100644 index 00000000..a540af6a Binary files /dev/null and b/assets/fonts/PostGrotesk-Light.woff differ diff --git a/assets/fonts/PostGrotesk-Light.woff2 b/assets/fonts/PostGrotesk-Light.woff2 new file mode 100644 index 00000000..3a0d12c3 Binary files /dev/null and b/assets/fonts/PostGrotesk-Light.woff2 differ diff --git a/assets/fonts/PostGrotesk-Medium.woff b/assets/fonts/PostGrotesk-Medium.woff new file mode 100644 index 00000000..4293e7dc Binary files /dev/null and b/assets/fonts/PostGrotesk-Medium.woff differ diff --git a/assets/fonts/PostGrotesk-Medium.woff2 b/assets/fonts/PostGrotesk-Medium.woff2 new file mode 100644 index 00000000..dfd1e8c9 Binary files /dev/null and b/assets/fonts/PostGrotesk-Medium.woff2 differ diff --git a/assets/images/724-travel.webp b/assets/images/724-travel.webp new file mode 100644 index 00000000..04d70064 Binary files /dev/null and b/assets/images/724-travel.webp differ diff --git a/assets/images/724.webp b/assets/images/724.webp new file mode 100644 index 00000000..dcadc68f Binary files /dev/null and b/assets/images/724.webp differ diff --git a/assets/images/a-la-rose1.webp b/assets/images/a-la-rose1.webp new file mode 100644 index 00000000..44601a45 Binary files /dev/null and b/assets/images/a-la-rose1.webp differ diff --git a/assets/images/a-la-rose2.webp b/assets/images/a-la-rose2.webp new file mode 100644 index 00000000..3ca70039 Binary files /dev/null and b/assets/images/a-la-rose2.webp differ diff --git a/assets/images/adviser.svg b/assets/images/adviser.svg new file mode 100644 index 00000000..099b25f0 --- /dev/null +++ b/assets/images/adviser.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/amyris-femme1.webp b/assets/images/amyris-femme1.webp new file mode 100644 index 00000000..a44e0ae1 Binary files /dev/null and b/assets/images/amyris-femme1.webp differ diff --git a/assets/images/amyris-femme2.webp b/assets/images/amyris-femme2.webp new file mode 100644 index 00000000..a4e8bcdb Binary files /dev/null and b/assets/images/amyris-femme2.webp differ diff --git a/assets/images/amyris-homme1.webp b/assets/images/amyris-homme1.webp new file mode 100644 index 00000000..d0366b56 Binary files /dev/null and b/assets/images/amyris-homme1.webp differ diff --git a/assets/images/amyris-homme2.webp b/assets/images/amyris-homme2.webp new file mode 100644 index 00000000..eab5def7 Binary files /dev/null and b/assets/images/amyris-homme2.webp differ diff --git a/assets/images/aqua-celestia1.webp b/assets/images/aqua-celestia1.webp new file mode 100644 index 00000000..82943398 Binary files /dev/null and b/assets/images/aqua-celestia1.webp differ diff --git a/assets/images/aqua-celestia2.webp b/assets/images/aqua-celestia2.webp new file mode 100644 index 00000000..eed72c3a Binary files /dev/null and b/assets/images/aqua-celestia2.webp differ diff --git a/assets/images/aqua-media-cologne-forte.webp b/assets/images/aqua-media-cologne-forte.webp new file mode 100644 index 00000000..63cb19de Binary files /dev/null and b/assets/images/aqua-media-cologne-forte.webp differ diff --git a/assets/images/aqua-media-cologne-forte1.webp b/assets/images/aqua-media-cologne-forte1.webp new file mode 100644 index 00000000..6167fd32 Binary files /dev/null and b/assets/images/aqua-media-cologne-forte1.webp differ diff --git a/assets/images/aqua-media-cologne-forte2.webp b/assets/images/aqua-media-cologne-forte2.webp new file mode 100644 index 00000000..1596f7c7 Binary files /dev/null and b/assets/images/aqua-media-cologne-forte2.webp differ diff --git a/assets/images/aqua-universalis1.webp b/assets/images/aqua-universalis1.webp new file mode 100644 index 00000000..17c0201a Binary files /dev/null and b/assets/images/aqua-universalis1.webp differ diff --git a/assets/images/aqua-universalis2.webp b/assets/images/aqua-universalis2.webp new file mode 100644 index 00000000..ec5cd929 Binary files /dev/null and b/assets/images/aqua-universalis2.webp differ diff --git a/assets/images/aqua-vitae1.webp b/assets/images/aqua-vitae1.webp new file mode 100644 index 00000000..9fedac1f Binary files /dev/null and b/assets/images/aqua-vitae1.webp differ diff --git a/assets/images/aqua-vitae2.webp b/assets/images/aqua-vitae2.webp new file mode 100644 index 00000000..661b0fb9 Binary files /dev/null and b/assets/images/aqua-vitae2.webp differ diff --git a/assets/images/baccarat-rouge-travel.webp b/assets/images/baccarat-rouge-travel.webp new file mode 100644 index 00000000..0f633195 Binary files /dev/null and b/assets/images/baccarat-rouge-travel.webp differ diff --git a/assets/images/baccarat-rouge1.webp b/assets/images/baccarat-rouge1.webp new file mode 100644 index 00000000..e249af35 Binary files /dev/null and b/assets/images/baccarat-rouge1.webp differ diff --git a/assets/images/baccarat-rouge2.webp b/assets/images/baccarat-rouge2.webp new file mode 100644 index 00000000..5c6e08b8 Binary files /dev/null and b/assets/images/baccarat-rouge2.webp differ diff --git a/assets/images/background-modal.jpeg b/assets/images/background-modal.jpeg new file mode 100644 index 00000000..b228b709 Binary files /dev/null and b/assets/images/background-modal.jpeg differ diff --git a/assets/images/bath-and-body.webp b/assets/images/bath-and-body.webp new file mode 100644 index 00000000..8ee80be8 Binary files /dev/null and b/assets/images/bath-and-body.webp differ diff --git a/assets/images/delivery.svg b/assets/images/delivery.svg new file mode 100644 index 00000000..3c1b1b2b --- /dev/null +++ b/assets/images/delivery.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + diff --git a/assets/images/flag-france.svg b/assets/images/flag-france.svg new file mode 100644 index 00000000..067ccf1b --- /dev/null +++ b/assets/images/flag-france.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/fragrance-finder.webp b/assets/images/fragrance-finder.webp new file mode 100644 index 00000000..56fb3802 Binary files /dev/null and b/assets/images/fragrance-finder.webp differ diff --git a/assets/images/gentle-fluidity-silver1.webp b/assets/images/gentle-fluidity-silver1.webp new file mode 100644 index 00000000..d843f076 Binary files /dev/null and b/assets/images/gentle-fluidity-silver1.webp differ diff --git a/assets/images/gentle-fluidity-silver2.webp b/assets/images/gentle-fluidity-silver2.webp new file mode 100644 index 00000000..a41af933 Binary files /dev/null and b/assets/images/gentle-fluidity-silver2.webp differ diff --git a/assets/images/gentle-fluidity1.webp b/assets/images/gentle-fluidity1.webp new file mode 100644 index 00000000..a5852347 Binary files /dev/null and b/assets/images/gentle-fluidity1.webp differ diff --git a/assets/images/gentle-fluidity2.webp b/assets/images/gentle-fluidity2.webp new file mode 100644 index 00000000..f4526911 Binary files /dev/null and b/assets/images/gentle-fluidity2.webp differ diff --git a/assets/images/gift-box.svg b/assets/images/gift-box.svg new file mode 100644 index 00000000..1e61dbfb --- /dev/null +++ b/assets/images/gift-box.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + diff --git a/assets/images/globe-trotter-gold1.webp b/assets/images/globe-trotter-gold1.webp new file mode 100644 index 00000000..00a177d9 Binary files /dev/null and b/assets/images/globe-trotter-gold1.webp differ diff --git a/assets/images/globe-trotter-gold2.webp b/assets/images/globe-trotter-gold2.webp new file mode 100644 index 00000000..c311247c Binary files /dev/null and b/assets/images/globe-trotter-gold2.webp differ diff --git a/assets/images/globe-trotter-zinc1.webp b/assets/images/globe-trotter-zinc1.webp new file mode 100644 index 00000000..a06a0d57 Binary files /dev/null and b/assets/images/globe-trotter-zinc1.webp differ diff --git a/assets/images/globe-trotter-zinc2.webp b/assets/images/globe-trotter-zinc2.webp new file mode 100644 index 00000000..0581dbc5 Binary files /dev/null and b/assets/images/globe-trotter-zinc2.webp differ diff --git a/assets/images/grand-soir1.webp b/assets/images/grand-soir1.webp new file mode 100644 index 00000000..9f7c17cb Binary files /dev/null and b/assets/images/grand-soir1.webp differ diff --git a/assets/images/grand-soir2.webp b/assets/images/grand-soir2.webp new file mode 100644 index 00000000..0d30bc8a Binary files /dev/null and b/assets/images/grand-soir2.webp differ diff --git a/assets/images/icon-account.svg b/assets/images/icon-account.svg new file mode 100644 index 00000000..9dd9aec1 --- /dev/null +++ b/assets/images/icon-account.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/icon-cart.svg b/assets/images/icon-cart.svg new file mode 100644 index 00000000..d70628ee --- /dev/null +++ b/assets/images/icon-cart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/icon-close.png b/assets/images/icon-close.png new file mode 100644 index 00000000..636110cc Binary files /dev/null and b/assets/images/icon-close.png differ diff --git a/assets/images/icon-left.png b/assets/images/icon-left.png new file mode 100644 index 00000000..3ef12070 Binary files /dev/null and b/assets/images/icon-left.png differ diff --git a/assets/images/icon-location.svg b/assets/images/icon-location.svg new file mode 100644 index 00000000..7a052dc9 --- /dev/null +++ b/assets/images/icon-location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/icon-logo.svg b/assets/images/icon-logo.svg new file mode 100644 index 00000000..33a53c6e --- /dev/null +++ b/assets/images/icon-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/icon-right.png b/assets/images/icon-right.png new file mode 100644 index 00000000..a9588396 Binary files /dev/null and b/assets/images/icon-right.png differ diff --git a/assets/images/icon-search.svg b/assets/images/icon-search.svg new file mode 100644 index 00000000..597f4786 --- /dev/null +++ b/assets/images/icon-search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/icon-submit.svg b/assets/images/icon-submit.svg new file mode 100644 index 00000000..8b793577 --- /dev/null +++ b/assets/images/icon-submit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/icon-to-top.svg b/assets/images/icon-to-top.svg new file mode 100644 index 00000000..1456c8e7 --- /dev/null +++ b/assets/images/icon-to-top.svg @@ -0,0 +1 @@ +07-arrow \ No newline at end of file diff --git a/assets/images/lhomme1.webp b/assets/images/lhomme1.webp new file mode 100644 index 00000000..f15318f2 Binary files /dev/null and b/assets/images/lhomme1.webp differ diff --git a/assets/images/lhomme2.webp b/assets/images/lhomme2.webp new file mode 100644 index 00000000..f662ee5e Binary files /dev/null and b/assets/images/lhomme2.webp differ diff --git a/assets/images/mens-fragrances.webp b/assets/images/mens-fragrances.webp new file mode 100644 index 00000000..5f9f9faf Binary files /dev/null and b/assets/images/mens-fragrances.webp differ diff --git a/assets/images/number-7241.webp b/assets/images/number-7241.webp new file mode 100644 index 00000000..1d372d0e Binary files /dev/null and b/assets/images/number-7241.webp differ diff --git a/assets/images/number-7242.webp b/assets/images/number-7242.webp new file mode 100644 index 00000000..b9f28dc1 Binary files /dev/null and b/assets/images/number-7242.webp differ diff --git a/assets/images/payment.svg b/assets/images/payment.svg new file mode 100644 index 00000000..d67f6706 --- /dev/null +++ b/assets/images/payment.svg @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/petit-matin1.webp b/assets/images/petit-matin1.webp new file mode 100644 index 00000000..8db98020 Binary files /dev/null and b/assets/images/petit-matin1.webp differ diff --git a/assets/images/petit-matin2.webp b/assets/images/petit-matin2.webp new file mode 100644 index 00000000..da2eb637 Binary files /dev/null and b/assets/images/petit-matin2.webp differ diff --git a/assets/images/rouge-extrait1.webp b/assets/images/rouge-extrait1.webp new file mode 100644 index 00000000..001be309 Binary files /dev/null and b/assets/images/rouge-extrait1.webp differ diff --git a/assets/images/rouge-extrait2.webp b/assets/images/rouge-extrait2.webp new file mode 100644 index 00000000..5866cdcf Binary files /dev/null and b/assets/images/rouge-extrait2.webp differ diff --git a/assets/images/sample-set.webp b/assets/images/sample-set.webp new file mode 100644 index 00000000..6fbf2d41 Binary files /dev/null and b/assets/images/sample-set.webp differ diff --git a/assets/images/samples.svg b/assets/images/samples.svg new file mode 100644 index 00000000..09951ba0 --- /dev/null +++ b/assets/images/samples.svg @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/scented-candles.webp b/assets/images/scented-candles.webp new file mode 100644 index 00000000..1f176fec Binary files /dev/null and b/assets/images/scented-candles.webp differ diff --git a/assets/images/token-of-appreciation.jpeg b/assets/images/token-of-appreciation.jpeg new file mode 100644 index 00000000..6d872cf4 Binary files /dev/null and b/assets/images/token-of-appreciation.jpeg differ diff --git a/assets/images/unisex-fragrances.webp b/assets/images/unisex-fragrances.webp new file mode 100644 index 00000000..19b2cb76 Binary files /dev/null and b/assets/images/unisex-fragrances.webp differ diff --git a/assets/images/womens-fragrances.webp b/assets/images/womens-fragrances.webp new file mode 100644 index 00000000..e4a09e56 Binary files /dev/null and b/assets/images/womens-fragrances.webp differ diff --git a/assets/videos/main.mp4 b/assets/videos/main.mp4 new file mode 100644 index 00000000..dd9cd8a4 Binary files /dev/null and b/assets/videos/main.mp4 differ diff --git a/css/components/content.css b/css/components/content.css new file mode 100644 index 00000000..3cb2a3f4 --- /dev/null +++ b/css/components/content.css @@ -0,0 +1,194 @@ +.content { + width: 100%; + height: 700px; +} +.content .inner { + justify-content: space-between; +} +.content-tile { + width: 669px; + height: 666px; +} +.content-tile .image { + width: 666px; + height: 464px; + background-size: cover; + margin-bottom: 26px; +} +.content-tile .title { + position: relative; + font-size: 1.875rem; + color: #646467; +} +.content-tile .title::after { + content: ''; + position: absolute; + top: 100%; + left: 0; + width: 0; + border-bottom: 1.2px solid #646467; + transition: width 0.3s; +} +.content-tile .title:hover::after { + width: 100%; +} +.content-tile .desc { + font-size: 1rem; + color: #4a4a4f; + line-height: 1.5rem; + letter-spacing: 0.2px; + margin-top: 22px; + margin-bottom: 22px; +} +.content-tile .link { + position: relative; + font-size: 0.75rem; + letter-spacing: 1.2px; + color: #646467; +} +.content-tile .link::after { + content: ''; + position: absolute; + top: calc(100% + 3px); + left: 0; + width: 0; + border-bottom: 1px solid #646467; + transition: width 0.3s; +} +.content-tile .link:hover::after { + width: 100%; +} + +.fragrance-finder__image { + background-image: url(../../assets/images/fragrance-finder.webp); +} +.appreciation__image { + background-image: url(../../assets/images/token-of-appreciation.jpeg); +} +.number-724__image { + background-image: url(../../assets/images/724.webp); +} +.aqua-media__image { + background-image: url(../../assets/images/token-of-appreciation.jpeg); +} +.scented-candles__image { + background-image: url(../../assets/images/scented-candles.webp); +} +.bath-and-body__image { + background-image: url(../../assets/images/bath-and-body.webp); +} + +.text { + width: 100%; + height: 298px; + padding: 110px 0 20px 0; +} +.text .inner { + justify-content: space-between; +} +.text .title { + width: 408px; + height: 100%; + font-size: 55px; + color: #646467; +} +.text .body { + width: 845px; + height: 100%; +} +.text .body .desc { + font-size: 28px; + color: #646467; + letter-spacing: 0.3px; + line-height: 2.5rem; + margin-bottom: 30px; +} +.text .body .link { + position: absolute; + font-size: 11.5px; + letter-spacing: 1px; + color: #646467; +} +.text .body .link::after { + content: ''; + position: absolute; + top: calc(100% + 3px); + left: 0; + width: 0; + border-bottom: 1px solid #646467; + transition: width 0.3s; +} +.text .body .link:hover::after { + width: 100%; +} + +.last-content { + width: 100%; + height: 522px; +} +.last-content .inner { + justify-content: space-between; +} +.last-content-tile { + width: 435px; + height: 490px; +} +.last-content-tile .image { + width: 435px; + height: 285px; + background-size: cover; + margin-bottom: 26px; +} +.last-content-tile .title { + position: relative; + font-size: 1.875rem; + color: #646467; +} +.last-content-tile .title::after { + content: ''; + position: absolute; + top: 100%; + left: 0; + width: 0; + border-bottom: 1.2px solid #646467; + transition: width 0.3s; +} +.last-content-tile .title:hover::after { + width: 100%; +} +.last-content-tile .desc { + font-size: 1rem; + color: #4a4a4f; + line-height: 1.5rem; + letter-spacing: 0.2px; + margin-top: 22px; + margin-bottom: 22px; +} +.last-content-tile .link { + position: relative; + font-size: 0.75rem; + letter-spacing: 1.2px; + color: #646467; +} +.last-content-tile .link::after { + content: ''; + position: absolute; + top: calc(100% + 3px); + left: 0; + width: 0; + border-bottom: 1px solid #646467; + transition: width 0.3s; +} +.last-content-tile .link:hover::after { + width: 100%; +} + +.womens-fragrances__image { + background-image: url(../../assets/images/womens-fragrances.webp); +} +.mens-fragrances__image { + background-image: url(../../assets/images/mens-fragrances.webp); +} +.unisex-fragrances__image { + background-image: url(../../assets/images/unisex-fragrances.webp); +} diff --git a/css/components/fonts.css b/css/components/fonts.css new file mode 100644 index 00000000..fa947822 --- /dev/null +++ b/css/components/fonts.css @@ -0,0 +1,43 @@ +@font-face { + font-family: 'BauerBodoni'; + src: url(../../assets/fonts/BauerBodoni.woff) format('woff'), + url(../../assets/fonts/BauerBodoni.woff2) format('woff2'); +} +@font-face { + font-family: 'BauerBodoni-Italic'; + src: url(../../assets/fonts/BauerBodoni-italic.woff) format('woff'), + url(../../assets/fonts/BauerBodoni-italic.woff2) format('woff2'); +} +@font-face { + font-family: 'PostGrotesk'; + font-weight: 400; + src: url(../../assets/fonts/PostGrotesk-Light.woff) format('woff'), + url(../../assets/fonts/PostGrotesk-Light.woff2) format('woff2'); +} +@font-face { + font-family: 'PostGrotesk'; + font-weight: 500; + src: url(../../assets/fonts/PostGrotesk-Book.woff) format('woff'), + url(../../assets/fonts/PostGrotesk-Book.woff2) format('woff2'); +} +@font-face { + font-family: 'PostGrotesk-Bold'; + src: url(../../assets/fonts/PostGrotesk-Medium.woff) format('woff'), + url(../../assets/fonts/PostGrotesk-Medium.woff2) format('woff2'); +} + +.BauerBodoni { + font-family: 'BauerBodoni', sans-serif; +} + +.BauerBodoni-italic { + font-family: 'BauerBodoni-Italic', sans-serif; +} + +.PostGrotesk { + font-family: 'PostGrotesk', sans-serif; +} + +.PostGrotesk--bold { + font-family: 'PostGrotesk-Bold', sans-serif; +} diff --git a/css/components/footer.css b/css/components/footer.css new file mode 100644 index 00000000..e1e2c474 --- /dev/null +++ b/css/components/footer.css @@ -0,0 +1,75 @@ +.footer { + width: 100%; + height: 393px; +} +.footer .inner { + display: flex; + flex-direction: column; +} +.footer-main { + width: 100%; + height: 279px; + border-top: 0.3px solid #6e6e6e; + display: flex; + justify-content: space-evenly; + padding-top: 50px; +} +.footer-main .menu-contents { + width: 272px; + height: 210px; +} +.footer-main .menu-contents .menu-name { + font-size: 20px; + color: #646467; + margin-bottom: 25px; +} +.footer-main .menu-contents .menu-list { + width: 100%; + height: 30px; +} +.footer-main .menu-contents .menu-list .link { + position: relative; + font-size: 12px; + color: #646467; + letter-spacing: 1px; +} +.footer-main .menu-contents .menu-list .link::after { + content: ''; + position: absolute; + top: calc(100% + 2px); + left: 0; + width: 0; + border-bottom: 1px solid #646467; + transition: width 0.3s; +} +.footer-main .menu-contents .menu-list .link:hover::after { + width: 100%; +} + +.footer-bottom { + width: 100%; + height: 114px; + border-top: 0.3px solid #6e6e6e; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +.footer-bottom .section1, +.footer-bottom .section2, +.footer-bottom .section3 { + display: flex; + align-items: center; +} +.footer-bottom .section1 { + font-size: 12px; + letter-spacing: 0.2px; + color: #4a4a4f; +} +.footer-bottom .section2, +.footer-bottom .section3 { + justify-content: center; +} +.footer-bottom .section2 .logo { + width: 50px; + height: 50px; + cursor: pointer; +} diff --git a/css/components/header.css b/css/components/header.css new file mode 100644 index 00000000..05c8aaef --- /dev/null +++ b/css/components/header.css @@ -0,0 +1,194 @@ +.header { + position: fixed; + top: 0; + left: 0; + background-color: #fff; + width: 100%; + height: 107px; + border-bottom: 1px solid #dfdfdf; + z-index: 1000; +} +.inner { + width: 1360px; + height: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; +} +.header .menu-container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.header .menu-container > a { + position: absolute; + width: 90px; + height: 100%; + top: 0; + left: 0; +} +.header .menu-container > a .logo { + position: absolute; + width: 50px; + top: 29px; + left: 0; +} +.header .menu-container .menu { + position: absolute; + width: 1020px; + height: 100%; + left: 90px; + display: flex; + justify-content: space-between; + align-items: center; +} +.header .menu-container .menu li .menu-name { + position: relative; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 1px; + color: #646467; +} +.header .menu-container .menu li .menu-name::after { + content: ''; + position: absolute; + top: calc(100% + 4px); + left: 0; + width: 0; + border-bottom: 1px solid #646467; + transition: width 0.5s; +} +.header .menu-container .menu li:hover .menu-name::after { + width: 100%; +} +.header .menu-container .icons { + position: absolute; + width: 208px; + height: 100%; + top: 0; + right: 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.header .menu-container .icons li { + display: flex; + justify-content: center; +} +.header .menu-container .icons li .country, +.footer-bottom .section3 .country { + width: 56px; + height: 12px; + display: flex; +} +.header .menu-container .icons li .country .country-flag, +.footer-bottom .section3 .country .country-flag { + background-image: url(../assets/images/flag-france.svg); + background-size: contain; + width: 16px; + height: 12px; +} +.header .menu-container .icons li .country .country-currency, +.footer-bottom .section3 .country .country-currency { + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 1px; + color: #646467; + text-indent: 4px; +} +.header .menu-container .icons li a { + text-indent: -9999px; + width: 19px; + height: 18px; +} +.header .menu-container .icons li .search { + background-image: url(../assets/images/icon-search.svg); +} +.header .menu-container .icons li .location { + background-image: url(../assets/images/icon-location.svg); +} +.header .menu-container .icons li .account { + background-image: url(../assets/images/icon-account.svg); +} +.header .menu-container .icons li .cart { + background-image: url(../assets/images/icon-cart.svg); + width: 19px; + height: 18px; +} +.header .menu-container .icons li .country:hover, +.header .menu-container .icons li .cart:hover, +.footer-bottom .section3 .country { + cursor: pointer; +} + +.cart-container { + position: fixed; + top: 0; + left: 100vw; + width: 482px; + height: 100vh; + background-color: #fff; + transition: 0.3s; +} +.cart-container.show { + transform: translateX(-482px); +} +.cart-container .close { + position: absolute; + top: 35px; + left: 50px; + width: 17px; + height: 17px; +} +.cart-container .close img { + width: 17px; + height: 17px; + cursor: pointer; +} +.cart-container .title { + position: absolute; + top: 85px; + left: 50px; + width: 384px; + height: 35px; + display: flex; + justify-content: space-between; + align-items: baseline; +} +.cart-container .title .bag { + font-size: 30px; + color: #5c5c5c; +} +.cart-container .title .count { + font-size: 16px; + color: #5c5c5c; +} +.cart-container .message { + position: absolute; + top: 54%; + left: 30%; + width: 200px; + height: 20px; + font-size: 14px; + letter-spacing: 1px; + text-align: center; +} +.cart-container .link { + position: absolute; + bottom: 15px; + left: 66px; + width: 350px; + height: 45px; + font-size: 12px; + font-weight: bold; + color: #5c5c5c; + letter-spacing: 1px; + display: flex; + justify-content: center; + align-items: center; + border: 0.5px solid #c4c4c4; +} diff --git a/css/components/newsletter.css b/css/components/newsletter.css new file mode 100644 index 00000000..cbe5048d --- /dev/null +++ b/css/components/newsletter.css @@ -0,0 +1,82 @@ +.newsletter { + width: 100%; + height: 257px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #5c5c5c; +} +.newsletter .title { + font-size: 30px; + margin-bottom: 15px; +} +.newsletter .subtitle { + font-size: 16px; + letter-spacing: 0.2px; +} +.newsletter .email { + position: relative; + width: 345px; + height: 125px; +} +.newsletter .email .input { + position: absolute; + top: 50px; + left: 0; + width: 100%; + height: 20px; + outline: none; + border: none; + border-bottom: 1px solid #5c5c5c; +} +.newsletter .email .label { + position: absolute; + top: 54px; + left: 0; + font-size: 12px; + letter-spacing: 1px; + color: #5c5c5c; + transition: 0.3s; +} +.newsletter .email .input:focus ~ .label { + transform: translateY(-25px); +} +.newsletter .email button { + position: absolute; + top: 48px; + right: 0; + width: 46px; + height: 22px; + background-image: url(../../assets/images/icon-submit.svg); + background-size: 48px 22px; + object-position: center; + border: none; + background-color: #fff; + transition: 0.2s; +} +.newsletter .email .button:hover { + transform: translateX(5px); +} +.newsletter .email .policy { + position: absolute; + top: 85px; + right: 0; + font-size: 12px; + font-weight: 400; + letter-spacing: 1px; + color: #4a4a4f; +} +.newsletter .email .policy .link { + position: relative; + color: #5c5c5c; + font-weight: 500; +} +.newsletter .email .policy .link::after { + content: ''; + position: absolute; + top: calc(100% + 3px); + left: 0; + width: 100%; + border: 0.5px solid #5c5c5c; +} diff --git a/css/components/online-advantages.css b/css/components/online-advantages.css new file mode 100644 index 00000000..bf8d2ff2 --- /dev/null +++ b/css/components/online-advantages.css @@ -0,0 +1,64 @@ +.online-advantages { + width: 100%; + height: 300px; +} +.online-advantages .inner { + justify-content: space-between; +} +.online-advantages .inner > div { + width: 272px; + height: 272px; +} +.online-advantages .delivery, +.online-advantages .adviser, +.online-advantages .payment, +.online-advantages .gift-box, +.online-advantages .samples { + position: relative; +} +.online-advantages .image { + position: absolute; + top: 0; + left: 48px; + width: 140px; + height: 160px; +} +.online-advantages .desc { + position: absolute; + top: 180px; + font-size: 14px; + color: #4a4a4f; + line-height: 1.25rem; + text-align: center; +} +.online-advantages .delivery .image { + background-image: url(../../assets/images/delivery.svg); +} +.online-advantages .delivery .desc { + left: 65px; +} +.online-advantages .adviser .image { + background-image: url(../../assets/images/adviser.svg); +} +.online-advantages .adviser .desc { + width: 292px; + left: -30px; +} +.online-advantages .payment .image { + background-image: url(../../assets/images/payment.svg); +} +.online-advantages .payment .desc { + left: 70px; +} +.online-advantages .gift-box .image { + background-image: url(../../assets/images/gift-box.svg); +} +.online-advantages .gift-box .desc { + left: 56px; +} +.online-advantages .samples .image { + background-image: url(../../assets/images/samples.svg); +} +.online-advantages .samples .desc { + left: 43px; +} diff --git a/css/components/product.css b/css/components/product.css new file mode 100644 index 00000000..2a230321 --- /dev/null +++ b/css/components/product.css @@ -0,0 +1,187 @@ +.product { + width: 100%; + height: 563px; +} +.product-tile { + position: relative; + width: 364px; + height: 555px; +} +.product-tile .image { + width: 100%; + height: 364px; + background-size: cover; + transition: 0.8s; +} +.product-tile .name { + position: absolute; + top: 349px; + width: 100%; + height: 36px; + font-size: 1.75rem; + letter-spacing: 1px; + line-height: 2.2rem; + text-align: center; + color: #646467; + display: flex; + justify-content: center; +} +.product-tile .name-transit { + transition: 0.8s; + opacity: 1; +} +.product-tile--femme:hover .name-transit, +.product-tile--homme:hover .name-transit, +.product-tile--rouge:hover .name-transit, +.product-tile--724:hover .name-transit { + opacity: 0; +} +.product-tile .info1, +.product-tile .price1 { + position: absolute; + width: 100%; + height: 20px; + font-size: 14px; + color: #646467; + display: flex; + justify-content: center; + transition: 0.8s; + opacity: 1; +} +.product-tile .info1 { + top: 386px; +} +.product-tile .price1 { + top: 406px; +} +.product-tile--724:hover .info1, +.product-tile--724:hover .price1 { + opacity: 0; +} +.product-tile .info2, +.product-tile .price2 { + position: absolute; + width: 100%; + height: 20px; + font-size: 14px; + color: #646467; + display: flex; + justify-content: center; + transition: 0.8s; + opacity: 1; +} +.product-tile .info2 { + top: 422px; +} +.product-tile .price2 { + top: 442px; +} +.product-tile--femme:hover .info2, +.product-tile--femme:hover .price2, +.product-tile--homme:hover .info2, +.product-tile--homme:hover .price2, +.product-tile--rouge:hover .info2, +.product-tile--rouge:hover .price2 { + opacity: 0; +} +.product-tile .fragrance { + position: absolute; + top: 400px; + width: 100%; + height: 40px; + font-size: 1.2rem; + color: #646467; + display: flex; + justify-content: center; + align-items: center; +} +.product-tile .fragrance--1st { + position: relative; + opacity: 0; +} +.product-tile--femme:hover .fragrance--1st, +.product-tile--homme:hover .fragrance--1st, +.product-tile--rouge:hover .fragrance--1st, +.product-tile--724:hover .fragrance--1st { + opacity: 1; + transition: 0.3s; + transition-delay: 0.3s; +} +.product-tile--femme:hover .fragrance--1st::after, +.product-tile--homme:hover .fragrance--1st::after, +.product-tile--rouge:hover .fragrance--1st::after, +.product-tile--724:hover .fragrance--1st::after { + content: ''; + position: absolute; + top: 7px; + right: 6px; + width: 5.5px; + height: 5.5px; + background-color: RGB(136, 106, 51); + border-radius: 50%; + transition: 0.2s; + transition-delay: 0.1s; +} +.product-tile .fragrance--2nd { + position: relative; + opacity: 0; +} +.product-tile--femme:hover .fragrance--2nd, +.product-tile--homme:hover .fragrance--2nd, +.product-tile--rouge:hover .fragrance--2nd, +.product-tile--724:hover .fragrance--2nd { + opacity: 1; + transition: 0.3s; + transition-delay: 0.55s; +} +.product-tile--rouge:hover .fragrance--2nd::after { + content: ''; + position: absolute; + top: 7px; + right: 6px; + width: 5.5px; + height: 5.5px; + background-color: RGB(136, 106, 51); + border-radius: 50%; + transition: 0.2s; + transition-delay: 0.35s; +} +.product-tile .fragrance--3rd { + opacity: 0; +} +.product-tile--rouge:hover .fragrance--3rd { + opacity: 1; + transition: 0.3s; + transition-delay: 0.75s; +} + +.product-tile--gold .image { + background-image: url(../../assets/images/globe-trotter-gold1.webp); +} +.product-tile--gold:hover .image { + background-image: url(../../assets/images/globe-trotter-gold2.webp); +} +.product-tile--zinc .image { + background-image: url(../../assets/images/globe-trotter-zinc1.webp); +} +.product-tile--zinc:hover .image { + background-image: url(../../assets/images/globe-trotter-zinc2.webp); +} +.product-tile--femme .image { + background-image: url(../../assets/images/amyris-femme1.webp); +} +.product-tile--femme:hover .image { + background-image: url(../../assets/images/amyris-femme2.webp); +} +.product-tile--homme .image { + background-image: url(../../assets/images/amyris-homme1.webp); +} +.product-tile--homme:hover .image { + background-image: url(../../assets/images/amyris-homme2.webp); +} +.product-tile--rouge .image { + background-image: url(../../assets/images/baccarat-rouge-travel.webp); +} +.product-tile--724 .image { + background-image: url(../../assets/images/724-travel.webp); +} diff --git a/css/components/scroll.css b/css/components/scroll.css new file mode 100644 index 00000000..9aa19008 --- /dev/null +++ b/css/components/scroll.css @@ -0,0 +1,22 @@ +.to-top { + position: fixed; + bottom: 20px; + right: 0; + width: 59px; + height: 59px; + background-color: transparent; + border: 1px solid #e5e5e5; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + opacity: 1; + transition: 0.3s; +} +.to-top.hide { + opacity: 0; +} +.to-top .to-top__image { + width: 25px; + height: 60px; +} diff --git a/css/components/slider.css b/css/components/slider.css new file mode 100644 index 00000000..bce2030e --- /dev/null +++ b/css/components/slider.css @@ -0,0 +1,368 @@ +.swiper { + position: relative; + width: 1360px; + height: 500px; +} +.swiper .swiper-slide { + height: 500px; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; +} +.swiper-button-prev::after, +.swiper-button-next::after { + content: ''; + display: none; +} +.swiper-button-prev { + position: absolute; + top: 235px; + left: 0; +} +.swiper-button-next { + right: 20px; +} +.swiper-button-prev .swiper-button__image, +.swiper-button-next .swiper-button__image { + width: 16px; + height: 24px; +} +.slide1-tile--rouge .image { + background-image: url(../../assets/images/baccarat-rouge1.webp); +} +.slide1-tile--rouge:hover .image { + background-image: url(../../assets/images/baccarat-rouge2.webp); +} +.slide1-tile--aqua-media .image { + background-image: url(../../assets/images/aqua-media-cologne-forte1.webp); +} +.slide1-tile--aqua-media:hover .image { + background-image: url(../../assets/images/aqua-media-cologne-forte2.webp); +} +.slide1-tile--number-724 .image { + background-image: url(../../assets/images/number-7241.webp); +} +.slide1-tile--number-724:hover .image { + background-image: url(../../assets/images/number-7242.webp); +} +.slide1-tile--rouge-extrait .image { + background-image: url(../../assets/images/rouge-extrait1.webp); +} +.slide1-tile--rouge-extrait:hover .image { + background-image: url(../../assets/images/rouge-extrait2.webp); +} +.slide1-tile--rose .image { + background-image: url(../../assets/images/a-la-rose1.webp); +} +.slide1-tile--rose:hover .image { + background-image: url(../../assets/images/a-la-rose2.webp); +} +.slide1-tile--lhomme .image { + background-image: url(../../assets/images/lhomme1.webp); +} +.slide1-tile--lhomme:hover .image { + background-image: url(../../assets/images/lhomme2.webp); +} +.slide1-tile--gentle-gold .image { + background-image: url(../../assets/images/gentle-fluidity1.webp); +} +.slide1-tile--gentle-gold:hover .image { + background-image: url(../../assets/images/gentle-fluidity2.webp); +} +.slide1-tile--gentle-silver .image { + background-image: url(../../assets/images/gentle-fluidity-silver1.webp); +} +.slide1-tile--gentle-silver:hover .image { + background-image: url(../../assets/images/gentle-fluidity-silver2.webp); +} +.slide1-tile--universalis .image { + background-image: url(../../assets/images/aqua-universalis1.webp); +} +.slide1-tile--universalis:hover .image { + background-image: url(../../assets/images/aqua-universalis2.webp); +} +.slide1-tile--vitae .image { + background-image: url(../../assets/images/aqua-vitae1.webp); +} +.slide1-tile--vitae:hover .image { + background-image: url(../../assets/images/aqua-vitae2.webp); +} +.slide1-tile--celestia .image { + background-image: url(../../assets/images/aqua-celestia1.webp); +} +.slide1-tile--celestia:hover .image { + background-image: url(../../assets/images/aqua-celestia2.webp); +} +.slide1-tile--soir .image { + background-image: url(../../assets/images/grand-soir1.webp); +} +.slide1-tile--soir:hover .image { + background-image: url(../../assets/images/grand-soir2.webp); +} +.slide1-tile--matin .image { + background-image: url(../../assets/images/petit-matin1.webp); +} +.slide1-tile--matin:hover .image { + background-image: url(../../assets/images/petit-matin2.webp); +} +.slide1-tile { + position: relative; + width: 364px; + height: 555px; +} +.slide1-tile .image { + width: 100%; + height: 364px; + background-size: cover; + transition: 0.8s; +} +.slide1-tile .name { + position: absolute; + top: 346px; + width: 100%; + height: 36px; + font-size: 1.75rem; + letter-spacing: 1px; + line-height: 2.2rem; + color: #646467; + text-align: center; + transition: 0.8s; + opacity: 1; +} +.slide1-tile--rouge:hover .name, +.slide1-tile--aqua-media:hover .name, +.slide1-tile--number-724:hover .name, +.slide1-tile--rouge-extrait:hover .name, +.slide1-tile--rose:hover .name, +.slide1-tile--lhomme:hover .name, +.slide1-tile--gentle-gold:hover .name, +.slide1-tile--gentle-silver:hover .name, +.slide1-tile--universalis:hover .name, +.slide1-tile--vitae:hover .name, +.slide1-tile--celestia:hover .name, +.slide1-tile--soir:hover .name, +.slide1-tile--matin:hover .name { + opacity: 0; +} +.slide1-tile .info { + top: 422px; +} +.slide1-tile .price { + top: 442px; +} +.slide1-tile .info, +.slide1-tile .price { + position: absolute; + width: 100%; + height: 20px; + font-size: 14px; + color: #646467; + display: flex; + justify-content: center; + transition: 0.8s; + opacity: 1; +} +.slide1-tile--rouge:hover .info, +.slide1-tile--rouge:hover .price, +.slide1-tile--aqua-media:hover .info, +.slide1-tile--aqua-media:hover .price, +.slide1-tile--number-724:hover .info, +.slide1-tile--number-724:hover .price, +.slide1-tile--number-724:hover .price, +.slide1-tile--rouge-extrait:hover .info, +.slide1-tile--rouge-extrait:hover .price, +.slide1-tile--rose:hover .info, +.slide1-tile--rose:hover .price, +.slide1-tile--lhomme:hover .info, +.slide1-tile--lhomme:hover .price, +.slide1-tile--gentle-gold:hover .info, +.slide1-tile--gentle-gold:hover .price, +.slide1-tile--gentle-silver:hover .info, +.slide1-tile--gentle-silver:hover .price, +.slide1-tile--universalis:hover .info, +.slide1-tile--universalis:hover .price, +.slide1-tile--vitae:hover .info, +.slide1-tile--vitae:hover .price, +.slide1-tile--celestia:hover .info, +.slide1-tile--celestia:hover .price, +.slide1-tile--soir:hover .info, +.slide1-tile--soir:hover .price, +.slide1-tile--matin:hover .info, +.slide1-tile--matin:hover .price { + opacity: 0; +} +.slide1-tile--universalis .info { + top: 457px; +} +.slide1-tile--universalis .price { + top: 477px; +} +.slide1-tile--universalis .info, +.slide1-tile--universalis .price { + position: absolute; + width: 100%; + height: 20px; + font-size: 14px; + color: #646467; + display: flex; + justify-content: center; + transition: 0.8s; + opacity: 1; +} +.slide1-tile .fragrance { + position: absolute; + top: 400px; + width: 100%; + height: 40px; + font-size: 1.2rem; + color: #646467; + display: flex; + justify-content: center; + align-items: center; +} +.slide1-tile--universalis .fragrance { + position: absolute; + top: 420px; + width: 100%; + height: 40px; + font-size: 1.2rem; + color: #646467; + display: flex; + justify-content: center; + align-items: center; +} +.slide1-tile .fragrance4 { + position: relative; + opacity: 0; +} +.slide1-tile--rouge:hover .fragrance4, +.slide1-tile--rouge-extrait:hover .fragrance4, +.slide1-tile--universalis:hover .fragrance4, +.slide1-tile--vitae:hover .fragrance4, +.slide1-tile--celestia:hover .fragrance4, +.slide1-tile--matin:hover .fragrance4 { + opacity: 1; + transition: 0.3s; + transition-delay: 0.3s; +} +.slide1-tile--rouge:hover .fragrance4::after, +.slide1-tile--rouge-extrait:hover .fragrance4::after, +.slide1-tile--universalis:hover .fragrance4::after, +.slide1-tile--vitae:hover .fragrance4::after, +.slide1-tile--celestia:hover .fragrance4::after, +.slide1-tile--matin:hover .fragrance4::after { + content: ''; + position: absolute; + top: 7px; + right: 6px; + width: 5.5px; + height: 5.5px; + background-color: RGB(136, 106, 51); + border-radius: 50%; + transition: 0.2s; + transition-delay: 0.1s; +} +.slide1-tile .fragrance5 { + position: relative; + opacity: 0; +} +.slide1-tile--rouge:hover .fragrance5, +.slide1-tile--rouge-extrait:hover .fragrance5, +.slide1-tile--universalis:hover .fragrance5, +.slide1-tile--vitae:hover .fragrance5, +.slide1-tile--celestia:hover .fragrance5, +.slide1-tile--matin:hover .fragrance5 { + opacity: 1; + transition: 0.3s; + transition-delay: 0.55s; +} +.slide1-tile--rouge:hover .fragrance5::after, +.slide1-tile--rouge-extrait:hover .fragrance5::after, +.slide1-tile--universalis:hover .fragrance5::after, +.slide1-tile--vitae:hover .fragrance5::after, +.slide1-tile--celestia:hover .fragrance5::after, +.slide1-tile--matin:hover .fragrance5::after { + content: ''; + position: absolute; + top: 7px; + right: 6px; + width: 5.5px; + height: 5.5px; + background-color: RGB(136, 106, 51); + border-radius: 50%; + transition: 0.2s; + transition-delay: 0.35s; +} +.slide1-tile .fragrance6 { + opacity: 0; +} +.slide1-tile--rouge:hover .fragrance6, +.slide1-tile--rouge-extrait:hover .fragrance6, +.slide1-tile--universalis:hover .fragrance6, +.slide1-tile--vitae:hover .fragrance6, +.slide1-tile--celestia:hover .fragrance6, +.slide1-tile--matin:hover .fragrance6 { + opacity: 1; + transition: 0.3s; + transition-delay: 0.75s; +} + +.slide1-tile .fragrance2 { + position: relative; + opacity: 0; +} +.slide1-tile--aqua-media:hover .fragrance2, +.slide1-tile--number-724:hover .fragrance2, +.slide1-tile--rose:hover .fragrance2, +.slide1-tile--gentle-gold:hover .fragrance2, +.slide1-tile--gentle-silver:hover .fragrance2, +.slide1-tile--soir:hover .fragrance2 { + opacity: 1; + transition: 0.3s; + transition-delay: 0.3s; +} +.slide1-tile--aqua-media:hover .fragrance2::after, +.slide1-tile--number-724:hover .fragrance2::after, +.slide1-tile--rose:hover .fragrance2::after, +.slide1-tile--gentle-gold:hover .fragrance2::after, +.slide1-tile--gentle-silver:hover .fragrance2::after, +.slide1-tile--soir:hover .fragrance2::after { + content: ''; + position: absolute; + top: 7px; + right: 6px; + width: 5.5px; + height: 5.5px; + background-color: RGB(136, 106, 51); + border-radius: 50%; + transition: 0.2s; + transition-delay: 0.1s; +} +.slide1-tile--aqua-media .fragrance3, +.slide1-tile--number-724 .fragrance3, +.slide1-tile--rose .fragrance3, +.slide1-tile--gentle-gold .fragrance3, +.slide1-tile--gentle-silver .fragrance3, +.slide1-tile--soir .fragrance3 { + opacity: 0; +} +.slide1-tile--aqua-media:hover .fragrance3, +.slide1-tile--number-724:hover .fragrance3, +.slide1-tile--rose:hover .fragrance3, +.slide1-tile--gentle-gold:hover .fragrance3, +.slide1-tile--gentle-silver:hover .fragrance3, +.slide1-tile--soir:hover .fragrance3 { + opacity: 1; + transition: 0.3s; + transition-delay: 0.55s; +} +.slide1-tile .fragrance1 { + position: relative; + opacity: 0; +} +.slide1-tile--lhomme:hover .fragrance1 { + opacity: 1; + transition: 0.3s; + transition-delay: 0.3s; +} diff --git a/css/components/video.css b/css/components/video.css new file mode 100644 index 00000000..d94dee58 --- /dev/null +++ b/css/components/video.css @@ -0,0 +1,50 @@ +.main-video { + z-index: 1; + padding-top: 103px; + padding-bottom: 180px; +} +.main-video .video { + width: 100%; + height: 640px; + object-fit: cover; + object-position: left top; +} +.main-video .brand-name { + position: absolute; + top: 187px; + left: 40px; + font-size: 3.4375rem; + color: #fff; + line-height: 4rem; +} +.main-video .button { + position: absolute; + top: 665px; + right: 40px; + width: 230px; + height: 50px; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; +} +.main-video .button .discover { + display: inline-block; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 1.2px; + color: #646467; +} +.main-video .button .discover::after { + content: ''; + position: absolute; + top: 36px; + right: 82px; + width: 67px; + border-bottom: 1px solid #646467; + opacity: 0; + transition: 0.3s; +} +.main-video .button:hover .discover::after { + opacity: 1; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..591f498e --- /dev/null +++ b/css/main.css @@ -0,0 +1,57 @@ +@import './components/fonts.css'; +@import './components/header.css'; +@import './components/video.css'; +@import './components/product.css'; +@import './components/content.css'; +@import './components/online-advantages.css'; +@import './components/newsletter.css'; +@import './components/footer.css'; +@import './components/scroll.css'; +@import './components/slider.css'; +* { + box-sizing: border-box; +} +body { + position: relative; + max-width: 1440px; + margin: 0 auto; + scroll-behavior: smooth; +} +a { + display: inline-block; + text-decoration: none; +} + +.io { + opacity: 0; + transition: 1s; + transform: translate(0, 100px); +} +.io-content { + opacity: 0; + transition: 1.2s; + transform: translate(0, 120px); +} +.io-text { + opacity: 0; + transition: 1.5s; + transform: translate(0, 160px); +} +.io-2 { + opacity: 0; + transition: 1.15s; + transform: translate(0, 110px); +} +.io-3 { + opacity: 0; + transition: 1.3s; + transform: translate(0, 120px); +} +.io.show, +.io-content.show, +.io-text.show, +.io-2.show, +.io-3.show { + transform: translate(0, 0); + opacity: 1; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 00000000..b3f00d81 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..abb00dcc --- /dev/null +++ b/index.html @@ -0,0 +1,580 @@ + + + + + + Maison Francis Kurkdjian - Official online store + + + + + + + + + + + + +
+
+
+ + + + + +
+
+ +
+
+
+ +
Maison
Francis Kurkdjian
Paris
+ DISCOVER +
+
+
+ +
+
Globe Trotter
+
Gold Edition
+
€125.00
+ + +
+
Globe Trotter
+
Zinc Edition
+
€115.00
+ +
+
+
+
+ +
+
Amyris
femme
+
Eau de parfum
+
€110.00
+
+
Floral   
+
Fruity
+
+ + +
+
Amyris
homme
+
Eau de toilette
+
€105.00
+
+
Aromatic   
+
Woody
+
+ +
+
+
+
+ +
+
Baccarat
Rouge 540
+
Travel Set - Eau de parfum
+
€275.00
+
+
Floral   
+
Ambery   
+
Woody
+
+ + +
+
724
+
Travel Set - Eau de parfum
+
€225.00
+
+
Floral   
+
Musky
+
+ +
+
+
+
+
+ +
+ Fragrance Finder + +
+ Discover the fragrances that suit you best thanks to the Fragrance Finder.
This questionnaire, developed by Francis Kurkdjian, allows you to determine which fragrances in our + olfactory wardrobe will reflect best the different facets of your personality. +
+ DISCOVER +
+
+ +
+ Token of Appreciation + +
Select a gift from a special online selection for every purchase over 150€.
+ DISCOVER +
+
+
+
+
+
Our selection
+
+
Express your personality by choosing one or more emblematic pieces from the Maison's fragrance wardrobe.
+ DISCOVER ALL FRAGRANCES +
+
+
+
+
+
+
+ +
+
Baccarat
Rouge 540
+
Eau de parfum
+
Starting from €150.00
+
+
Floral   
+
Ambery   
+
Woody
+
+ +
+
+ +
+
Aqua Media
Cologne forte
+
Eau de parfum
+
Starting from €110.00
+
+
Herbal   
+
Citrus   
+
+ +
+
+ +
+
724
+
Eau de parfum
+
Starting from €120.00
+
+
Floral   
+
Musky   
+
+ +
+
+ +
+
Baccarat
Rouge 540
+
Extrait de parfum
+
Starting from €210.00
+
+
Floral   
+
Ambery   
+
Woody
+
+ +
+
+ +
+
À la rose
+
Eau de parfum
+
Starting from €120.00
+
+
Floral   
+
Musky   
+
+ +
+
+ +
+
I'Homme
À la rose
+
Eau de parfum
+
Starting from €120.00
+
+
Woody
+
+ +
+
+ +
+
gentle
Fluidity
+
Gold Edition - Eau de parfum
+
Starting from €110.00
+
+
Ambery   
+
Musky   
+
+ +
+
+ +
+
Gentle
fluidity
+
Silver Edition - Eau de parfum
+
Starting from €110.00
+
+
Aromatic   
+
Woody   
+
+ +
+
+ +
+
Aqua
Universalis
Cologne forte
+
Eau de parfum
+
Starting from €110.00
+
+
Citrus   
+
Woody   
+
Musky
+
+ +
+
+ +
+
Aqua Vitae
Cologne forte
+
Eau de parfum
+
Starting from €110.00
+
+
Floral   
+
Citrus   
+
Woody
+
+ +
+
+ +
+
Aqua Celestia
Cologne forte
+
Eau de parfum
+
Starting from €110.00
+
+
Citrus   
+
Floral   
+
Musky
+
+ +
+
+ +
+
Grand Soir
+
Eau de parfum
+
Starting from €110.00
+
+
Woody   
+
Ambery   
+
+ +
+
+ +
+
Petit Matin
+
Eau de parfum
+
Starting from €110.00
+
+
Citrus   
+
Floral   
+
Woody
+
+ +
+
+
+ slide to right +
+
+ slide to left +
+
+
+
+
+
+ +
+ 724 + +
+ Discover 724, our new eau de parfum. Behind these three numbers lies Francis Kurkdjian’s fascination for the cities of the world and their creative energy. +
+ DISCOVER +
+
+ +
+ Aqua Media Cologne forte + +
+ This new eau de parfum, whose facets shine at the heart of a citrus garden, evokes blissful landscapes and pristine nature, proving that happiness blossoms in simplicity. +
+ DISCOVER +
+
+
+
+
+
Discovery Sets
+
+
+ Delve into the world of Maison Francis Kurkdjian with our discovery collections. A wonderful way of exploring the perfumes of the Maison and a perfect gift to give or receive. +
+ DISCOVER ALL +
+
+
+
+
+
+
+ +
+ Scented candles + +
+ A soft flaming glow and fragrant notes infuse a delicate and unique ambiance at home. Create a delicately refined atmosphere with our collection of Scented candles to create a relaxing + and cozy atmosphere. +
+ DISCOVER +
+
+ +
+ Bath & Body + +
+ Enrich your beauty ritual with the scented bath and body products echoing the emblematic perfumes of Maison Francis Kurkdjian's fragrance wardrobe, and extend their sillages with + elegance. +
+ DISCOVER +
+
+
+
+
+
+ +
+ Women's fragrances + +
+ Our collection of perfumes for women is like a closet where each garment offers polished style and the olfactory nuances that express all facets of women’s radiance and fulfillment. +
+ DISCOVER +
+
+ +
+ Men's fragrances + +
+ Composed like an olfactory symphony, our collection of fragrances for men grants them freedom to express their personality with exceptional fragrances that reflect their wants. +
+ DISCOVER +
+
+ +
+ Unisex fragrances + +
+ Our collection of unisex fragrances is composed of rare perfumes that unite man and woman in a shared story, a shared wake. A fragrance wardrobe meant to be shared at will. +
+ DISCOVER +
+
+
+
+
+
+
+
Worldwide delivery
+
+
+
+
A customer adviser is available by phone at +33
(0)1 72 95 09 89, Monday to Saturday from 10
am to 7 pm (Paris time) or by email
+
+
+
+
Secure payment
+
+
+
+
Gift-box in the colors
of the Maison
+
+
+
+
2 complimentary samples
subject to conditions
+
+
+
+
+
Newsletter
+
Sign up to receive our latest news
+ +
+ + +
+ + diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/js/.DS_Store differ diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..1c520ed1 --- /dev/null +++ b/js/main.js @@ -0,0 +1,109 @@ +const $cart = document.querySelector('header .cart'); +const $cartContainer = document.querySelector('.cart-container'); +const $close = document.querySelector('.cart-container img'); +const $main = document.querySelector('main'); +$cart.addEventListener('click', () => { + $cartContainer.classList.add('show'); + $main.style.overflow = 'hidden'; +}); +$close.addEventListener('click', () => { + $cartContainer.classList.remove('show'); +}); + +const mySwiper = new Swiper('.swiper', { + slidesPerView: 3, + spaceBetween: 10, + navigation: { + prevEl: '.swiper-button-prev', + nextEl: '.swiper-button-next', + }, +}); + +const $toTop = document.querySelector('main .to-top'); +const $logoToTop = document.querySelector('.section2 .logo'); + +window.addEventListener( + 'scroll', + _.throttle(() => { + if (window.scrollY < 830) { + console.log('scroll'); + $toTop.classList.add('hide'); + } else { + $toTop.classList.remove('hide'); + } + }, 300) +); + +$toTop.addEventListener('click', () => { + gsap.to(window, 0.7, { + scrollTo: 0, + }); +}); +$logoToTop.addEventListener('click', () => { + gsap.to(window, 0.7, { + scrollTo: 0, + }); +}); + +const io = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + entry.target.classList.add('show'); + }); +}); +const $ios = document.querySelectorAll('.io'); +$ios.forEach((element) => { + io.observe(element); +}); +const ioContent = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + entry.target.classList.add('show'); + }); +}); +const $ioContents = document.querySelectorAll('.io-content'); +$ioContents.forEach((element) => { + ioContent.observe(element); +}); + +const ioText = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + entry.target.classList.add('show'); + }); +}); +const $ioText = document.querySelectorAll('.io-text'); +$ioText.forEach((element) => { + ioText.observe(element); +}); + +const io2 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + entry.target.classList.add('show'); + }); +}); +const $io2 = document.querySelectorAll('.io-2'); +$io2.forEach((element) => { + io2.observe(element); +}); +const io3 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + entry.target.classList.add('show'); + }); +}); +const $io3 = document.querySelectorAll('.io-3'); +$io3.forEach((element) => { + io3.observe(element); +});