diff --git a/christmas-shop/README.md b/christmas-shop/README.md new file mode 100644 index 0000000..c8ac6cb --- /dev/null +++ b/christmas-shop/README.md @@ -0,0 +1,18 @@ +# Christmas Shop + +[View result](https://rolling-scopes-school.github.io/dias1c-JSFE2024Q4/christmas-shop) + +[Project Description](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/christmas-shop/christmas-shop.md) + +### Progress + +- [x] [Part 1: Layout](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/christmas-shop/christmas-shop-part1.md) +- [x] [Part 2: Handle Resize](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/christmas-shop/christmas-shop-part2.md) +- [ ] [Part 3: Interactive with JS](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/christmas-shop/christmas-shop-part3.md) + +### TODO + +- Resizeing? +- Filter +- Modal +- Menu diff --git a/christmas-shop/assets/data/all_gifts.json b/christmas-shop/assets/data/all_gifts.json new file mode 100644 index 0000000..6599ad2 --- /dev/null +++ b/christmas-shop/assets/data/all_gifts.json @@ -0,0 +1,433 @@ +[ + { + "name": "Bug Magnet", + "description": "Able to find bugs in code like they were placed there on purpose.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+200", + "dream": "+400" + } + }, + + { + "name": "Console.log Guru", + "description": "Uses console.log like a crystal ball to find any issue.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+200", + "dream": "+400" + } + }, + + { + "name": "Shortcut Cheater", + "description": "Knows every keyboard shortcut like they were born with them.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+400", + "dream": "+200" + } + }, + + { + "name": "Merge Master", + "description": "Merges branches in Git without conflicts, like a wizard during an exam.", + "category": "For Work", + "superpowers": { + "live": "+200", + "create": "+500", + "love": "+200", + "dream": "+300" + } + }, + + { + "name": "Async Tamer", + "description": "Handles asynchronous code and promises like well-trained pets.", + "category": "For Work", + "superpowers": { + "live": "+100", + "create": "+400", + "love": "+200", + "dream": "+300" + } + }, + + { + "name": "CSS Tamer", + "description": "Can make Flexbox and Grid work together like they were always best friends.", + "category": "For Work", + "superpowers": { + "live": "+200", + "create": "+500", + "love": "+200", + "dream": "+300" + } + }, + + { + "name": "Time Hacker", + "description": "Writes code at the last moment but always meets the deadline.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+500", + "dream": "+200" + } + }, + + { + "name": "Layout Master", + "description": "Creates perfect layouts on the first try, like they can read the designer's mind.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+300", + "love": "+200", + "dream": "+200" + } + }, + + { + "name": "Documentation Whisperer", + "description": "Understands cryptic documentation as if they wrote it themselves.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+200", + "dream": "+100" + } + }, + + { + "name": "Feedback Master", + "description": "Accepts client revisions with the Zen calm of Buddha.", + "category": "For Work", + "superpowers": { + "live": "+300", + "create": "+500", + "love": "+300", + "dream": "+400" + } + }, + + { + "name": "Code Minimalist", + "description": "Writes code so concise that one line does more than a whole file.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+500", + "dream": "+200" + } + }, + + { + "name": "Pixel-Perfect Magician", + "description": "Aligns elements to the last pixel, even when the design looks abstract.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+400", + "dream": "+400" + } + }, + + { + "name": "Posture Levitation", + "description": "Can sit for hours, but maintains perfect posture like a ballerina.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+500", + "love": "+500", + "dream": "+400" + } + }, + + { + "name": "Step Master", + "description": "Gets 10,000 steps a day even while sitting at the computer.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+300", + "love": "+500", + "dream": "+400" + } + }, + + { + "name": "Snack Resister", + "description": "Ignoring desktop snacks like a strict dietician.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+100", + "love": "+200", + "dream": "+400" + } + }, + + { + "name": "Hydration Bot", + "description": "Drinks the recommended 2 liters of water a day like a health-programmed robot.", + "category": "For Health", + "superpowers": { + "live": "+500", + "create": "+300", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Sleep Overlord", + "description": "Sleeps 6 hours but feels like they had 10.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+500", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Break Guru", + "description": "Takes a stretch break every hour without forgetting, no matter how focused.", + "category": "For Health", + "superpowers": { + "live": "+300", + "create": "+300", + "love": "+300", + "dream": "+400" + } + }, + + { + "name": "Eye Protector", + "description": "Can work all day at the monitor without feeling like their eyes are on fire.", + "category": "For Health", + "superpowers": { + "live": "+100", + "create": "+300", + "love": "+500", + "dream": "+400" + } + }, + + { + "name": "Stress Dodger", + "description": "Masters meditation right at the keyboard.", + "category": "For Health", + "superpowers": { + "live": "+100", + "create": "+400", + "love": "+200", + "dream": "+400" + } + }, + + { + "name": "Yoga Coder", + "description": "Easily switches from coding to yoga and back.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+400", + "love": "+400", + "dream": "+400" + } + }, + + { + "name": "Healthy Snacker", + "description": "Always picks fruit, even when chocolate is within arm’s reach.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+300", + "love": "+200", + "dream": "+400" + } + }, + + { + "name": "Chair Exerciser", + "description": "Manages to work out without leaving the chair.", + "category": "For Health", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+500", + "dream": "+400" + } + }, + + { + "name": "Caffeine Filter", + "description": "Drinks coffee at night and still falls asleep with no problem.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+300", + "love": "+500", + "dream": "+200" + } + }, + + { + "name": "Joy Charger", + "description": "Finds joy in the little things—even in a build that finishes unexpectedly fast.", + "category": "For Harmony", + "superpowers": { + "live": "+200", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Error Laugher", + "description": "Laughs at code errors like they’re jokes instead of getting angry.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Bug Acceptance Guru", + "description": "Accepts bugs as part of the journey to perfection — it’s just another task.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+400" + } + }, + + { + "name": "Spontaneous Coding Philosopher", + "description": "Philosophically accepts any client suggestion after a long refactor.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+400" + } + }, + + { + "name": "Deadline Sage", + "description": "Remains zen even when the deadline is close and the project manager is stressed.", + "category": "For Harmony", + "superpowers": { + "live": "+200", + "create": "+200", + "love": "+300", + "dream": "+500" + } + }, + + { + "name": "Inspiration Maestro", + "description": "Finds inspiration on an empty screen as if masterpieces are already there.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+400", + "dream": "+100" + } + }, + + { + "name": "Peace Keeper", + "description": "Maintains inner calm even in moments of intense crisis.", + "category": "For Harmony", + "superpowers": { + "live": "+200", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Empathy Guru", + "description": "Feels the team’s mood and can lift everyone’s spirits.", + "category": "For Harmony", + "superpowers": { + "live": "+500", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Laughter Generator", + "description": "Can lighten any tense situation with a joke that even bugs laugh at.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+200", + "dream": "+500" + } + }, + + { + "name": "Pause Master", + "description": "Knows when to just step back from the keyboard and breathe.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+100", + "dream": "+100" + } + }, + + { + "name": "Coder Healer", + "description": "Can support a colleague in their darkest hour, even if it’s a 500 error.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + + { + "name": "Music Code Curator", + "description": "Creates work playlists so good, even deadlines follow the rhythm.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+300", + "dream": "+200" + } + } +] \ No newline at end of file diff --git a/christmas-shop/assets/icons/icon-snowflake-red.svg b/christmas-shop/assets/icons/icon-snowflake-red.svg new file mode 100644 index 0000000..f5a80f2 --- /dev/null +++ b/christmas-shop/assets/icons/icon-snowflake-red.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/christmas-shop/assets/icons/illustration-christmas_tree-mixed.svg b/christmas-shop/assets/icons/illustration-christmas_tree-mixed.svg new file mode 100644 index 0000000..4319930 --- /dev/null +++ b/christmas-shop/assets/icons/illustration-christmas_tree-mixed.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/christmas-shop/assets/icons/illustration-santa_claus-mixed.svg b/christmas-shop/assets/icons/illustration-santa_claus-mixed.svg new file mode 100644 index 0000000..3469fd4 --- /dev/null +++ b/christmas-shop/assets/icons/illustration-santa_claus-mixed.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/christmas-shop/assets/icons/illustration-snake-mixed.svg b/christmas-shop/assets/icons/illustration-snake-mixed.svg new file mode 100644 index 0000000..daa7043 --- /dev/null +++ b/christmas-shop/assets/icons/illustration-snake-mixed.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/christmas-shop/assets/images/bg-ball.png b/christmas-shop/assets/images/bg-ball.png new file mode 100644 index 0000000..b782743 Binary files /dev/null and b/christmas-shop/assets/images/bg-ball.png differ diff --git a/christmas-shop/assets/images/bg-forest.png b/christmas-shop/assets/images/bg-forest.png new file mode 100644 index 0000000..6d6bab2 Binary files /dev/null and b/christmas-shop/assets/images/bg-forest.png differ diff --git a/christmas-shop/assets/images/bg-garland.png b/christmas-shop/assets/images/bg-garland.png new file mode 100644 index 0000000..bb610e7 Binary files /dev/null and b/christmas-shop/assets/images/bg-garland.png differ diff --git a/christmas-shop/assets/images/bg-snow.png b/christmas-shop/assets/images/bg-snow.png new file mode 100644 index 0000000..a97fc32 Binary files /dev/null and b/christmas-shop/assets/images/bg-snow.png differ diff --git a/christmas-shop/assets/images/christmas-tree-ball.png b/christmas-shop/assets/images/christmas-tree-ball.png new file mode 100644 index 0000000..355440f Binary files /dev/null and b/christmas-shop/assets/images/christmas-tree-ball.png differ diff --git a/christmas-shop/assets/images/christmas-trees.png b/christmas-shop/assets/images/christmas-trees.png new file mode 100644 index 0000000..246fb6e Binary files /dev/null and b/christmas-shop/assets/images/christmas-trees.png differ diff --git a/christmas-shop/assets/images/fairytale-house.png b/christmas-shop/assets/images/fairytale-house.png new file mode 100644 index 0000000..752826e Binary files /dev/null and b/christmas-shop/assets/images/fairytale-house.png differ diff --git a/christmas-shop/assets/images/gift-for-harmony.png b/christmas-shop/assets/images/gift-for-harmony.png new file mode 100644 index 0000000..fff8e9c Binary files /dev/null and b/christmas-shop/assets/images/gift-for-harmony.png differ diff --git a/christmas-shop/assets/images/gift-for-health.png b/christmas-shop/assets/images/gift-for-health.png new file mode 100644 index 0000000..f21aad5 Binary files /dev/null and b/christmas-shop/assets/images/gift-for-health.png differ diff --git a/christmas-shop/assets/images/gift-for-work.png b/christmas-shop/assets/images/gift-for-work.png new file mode 100644 index 0000000..bb4a029 Binary files /dev/null and b/christmas-shop/assets/images/gift-for-work.png differ diff --git a/christmas-shop/assets/images/santa.png b/christmas-shop/assets/images/santa.png new file mode 100644 index 0000000..9bf70aa Binary files /dev/null and b/christmas-shop/assets/images/santa.png differ diff --git a/christmas-shop/assets/images/snowman.png b/christmas-shop/assets/images/snowman.png new file mode 100644 index 0000000..4edffb3 Binary files /dev/null and b/christmas-shop/assets/images/snowman.png differ diff --git a/christmas-shop/index.html b/christmas-shop/index.html new file mode 100644 index 0000000..4a494f7 --- /dev/null +++ b/christmas-shop/index.html @@ -0,0 +1,19 @@ + + + + + + + The Gifts + + + + + + You must be navigated to /pages/home + + + \ No newline at end of file diff --git a/christmas-shop/pages/gifts/gifts.json b/christmas-shop/pages/gifts/gifts.json new file mode 100644 index 0000000..9275247 --- /dev/null +++ b/christmas-shop/pages/gifts/gifts.json @@ -0,0 +1,134 @@ +[ + { + "name": "Console.log Guru", + "description": "Uses console.log like a crystal ball to find any issue.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+200", + "dream": "+400" + } + }, + { + "name": "Step Master", + "description": "Gets 10,000 steps a day even while sitting at the computer.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+300", + "love": "+500", + "dream": "+400" + } + }, + { + "name": "Bug Magnet", + "description": "Able to find bugs in code like they were placed there on purpose.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+200", + "dream": "+400" + } + }, + { + "name": "Shortcut Cheater", + "description": "Knows every keyboard shortcut like they were born with them.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+400", + "dream": "+200" + } +}, + { + "name": "Posture Levitation", + "description": "Can sit for hours, but maintains perfect posture like a ballerina.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+500", + "love": "+500", + "dream": "+400" + } + }, + { + "name": "Bug Acceptance Guru", + "description": "Accepts bugs as part of the journey to perfection — it’s just another task.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+400" + } + }, + { + "name": "Snack Resister", + "description": "Ignoring desktop snacks like a strict dietician.", + "category": "For Health", + "superpowers": { + "live": "+400", + "create": "+100", + "love": "+200", + "dream": "+400" + } + }, + { + "name": "Error Laugher", + "description": "Laughs at code errors like they’re jokes instead of getting angry.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + { + "name": "Hydration Bot", + "description": "Drinks the recommended 2 liters of water a day like a health-programmed robot.", + "category": "For Health", + "superpowers": { + "live": "+500", + "create": "+300", + "love": "+500", + "dream": "+500" + } + }, + { + "name": "Merge Master", + "description": "Merges branches in Git without conflicts, like a wizard during an exam.", + "category": "For Work", + "superpowers": { + "live": "+200", + "create": "+500", + "love": "+200", + "dream": "+300" + } +}, + { + "name": "Joy Charger", + "description": "Finds joy in the little things—even in a build that finishes unexpectedly fast.", + "category": "For Harmony", + "superpowers": { + "live": "+200", + "create": "+200", + "love": "+500", + "dream": "+500" + } + }, + { + "name": "Spontaneous Coding Philosopher", + "description": "Philosophically accepts any client suggestion after a long refactor.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+400" + } + } +] \ No newline at end of file diff --git a/christmas-shop/pages/gifts/index.html b/christmas-shop/pages/gifts/index.html new file mode 100644 index 0000000..36e8486 --- /dev/null +++ b/christmas-shop/pages/gifts/index.html @@ -0,0 +1,142 @@ + + + + + + + Gifts + + + + + + +
+
+ + + The Gifts + + + + + + +
+
+ + + +
+
+
+

Achieve health, harmony, and inner strength

+
+ +
+ + + + +
+ +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/christmas-shop/pages/gifts/script.js b/christmas-shop/pages/gifts/script.js new file mode 100644 index 0000000..96b0b0b --- /dev/null +++ b/christmas-shop/pages/gifts/script.js @@ -0,0 +1,9 @@ +import { initialRenderGifts } from "./../../scripts/gifts.js"; + +let gifts = []; + +fetch("./gifts.json").then(async (resp) => { + gifts = JSON.parse(await resp.text()); + + initialRenderGifts({ gifts }); +}); diff --git a/christmas-shop/pages/gifts/styles.css b/christmas-shop/pages/gifts/styles.css new file mode 100644 index 0000000..f29ba59 --- /dev/null +++ b/christmas-shop/pages/gifts/styles.css @@ -0,0 +1,68 @@ +@import url(../../styles/global.css); +@import url(../../styles/header.css); +@import url(../../styles/footer.css); +@import url(../../styles/gift-cards.css); + + +.section_gifts { + background-color: var(--color--primary); + background-image: url(../../assets/images/bg-garland.png); + background-position: top; + background-size: 100%; + background-repeat: no-repeat; + + border-radius: var(--border-radius-default); +} + +.section_gifts__container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.section_gifts__container__title { + max-width: var(--box-small-width); + text-align: center; + color: var(--color--static-white); +} + +.section_gifts__container__tabs { + display: flex; + gap: 8px; +} + +@media all and (max-width: 380px) { + .section_gifts__container__tabs { + gap: 0; + } +} + +.section_gifts__container__tabs__item { + color: var(--color--static-white); + padding: 12px 20px; + border-radius: 12px; + background: none; + + transition: 0.2s; +} + +.section_gifts__container__tabs__item.active { + background-color: var(--color--static-white-20); +} + +@media (hover: hover) { + .section_gifts__container__tabs__item:hover { + background-color: var(--color--static-white-20); + } +} + +.section_gifts__container__tabs__item.active { + cursor: default; +} + +@media all and (max-width: 380px) { + .section_gifts__container__tabs__item { + padding: 12px 8px; + } +} \ No newline at end of file diff --git a/christmas-shop/pages/home/gifts.json b/christmas-shop/pages/home/gifts.json new file mode 100644 index 0000000..2b610b2 --- /dev/null +++ b/christmas-shop/pages/home/gifts.json @@ -0,0 +1,46 @@ +[ + { + "name": "Console.log Guru", + "description": "Uses console.log like a crystal ball to find any issue.", + "category": "For Work", + "superpowers": { + "live": "+500", + "create": "+500", + "love": "+200", + "dream": "+400" + } + }, + { + "name": "Hydration Bot", + "description": "Drinks the recommended 2 liters of water a day like a health-programmed robot.", + "category": "For Health", + "superpowers": { + "live": "+500", + "create": "+300", + "love": "+500", + "dream": "+500" + } + }, + { + "name": "Merge Master", + "description": "Merges branches in Git without conflicts, like a wizard during an exam.", + "category": "For Work", + "superpowers": { + "live": "+200", + "create": "+500", + "love": "+200", + "dream": "+300" + } + }, + { + "name": "Spontaneous Coding Philosopher", + "description": "Philosophically accepts any client suggestion after a long refactor.", + "category": "For Harmony", + "superpowers": { + "live": "+300", + "create": "+200", + "love": "+500", + "dream": "+400" + } + } +] diff --git a/christmas-shop/pages/home/index.html b/christmas-shop/pages/home/index.html new file mode 100644 index 0000000..398a344 --- /dev/null +++ b/christmas-shop/pages/home/index.html @@ -0,0 +1,221 @@ + + + + + + + Home + + + + + + +
+
+ + + The Gifts + + + + + + +
+
+ + +
+
+ Merry Christmas +

Gift yourself the magic of new possibilities

+ Explore Magical Gifts + and Happy New Year +
+
+ + + +
+
+
+
+ About +

Unleash your inner superhero!

+

This New Year marks the beginning of your journey to inner harmony and new strengths. We offer unique gifts + that will help you improve your life.

+
+
+
+
+
+ + +
+
+ +
+ Become Happier! +

in the new 2025

+
+ +
+ live + snowman + create + christmas trees + love + christmas tree ball +
+ +
+
+ + +
+
+
+
+ + +
+
+
+ Best Gifts +

especially for you

+
+ +
+
+
+ + +
+
+

Ready to start your journey to a better version of yourself?

+ Explore Magical Gifts + +
+ The New Year is Coming Soon... +
+
+

47

+

days

+
+
+

5

+

hours

+
+
+

34

+

minutes

+
+
+

12

+

seconds

+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/christmas-shop/pages/home/script.js b/christmas-shop/pages/home/script.js new file mode 100644 index 0000000..96b0b0b --- /dev/null +++ b/christmas-shop/pages/home/script.js @@ -0,0 +1,9 @@ +import { initialRenderGifts } from "./../../scripts/gifts.js"; + +let gifts = []; + +fetch("./gifts.json").then(async (resp) => { + gifts = JSON.parse(await resp.text()); + + initialRenderGifts({ gifts }); +}); diff --git a/christmas-shop/pages/home/styles.css b/christmas-shop/pages/home/styles.css new file mode 100644 index 0000000..b6b778e --- /dev/null +++ b/christmas-shop/pages/home/styles.css @@ -0,0 +1,236 @@ +@import url(../../styles/global.css); +@import url(../../styles/header.css); +@import url(../../styles/footer.css); +@import url(../../styles/gift-cards.css); + +section { + background-color: var(--color--primary); + background-image: url(../../assets/images/bg-snow.png); + background-position: center; + background-size: cover; +} + +section:first-of-type { + background-image: url(../../assets/images/bg-snow.png), url(../../assets/images/bg-ball.png); + + border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); +} + +section:last-of-type { + background-image: url(../../assets/images/bg-snow.png), url(../../assets/images/bg-forest.png); + + border-bottom-left-radius: var(--border-radius-default); + border-bottom-right-radius: var(--border-radius-default); +} + +/* ? SECTION HERO */ +.section_hero { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.section_hero__container { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + + padding: 60px 0; + color: var(--color--static-white); + text-align: center; + max-width: calc(var(--box-small-width) + 3px); +} + +/* ? SECTION ABOUT */ +.section_about__container { + background-color: var(--color--static-white); + + border-radius: var(--border-radius-default); + + display: flex; +} + +@media all and (max-width: 600px) { + .section_about__container { + flex-direction: column; + } +} + +.section_about__container .typography--caption { + color: var(--color--primary); +} + +.section_about__container>* { + width: 50%; +} + +.section_about__container>*:first-child { + padding: 100px 60px; +} + + +@media all and (max-width: 786px) { + .section_about__container>*:first-child { + padding-top: 46px; + padding-bottom: 46px; + } +} + +@media all and (max-width: 600px) { + .section_about__container>* { + width: auto; + } +} + +@media all and (max-width: 380px) { + .section_about__container>* { + width: auto; + } + + .section_about__container>*:first-child { + padding: 0 20px; + } +} + + +.section_about__container>*:last-child { + border-radius: var(--border-radius-default); + + background-image: url(../../assets/images/santa.png); + background-position: center; + background-size: cover; + + min-height: 528px; +} + +.section_about__info { + padding: 60px 0; + max-width: var(--box-small-width); + + display: flex; + flex-direction: column; + gap: 20px; +} + +/* ? SECIONT SLIDER */ + +.section_slider { + color: var(--color--static-white); +} + +.section_slider__container { + display: flex; + flex-direction: column; + gap: 20px; +} + +.section_slider__container__header { + margin: 0 auto; + text-align: center; + + display: flex; + flex-direction: column; + gap: 12px; +} + +.section_slider__container__main { + display: flex; + align-items: center; + gap: 20px; +} + +.section_slider__container__main>img { + width: 200px; + height: 200px; + border-radius: var(--border-radius-default); +} + +.section_slider__container__footer { + display: flex; + justify-content: end; +} + +.section_slider__container__footer__controllers { + display: flex; + gap: 20px; +} + + +/* ? SECIONT BEST GIFTS */ + +.section_best_gifts { + color: var(--color--static-white); +} + +.section_best_gifts__container { + display: flex; + flex-direction: column; + gap: 20px; +} + +.section_best_gifts__container__header { + margin: 0 auto; + text-align: center; + + display: flex; + flex-direction: column; + gap: 12px; +} + + +/* ? SECTION CTA */ +.section_cta { + color: var(--color--static-white); +} + +.section_cta__container { + max-width: var(--box-small-width); + text-align: center; + + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + padding: 120px 0; +} + +.section_cta__container__block_remains { + display: flex; + flex-direction: column; + gap: 8px; +} + +/* ? TIMER */ + +.box__timer { + background-color: var(--color--static-white-40); + border-radius: var(--border-radius-default); + padding: 8px 12px 12px; + + display: flex; +} + +.box__timer__time_block { + width: 80px; + text-align: center; + position: relative; +} + +.box__timer__time_block::after { + content: ''; + display: block; + position: absolute; + top: 50%; + right: 0; + width: 1px; + transform: translateY(-50%); + height: 20px; + background-color: var(--color--static-white-40); +} + +.box__timer__time_block:last-of-type:after { + display: none; +} \ No newline at end of file diff --git a/christmas-shop/scripts/gifts.js b/christmas-shop/scripts/gifts.js new file mode 100644 index 0000000..6cabf68 --- /dev/null +++ b/christmas-shop/scripts/gifts.js @@ -0,0 +1,102 @@ +const categories = { + "For Work": { + tagClass: "color-tag--purple", + imageAbsolutPath: "/assets/images/gift-for-work.png", + }, + "For Health": { + tagClass: "color-tag--green", + imageAbsolutPath: "/assets/images/gift-for-health.png", + }, + "For Harmony": { + tagClass: "color-tag--pink", + imageAbsolutPath: "/assets/images/gift-for-harmony.png", + }, +}; + +const getGiftCategoryProps = (category) => { + return ( + categories[category] ?? { + tagClass: "", + imageAbsolutPath: "", + } + ); +}; + +/** + * @param {*} param0 + * + * @returns html div element with childs + * ```html + *
+ * gift for work + *
+ *

For work

+ *

Console.log Guru

+ *
+ *
+ * ``` + */ +export const createHtmlComponentGift = ({ category, title, pathToRootDir }) => { + if (!pathToRootDir) throw new Error("pathToRootDir is undefined"); + if (!category) throw new Error("category is undefined"); + + const categoryProps = getGiftCategoryProps(category); + if (!categoryProps) throw new Error("categoryProps is undefined"); + + const gift = document.createElement("div"); + gift.classList.add("gift_card"); + + const img = document.createElement("img"); + img.classList.add("gift_card__image"); + img.src = `${pathToRootDir}${categoryProps.imageAbsolutPath}`; + img.alt = category; + + const giftContent = document.createElement("div"); + giftContent.classList.add("gift_card__content"); + + const h4 = document.createElement("h4"); + h4.classList.add(categoryProps.tagClass); + h4.innerText = category; + + const h3 = document.createElement("h3"); + h3.innerText = title; + + // ? Combine components + gift.appendChild(img); + gift.appendChild(giftContent); + giftContent.appendChild(h4); + giftContent.appendChild(h3); + + return gift; +}; + +export const createHtmlComponentGifts = ({ gifts, pathToRootDir }) => { + if (!gifts) throw new Error("gifts is undefined"); + if (!pathToRootDir) throw new Error("pathToRootDir is undefined"); + + const giftsEl = document.createElement("div"); + giftsEl.classList.add("gift_cards"); + + for (let i = 0; i < gifts.length; i++) { + const gift = gifts[i]; + const giftEl = createHtmlComponentGift({ + category: gift.category, + title: gift.name, + pathToRootDir, + }); + + giftsEl.appendChild(giftEl); + } + + return giftsEl; +}; + +export const initialRenderGifts = ({ gifts }) => { + const replaceEl = document.getElementById("replace-gifts"); + const giftsComponent = createHtmlComponentGifts({ + gifts: gifts, + pathToRootDir: "../..", + }); + + replaceEl.replaceWith(giftsComponent); +}; diff --git a/christmas-shop/styles/footer.css b/christmas-shop/styles/footer.css new file mode 100644 index 0000000..5c41d69 --- /dev/null +++ b/christmas-shop/styles/footer.css @@ -0,0 +1,94 @@ +@import url(global.css); + +footer { + padding: 60px 8px; + overflow: hidden; + max-width: var(--section-width-max); + margin: 0 auto; +} + +.footer__container { + display: flex; + flex-direction: column; + gap: 60px; +} + +.footer__container__contacts { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +@media all and (max-width: 768px) { + .footer__container__contacts { + flex-direction: column; + } +} + +.footer__container__contacts__card { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + flex: 1; + + text-align: center; + + padding: 20px; + border-radius: var(--border-radius-default); + + background-color: var(--color--content-background); + + line-break: anywhere; + + cursor: pointer; +} + +.footer__container__contacts__card * { + transition: 0.2s; +} + +@media (hover: hover) { + .footer__container__contacts__card:hover * { + color: var(--color--primary); + } +} + +.footer__container__contacts__card__icon { + width: 80px; + height: 80px; +} + +.footer__container__footer { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + + text-align: center; +} + +.footer__container__footer__social_links { + display: flex; + gap: 12px; +} + +.footer__container__footer__social_link { + padding: 8px; + color: var(--color--dark); +} + +.footer__container__footer__social_link>svg { + width: 24px; + height: 24px; +} + +@media (hover: hover) { + .footer__container__footer__social_link:hover { + color: var(--color--primary); + } + + .footer__container__footer__made_by:hover { + color: var(--color--primary); + } +} \ No newline at end of file diff --git a/christmas-shop/styles/gift-cards.css b/christmas-shop/styles/gift-cards.css new file mode 100644 index 0000000..0bca9cc --- /dev/null +++ b/christmas-shop/styles/gift-cards.css @@ -0,0 +1,51 @@ +.gift_cards { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 12px; +} + +.gift_card { + border-radius: var(--border-radius-default); + width: 310px; + height: 342px; + overflow: hidden; + + background-color: var(--color--content-background); + + display: flex; + flex-direction: column; + + color: var(--color--dark); + + transition: 0.2s; + cursor: pointer; +} + +.gift_card * { + transition: 0.2s; +} + +@media (hover: hover) { + .gift_card:hover h3 { + color: var(--color--primary); + } +} + +.gift_card__image { + width: 310px; + height: 230px; +} + +.gift_card__content { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; + + border-radius: var(--border-radius-default); + + padding: 20px; + + background-color: var(--color--static-white); +} \ No newline at end of file diff --git a/christmas-shop/styles/global.css b/christmas-shop/styles/global.css new file mode 100644 index 0000000..5e88571 --- /dev/null +++ b/christmas-shop/styles/global.css @@ -0,0 +1,255 @@ +@import url('https://fonts.googleapis.com/css2?family=Allura&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + + +:root { + --section-width-max: 1440px; + --container-width-max: 1276px; + --box-small-width: 426px; + + --color--primary: #FF4646; + --color--primary-10: #FF46461A; + --color--dark: #181C29; + --color--static-white: #fff; + --color--static-white-40: #FFFFFF66; + --color--static-white-20: #FFFFFF33; + --color--tag-purple: #4361FF; + --color--tag-pink: #FF43F7; + --color--tag-green: #06A44F; + --color--content-background: #ECF3F8; + --color--overlay: #181C29CC; + + + --border-radius-default: 20px; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + color: var(--color--dark); + + background-color: var(--color--static-white); +} + +nav * { + list-style: none; +} + +img, +svg { + display: block; +} + +/* ? Text Styles */ + +h1, +h2, +h3, +h4, +h5, +h6, +p, +span, +button, +a { + font-family: Montserrat; + text-underline-position: from-font; + text-decoration-skip-ink: none; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 600; + text-transform: uppercase; +} + +h1 { + font-size: 32px; + line-height: 48px; + letter-spacing: 0.18em; +} + +h2 { + font-size: 24px; + font-weight: 600; + line-height: 36.48px; + letter-spacing: 0.16em; + +} + +h3 { + font-size: 16px; + font-weight: 600; + line-height: 24.32px; + letter-spacing: 0.08em; +} + +h4 { + font-size: 12px; + font-weight: 600; + line-height: 15.6px; + letter-spacing: 0.05em; +} + +p { + font-size: 16px; + font-weight: 400; + line-height: 23.68px; +} + +.typography--action-large { + font-family: Montserrat; + font-size: 24px; + font-weight: 600; + line-height: 36.48px; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.typography--action-small { + font-family: Montserrat; + font-size: 12px; + font-weight: 600; + line-height: 15.6px; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.typography--caption { + font-family: Allura; + font-size: 24px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.05em; +} + +.typography--slider-text { + font-family: Montserrat; + font-size: 80px; + font-weight: 600; + line-height: 97.52px; + letter-spacing: 0.0038em; + text-transform: uppercase; +} + +a { + text-decoration: none; + color: inherit; + transition: 0.2s; +} + +.color-tag--purple { + color: var(--color--tag-purple); +} + +.color-tag--green { + color: var(--color--tag-green); +} + +.color-tag--pink { + color: var(--color--tag-pink); +} + +/* Button Styles */ +button { + border: none; + cursor: pointer; + + transition: all 0.2s; +} + +button:disabled, +button[disabled] { + cursor: not-allowed; +} + +/* BUTTON PRIMARY */ +.button--primary { + border-radius: var(--border-radius-default); + background-color: var(--color--dark); + padding: 20px 32px; + color: var(--color--static-white); +} + +@media (hover: hover) { + .button--primary:hover { + background-color: var(--color--static-white); + color: var(--color--dark); + } +} + + +/* BUTTON SLIDER */ +.button--slider-arrow { + background: none; + border: 1px solid var(--color--static-white); + border-radius: var(--border-radius-default); + color: var(--color--static-white); + + padding: 16px; +} + +.button--slider-arrow>svg { + width: 22px; + height: 22px; +} + +@media (hover: hover) { + + .button--slider-arrow:hover { + background: var(--color--static-white); + color: var(--color--primary); + } +} + +.button--slider-arrow:disabled, +.button--slider-arrow[disabled] { + opacity: 0.4; +} + +@media (hover: hover) { + + .button--slider-arrow:disabled:hover, + .button--slider-arrow[disabled]:hover { + background: none; + color: var(--color--static-white); + } +} + + +/* BUTTON BACK TO TOP */ + +.button--back-to-top { + border: 1px solid var(--color--primary); + border-radius: 100%; + padding: 22px; + background-color: var(--color--static-white); +} + + +/* SECTIONS */ +section { + padding: 60px 8px; + overflow: hidden; + max-width: var(--section-width-max); + margin: 0 auto; +} + +header>*, +section>*, +footer>* { + max-width: var(--container-width-max); + width: 100%; + margin: 0 auto; +} \ No newline at end of file diff --git a/christmas-shop/styles/header.css b/christmas-shop/styles/header.css new file mode 100644 index 0000000..8c4e0a8 --- /dev/null +++ b/christmas-shop/styles/header.css @@ -0,0 +1,128 @@ +@import url(global.css); + +header { + padding: 0 8px; + overflow: hidden; + max-width: var(--section-width-max); + margin: 0 auto; +} + +.header__container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + + padding: 12px 0; +} + +.header__container__company { + padding: 8px 20px; + + display: flex; + align-items: center; + gap: 8px; +} + +.header__container__company__logo { + height: 24px; + width: 24px; +} + +.header__container__nav { + flex: 1; +} + +@media all and (max-width: 768px) { + .header__container__nav { + display: none; + } +} + + +.header__container__nav ul { + display: flex; + justify-content: end; + gap: 8px; +} + +.header__menu__button { + text-transform: uppercase; + padding: 12px 20px; + border-radius: 12px; + + transition: 0.2s; +} + +.header__menu__button.active { + color: var(--color--primary); + background-color: var(--color--primary-10); +} + +@media (hover: hover) { + .header__menu__button:hover { + color: var(--color--primary); + background-color: var(--color--primary-10); + } +} + +.header__menu__button.active { + cursor: default; +} + + + +.header__container__burger_button { + display: none; +} + +@media all and (max-width: 768px) { + + /* TODO: add class "active" to change state */ + .header__container__burger_button { + display: block; + position: relative; + width: 40px; + height: 40px; + background: none; + } + + .header__container__burger_button::before, + .header__container__burger_button::after { + display: block; + content: ''; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 50%); + + width: 20px; + height: 1px; + border-radius: 0.5px; + background-color: var(--color--dark); + + transition: 0.5s; + } + + .header__container__burger_button::before { + top: calc(50% - 5px); + } + + .header__container__burger_button::after { + top: calc(50% + 4px); + } + + .header__container__burger_button.active::before, + .header__container__burger_button.active::after { + top: 50%; + } + + .header__container__burger_button.active::before { + transform: translate(-50%, 50%) rotate(45deg); + } + + .header__container__burger_button.active::after { + transform: translate(-50%, 50%) rotate(-45deg); + } +} \ No newline at end of file