diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..a0b3795 --- /dev/null +++ b/Readme.md @@ -0,0 +1,81 @@ +# Essential Stuff + +## Html import links + +Google font + +``` html + + + +``` + +Ionicon + +``` html + + +``` + +--- + +## Colors + +``` css +--united-nations-blue: hsl(214, 56%, 58%); +--bright-navy-blue: hsl(214, 57%, 51%); +--spanish-gray: hsl(0, 0%, 60%); +--black-coral: hsl(225, 8%, 42%); +--oxford-blue: hsl(208, 97%, 12%); +--yale-blue: hsl(214, 72%, 33%); +--blue-ncs: hsl(197, 100%, 36%); +--gunmetal: hsl(206, 34%, 20%); +--gainsboro: hsl(0, 0%, 88%); +--cultured: hsl(0, 0%, 98%); +--white: hsl(0, 0%, 100%); +--black: hsl(0, 0%, 0%); +--onyx: hsl(0, 0%, 25%); +--jet: hsl(0, 0%, 20%); +``` + +## Typography + +``` css +--ff-poppins: "Poppins", sans-serif; +--ff-montserrat: "Montserrat", sans-serif; + +--fs-1: calc(20px + 3.5vw); +--fs-2: calc(18px + 1.6vw); +--fs-3: calc(16px + 0.45vw); +--fs-4: 15px; +--fs-5: 14px; +--fs-6: 13px; +--fs-7: 12px; +--fs-8: 11px; + +--fw-500: 500; +--fw-600: 600; +--fw-700: 700; +--fw-800: 800; +``` + +## Transition + +``` css +--transition: 0.25s ease-in-out; +``` + +## Spacing + +``` css +--section-padding: 60px; +``` + +## Border radius + +``` css +--radius-15: 15px; +--radius-25: 25px; +``` diff --git a/air.png b/air.png new file mode 100644 index 0000000..7a36544 Binary files /dev/null and b/air.png differ diff --git a/air2.png b/air2.png new file mode 100644 index 0000000..a4896b3 Binary files /dev/null and b/air2.png differ diff --git a/app.js b/app.js new file mode 100644 index 0000000..7ff9fc6 --- /dev/null +++ b/app.js @@ -0,0 +1,174 @@ +const wrapper = document.querySelector(".sliderWrapper"); +const menuItems = document.querySelectorAll(".menuItem"); + +const products = [ + { + id: 1, + title: "Nike", + price: 2500, + colors: [ + { + code: "black", + img: "./img/air.png", + }, + { + code: "darkblue", + img: "./img/air2.png", + }, + ], + }, + { + id: 2, + title: "Air Jordan", + price: 5000, + colors: [ + { + code: "lightgray", + img: "./img/jordan.png", + }, + { + code: "green", + img: "./img/jordan2.png", + }, + ], + }, + { + id: 3, + title: "Blazer", + price: 900, + colors: [ + { + code: "lightgray", + img: "./img/blazer.png", + }, + { + code: "green", + img: "./img/blazer2.png", + }, + ], + }, + { + id: 4, + title: "Crater", + price: 760, + colors: [ + { + code: "black", + img: "./img/crater.png", + }, + { + code: "lightgray", + img: "./img/crater2.png", + }, + ], + }, + { + id: 5, + title: "Athletic", + price: 500, + colors: [ + { + code: "gray", + img: "./img/hippie.png", + }, + { + code: "black", + img: "./img/hippie2.png", + }, + ], + }, +]; + +let choosenProduct = products[0]; + +const currentProductImg = document.querySelector(".productImg"); +const currentProductTitle = document.querySelector(".productTitle"); +const currentProductPrice = document.querySelector(".productPrice"); +const currentProductColors = document.querySelectorAll(".color"); +const currentProductSizes = document.querySelectorAll(".size"); + +menuItems.forEach((item, index) => { + item.addEventListener("click", () => { + //change the current slide + wrapper.style.transform = `translateX(${-100 * index}vw)`; + + //change the choosen product + choosenProduct = products[index]; + + //change texts of currentProduct + currentProductTitle.textContent = choosenProduct.title; + currentProductPrice.textContent = "$" + choosenProduct.price; + currentProductImg.src = choosenProduct.colors[0].img; + + //assing new colors + currentProductColors.forEach((color, index) => { + color.style.backgroundColor = choosenProduct.colors[index].code; + }); + }); +}); + +currentProductColors.forEach((color, index) => { + color.addEventListener("click", () => { + currentProductImg.src = choosenProduct.colors[index].img; + }); +}); + +currentProductSizes.forEach((size, index) => { + size.addEventListener("click", () => { + currentProductSizes.forEach((size) => { + size.style.backgroundColor = "white"; + size.style.color = "black"; + }); + size.style.backgroundColor = "black"; + size.style.color = "white"; + }); +}); + +const productButton = document.querySelector(".productButton"); +const payment = document.querySelector(".payment"); +const close = document.querySelector(".close"); + +productButton.addEventListener("click", () => { + payment.style.display = "flex"; +}); + +close.addEventListener("click", () => { + payment.style.display = "none"; +}); + +// Sample array of products +const product = [ + { id: 1, name: 'Nike', category: 'Shoes' }, + { id: 2, name: 'JORDAN', category: 'Shoes' }, + { id: 3, name: 'BLAZER', category: 'Shoes' }, + { id: 4, name: 'CRATER', category: 'Shoes' }, + { id: 5, name: 'ATHLETIC', category: 'Shoes' }, + // Add more products as needed + ]; + + // Function to perform search + function search() { + const searchTerm = document.getElementById('searchInput').value.toLowerCase(); + const searchResults = products.filter(product => { + return product.name.toLowerCase().includes(searchTerm) || product.category.toLowerCase().includes(searchTerm); + }); + + displayResults(searchResults); + } + + // Function to display search results + function displayResults(results) { + const searchResultsDiv = document.getElementById('searchResults'); + searchResultsDiv.innerHTML = ''; + + if (results.length === 0) { + searchResultsDiv.innerHTML = '

No results found.

'; + } else { + results.forEach(result => { + const resultDiv = document.createElement('div'); + resultDiv.innerHTML = `

${result.name} - ${result.category}

`; + searchResultsDiv.appendChild(resultDiv); + }); + } + } + \ No newline at end of file diff --git a/blazer.png b/blazer.png new file mode 100644 index 0000000..2248038 Binary files /dev/null and b/blazer.png differ diff --git a/blazer2.png b/blazer2.png new file mode 100644 index 0000000..22ae2fc Binary files /dev/null and b/blazer2.png differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..0c87b86 --- /dev/null +++ b/contact.html @@ -0,0 +1,284 @@ + + + + + + Responsive Contact Us Page + + + + + +
+ +
+
+

Contact Us

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+
+
+ +
+
+ +
+
+
+ +
+ +
+

Address

+

4671 Sugar Camp Road,
Owatonna, Minnesota,
55060

+
+
+ +
+
+ +
+ +
+

Phone

+

571-457-2321

+
+
+ +
+
+ +
+ +
+

Email

+

ntamerrwael@mfano.ga

+
+
+
+ +
+
+

Send Message

+
+ + Full Name +
+ +
+ + Email +
+ +
+ + Type your Message... +
+ +
+ +
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/contact.png b/contact.png new file mode 100644 index 0000000..9a7cb76 Binary files /dev/null and b/contact.png differ diff --git a/crater.png b/crater.png new file mode 100644 index 0000000..27927de Binary files /dev/null and b/crater.png differ diff --git a/crater2.png b/crater2.png new file mode 100644 index 0000000..8c1d569 Binary files /dev/null and b/crater2.png differ diff --git a/desktop.png b/desktop.png new file mode 100644 index 0000000..da51512 Binary files /dev/null and b/desktop.png differ diff --git a/facebook.png b/facebook.png new file mode 100644 index 0000000..4d01316 Binary files /dev/null and b/facebook.png differ diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..dfacf7b --- /dev/null +++ b/favicon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/gallery-1.jpg b/gallery-1.jpg new file mode 100644 index 0000000..9a1b988 Binary files /dev/null and b/gallery-1.jpg differ diff --git a/gallery-2.jpg b/gallery-2.jpg new file mode 100644 index 0000000..f547c67 Binary files /dev/null and b/gallery-2.jpg differ diff --git a/gallery-3.jpg b/gallery-3.jpg new file mode 100644 index 0000000..a1193a1 Binary files /dev/null and b/gallery-3.jpg differ diff --git a/gallery-4.jpg b/gallery-4.jpg new file mode 100644 index 0000000..7c23ffa Binary files /dev/null and b/gallery-4.jpg differ diff --git a/gallery-5.jpg b/gallery-5.jpg new file mode 100644 index 0000000..884dc47 Binary files /dev/null and b/gallery-5.jpg differ diff --git a/gift.png b/gift.png new file mode 100644 index 0000000..b39d637 Binary files /dev/null and b/gift.png differ diff --git a/hero-banner.jpg b/hero-banner.jpg new file mode 100644 index 0000000..d9153c5 Binary files /dev/null and b/hero-banner.jpg differ diff --git a/hippie.png b/hippie.png new file mode 100644 index 0000000..bd81a11 Binary files /dev/null and b/hippie.png differ diff --git a/hippie2.png b/hippie2.png new file mode 100644 index 0000000..0a5d73b Binary files /dev/null and b/hippie2.png differ diff --git a/img8.jpg b/img8.jpg new file mode 100644 index 0000000..f5b3c7c Binary files /dev/null and b/img8.jpg differ diff --git a/img9.jpg b/img9.jpg new file mode 100644 index 0000000..1d078e7 Binary files /dev/null and b/img9.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9a19daa --- /dev/null +++ b/index.html @@ -0,0 +1,827 @@ + + + + + + + + Tourly - Travel agancy + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ +
+ +
+

For Further Inquires :

+ +

+01 (123) 4567 90

+
+ + + + + +
+ + + + + +
+ +
+
+ +
+
+ + + + + + + +
+
+ +
+ + + + + +
+
+ + + +
+
+ +

Journey to explore world

+ +

+ Embark on a journey to explore the world, where every step is a dance with the unknown and every horizon promises a new tale. + Feel the rhythm of distant lands beneath your feet and let the winds of curiosity guide your way. + Through bustling markets and serene landscapes, discover the kaleidoscope of cultures that paint the canvas of our planet +

+ +
+ + + +
+ +
+
+ + + + + + + +
+
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + + +
+ +
+
+ + + + + + + + + + + + + + + +
+
+ +

Popular Packeges

+ +

Checkout Our Packeges

+ +

+ We provide some good package. +

+ +
    + +
  • +
    + +
    + Experience The Great Holiday On Beach +
    + +
    + +

    Experience The Great Holiday On Beach

    + +

    + It is a canvas where the earth meets the sea in a dance of nature's elements. +

    + +
      + +
    • +
      + + +

      7D/6N

      +
      +
      • + +
    • +
      + + +

      pax: 10

      +
      +
      • + +
    • +
      + + +

      Malaysia

      +
      +
      • + +
    + +
    + +
    + +
    + +

    (25 reviews)

    + +
    + + + + + +
    + +
    + +

    + $750 + / per person +

    + + + +
    + +
    +
    • + +
  • +
    + +
    + Summer Holiday To The Oxolotan River +
    + +
    + +

    Summer Holiday To The Oxolotan River

    + +

    + It refers to a natural watercourse, usually freshwater, that flows towards an ocean, sea, lake, or another river. +

    + +
      + +
    • +
      + + +

      7D/6N

      +
      +
      • + +
    • +
      + + +

      pax: 10

      +
      +
      • + +
    • +
      + + +

      Malaysia

      +
      +
      • + +
    + +
    + +
    + +
    + +

    (20 reviews)

    + +
    + + + + + +
    + +
    + +

    + $520 + / per person +

    + + + +
    + +
    +
    • + +
  • +
    + +
    + Santorini Island's Weekend Vacation +
    + +
    + +

    Santorini Island's Weekend Vacation

    + +

    + A weekend vacation is a short getaway that typically lasts from Friday evening to Sunday night, + providing a brief break from routine life. +

    + +
      + +
    • +
      + + +

      7D/6N

      +
      +
      • + +
    • +
      + + +

      pax: 10

      +
      +
      • + +
    • +
      + + +

      Malaysia

      +
      +
      • + +
    + +
    + +
    + +
    + +

    (40 reviews)

    + +
    + + + + + +
    + +
    + +

    + $660 + / per person +

    + + + +
    + +
    +
    • + +
+ + + +
+
+ + + + + + + + + + + + + + + +
+
+ +
+

Call To Action

+ +

Ready For Unforgatable Travel. Remember Us!

+ +

+ we painted our journey across the canvas of the world, leaving footprints in the sands of time. + Each sunrise carried the promise of new adventures, and every sunset, a chapter etched in the tapestry of our traveler's soul. +

+
+ + + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..526116a --- /dev/null +++ b/index1.html @@ -0,0 +1,272 @@ + + + + + + + + + + + E-Commerce Store + + + Nike Store + + + + +
+
+
+ +
+

NIKE
NEW
SHOES

+

$2500

+ + + +
+
+ +
+

AIR JORDAN
NEW
SHOES

+

$5000

+ + + +
+
+ +
+

BLAZER
NEW
SEASON

+

$900

+ + + +
+
+ +
+

CRATER
NEW
SEASON

+

$760

+ + + +
+
+ +
+

ATHLETIC
NEW
SHOES

+

$500

+ + + +
+
+
+ +
+
+ + FREE SHIPPING + Free worldwide shipping on all orders. +
+
+ + 30 DAYS RETURN + No question return and easy refund in 14 days. +
+
+ + GIFT CARDS + Buy gift cards and use coupon codes easily. +
+
+ + CONTACT US! + Keep in touch via email and support system. +
+
+ +
+ +
+

NIKE

+

$2500

+

Your shoes can make or break an outfit and have a big impact on how you feel. + Your shoes convey a lot about your sense of style, and people are often judged by the nice shoes they + are wearing.

+
+
+
+
+
+
42
+
43
+
44
+
+ +
+
+

Personal Information

+ + + + + + +

Card Information

+
+ + +
+ +
+ + + +
+ + X +
+
+
+
+

Shoes are Boring. Wear Sneakers

+ +
+
+ +

Forever Faster!

+
+
+

Just Do it!

+ +
+
+
+
+ +
+
+

WINTER NEW ARRIVALS

+

New Season

+

New Collection

+ + + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/instagram.png b/instagram.png new file mode 100644 index 0000000..4c95b40 Binary files /dev/null and b/instagram.png differ diff --git a/jordan.png b/jordan.png new file mode 100644 index 0000000..fe4011f Binary files /dev/null and b/jordan.png differ diff --git a/jordan2.png b/jordan2.png new file mode 100644 index 0000000..88cc1c6 Binary files /dev/null and b/jordan2.png differ diff --git a/logo-blue.svg b/logo-blue.svg new file mode 100644 index 0000000..185a799 --- /dev/null +++ b/logo-blue.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..85365ea --- /dev/null +++ b/logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/master.png b/master.png new file mode 100644 index 0000000..19f7cd4 Binary files /dev/null and b/master.png differ diff --git a/packege-1.jpg b/packege-1.jpg new file mode 100644 index 0000000..92ae292 Binary files /dev/null and b/packege-1.jpg differ diff --git a/packege-2.jpg b/packege-2.jpg new file mode 100644 index 0000000..7c62312 Binary files /dev/null and b/packege-2.jpg differ diff --git a/packege-3.jpg b/packege-3.jpg new file mode 100644 index 0000000..7670d24 Binary files /dev/null and b/packege-3.jpg differ diff --git a/popular-1.jpg b/popular-1.jpg new file mode 100644 index 0000000..ddfafc2 Binary files /dev/null and b/popular-1.jpg differ diff --git a/popular-2.jpg b/popular-2.jpg new file mode 100644 index 0000000..0be9f08 Binary files /dev/null and b/popular-2.jpg differ diff --git a/popular-3.jpg b/popular-3.jpg new file mode 100644 index 0000000..b871a9e Binary files /dev/null and b/popular-3.jpg differ diff --git a/project-logo.png b/project-logo.png new file mode 100644 index 0000000..c06c370 Binary files /dev/null and b/project-logo.png differ diff --git a/return.png b/return.png new file mode 100644 index 0000000..c64de6a Binary files /dev/null and b/return.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..cfd7d31 --- /dev/null +++ b/script.js @@ -0,0 +1,46 @@ +'use strict'; + +/** + * navbar toggle + */ + +const overlay = document.querySelector("[data-overlay]"); +const navOpenBtn = document.querySelector("[data-nav-open-btn]"); +const navbar = document.querySelector("[data-navbar]"); +const navCloseBtn = document.querySelector("[data-nav-close-btn]"); +const navLinks = document.querySelectorAll("[data-nav-link]"); + +const navElemArr = [navOpenBtn, navCloseBtn, overlay]; + +const navToggleEvent = function (elem) { + for (let i = 0; i < elem.length; i++) { + elem[i].addEventListener("click", function () { + navbar.classList.toggle("active"); + overlay.classList.toggle("active"); + }); + } +} + +navToggleEvent(navElemArr); +navToggleEvent(navLinks); + + + +/** + * header sticky & go to top + */ + +const header = document.querySelector("[data-header]"); +const goTopBtn = document.querySelector("[data-go-top]"); + +window.addEventListener("scroll", function () { + + if (window.scrollY >= 200) { + header.classList.add("active"); + goTopBtn.classList.add("active"); + } else { + header.classList.remove("active"); + goTopBtn.classList.remove("active"); + } + +}); \ No newline at end of file diff --git a/search.png b/search.png new file mode 100644 index 0000000..3d03447 Binary files /dev/null and b/search.png differ diff --git a/shipping.png b/shipping.png new file mode 100644 index 0000000..144f303 Binary files /dev/null and b/shipping.png differ diff --git a/sneakers.png b/sneakers.png new file mode 100644 index 0000000..c243618 Binary files /dev/null and b/sneakers.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..6045fe5 --- /dev/null +++ b/style.css @@ -0,0 +1,1298 @@ +/*-----------------------------------*\ + * #style.css +\*-----------------------------------*/ + +/** + * copyright 2022 codewithsadee + */ + + + + + +/*-----------------------------------*\ + * #CUSTOM PROPERTY +\*-----------------------------------*/ + +:root { + + /** + * colors + */ + + --united-nations-blue: hsl(214, 56%, 58%); + --bright-navy-blue: hsl(214, 57%, 51%); + --spanish-gray: hsl(0, 0%, 60%); + --black-coral: hsl(225, 8%, 42%); + --oxford-blue: hsl(208, 97%, 12%); + --yale-blue: hsl(214, 72%, 33%); + --blue-ncs: hsl(197, 100%, 36%); + --gunmetal: hsl(206, 34%, 20%); + --gainsboro: hsl(0, 0%, 88%); + --cultured: hsl(0, 0%, 98%); + --white: hsl(0, 0%, 100%); + --black: hsl(0, 0%, 0%); + --onyx: hsl(0, 0%, 25%); + --jet: hsl(0, 0%, 20%); + + /** + * typography + */ + + --ff-poppins: "Poppins", sans-serif; + --ff-montserrat: "Montserrat", sans-serif; + + --fs-1: calc(20px + 3.5vw); + --fs-2: calc(18px + 1.6vw); + --fs-3: calc(16px + 0.45vw); + --fs-4: 15px; + --fs-5: 14px; + --fs-6: 13px; + --fs-7: 12px; + --fs-8: 11px; + + --fw-500: 500; + --fw-600: 600; + --fw-700: 700; + --fw-800: 800; + + /** + * transition + */ + + --transition: 0.25s ease-in-out; + + /** + * spacing + */ + + --section-padding: 60px; + + /** + * border-radius + */ + + --radius-15: 15px; + --radius-25: 25px; + +} + + + + + +/*-----------------------------------*\ + * #RESET +\*-----------------------------------*/ + +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +li { list-style: none; } + +a { text-decoration: none; } + +a, +img, +span, +input, +label, +button, +ion-icon { display: block; } + +input, +button { + background: none; + border: none; + font: inherit; +} + +button { cursor: pointer; } + +input { width: 100%; } + +ion-icon { pointer-events: none; } + +html { + font-family: var(--ff-poppins); + scroll-behavior: smooth; +} + +body { background: var(--white); } + + + + + +/*-----------------------------------*\ + * #REUSED STYLE +\*-----------------------------------*/ + +.container { padding-inline: 15px; } + +.btn { + color: var(--white); + text-transform: uppercase; + font-size: var(--fs-5); + border-radius: 100px; + padding: var(--padding, 8px 18px); + border: var(--border-width, 2px) solid transparent; + transition: var(--transition); +} + +.btn-primary { + background: var(--bright-navy-blue); + border-color: var(--bright-navy-blue); +} + +.btn-primary:is(:hover, :focus) { + background: var(--yale-blue); + border-color: var(--yale-blue); +} + +.btn-secondary { border-color: var(--white); } + +.btn-secondary:is(:hover, :focus) { background: hsla(0, 0%, 100%, 0.1); } + +.h1, +.h2, +.h3 { + font-weight: var(--fw-800); + font-family: var(--ff-montserrat); + text-transform: uppercase; +} + +.h1 { + color: var(--white); + font-size: var(--fs-1); +} + +.h2, +.h3 { color: var(--gunmetal); } + +.h2 { font-size: var(--fs-2); } + +.h3 { + font-size: var(--fs-3); + font-weight: var(--fw-700); +} + +.section-subtitle { + color: var(--bright-navy-blue); + font-size: var(--fs-5); + text-transform: uppercase; + font-family: var(--ff-montserrat); + margin-bottom: 8px; +} + +.section-title { margin-bottom: 15px; } + +.section-text { + color: var(--black-coral); + margin-bottom: 30px; +} + +.card-text { + color: var(--black-coral); + font-size: var(--fs-5); +} + + + + + +/*-----------------------------------*\ + * #HEADER +\*-----------------------------------*/ + +.header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-top: 61px; + z-index: 4; +} + +.header-top { + position: absolute; + top: 0; + left: 0; + width: 100%; + transition: var(--transition); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); + padding-block: 15px; + z-index: 1; +} + +.header.active .header-top { + position: fixed; + background: var(--gunmetal); +} + +.header-top .container { + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-items: flex-start; + align-items: center; +} + +.helpline-box .wrapper { display: none; } + +.helpline-box .icon-box { + background: var(--bright-navy-blue); + padding: 6px; + border-radius: 50%; + color: var(--white); +} + +.helpline-box .icon-box ion-icon { --ionicon-stroke-width: 40px; } + +.header-top .logo { margin-inline: auto; } + +.header-top .logo img { max-width: 100px; } + +.header-btn-group { + justify-self: flex-end; + display: flex; + align-items: center; + gap: 10px; + color: var(--white); +} + +.search-btn, +.nav-open-btn { + font-size: 30px; + color: inherit; +} + +.search-btn { font-size: 20px; } + +.header-bottom { border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); } + +.header-bottom .container { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 15px; +} + +.social-list { + display: flex; + align-items: center; + gap: 5px; +} + +.social-link { + color: var(--white); + padding: 8px; + border: 1px solid hsla(0, 0%, 100%, 0.3); + border-radius: 50%; + font-size: 15px; + transition: var(--transition); +} + +.social-link:is(:hover, :focus) { background: hsla(0, 0%, 100%, 0.2); } + +.header .btn { --padding: 4px 20px; } + +.header .navbar { + position: fixed; + top: 0; + right: -300px; + width: 100%; + max-width: 300px; + height: 100%; + background: var(--white); + visibility: hidden; + pointer-events: none; + transition: 0.15s ease-in; + z-index: 3; +} + +.navbar.active { + right: 0; + visibility: visible; + pointer-events: all; + transition: 0.25s ease-out; +} + +.navbar-top { + display: flex; + justify-content: space-between; + align-items: center; + padding: 40px 15px; +} + +.navbar-top .logo img { width: 150px; } + +.nav-close-btn { + font-size: 20px; + color: var(--bright-navy-blue); +} + +.nav-close-btn ion-icon { --ionicon-stroke-width: 80px; } + +.navbar-list { border-top: 1px solid hsla(0, 0%, 0%, 0.1); } + +.navbar-list li { border-bottom: 1px solid hsla(0, 0%, 0%, 0.1); } + +.navbar-link { + padding: 15px 20px; + color: var(--jet); + font-weight: var(--fw-500); + font-size: var(--fs-4); + transition: var(--transition); + text-transform: capitalize; +} + +.navbar-link:is(:hover, :focus) { color: var(--bright-navy-blue); } + +.overlay { + position: fixed; + inset: 0; + background: var(--black); + opacity: 0; + pointer-events: none; + z-index: 2; + transition: var(--transition); +} + +.overlay.active { + opacity: 0.7; + pointer-events: all; +} + + + + + +/*-----------------------------------*\ + * #HERO +\*-----------------------------------*/ + +.hero { + background-image: url("../images/hero-banner.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-color: hsla(0, 0%, 0%, 0.7); + background-blend-mode: overlay; + display: grid; + place-items: center; + min-height: 600px; + text-align: center; + padding-top: 125px; +} + +.hero-title { margin-bottom: 20px; } + +.hero-text { + color: var(--white); + font-size: var(--fs-5); + margin-bottom: 40px; +} + +.btn-group { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 10px; +} + + + + + +/*-----------------------------------*\ + * #TOUR SEARCH +\*-----------------------------------*/ + +.tour-search { + background: var(--bright-navy-blue); + padding-block: var(--section-padding); +} + +.tour-search-form .input-label { + color: var(--white); + font-size: var(--fs-4); + margin-left: 20px; + margin-bottom: 10px; +} + +.tour-search-form .input-field { + background: var(--white); + padding: 10px 15px; + font-size: var(--fs-5); + border-radius: 50px; +} + +.tour-search-form .input-field::placeholder { color: var(--spanish-gray); } + +.tour-search-form .input-field::-webkit-datetime-edit { + color: var(--spanish-gray); + text-transform: uppercase; +} + +.tour-search-form .input-wrapper { margin-bottom: 15px; } + +.tour-search .btn { + width: 100%; + --border-width: 1px; + font-weight: var(--fw-600); + margin-top: 35px; +} + + + + + +/*-----------------------------------*\ + * #POPULAR +\*-----------------------------------*/ + +.popular { padding-block: var(--section-padding); } + +.popular-list, +.popular-list > li:not(:last-child) { margin-bottom: 30px; } + +.popular-card { + position: relative; + overflow: hidden; + border-radius: var(--radius-25); + height: 430px; +} + +.popular-card .card-img { height: 100%; } + +.popular-card .card-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.popular-card .card-content { + position: absolute; + bottom: 20px; + left: 20px; + right: 20px; + background: var(--white); + border-radius: var(--radius-25); + padding: 20px; +} + + +.popular-card .card-rating { + background: var(--bright-navy-blue); + color: var(--white); + position: absolute; + top: 0; + right: 25px; + display: flex; + align-items: center; + gap: 1px; + transform: translateY(-50%); + padding: 6px 10px; + border-radius: 20px; + font-size: 14px; +} + +.popular-card .card-subtitle { + color: var(--blue-ncs); + font-size: var(--fs-6); + text-transform: uppercase; + margin-bottom: 8px; +} + +.popular-card .card-title { margin-bottom: 5px; } + +.popular-card :is(.card-subtitle, .card-title) > a { color: inherit; } + +.popular .btn { margin-inline: auto; } + + + + + +/*-----------------------------------*\ + * #PACKAGE +\*-----------------------------------*/ + +.package { padding-block: var(--section-padding); } + +.package-list { margin-bottom: 40px; } + +.package-list > li:not(:last-child) { margin-bottom: 30px; } + +.package-card { + background: var(--cultured); + overflow: hidden; + border-radius: 15px; +} + +.package-card .card-banner { height: 250px; } + +.package-card .card-banner img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.package-card .card-content { padding: 30px 20px; } + +.package-card .card-title { margin-bottom: 15px; } + +.package-card .card-text { + line-height: 1.6; + margin-bottom: 20px; +} + +.card-meta-list { + background: var(--white); + max-width: max-content; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 8px; + box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.15); + border-radius: 50px; +} + +.card-meta-item { position: relative; } + +.card-meta-item:not(:last-child)::after { + content: ""; + position: absolute; + top: 4px; + right: -1px; + bottom: 4px; + width: 1px; + background: hsla(0, 0%, 0%, 0.3); +} + +.meta-box { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + padding-inline: 9px; + color: var(--black-coral); + font-size: var(--fs-8); +} + +.meta-box > ion-icon { + color: var(--bright-navy-blue); + font-size: 13px; +} + +.package-card .card-price { + background: var(--united-nations-blue); + color: var(--white); + padding: 25px 20px; + text-align: center; +} + +.package-card .card-price .wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 5px 15px; + margin-bottom: 10px; +} + +.package-card .card-price .reviews { font-size: var(--fs-5); } + +.package-card .card-rating { + display: flex; + justify-content: center; + align-items: center; + gap: 1px; + font-size: 14px; +} + +.package-card .card-rating ion-icon:last-child { color: hsl(0, 0%, 80%); } + +.package-card .price { + font-size: var(--fs-2); + font-family: var(--ff-montserrat); + font-weight: var(--fw-800); + margin-bottom: 20px; +} + +.package-card .price span { + font-size: var(--fs-7); + font-weight: initial; +} + +.package .btn { margin-inline: auto; } + + + + + +/*-----------------------------------*\ + * #GALLERY +\*-----------------------------------*/ + +.gallery { padding-block: var(--section-padding); } + +.gallery-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.gallery-image { + width: 100%; + height: 100%; + border-radius: var(--radius-15); + overflow: hidden; +} + +.gallery-item:nth-child(3) { grid-area: 1 / 2 / 3 / 3; } + +.gallery-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + + + + + +/*-----------------------------------*\ + * #CTA +\*-----------------------------------*/ + +.cta { + background: var(--bright-navy-blue); + padding-block: var(--section-padding); +} + +.cta :is(.section-subtitle, .section-title, .section-text) { color: var(--white); } + +.cta .section-text { font-size: var(--fs-5); } + + + + + +/*-----------------------------------*\ + * #FOOTER +\*-----------------------------------*/ + +.footer-top { + background: var(--gunmetal); + padding-block: var(--section-padding); + color: var(--gainsboro); +} + +.footer-brand { margin-bottom: 30px; } + +.footer-brand img { width: 180px; } + +.footer-brand .logo { margin-bottom: 20px; } + +.footer-text { + font-size: var(--fs-5); + line-height: 1.7; +} + +.footer-contact { margin-bottom: 30px; } + +.contact-title { + position: relative; + font-family: var(--ff-montserrat); + font-weight: var(--fw-500); + margin-bottom: 30px; +} + +.contact-title::after { + content: ""; + position: absolute; + bottom: -10px; + left: 0; + width: 50px; + height: 2px; + background: var(--bright-navy-blue); +} + +.contact-text { + font-size: var(--fs-5); + margin-bottom: 15px; + max-width: 200px; +} + +.contact-item { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} + +.contact-item ion-icon { --ionicon-stroke-width: 40px; } + +.contact-link, +address { + font-style: normal; + color: var(--gainsboro); + font-size: var(--fs-5); +} + +.contact-link:is(:hover, :focus) { color: var(--white); } + +.form-text { + font-size: var(--fs-5); + margin-bottom: 20px; +} + +.footer-form .input-field { + background: var(--white); + font-size: var(--fs-5); + padding: 15px 20px; + border-radius: 100px; + margin-bottom: 10px; +} + +.footer-form .btn { width: 100%; } + +.footer-bottom { + --gunmetal: hsl(205, 36%, 17%); + background: var(--gunmetal); + padding-block: 20px; + text-align: center; +} + +.copyright { + color: var(--gainsboro); + font-size: var(--fs-5); + margin-bottom: 10px; +} + +.copyright a { + color: inherit; + display: inline-block; +} + +.copyright a:is(:hover, :focus) { color: var(--white); } + +.footer-bottom-list { + display: flex; + align-items: center; + justify-content: center; + gap: 21px; +} + +.footer-bottom-list > li { position: relative; } + +.footer-bottom-list > li:not(:last-child)::after { + content: ""; + position: absolute; + top: 3px; + right: -10px; + bottom: 3px; + width: 1px; + background: hsla(0, 0%, 100%, 0.2); +} + +.footer-bottom-link { + color: var(--gainsboro); + font-size: var(--fs-7); + transition: var(--transition); +} + +.footer-bottom-link:is(:hover, :focus) { color: var(--white); } + + + + + +/*-----------------------------------*\ + * #GO TO TOP +\*-----------------------------------*/ + +.go-top { + position: fixed; + bottom: 15px; + right: 15px; + width: 35px; + height: 35px; + background: var(--bright-navy-blue); + color: var(--white); + display: grid; + place-items: center; + font-size: 18px; + border-radius: 6px; + box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.5); + opacity: 0; + transform: translateY(10px); + visibility: hidden; + transition: var(--transition); +} + +.go-top.active { + opacity: 0.8; + transform: translateY(0); + visibility: visible; +} + +.go-top:is(:hover, :focus) { opacity: 1; } + + + + + +/*-----------------------------------*\ + * #MEDIA QUERIES +\*-----------------------------------*/ + +/** + * responsive for larger than 580px screen + */ + +@media (min-width: 580px) { + + /** + * REUSED STYLE + */ + + .container { + max-width: 580px; + margin-inline: auto; + } + + .btn { + --fs-5: 16px; + --padding: 12px 30px; + } + + section:not(.cta) :is(.section-subtitle, .section-title, .section-text) { + text-align: center; + } + + .section-text { margin-bottom: 40px; } + + .card-text { --fs-5: 15px; } + + + + /** + * HEADER + */ + + .header { padding-top: 83px; } + + .helpline-box .icon-box { padding: 14px; } + + .header-top .logo img { max-width: unset; } + + .search-btn { font-size: 30px; } + + .nav-open-btn { font-size: 40px; } + + .header .btn { + --fs-5: 14px; + --padding: 6px 20px; + } + + + + /** + * HERO + */ + + .hero { + min-height: 800px; + padding-top: 85px; + } + + .hero-text { --fs-5: 15px; } + + .btn-group { gap: 20px; } + + + + /** + * TOUR SEARCH + */ + + .tour-search-form { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: flex-end; + gap: 15px; + } + + .tour-search-form .input-wrapper { margin-bottom: 0; } + + .tour-search-form .input-field { padding: 16px 20px; } + + .tour-search .btn { + grid-column: span 2; + margin-top: 20px; + } + + + + /** + * POPULAR + */ + + .popular-card .card-content { right: auto; } + + + + /** + * FOOTER + */ + + .footer .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + } + + .footer-form { grid-column: span 2; } + + .footer-bottom { text-align: left; } + + .copyright { margin-bottom: 0; } + + .footer-bottom-list { justify-content: flex-end; } + +} + + + + + +/** + * responsive for larger than 768px screen + */ + +@media (min-width: 768px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * typography + */ + + --fs-5: 15px; + + } + + + + /** + * REUSED STYLE + */ + + .container { max-width: 800px; } + + .section-text { + max-width: 60ch; + margin-inline: auto; + } + + + + /** + * HEADER + */ + + .helpline-box { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + } + + .helpline-box .wrapper { + display: block; + color: var(--white); + font-size: var(--fs-6); + } + + .social-list { gap: 10px; } + + + + /** + * POPULAR + */ + + .popular-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-bottom: 50px; + } + + .popular-list > li:not(:last-child) { margin-bottom: 0; } + + .popular-card .card-content { right: 20px; } + + + + /** + * PACKAGE + */ + + .package-list { margin-bottom: 50px; } + + .package-list > li:not(:last-child) { margin-bottom: 40px; } + + .package-card { + display: grid; + grid-template-columns: 1.3fr 1.5fr 1fr; + } + + .package-card .card-banner { height: 100%; } + + .package-card .card-content { padding: 40px; } + + .package-card .card-price { + display: grid; + place-content: center; + } + + .package-card .card-price .wrapper { margin-bottom: 15px; } + + + + /** + * GALLERY + */ + + .gallery { padding-bottom: calc(var(--section-padding * 2)); } + + .gallery-list { + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } + + .gallery-image { border-radius: var(--radius-25); } + + + + /** + * CTA + */ + + .cta .container { + display: flex; + justify-content: space-between; + align-items: center; + } + + .cta-content { width: calc(100% - 225px); } + + .cta .section-text { margin-inline: 0; } + + + + /** + * FOOTER + */ + + .form-wrapper { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 20px; + } + + .footer-form .input-field { margin-bottom: 0; } + + .footer-form .btn { width: max-content; } + +} + + + + + +/** + * responsive for larger than 992px screen + */ + +@media (min-width: 992px) { + + /** + * REUSED STYLE + */ + + .container { max-width: 1050px; } + + + + /** + * HEADER + */ + + .header.active .header-top { + position: unset; + background: unset; + } + + .nav-open-btn, + .navbar-top { display: none; } + + .header-bottom { border-bottom: none; } + + .header.active .header-bottom { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: var(--white); + color: var(--onyx); + box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.08); + transition: var(--transition); + } + + .header-bottom .container { padding-block: 0; } + + .header .navbar { all: unset; } + + .navbar-list { + border-top: none; + display: flex; + justify-content: center; + align-items: center; + } + + .navbar-list li { border-bottom: none; } + + .navbar-link { + color: var(--white); + --fs-4: 16px; + font-weight: unset; + text-transform: uppercase; + padding: 20px 15px; + } + + .header.active .navbar-link { color: var(--onyx); } + + .header.active .navbar-link:is(:hover, :focus) { color: var(--bright-navy-blue); } + + .header.active .social-link { + color: var(--onyx); + border-color: hsla(0, 0%, 0%, 0.15); + } + + .overlay { display: none; } + + + + /** + * HERO + */ + + .hero .container { max-width: 740px; } + + + + /** + * TOUR SEARCH + */ + + .tour-search-form { grid-template-columns: repeat(5, 1fr); } + + .tour-search .btn { + --padding: 15px; + grid-column: unset; + margin-top: 0; + } + + + + /** + * POPULAR + */ + + .popular-list { grid-template-columns: repeat(3, 1fr); } + + + + /** + * PACKAGE + */ + + .meta-box { --fs-8: 13px; } + + .meta-box > ion-icon { font-size: 15px; } + + + + /** + * CTA + */ + + .cta .section-title { max-width: 25ch; } + + + + /** + * FOOTER + */ + + .footer-top .container { + grid-template-columns: repeat(3, 1fr); + gap: 50px; + } + + .footer-form { grid-column: unset; } + + .form-wrapper { flex-direction: column; } + + .footer-form .btn { width: 100%; } + +} + + + + + +/** + * responsive for larger than 1200px screen + */ + +@media (min-width: 1200px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * spacing + */ + + --section-padding: 100px; + + } + + + + /** + * REUSED STYLE + */ + + .container { max-width: 1180px; } + +} \ No newline at end of file diff --git a/style2.css b/style2.css new file mode 100644 index 0000000..093c4f5 --- /dev/null +++ b/style2.css @@ -0,0 +1,563 @@ +html { + scroll-behavior: smooth; + } + + body { + font-family: "Lato", sans-serif; + padding: 0; + margin: 0; + } + + nav { + background-color: #111; + color: white; + padding: 20px 50px; + } + + .navTop { + display: flex; + align-items: center; + justify-content: space-between; + } + + .search { + display: flex; + align-items: center; + background-color: gray; + padding: 10px 20px; + border-radius: 10px; + } + + .searchInput { + border: none; + background-color: transparent; + } + + .searchInput::placeholder { + color: lightgray; + } + + .limitedOffer { + font-size: 20px; + border-bottom: 2px solid green; + cursor: pointer; + } + + .navBottom { + display: flex; + align-items: center; + justify-content: center; + } + + .menuItem { + margin-right: 50px; + cursor: pointer; + color: lightgray; + font-weight: 400; + } + + .slider { + background: url("https://images.unsplash.com/photo-1604147495798-57beb5d6af73?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"); + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); + overflow: hidden; + } + + .sliderWrapper { + display: flex; + width: 500vw; + transition: all 1.5s ease-in-out; + } + + .sliderItem { + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + .sliderBg { + width: 750px; + height: 750px; + border-radius: 50%; + position: absolute; + } + + .sliderImg { + z-index: 1; + } + + .sliderTitle { + position: absolute; + top: 10%; + right: 10%; + font-size: 60px; + font-weight: 900; + text-align: center; + color: white; + z-index: 1; + } + + .sliderPrice { + position: absolute; + top: 10%; + left: 10%; + font-size: 60px; + font-weight: 300; + text-align: center; + color: white; + border: 1px solid gray; + z-index: 1; + } + + .buyButton { + position: absolute; + top: 50%; + right: 10%; + font-size: 30px; + font-weight: 900; + color: white; + border: 1px solid gray; + background-color: black; + z-index: 1; + cursor: pointer; + } + + .buyButton:hover { + background-color: white; + color: black; + } + + .sliderItem:nth-child(1) .sliderBg { + background-color: #369e62; + } + .sliderItem:nth-child(2) .sliderBg { + background-color: rebeccapurple; + } + .sliderItem:nth-child(3) .sliderBg { + background-color: teal; + } + .sliderItem:nth-child(4) .sliderBg { + background-color: cornflowerblue; + } + .sliderItem:nth-child(5) .sliderBg { + background-color: rgb(124, 115, 80); + } + + .sliderItem:nth-child(1) .sliderPrice { + color: #369e62; + } + .sliderItem:nth-child(2) .sliderPrice { + color: white; + } + .sliderItem:nth-child(3) .sliderPrice { + color: teal; + } + .sliderItem:nth-child(4) .sliderPrice { + color: cornflowerblue; + } + .sliderItem:nth-child(5) .sliderPrice { + color: cornsilk; + } + + .features { + display: flex; + align-items: center; + justify-content: space-between; + padding: 50px; + } + + .feature { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + + .featureIcon { + width: 50px; + height: 50px; + } + + .featureTitle { + font-size: 20px; + font-weight: 600; + margin: 20px; + } + + .featureDesc { + color: gray; + width: 50%; + height: 100px; + } + + .product { + height: 100vh; + background-color: whitesmoke; + position: relative; + clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%); + } + + .payment { + width: 500px; + height: 500px; + background-color: white; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + padding: 10px 50px; + display: none; + flex-direction: column; + -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + } + + .payTitle { + font-size: 20px; + color: lightgray; + } + + label { + font-size: 14px; + font-weight: 300; + } + + .payInput { + padding: 10px; + margin: 10px 0px; + border: none; + border-bottom: 1px solid gray; + } + + .payInput::placeholder { + color: rgb(163, 163, 163); + } + + .cardIcons { + display: flex; + } + + .cardIcon { + margin-right: 10px; + } + + .cardInfo { + display: flex; + justify-content: space-between; + } + + .sm { + width: 30%; + } + + .payButton { + position: absolute; + height: 40px; + bottom: -40; + width: 100%; + left: 0; + -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + background-color: #369e62; + color: white; + border: none; + cursor: pointer; + } + + .close { + width: 20px; + height: 20px; + position: absolute; + background-color: gray; + color: white; + top: 10px; + right: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 2px; + } + + .productImg { + width: 50%; + } + + .productDetails { + position: absolute; + top: 10%; + right: 0; + width: 40%; + padding: 50px; + } + + .productTitle { + font-size: 75px; + font-weight: 900; + } + + .productDesc { + font-style: 24px; + color: gray; + } + + .colors, + .sizes { + display: flex; + margin-bottom: 20px; + } + + .color { + width: 32px; + height: 32px; + border-radius: 5px; + background-color: black; + margin-right: 10px; + cursor: pointer; + } + + .color:last-child { + background-color: darkblue; + } + + .size { + padding: 5px 20px; + border: 1px solid black; + margin-right: 10px; + cursor: pointer; + font-size: 20px; + } + + .productButton { + float: right; + padding: 10px 20px; + background-color: black; + color: white; + font-weight: 600; + cursor: pointer; + } + + .productButton:hover { + background-color: white; + color: black; + } + + .gallery { + padding: 50px; + display: flex; + } + + .galleryItem { + flex: 1; + padding: 50px; + } + + .galleryImg { + width: 100%; + } + + .newSeason { + display: flex; + } + + .nsItem { + flex: 1; + background-color: black; + color: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + .nsImg { + width: 100%; + height: 500px; + } + + .nsTitle { + font-size: 40px; + } + + .nsButton { + padding: 15px; + font-weight: 600; + cursor: pointer; + } + + footer { + display: flex; + } + + .footerLeft { + flex: 2; + display: flex; + justify-content: space-between; + padding: 50px; + } + + .fMenuTitle { + font-size: 16px; + } + + .fList { + padding: 0; + list-style: none; + } + + .fListItem { + margin-bottom: 10px; + color: gray; + cursor: pointer; + } + + .footerRight { + flex: 1; + padding: 50px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .fInput { + padding: 5px; + } + + .fButton { + padding: 5px; + background-color: black; + color: white; + } + + .fIcons{ + display: flex; + } + + .fIcon{ + width: 20px; + height: 20px; + margin-right: 10px; + } + + .copyright{ + font-weight: 300; + font-size: 14px; + } + + @media screen and (max-width:480px) { + nav{ + padding: 20px; + } + + .search{ + display: none; + } + + .navBottom{ + flex-wrap: wrap; + } + + .menuItem{ + margin: 20px; + font-weight: 700; + font-size: 20px; + } + + .slider{ + clip-path: none; + } + + .sliderImg{ + width: 90%; + } + + .sliderBg{ + width: 100%; + height: 100%; + } + + .sliderTitle{ + display: none; + } + + .sliderPrice{ + top: unset; + bottom: -50; + left: 0; + background-color: lightgrey; + } + + .buyButton{ + right: 0; + top: 0; + } + + .features{ + flex-direction: column; + } + + .product{ + clip-path: none ; + display: flex; + flex-direction: column; + align-items: center; + } + + .productImg{ + width: 80%; + } + + .productDetails{ + width: 100%; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + position: relative; + top: 0; + } + + .productTitle{ + font-size: 50px; + margin: 0; + } + + .gallery{ + display: none; + } + + .newSeason{ + flex-direction: column; + } + + .nsItem:nth-child(2){ + padding: 50px; + } + + footer{ + flex-direction: column; + align-items: center; + } + + .footerLeft{ + padding: 20px; + width: 90%; + } + + .footerRight{ + padding: 20px; + width: 90%; + align-items: center; + background-color: whitesmoke; + } + + .payment{ + width: 90%; + padding: 20px; + } + } \ No newline at end of file diff --git a/twitter.png b/twitter.png new file mode 100644 index 0000000..7f96314 Binary files /dev/null and b/twitter.png differ diff --git a/visa.png b/visa.png new file mode 100644 index 0000000..d2f8f83 Binary files /dev/null and b/visa.png differ diff --git a/whatsapp.png b/whatsapp.png new file mode 100644 index 0000000..8c43592 Binary files /dev/null and b/whatsapp.png differ