How to Create a Product Landing Page Using HTML and CSS | Responsive Homepage Design Tutorial HTML5

How to create a product landing page using HTML, and CSS
How to create a product landing page using HTML, and CSS

Share this Article!

How to Create a Product Landing Page Using HTML and CSS

In this blog post, you will learn How to Create a Product Landing Page Using HTML and CSS, and a Responsive Homepage Design Tutorial in HTML5. You will also get the complete source code at the end!

Build a product landing page using HTML and CSS

In this tutorial, you will learn How to create a product landing page using HTML, CSS, and JavaScript, and create a responsive home page. You will also learn how to make the homepage responsive, avoid using javascript, and use some colors to make the website stand out!

We will learn how to create a nice and simple product landing page without using a Template. In this way, we will experience every product and its features.

Build a product landing page using HTML and CSS

Do you want more leads and sales from customers who visit your website? Learn how to easily create and manage these landing pages. This course will teach you how to make sure your products represent you, what your next steps should be, why they’re important, and how to make them set you apart from the competition.

In this tutorial, we will be taking you through the process of creating a product landing page. We will be using HTML, CSS, and JavaScript. We will also be showing you how to create a responsive home page. Finally, we will show you how to make the homepage responsive. We have made this process as easy as possible so you can be successful along the way.

Steps to Make a Product Promotion Home Page!

Watch The Video tutorial below to completely understand how to build a responsive product landing page using HTML and CSS.

Build a product landing page using HTML and CSS

Also Read: Login And Registration Form With Show/Hide Button in jQuery

Source Code to create a responsive landing page using HTML

Now, you will get the source codes of the product landing page website project.

HTML Source Code

<!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="menu.css">
  <title>Product Landing Page</title>
</head>
<body>
 <nav>
   <div class="logo">Brand</div>
   <!-- toggle menu button -->
   <span class="menubtn" onclick="openNav()">&#9776;</span>

   <div class="navLinks">
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
       <button type="button">Login</button>
     </ul>
   </div>
 </nav>
   <!-- responsive side navbar -->
   <div class="sideNav" id="sidenav">
     <a href="#" class="closeBtn" onclick="closeNav()"> &#10006;</a>
     <a href="#">Home</a>
     <a href="#">About</a>
     <a href="#">Services</a>
     <a href="#">Contact</a>
     <a href="#"><button type="button">Login</button> </a>
   </div>
  
   <!-- Header content with banner image -->
   <div class="row">
     <div class="column1">
       <h1>Responsive Design</h1>
       <p>Contact us for responsive web design to grow your business!</p>
       <button>PURCHASE</button>
     </div>
     <div class="column2">
       <img src="https://www.hmablogs.com/wp-content/uploads/2022/06/banner-img.png" alt="banner" width="500px">
     </div>
   </div>
  
   <!-- javascript to make side menu appear -->
 <script>
   function openNav() {
     document.getElementById("sidenav").style.width = "50%";
   }
   function closeNav() {
     document.getElementById("sidenav").style.width = "0%";
   }
 </script>

</body>
</html>

CSS Source Code

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-image: linear-gradient(to right, rgba(200, 8,207, 0.75), rgba(28, 70, 184, 0.8)), url(https://www.hmablogs.com/wp-content/uploads/2022/06/background-1-scaled.jpg);
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: 'Fira Sans', sans-serif;
}
nav {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 35px 5%;
}
nav .logo{
  font-size: 30px;
  font-weight: 700;
}
nav ul{
  display: flex;
  list-style: none;
}
nav ul li{
  padding: 8px 15px;
  border-radius: 10px;
  transition: 0.2s ease-in;
}
nav ul li a{
  color: white;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}
nav .navLinks button{
  padding: 2px 20px;
  border-radius: 10px;
  color: blue;
  font-size: 16px;
  border-style: none;
  font-weight: 700;
  margin-left: 10px;
}
nav ul li:hover{
  background-color: rgb(44, 1, 197);
}
nav .menubtn{
  font-size: 30px;
  font-weight: bolder;
  cursor: pointer;
  display: none;
}

/* responsive navbar css */
@media screen and (max-width: 600px) {
  nav .menubtn{
    display: flex;
  }
  nav .navLinks{
    display: none;
  }
  .sideNav {
    display: block !important;
  }
}

.sideNav{
  height: 100%;
  position: fixed;
  top: 0;
  right: 0%;
  background-color: rgb(44, 1, 197);
  overflow-x: hidden;
  transition: 0.3s ease-in;
  padding-top: 60px;
  display: none;
}

.sideNav a{
  padding: 8px 8px 8px 40px;
  display: block;
  font-size: 25px;
  font-weight: 500;
  color: #d1d1d1;
  transition: 0.3s;
  text-decoration: none;
}
.sideNav a button {
  padding: 10px 20px;
  border-radius: 10px;
  color: blue;
  font-size: 16px;
  border-style: none;
  font-weight: 700;
}
.sideNav a:hover{
  color: white;
}
.sideNav .closeBtn{
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  margin-left: 50px;
}

.row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2% 5%;
}
.row .column1 {
  padding-right: 50px;
}
.column1 h1 {
  font-size: 60px;
  margin-bottom: 10px;
}
.column1 p {
  font-size: 25px;
  margin-bottom: 20px;
}
.column1 button {
  width: 150px;
  padding: 12px 20px;
  border-radius: 20px;
  border-style: none;
  color: blue;
  font-size: 17px;
  font-weight: 600;
}
/* Header content responsive */
@media screen and (max-width: 980px) {
  .column2 img {
    width: 350px;
  }
  .column1 h1 {
    font-size: 40px;
  }
  .column1 p{
    font-size: 17px;
  }
  .row {
    margin-top: 80px;
  }
}

@media screen and (max-width: 600px) {

  .column1 h1 {
    font-size: 35px;
  }
  .row {
    flex-direction: column;

  }
  .row .column1 {
    padding: 30px;
  }
}

Conclusion

You learned How to create a product landing page using HTML, and CSS to create a responsive home page. I hope you like this article, If you find any difficulty understanding it you can contact me. Please don’t forget to subscribe to my Youtube channel!

Share this Article!

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe Our YouTube Channel!

Follow for Latest Updates