Create a Sneaker Shoes Landing Page (Source Code)

Faraz

By Faraz -

Learn how to build an eye-catching sneaker shoes landing page with HTML, CSS, and JavaScript. Impress your visitors and boost user engagement.

Join us on Telegram
Create a Sneaker Shoes Landing Page.jpg
Read AlsoBuild a User-Friendly Age Calculator with HTML, CSS, and JavaScript.jpgBuild a User-Friendly Age Calculator with HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In the world of selling sneakers online, your website's first impression matters a lot. Imagine it as the front door to your shoe store. This guide will show you how to make that front door look amazing using three important tools: HTML, CSS, and JavaScript. These are like the magic wands that web designers use to create beautiful and functional web pages.

Think of this journey as a step-by-step adventure. We'll start by building a strong foundation with HTML, then paint your website with colors and styles using CSS. After that, we'll make it interactive and fun with JavaScript. We'll also make sure your website looks great on phones and computers. Finally, we'll add some special touches to make your sneaker store stand out.

By the end of this tutorial, you'll be able to create a fantastic online landing page for your sneaker business. So, let's get started on this creative journey to showcase your sneakers and make your customer's online shopping experience amazing!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our shoe landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break it down step by step:

1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.

2. <html>: This is the root element of the HTML document, containing all the other elements.

3. <head>: This section contains meta-information about the document and links to external resources. It typically includes metadata, character encoding, and links to stylesheets and scripts.

  • <meta charset="UTF-8">: This meta tag specifies the character encoding used in the document, which is UTF-8, a widely used encoding that supports a wide range of characters from different languages.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag provides instructions to Internet Explorer to use its latest rendering engine (EdgeHTML) for rendering the webpage.
  • <link>: These link elements are used to include external resources in the document. In this case, it's linking to a Google Fonts stylesheet and a custom stylesheet named "styles.css" for styling the webpage.
  • <title>: This sets the title of the webpage, which will be displayed in the browser's title bar or tab.

4. <body>: This is the main content of the webpage that users will see when they visit the site.

5. <nav>: This is a navigation section that contains links and other navigation-related content.

  • Inside <nav>, there are several <div> elements with class names like "navTop" and "navBottom" that define different parts of the navigation menu. They contain various items such as logos, search bars, and menu items.

6. <div class="slider">: This section seems to represent a slider or carousel for displaying images and information about different sneaker products.

  • Inside the slider, there are multiple <div> elements with class "sliderItem," each representing a different product. They contain images, product titles, prices, and "BUY NOW!" buttons.

7. <div class="features">: This section appears to list some features of the website or the products it offers, such as free shipping, return policy, gift cards, and contact information.

8. <div class="product" id="product">: This section seems to represent a product page with details about a specific sneaker product. It includes an image, product title, price, description, color options, size options, and a "BUY NOW!" button.

9. <div class="gallery">: This section appears to display a gallery of images with associated titles.

10. <div class="newSeason">: This section promotes a new season collection, with images and a "CHOOSE YOUR STYLE" button.

11. <footer>: This is the footer section of the webpage, containing various menus, links, and a subscription form.

  • Inside the footer, there are multiple <div> elements with class "footerMenu," each representing a different menu. These menus include links to different sections of the website.
  • There's also a section for subscribing to a newsletter and another section for following the website on social media.

12. <script src="script.js"></script>: This script tag includes an external JavaScript file named "script.js," which contains client-side scripting to enhance the functionality of the webpage.

This is the basic structure of our sneaker shoe landing page using HTML, and now we can move on to styling it using CSS.

Read Alsothe ultimate guide to skeuomorphic social media buttons with html and css.jpgThe Ultimate Guide to Skeuomorphic Social Media Buttons with HTML and CSS

Step 2 (CSS Code):

Once the basic HTML structure of the sneaker shoe landing page is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our landing page. Let's break down the code section by section to understand what it does:

1. Global Styles:

  • The HTML element has a scroll-behavior property set to smooth, which provides smooth scrolling when clicking on anchor links within the page.
  • The body element sets the font family to "Lato," a sans-serif font, and removes any padding and margin.

2. Navigation Styles:

  • The nav element represents the website's navigation bar. It has a dark background color (#111), white text color, and padding.
  • Inside the nav, there's a class .navTop, which styles the top part of the navigation bar. It uses flexbox to align items horizontally and create space between them.
  • The search bar within the navigation bar is styled using the .search class. It has a gray background, padding, and rounded corners.
  • The search input field (.searchInput) has no border and a light gray placeholder text.
  • The .limitedOffer class styles a specific element with a green underline and a pointer cursor.

3. Navigation Menu Styles:

  • The .navBottom class styles the bottom part of the navigation bar. It aligns items horizontally in the center.
  • Each menu item (.menuItem) has specific styling, including margin, cursor, color, and font weight.

4. Slider Styles:

  • The .slider class styles a section of the website that likely contains an image slider.
  • The .sliderWrapper class uses flexbox to display slider items in a row, with a width that allows for multiple items to be displayed side by side.
  • .sliderItem styles individual slider items with alignment, positioning, and relative positioning.
  • .sliderBg styles a circular background element.
  • .sliderImg, .sliderTitle, .sliderPrice, and .buyButton style various components of the slider.
  • The :nth-child pseudo-classes apply different background colors and text colors to specific slider items.

5. Feature Section Styles:

  • The .features class styles a section containing multiple feature elements.
  • .feature styles each feature with centered text and aligned elements.

6. Product Styles:

  • The .product class styles a product section with a clipped polygon shape.
  • .payment styles a payment form that is initially hidden (display: none) and centered on the page.

7. Footer Styles:

  • The footer section (footer) is styled with flex layout.
  • .footerLeft and .footerRight style the left and right sides of the footer, respectively.
  • Various styles are applied to elements within the footer, including font sizes, colors, and spacing.
  • Social media icons (.fIcons) are styled as well.
  • Media queries at the end of the code define responsive styles for screens with a maximum width of 480px.

This will give our landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

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;
  }
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Let's break down what each part of the code does:

1. Element Selection:

  • wrapper is a reference to an HTML element with the class "sliderWrapper."
  • menuItems is a NodeList containing all HTML elements with the class "menuItem."

2. Product Data:

  • products is an array of JavaScript objects, where each object represents a product with properties such as id, title, price, and colors. Each product can have multiple color options.

3. Current Product Selection:

  • choosenProduct is a variable initialized to the first product in the products array.

4. Element Selection:

  • currentProductImg, currentProductTitle, currentProductPrice are references to HTML elements that display the current product's image, title, and price, respectively.
  • currentProductColors and currentProductSizes are NodeLists containing HTML elements representing color and size options for the current product.

5. Menu Item Event Listeners: A forEach loop iterates over each menuItems element and attaches a click event listener to it. When a menu item is clicked, the following actions occur:

  • The wrapper element's style.transform property is updated to slide the product slider to the selected product.
  • The choosenProduct variable is updated to the product corresponding to the clicked menu item.
  • Text content, image source, and color options for the current product are updated based on the choosenProduct data.

6. Color Selection Event Listeners:

  • Another forEach loop iterates over each currentProductColors element and attaches a click event listener. When a color option is clicked, the image source for the current product is updated to the selected color's image.

7. Size Selection Event Listeners:

  • A click event listener is attached to each currentProductSizes element. When a size option is clicked, it updates the background color and text color to indicate the selected size while resetting the styles for other size options.

8. Payment Modal:

  • productButton represents an HTML element, likely a button, which, when clicked, displays a payment modal by setting the payment element's style.display property to "flex."
  • close represents an element, possibly a button or icon, that closes the payment modal when clicked by setting payment's style.display property to "none."

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

const wrapper = document.querySelector(".sliderWrapper");
const menuItems = document.querySelectorAll(".menuItem");

const products = [
  {
    id: 1,
    title: "Air Force",
    price: 119,
    colors: [
      { 
        code: "black",
        img: "../assets/Images/sneaker-images/air.png",
      },
      {
        code: "darkblue",
        img: "../assets/Images/sneaker-images/air2.png",
      },
    ],
  },
  {
    id: 2,
    title: "Air Jordan",
    price: 149,
    colors: [
      {
        code: "lightgray",
        img: "../assets/Images/sneaker-images/jordan.png",
      },
      {
        code: "green",
        img: "../assets/Images/sneaker-images/jordan2.png",
      },
    ],
  },
  {
    id: 3,
    title: "Blazer",
    price: 109,
    colors: [
      {
        code: "lightgray",
        img: "../assets/Images/sneaker-images/blazer.png",
      },
      {
        code: "green",
        img: "../assets/Images/sneaker-images/blazer2.png",
      },
    ],
  },
  {
    id: 4,
    title: "Crater",
    price: 129,
    colors: [
      {
        code: "black",
        img: "../assets/Images/sneaker-images/crater.png",
      },
      {
        code: "lightgray",
        img: "../assets/Images/sneaker-images/crater2.png",
      },
    ],
  },
  {
    id: 5,
    title: "Hippie",
    price: 99,
    colors: [
      {
        code: "gray",
        img: "../assets/Images/sneaker-images/hippie.png",
      },
      {
        code: "black",
        img: "../assets/Images/sneaker-images/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";
});

Final Output:

Create a Sneaker Shoes Landing Page.gif
Read AlsoHow to Create a Trending Animated Button Using HTML and CSS.webpHow to Create a Trending Animated Button Using HTML and CSS

Conclusion:

In conclusion, mastering the art of crafting a compelling sneaker shoe landing page using HTML, CSS, and JavaScript is your gateway to online success in the shoe retail business. With these skills, you can captivate your audience, showcase your products, and leave a lasting impression on potential customers, ultimately driving your shoe business to new heights.

Credit: ZeroOctave

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: sneaker shoes landing page, landing page, html, css, javascript, web design, user experience, responsive design, designing an interactive sneaker shoes landing page, source code
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post