diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..604491c Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index aef8443..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file diff --git a/Cafe W.zip b/Cafe W.zip deleted file mode 100644 index a500935..0000000 Binary files a/Cafe W.zip and /dev/null differ diff --git a/Figma.dmg b/Figma.dmg deleted file mode 100644 index 4453dfd..0000000 Binary files a/Figma.dmg and /dev/null differ diff --git a/Cafe W.fig b/assets/Cafe W.fig similarity index 100% rename from Cafe W.fig rename to assets/Cafe W.fig diff --git a/CafeW.svg b/assets/CafeW.svg similarity index 100% rename from CafeW.svg rename to assets/CafeW.svg diff --git a/Search.svg b/assets/Search.svg similarity index 100% rename from Search.svg rename to assets/Search.svg diff --git a/bgcoffee.png b/assets/bgcoffee.png similarity index 100% rename from bgcoffee.png rename to assets/bgcoffee.png diff --git a/book.svg b/assets/book.svg similarity index 100% rename from book.svg rename to assets/book.svg diff --git a/cafeW_letter.svg b/assets/cafeW_letter.svg similarity index 100% rename from cafeW_letter.svg rename to assets/cafeW_letter.svg diff --git a/hands-coffee.svg b/assets/hands-coffee.svg similarity index 100% rename from hands-coffee.svg rename to assets/hands-coffee.svg diff --git a/latte.svg b/assets/latte.svg similarity index 100% rename from latte.svg rename to assets/latte.svg diff --git a/search - normal (Dark).svg b/assets/search - normal (Dark).svg similarity index 100% rename from search - normal (Dark).svg rename to assets/search - normal (Dark).svg diff --git a/cafeW.css b/cafeW.css index b79f449..2b6d2ce 100644 --- a/cafeW.css +++ b/cafeW.css @@ -1,149 +1,133 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); + :root{ - --base-white:#fff + --base-white:#fff; + font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } +*, *::before, *::after{ + box-sizing: border-box; +} -.main{ +body, html{ + margin:0; + width: 100%; + height:100%; +} - display: flex; - justify-content: center; + +.favorite-section{ + padding: 10vw; +} + +.bg-filter{ + position: absolute; + top:0; + left:0; + width:100%; + height:100%; + filter: brightness(50%); + + /* 단축 속성으로 바꿔보기 */ background-repeat: no-repeat; - background-image: url(/bgcoffee.png) ; + background-image: url(./assets/bgcoffee.png) ; background-position: center; background-attachment: fixed; - /* min-width: 1440px; */ - } - .container{ - min-width: 1440px; + width: 100%; + max-width:1200px; display: flex; - justify-content: space-between; + justify-content: flex-start; } .white-letter{ + flex-basis: 40%; + z-index: 1; color: var(--base-white); - width: max-content; height: max-content; - margin: 110px 0 110px 110px; - height: 880px; - width: 330px; - /* width: 100%; - height: auto; */ -} - -.title1{ - font-size: 115px; - letter-spacing: 4px; - margin: 0; - padding: 0; -} - -.title1 span{ - letter-spacing: 22px; -} - -.title2{ - font-size: 55px; - letter-spacing: 6px; - margin: 0; - padding: 0; -} - - - -.title1, .title2{ - line-height: 0.8; - text-align: left; - font-weight: normal; -} - -.title3{ - font-size: 25px; - letter-spacing: 2px; - margin-top: 35px; -} - -.description{ - font-size: 15px; - margin-bottom: 30px; -} - -.title3, .description{ text-align: right; -} - - -a{ - text-decoration: none; - color: var(--base-white); - border: 2px solid var(--base-white); - padding: 5px 20px 5px 20px; + & h1, & h2{ + margin: 0; + padding: 0; + line-height: 1; + font-weight: normal; + font-family: Georgia, 'Times New Roman', Times, serif; + } + + & h1{ + font-size: 115px; + letter-spacing: 1px; + } + & h1 span{ + letter-spacing: 16px; + } + + & h2{ + font-size: 55px; + letter-spacing: 6px; + } + + & h3{ + font-size: 32px; + letter-spacing: -1px; + word-spacing: 2px; + margin-top: 35px; + font-weight: 300; + } + + & p{ + font-size: 15px; + margin-bottom: 30px; + line-height: 1.6; + } } -.a-right{ - text-align: right; +.detail{ + text-decoration: none; + color: inherit; + border: 2px solid currentColor; + padding: 10px 24px; + transition: 100ms cubic-bezier(0.165, 0.84, 0.44, 1); + + &:hover{ + color: salmon; + } } .photos{ - /* border: 2px solid var(--base-white); */ - width: 50%; - height: 50%; - position: relative; - /* aspect-ratio: auto; */ - - + flex-basis: 60%; + position:relative; } -.photo1{ + +.photo{ border: 0; outline: 0; - height: 300px; - width: 210px; - /* object-fit: cover; */ - background-image: url(/latte.svg); - background-repeat: no-repeat; - background-position: -200px 0; + width: clamp(150px, 50vw, 300px); + aspect-ratio: 2.25/3; + background-position: center; + background-size: cover; + right:0; + top: 10%; + box-shadow: 0 0 0 8px #fff; position: absolute; - top:0; - right: 500px; - top: 120px; - transform: rotate( 350deg ); - box-shadow: 0 0 0 8px #fff ; } -.photo2{ - border: 0; - outline: 0; - height: 300px; - width: 210px; - - /* object-fit: cover; */ - background-image: url(/hands-coffee.svg); - background-repeat: no-repeat; - background-position: -180px 0; - position: absolute; - right: 340px; - top: 80px; - transform: rotate( 10deg ); - box-shadow: 0 0 0 8px #fff ; +.one{ + background-image: url(./assets/latte.svg); + transform: translateX(-120px) rotate( 350deg ); } -.photo3{ - border: 0; - outline: 0; - height: 300px; - width: 210px; - /* object-fit: cover; */ - background-repeat: no-repeat; - background-image: url(/book.svg); - background-position: -200px 0; - position: absolute; - right: 180px; - top: 220px; - transform: rotate( 25deg ); - box-shadow: 0 0 0 8px #fff ; +.two{ + background-image: url(./assets/hands-coffee.svg); + transform: translateY(-20px) rotate( 10deg ); +} + +.three{ + background-image: url(/assets/book.svg); + transform: translate(120px, 100px) rotate( 25deg ); } \ No newline at end of file diff --git a/cafeW.html b/cafeW.html index 69f94f7..3e523cd 100644 --- a/cafeW.html +++ b/cafeW.html @@ -9,23 +9,24 @@ -
+
+
-

PICK YOUR

-

FAVORITE

-

다양한 메뉴를
카페 W에서 즐겨보세요

-

카페 W만의 특별함을 경험할 수 있는 최상의 선택 음료
- 카페 W 커피와 완벽한 어울림을 자랑하는 푸드
- 사용한 시도와 디자인으로 가치를 더하는 상품
- 소중한 사람에게 마음을 전하는 가장 좋은 방법
- 카페 W 카드

-
자세히 보기
+

PICK
YOUR

+

FAVORITE

+

다양한 메뉴를
카페 W에서 즐겨보세요

+

카페 W만의 특별함을 경험할 수 있는 최상의 선택 음료 + 카페 W 커피와 완벽한 어울림을 자랑하는 푸드 + 사용한 시도와 디자인으로 가치를 더하는 상품 + 소중한 사람에게 마음을 전하는 가장 좋은 방법

+ 자세히 보기
- - - + 사진 원본 볼 수 있는 뒤가 딤드처리 되는 모달 만들기 + + +
diff --git a/figma.css b/header.css similarity index 100% rename from figma.css rename to header.css diff --git a/figma.html b/header.html similarity index 89% rename from figma.html rename to header.html index 2f2d315..1fbe752 100644 --- a/figma.html +++ b/header.html @@ -5,7 +5,7 @@ Cafe W - + @@ -17,14 +17,14 @@
- 왕관 모양 cafe W + 왕관 모양 cafe W CAFE W
diff --git "a/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-06 \354\230\244\355\233\204 9.33.16.png" "b/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-06 \354\230\244\355\233\204 9.33.16.png" deleted file mode 100644 index 10c3a0f..0000000 Binary files "a/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-06 \354\230\244\355\233\204 9.33.16.png" and /dev/null differ