Product Landing Page Using HTML and CSS

How to Create a Responsive Product Landing Page Using HTML and CSS with source code

How to Create a Product Landing Page Using HTML and CSS

 

This article will teach you how to use HTML, CSS, and JavaScript to design a responsive home page as well as a product landing page. Additionally, you’ll discover how to make the landing page responsive.

Product Landing Page Using HTML and CSS
Product Landing Page Using HTML and CSS

 

It’s really easy to design this kind of fantastic landing page, and creating beautiful landing pages always helps you become a better front-end web developer. This incredible landing page can be easily made by a beginner with little familiarity with HTML and CSS.

I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: Adding HTML Markup

<!DOCTYPE html>
<html lang="en">

<head>
    <title> Ionic SmartWatch - LandingPage</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a2291e6430.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap" rel="stylesheet">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>

<body>
    <div class="container">
        <header class="nav" id="and_menor">
            <div class="nav-container-content">
                <nav class="navbar">
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Products</a>
                    <a href="#">Buy Now</a>
                </nav>
            </div>
        </header>

        <div class="section-container-items">
            <div class="section-items-col-12">
                <div class="section">
                    <h1>Smartwatch fitbit ionic.</h1>
                    <h3>Altimeter, Gyroscope, GPS, Heart Rate Monitor</h3>
                    <a href="#"><button><i class="fas fa-shopping-cart"></i>Buy now for $244.60</button></a>
                </div>

                <div class="alta">
                    <span class="alta-title">Find Yours</span>
                    <img
                        src="https://static-geektopia.com/storage/geek/products/fitbit/versa/versa-black-black-aluminum-0-4d70f54ede557d65061a77d521339857.png">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

The project’s structure will be included first, but first, we must include certain information inside the link, such as the fact that we utilized a CSS file, which we must connect to our HTML code.

Portfolio Website using HTML and CSS (Source Code)

In order to incorporate the icons into our project, we also used some icons on our landing page, so we needed to include some icon links inside the head part of our HTML. The links to the new typefaces we utilized in our project must be included inside the HTML, as well.

<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a2291e6430.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap" rel="stylesheet">

Main Structure:

First and foremost, we will create the landing page’s primary container. After that, we’ll add a navbar to our header using the <header> element. The menu link items will be added inside our navbar using the <a> tag once we have added the <nav> element in the header.

Now we’ll use the div tag and the class “section-container-items” to build the framework for our landing page. Our product landing page will now have a heading added using the <h1> element, and our product page will have a subheading added using the <h3> tag. Along with our buy now button, we will also make a button with a shopping cart icon. Now, we’ll use the img> tag to add a picture to our product landing page.

How To Create OTP Input Field Using HTML, CSS & Javascript

Let’s have a look at our webpage now that we’ve added structure.

Output: 

Product Landing Page Using HTML and CSS
Product Landing Page Using HTML and CSS

 

Step2: Adding CSS Code

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code.

* {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 100%;
}

body {
  min-height: 100vh;
  position: relative;
  background: url("https://i.ibb.co/fvDfF8t/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  overflow: hidden;
  font-family: "Ubuntu", sans-serif;
}

span,
i,
li,
button,
a {
  text-decoration: none;
  outline: none;
}

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container {
  width: 100%;
  min-height: 90vh;
  padding-top: 80px;
  padding-bottom: 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

/* Estilos del border-box*/
#background {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
  background: #008eaa;
  -webkit-clip-path: polygon(52% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(52% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}

/* Estilos del navbar*/
.nav {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.nav-container-content {
  width: 90%;
  max-width: 1100px;
  height: 100%;
  margin: auto;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar a {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0.12px;
  line-height: 15px;
  color: #f4f4f4;
  text-decoration: none;
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  padding: 9px 13px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.navbar a:hover {
  background: #fff;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  color: #000;
}

.navbar a:last-child {
  padding: 9px 17px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-border-radius: 50px;
  border-radius: 50px;
  font-family: "DM Sans", sans-serif;
  line-height: 15px;
  margin-left: 8px;
}

.navbar a:last-child:hover {
  color: #f4f4f4;
  opacity: 0.9;
  -webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
}

@media screen and (max-width: 480px) {
  .nav-container-content {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .navbar a {
    font-size: 12px;
    margin-left: 0;
  }

  .navbar a:last-child {
    margin-left: 0;
  }
}

/* Estilos del navbar*/
.section-container-items {
  width: 100%;
  height: auto;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
}

@media screen and (max-width: 480px) {
  .section-container-items {
    -webkit-transform: translateY(23px);
    -ms-transform: translateY(23px);
    transform: translateY(23px);
  }
}

@media screen and (max-width: 320px) {
  .section-container-items {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
}

.section-items-col-12 {
  width: 90%;
  height: 100%;
  max-width: 980px;
  margin: auto;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: wrap-reverse;
  -ms-flex-flow: wrap-reverse;
  flex-flow: wrap-reverse;
}

.section {
  width: 100%;
  max-width: 490px;
  height: auto;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(6px);
}

.section a {
  display: inline-block;
}

.section h1 {
  font-size: 60px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  color: #f4f4f4;
  letter-spacing: 0.12px;
  line-height: 74px;
  margin: 0;
  padding: 0;
}

.section h3 {
  font-size: 20px;
  font-family: "DM Sans", Sans-Serif;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 0;
  margin-top: 5px;
  margin-left: 2px;
  color: #fff;
  opacity: 0.7;
}

.section button {
  margin-top: 40px;
  display: block;
  padding: 15px 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: normal;
  letter-spacing: 0.18px;
  line-height: 17px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  border: none;
  cursor: pointer;
  color: #fff;
  -webkit-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.section button:hover {
  opacity: 0.9;
  -webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
}

.section button i {
  font-size: 14px;
  margin-right: 8px;
}

.section button span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-left: 3px;
}

@media screen and (max-width: 1124px) {
  .section {
    max-width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .section {
    width: 320px;
    max-width: 100%;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
    text-align: center;
  }

  .section h1 {
    font-size: 47px;
    line-height: 59px;
  }

  .section h3 {
    font-size: 22px;
    letter-spacing: -0.08px;
    line-height: 27px;
    margin-top: 3px;
  }

  .section button {
    padding: 15px 18px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 320px) {
  .section {
    width: 260px;
  }

  .section h1 {
    font-size: 38px;
    line-height: 48px;
  }

  .section h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .section button {
    font-size: 14px;
  }
}

.look {
  color: #05cc47;
  font-size: 3.7em;
  white-space: nowrap;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-family: "Ubuntu", Sans-Serif;
}

.highlight {
  color: #005387;
  font-size: 0.7em;
  background: red;
}

/* Estilos del la imagen*/
.alta {
  width: 100%;
  max-width: 490px;
  height: auto;
  overflow: hidden;

  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.alta-title {
  font-size: 22px;
  font-family: "Dm Sans", Sans-Serif;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: #fff;
  opacity: 1;
  z-index: 1;

  position: absolute;
  right: 0;
  -webkit-transform: rotate(90deg) translateY(-60px);
  -ms-transform: rotate(90deg) translateY(-60px);
  transform: rotate(90deg) translateY(-60px);
}

.alta img {
  width: 520px;
  height: auto;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}

@media screen and (max-width: 1124px) {
  .alta {
    max-width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .alta {
    max-width: 100%;
  }

  .alta-title {
    font-size: 16px;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(90deg) translateY(-66px);
    -ms-transform: rotate(90deg) translateY(-66px);
    transform: rotate(90deg) translateY(-66px);
  }

  .alta img {
    width: 410px;
    -webkit-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}

@media screen and (max-width: 320px) {
  .alta-title {
    font-size: 14px;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(90deg) translateY(-48px);
    -ms-transform: rotate(90deg) translateY(-48px);
    transform: rotate(90deg) translateY(-48px);
  }

  .alta img {
    width: 320px;
  }
}

@media screen and (max-width: 480px) {
  .footer-col-12 p {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
  }
}

::-moz-selection {
  background: yellow;
  color: #000;
}

::selection {
  background: yellow;
  color: #000;
}

@media screen and (max-width: 980px) {
  .section {
    max-width: 500px;
    text-align: center;
  }

  .alta {
    max-width: 500px;
  }
}

@media screen and (max-width: 320px) {
  #and_menor .nav-container-content {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  #and_menor .nav-container-content .navbar a {
    font-size: 11px;
    padding: 8px 10px;
  }
}

Step 1:

  • We shall give our entire document some fundamental styling. In order to do that, we will use the universal selector to set the padding and margin to “0,” the font family to “Ubuntu,” and the font size to 100%.
  • Now, we’ll add a black image as a background using the background tag with the URL, set a minimum height of 100 vh using the body tag, and add some fundamental background properties using the body tag.
* {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 100%;
}

body {
  min-height: 100vh;
  position: relative;
  background: url("https://i.ibb.co/fvDfF8t/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  overflow: hidden;
  font-family: "Ubuntu", sans-serif;
}

Step 2:

  • We will now set the minimum height to 90vh and the width to 100% using the class selector (.container). We’ll additionally give the top “80 px” of padding.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

  • No, we will set the width of our navbar to “100%” and the height to 80px using the class selector (.nav). We’ll use the position property to set the position as absolute, and we’ll set the z index to 100 to make it slightly closer to the screen.
  • The font family for our navbar items will be “DM Sans,” and the color for our menu items will be “white,” both using the child selector (a).
  • Every website should be mobile-friendly, so we will use the media query to make our landing page items mobile-friendly.
.nav {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.nav-container-content {
  width: 90%;
  max-width: 1100px;
  height: 100%;
  margin: auto;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar a {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0.12px;
  line-height: 15px;
  color: #f4f4f4;
  text-decoration: none;
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  padding: 9px 13px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.navbar a:hover {
  background: #fff;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  color: #000;
}

.navbar a:last-child {
  padding: 9px 17px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-border-radius: 50px;
  border-radius: 50px;
  font-family: "DM Sans", sans-serif;
  line-height: 15px;
  margin-left: 8px;
}

.navbar a:last-child:hover {
  color: #f4f4f4;
  opacity: 0.9;
  -webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
}

@media screen and (max-width: 480px) {
  .nav-container-content {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .navbar a {
    font-size: 12px;
    margin-left: 0;
  }

  .navbar a:last-child {
    margin-left: 0;
  }
}

/* Estilos del navbar*/
.section-container-items {
  width: 100%;
  height: auto;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
}

@media screen and (max-width: 480px) {
  .section-container-items {
    -webkit-transform: translateY(23px);
    -ms-transform: translateY(23px);
    transform: translateY(23px);
  }
}

@media screen and (max-width: 320px) {
  .section-container-items {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
}
Product Landing Page Using HTML and CSS
Product Landing Page Using HTML and CSS

 

Step3:

  • Now, using some fundamental ideas, such as altering the backdrop, we will style the header and button.
  • Before utilizing the media query to make the text responsive, the width and height attributes are used to modify the heading’s width and height as well as its color.
  • I would encourage you to read the code thoroughly so you can easily comprehend everything.
.section-items-col-12 {
  width: 90%;
  height: 100%;
  max-width: 980px;
  margin: auto;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-flow: wrap-reverse;
  -ms-flex-flow: wrap-reverse;
  flex-flow: wrap-reverse;
}

.section {
  width: 100%;
  max-width: 490px;
  height: auto;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(6px);
}

.section a {
  display: inline-block;
}

.section h1 {
  font-size: 60px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  color: #f4f4f4;
  letter-spacing: 0.12px;
  line-height: 74px;
  margin: 0;
  padding: 0;
}

.section h3 {
  font-size: 20px;
  font-family: "DM Sans", Sans-Serif;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 0;
  margin-top: 5px;
  margin-left: 2px;
  color: #fff;
  opacity: 0.7;
}

.section button {
  margin-top: 40px;
  display: block;
  padding: 15px 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: normal;
  letter-spacing: 0.18px;
  line-height: 17px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  border: none;
  cursor: pointer;
  color: #fff;
  -webkit-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.section button:hover {
  opacity: 0.9;
  -webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
}

.section button i {
  font-size: 14px;
  margin-right: 8px;
}

.section button span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-left: 3px;
}

@media screen and (max-width: 1124px) {
  .section {
    max-width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .section {
    width: 320px;
    max-width: 100%;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
    text-align: center;
  }

  .section h1 {
    font-size: 47px;
    line-height: 59px;
  }

  .section h3 {
    font-size: 22px;
    letter-spacing: -0.08px;
    line-height: 27px;
    margin-top: 3px;
  }

  .section button {
    padding: 15px 18px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 320px) {
  .section {
    width: 260px;
  }

  .section h1 {
    font-size: 38px;
    line-height: 48px;
  }

  .section h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .section button {
    font-size: 14px;
  }
}

.look {
  color: #05cc47;
  font-size: 3.7em;
  white-space: nowrap;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-family: "Ubuntu", Sans-Serif;
}

.highlight {
  color: #005387;
  font-size: 0.7em;
  background: red;
}

/* Estilos del la imagen*/
.alta {
  width: 100%;
  max-width: 490px;
  height: auto;
  overflow: hidden;

  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.alta-title {
  font-size: 22px;
  font-family: "Dm Sans", Sans-Serif;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: #fff;
  opacity: 1;
  z-index: 1;

  position: absolute;
  right: 0;
  -webkit-transform: rotate(90deg) translateY(-60px);
  -ms-transform: rotate(90deg) translateY(-60px);
  transform: rotate(90deg) translateY(-60px);
}

.alta img {
  width: 520px;
  height: auto;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}

@media screen and (max-width: 1124px) {
  .alta {
    max-width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .alta {
    max-width: 100%;
  }

  .alta-title {
    font-size: 16px;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(90deg) translateY(-66px);
    -ms-transform: rotate(90deg) translateY(-66px);
    transform: rotate(90deg) translateY(-66px);
  }

  .alta img {
    width: 410px;
    -webkit-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}

@media screen and (max-width: 320px) {
  .alta-title {
    font-size: 14px;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(90deg) translateY(-48px);
    -ms-transform: rotate(90deg) translateY(-48px);
    transform: rotate(90deg) translateY(-48px);
  }

  .alta img {
    width: 320px;
  }
}

@media screen and (max-width: 480px) {
  .footer-col-12 p {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
  }
}

::-moz-selection {
  background: yellow;
  color: #000;
}

::selection {
  background: yellow;
  color: #000;
}

@media screen and (max-width: 980px) {
  .section {
    max-width: 500px;
    text-align: center;
  }

  .alta {
    max-width: 500px;
  }
}

@media screen and (max-width: 320px) {
  #and_menor .nav-container-content {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  #and_menor .nav-container-content .navbar a {
    font-size: 11px;
    padding: 8px 10px;
  }
}

Now we’ve completed our landing page using HTML & CSS. I hope you understood the whole project. Let’s take a look at our Live Preview.

10+ Javascript Projects For Beginners With Source Code

Output:

ADVERTISEMENT

Codepen Preview Of landing page using HTML & CSS

 

ADVERTISEMENT

ADVERTISEMENT

Now We have Successfully created our Product landing page using HTML & CSS. You can use this project directly by copying it into your  IDE. We hope you understood the project, If you have any doubts feel free to comment!!

ADVERTISEMENT

If you find this Blog helpful, then make sure to search codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

ADVERTISEMENT

Written By: @Arun
Code By: @Axel
 

Some FAQs related to landing pages using HTML and css source code

 

Is the given project responsive?

yes it is responsive

Explain the HTML code given above

First and foremost, we will create the landing page’s primary container. After that, we’ll add a navbar to our header using the <header> element. The menu link items will be added inside our navbar using the <a> tag once we have added the <nav> element in the header.
Now we’ll use the div tag and the class “section-container-items” to build the framework for our landing page. Our product landing page will now have a heading added using the <h1> element, and our product page will have a subheading added using the <h3> tag. Along with our buy now button, we will also make a button with a shopping cart icon. Now, we’ll use the img> tag to add a picture to our product landing page.



Tags: ,

Leave a Reply