Awesome Nike Shoe Landing Page Using HTML & CSS3

Hello Friends, today in this blog you’ll learn how to create Awesome Nike Shoe Landing Page Using Only HTML & CSS3.

Creating Landing Page is very important to level up your Frontend Skills ( HTML, CSS & JavaScript Skills ). If you’re a beginner then it’s very important to create Amazing Landing Page Projects, so that you can improve your web design skills. So today we create this beautiful landing page using simple HTML & CSS code.

Video Tutorial of Awesome Nike Shoe Landing Page Using Only HTML & CSS

In the video, you’ve seen the Nike Shoe Landing Page and how I created this using only HTML & CSS. This is really very simple & after watching this tutorial i’m sure that you guys can easily create this type of beautiful Landing Pages Using only HTML & CSS3 and if you’re a beginner then you can also create this type of Landing Page after watching this video tutorial.

In this Tutorial first i’ve simply create a Navigation Menu With Logo using simple HTML & CSS, after this i’ve add some text & styling it using CSS code after that i’ve add a background image ( Background image download link is available in Youtube Tutorial Description ) and at last i’ve add a Nike Shoe Featured image on the page & set it in this page using simple CSS code.

So, enjoy the tutorial & learn something new today 🙂

Awesome Nike Shoe Landing Page [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Awesome Nike Shoe Landing Page</title>
</head>
<body>
     <div class="container">
         <div class="navbar">
            <img src="images/logo.png" class="logo">
             <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Featured</a></li>
                    <li><a href="">Product</a></li>
                    <li><a href="">Explore</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
             </nav>
             <a href=""><i class="fa cart fa-cart-plus"></i></a>
         </div>
         <div class="content">
             <h1>Nike <span class="style">Shoes</span></h1>
             <p>Nike, Inc. is an American multinational corporation that is <br>engaged in the design, development, manufacturing, and worldwide <br>marketing and sales of footwear, apparel, equipment, accessories,<br> and services. 
            </p> 
            <div class="text">
                <button class="btn">Buy Now</button>
                <div class="social-media">
                    <a href=""><i class="fa icons fa-facebook"></i></a>
                    <a href=""><i class="fa icons fa-instagram"></i></a>
                    <a href=""><i class="fa icons fa-twitter"></i></a>
                </div>
            </div>       
        </div>
        <img src="images/nike.png" class="image">
     </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.container {
    height: 100vh;
    width: 100%;
    background-image: url(images/bg.png);
    background-position: center;
    background-size: cover;
    padding-right: 5%;
    padding-left: 3%;
    box-sizing: border-box;
    position: relative;
}
.navbar {
    width: 100%;
    height: 15vh;
    margin: auto;
    display: flex;
    align-items: center;
}
.logo {
    width: 180px;
    margin-top: 10px;
    cursor: pointer;
}
nav {
    flex: 1;
    padding-left: 420px;
}
nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0 15px;
}
nav ul li a {
    text-decoration: none;
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}
a .cart {
    font-size: 60px;
    color: #1b1b1b;
}
a .cart:hover {
    transform: scale(1.1);
    color: rgb(111,167,29);
    transition: all .5s;
}
.content {
    position: relative;
}
h1 {
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 100px;
    letter-spacing: .1em;
    font-size: 70px;
    color: #1b1b1b;
}
h1 .style {
    color: greenyellow;
    font-size: 80px;
    font-weight: 800;
    font-family: 'Lobster', cursive;
}
p {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    margin-top: 35px;
    color: #1b1b1b;
}
.text {
    position: relative;
    display: flex;
    align-items: center;
}
.btn {
    background-color: greenyellow;
    margin-top: 80px;
    padding: 15px 45px;
    text-align: center;
    border: none;
    outline: none;
    transition: .5s;
    text-transform: uppercase;
    color: #1b1b1b;
    cursor: pointer;
    font-weight: 700;
    font-size: 24px;
    display: block;
    border-radius: 30px;
    background-size: 200% auto;
    box-shadow: 3px 8px 22px rgba(22,21,21,.15);
}
.btn:hover {
    transform: scale(1.1);
    transition: all .5s;
}
.social-media {
    font-family: 'Poppins', sans-serif;
    margin-top: 80px;
    margin-left: 50px;
    text-decoration: none;
    font-size: 27px;
 }
 .icons {
    color: greenyellow;
    padding: 12px 12px 10px 12px;
    border-radius: 50%;
    margin-left: 10px;
    width: 27px;
    text-align: center;
    height: 27px;
    background-color: #fff;
    box-shadow: 3px 8px 22px rgba(22, 21, 21, 0.15);
 }
 .icons:hover {
    transform: scale(1.1);
    color: #fff;
    background-color: greenyellow;
    transition: all .5s;
 }
.image {
    position: absolute;
    width: 47%;
    height: 47%;
    bottom: 0;
    margin-bottom: 170px;
    margin-left: 530px;
    transform: rotate(-35deg);
}

DOWNLOAD SOURCE CODE FILES