diff --git a/README.md b/README.md index a15b0ecb9..5c39a755d 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# js-project-business-site \ No newline at end of file +# snus-business-site diff --git a/img/49acad3f-svenskarnas-favoritsnus-2018.jpg b/img/49acad3f-svenskarnas-favoritsnus-2018.jpg new file mode 100644 index 000000000..107dc1616 Binary files /dev/null and b/img/49acad3f-svenskarnas-favoritsnus-2018.jpg differ diff --git a/img/90951266-e7f5-4dd0-8975-d85cb8321b4e.avif b/img/90951266-e7f5-4dd0-8975-d85cb8321b4e.avif new file mode 100644 index 000000000..ac00e1588 Binary files /dev/null and b/img/90951266-e7f5-4dd0-8975-d85cb8321b4e.avif differ diff --git a/img/Fruity Flavors.jpg b/img/Fruity Flavors.jpg new file mode 100644 index 000000000..93ffab7ff Binary files /dev/null and b/img/Fruity Flavors.jpg differ diff --git a/img/Mint & Fresh.jpg b/img/Mint & Fresh.jpg new file mode 100644 index 000000000..f1a692742 Binary files /dev/null and b/img/Mint & Fresh.jpg differ diff --git a/img/Tobacco-free Nicotine Pouches.jpg b/img/Tobacco-free Nicotine Pouches.jpg new file mode 100644 index 000000000..23f995910 Binary files /dev/null and b/img/Tobacco-free Nicotine Pouches.jpg differ diff --git a/img/mintfresh.jpg b/img/mintfresh.jpg new file mode 100644 index 000000000..a8e1ea5a5 Binary files /dev/null and b/img/mintfresh.jpg differ diff --git a/img/vitt-snus.jpg b/img/vitt-snus.jpg new file mode 100644 index 000000000..ce9d27bc6 Binary files /dev/null and b/img/vitt-snus.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..bc6b473f8 --- /dev/null +++ b/index.html @@ -0,0 +1,322 @@ + + + + + + Project Snus + + + + + +
+
+ Elvis Snus + + + + + + +
+
+ + +
+
+

Elvis Snus Fabrik

+

We have all the flavors

+ Buy now +
+
+ +
+ +
+
+
+

+ Welcome to Elvis Snus. Your trusted source for high-quality snus. +

+

+ At Elvis Snus, we are passionate about snus and the culture + surrounding it. Our goal is to provide high-quality products, + reliable service, and clear information so that both new and + experienced users can enjoy snus with confidence. . +

+
+ +
+
+

Crafted for taste

+

+ We believe in quality, transparency, and customer care +

+
    +
  • + Whether you’re looking for classic flavors, modern nicotine + pouches, or simply want to learn more about snus, we are here + to guide you every step of the way. +
    • +
+
+
+ +
+
+
+
+ + +
+
+
+

Service

+

+ Wide selection of snus products from leading brands. Fast and + secure shipping across Sweden and Europe. Subscription service for + regular deliveries. Customer support to help you choose the right + product. +

+
+ +
+
+
+ snus picture +
+
+

Classic Tobacco

+

+ We offer a wide range of snus products from both classic and + modern brands. Whether you prefer traditional loose snus, + portion snus, or tobacco-free alternatives, you’ll find the + perfect fit for your taste and lifestyle. +

+
+
+ +
+
+ snus picture +
+
+

Mint & Fresh

+

+ Order today and get your snus delivered quickly and safely + right to your doorstep. Our packaging ensures freshness, and + we provide reliable shipping across Sweden and Europe. +

+
+
+ +
+
+ snus picture +
+
+

Fruity Flavors

+

+ Never run out of snus again! With our subscription service, + you can choose your favorite products and have them delivered + automatically at intervals that suit you — simple, flexible, + and hassle-free. +

+
+
+ +
+
+ snus picture +
+
+

Tobacco-free Nicotine Pouches

+

+ Not sure which snus is right for you? Our team is here to help + with expert advice, product recommendations, and customer + support to make your shopping experience smooth and easy. +

+
+
+
+
+
+ + + +
+
+

Get Started

+

+ Have a question about our snus, shipping options, or subscription + plans? Fill out the form and we’ll get back to you quickly with the + answers you need. +

+
+ +
+ +
+
+ + +
+
+ + +
+
+ + + +
+ Preferred order type +
+ + + +
+
+ + +
+ I'm interested in +
+ + + + +
+
+ + + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ +
+ +
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 000000000..f2b82803e --- /dev/null +++ b/script.js @@ -0,0 +1,18 @@ +// Grab elements +const header = document.querySelector(".header"); +const toggle = document.querySelector(".header__toggle"); +const nav = document.querySelector(".header__nav"); + +// Toggle menu on button click +toggle.addEventListener("click", () => { + const isOpen = header.classList.toggle("header--open"); + toggle.setAttribute("aria-expanded", String(isOpen)); +}); + +// Close menu when a link is clicked (on mobile) +nav.addEventListener("click", (e) => { + if (e.target.matches(".header__nav-link")) { + header.classList.remove("header--open"); + toggle.setAttribute("aria-expanded", "false"); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 000000000..563810e65 --- /dev/null +++ b/style.css @@ -0,0 +1,416 @@ +/* Reset/Defaults */ +*, +*::before, +*::after { + box-sizing: border-box; +} +#about, +#project__grid, +#hero__section { + scroll-margin-top: 90px; +} + +body { + margin: 0; + font-family: system-ui, sans-serif; + background: #192939; + color: white; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: 1rem; +} + +/* Header */ +.header { + position: sticky; + top: 0; + z-index: 10; + background: #192939; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.header__inner { + display: flex; /* Flexbox to align brand & nav */ + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} + +/* Brand/Logo */ +.header__brand { + font-size: 1.25rem; + font-weight: bold; + text-decoration: none; + color: #f9fafb; +} + +/* Nav (hidden by default on mobile) */ +.header__nav { + display: none; +} + +/* Show nav on desktop (≥1024px) */ +@media (min-width: 1024px) { + .header__nav { + display: block; + } +} + +.header__nav-list { + list-style: none; + display: flex; + gap: 2rem; + margin: 0; + padding: 0; +} + +.header__nav-link { + text-decoration: none; + color: #71869e; + font-weight: 500; + transition: color 0.2s ease, transform 0.2s ease; +} + +.header__nav-link:hover { + color: white; + transform: translateY(-2px); +} + +/* Hamburger menu*/ + +/* Screen reader only text (hidden visually but accessible) */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* === Hamburger toggle button === */ +.header__toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border: 1px solid rgba(255, 255, 255, 0.25); + background: transparent; + border-radius: 10px; + cursor: pointer; +} + +.header__toggle-box { + position: relative; + width: 22px; + height: 16px; +} + +.header__toggle-line { + position: absolute; + left: 0; + right: 0; + height: 2px; + background: #f9fafb; + border-radius: 2px; + transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease; +} + +.header__toggle-line:nth-child(1) { + top: 0; +} +.header__toggle-line:nth-child(2) { + top: 7px; +} +.header__toggle-line:nth-child(3) { + top: 14px; +} + +/* === Mobile nav: hidden by default === */ +.header__nav { + display: none; + position: fixed; + top: 64px; /* push under header */ + left: 0; + right: 0; + bottom: 0; + background: #192939; + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding: 1rem; +} + +.header__nav-list { + list-style: none; + display: grid; + gap: 1rem; + margin: 0; + padding: 0; +} + +.header__nav-link { + text-decoration: none; + color: #71869e; + font-weight: 500; + transition: color 0.2s ease; +} + +.header__nav-link:hover { + color: #fff; +} + +/* === When open: show nav & animate burger into X === */ +.header--open .header__nav { + display: block; +} + +.header--open .header__toggle-line:nth-child(1) { + top: 7px; + transform: rotate(45deg); +} +.header--open .header__toggle-line:nth-child(2) { + opacity: 0; +} +.header--open .header__toggle-line:nth-child(3) { + top: 7px; + transform: rotate(-45deg); +} + +/* === Desktop view: nav always visible, burger hidden === */ +@media (min-width: 1024px) { + .header__toggle { + display: none; + } + + .header__nav { + display: block; + position: static; + padding: 0; + background: transparent; + border: none; + } + + .header__nav-list { + display: flex; + gap: 2rem; + } +} + +/*Hero*/ + +.hero { + background: url("img/vitt-snus.jpg") center/cover no-repeat; + height: 50rem; + + display: flex; /* FLEXBOX */ + align-items: center; + justify-content: center; + text-align: center; + color: white; + padding: 1rem; +} + +.hero__content { + max-width: 600px; +} + +.hero__title { + font-size: clamp(1.8rem, 5vw, 3rem); + margin-bottom: 1rem; +} + +.hero__subtitle { + font-size: clamp(1rem, 3vw, 1.5rem); + margin-bottom: 2rem; +} + +.hero__btn { + padding: 0.75rem 1.5rem; + border: none; + background: #192939; + color: white; + font-weight: bold; + border-radius: 6px; + cursor: pointer; +} + +.hero__btn:hover { + font-size: 1rem; + background: #2d4965; +} + +/* Section*/ + +.section { + padding: 70px 0; +} + +.section__header { + display: grid; + gap: 0.5rem; + margin-bottom: 1.2rem; +} + +.section__title { + font-size: 2.4rem; + margin: 0; +} + +.section__subtitle { + color: rgb(191, 189, 189); + max-width: 50rem; +} + +/*About*/ + +.about { + display: grid; + gap: 0.4rem; + grid-template-columns: 1fr; +} + +@media (min-width: 768px) { + .about { + grid-template-columns: 1.2fr 1fr; + align-items: center; + } +} + +.about-card { + background: #2d4965; + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 20px; + padding: 2rem; +} +@media (min-width: 768px) { + .about-card { + padding: 3rem; + } +} + +.about__media { + border-radius: 20px; + overflow: hidden; + box-shadow: inset; +} + +.about__img { + max-width: 100%; +} + +/* Service grid */ + +.section__article { + padding: 70px 0; +} + +.cards { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); +} + +.card { + border: 1px solid #28415b; + border-radius: 2rem; + display: flex; + flex-direction: column; + background: #2d4965; +} + +.card__media { + aspect-ratio: 16/9; + overflow: hidden; + border-top-left-radius: 2rem; + border-top-right-radius: 2rem; +} + +.card__media img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + display: block; +} + +.card__body { + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.card__title { + font-weight: 700; + margin: 0; +} + +.card__text { + color: white; +} + +.card__img { + width: 120px; +} + +/* forms */ + +.form { + background: #2d4965; + border: 1px solid #28415b; + border-radius: 20px; + padding: 1.2rem; + display: grid; + gap: 1rem; +} + +.form__row { + display: grid; + gap: 0.6rem; +} + +.form__label { + font-weight: 600; +} + +.form__control { + width: 100%; + padding: 1rem 1rem; + border-radius: 20px; + border: 2px solid #28415b; +} + +.form__choices { + display: flex; + gap: 1rem; +} + +.form__actions { + display: flex; + gap: 10rem; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +/* footer */ + +.footer { + margin-top: 3rem; + border-top: 1px solid #28415b; +} + +.footer__inner { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2rem 0; + flex-wrap: wrap; +}