ADVERTISEMENT

How to Create a Product Landing Page Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

 

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

ADVERTISEMENT

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

ADVERTISEMENT

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 utilised a CSS file, which we must connect inside 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 utilised in our project must be included inside the HTML, as well.

ADVERTISEMENT

<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

ADVERTISEMENT

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

ADVERTISEMENT

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

Step1: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 url, set a minimum height of 100 vh using the body tag, and add some fundamental background properties using the body tag.

ADVERTISEMENT

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

Step2: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.

ADVERTISEMENT

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

ADVERTISEMENT

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 colour for our menu items will be “white,” both using the child selector (a).

ADVERTISEMENT

Every website should be mobile-friendly, so we will use the media query to make our landing page items mobile-friendly.

ADVERTISEMENT

.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 altering the backdrop, we will style the header and button. Before utilising 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 colour.

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:

Codepen Preview Of landing page using HTML & CSS


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

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

Written By : @Arun
Code By: @Axel

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT