Responsive Landing Page website in HTML & CSS. Landing Page Template.

Hello coders, Today in this blog you will learn how to create a Responsive landing page with simple but awesome UI by using HTML and CSS. Earlier, you learned to create a custom radio music player in javascript.

A landing page is a website having a single page containing all the important information. Building a landing page is one of the most important steps for sharing personal information or business details. Today we are going to create a very clean designed eye-catching landing page. The design in the above image is exactly the same as we are going to create today. So, without doing it late let’s move toward building a landing page.

First, let me describe the structure and design. The whole contents in the landing page are wrapped inside a single div named ‘container’. The container is divided into two parts; i.e. vertical text area and the main contents area. You can see a big vertical text on the left side. The text is rotated and placed by using the following CSS property.

.container .left p {

-webkit-transform: translate(0, 375px) rotate(270deg);

transform: translate(0, 375px) rotate(270deg);

}

After that, there is a navigation bar containing the logo and some links. In the hero section, the is a heading and subheading. At the right side of the heading, there is a floating circle that is created using the “::before” pseudo-element.

At the bottom on the right side, there is a text having two words. Among them, the word ‘let’ is created using the "::before" pseudo-element. It has a transparent background and a border of 1px. To create a border in the text you have to use the following CSS property:-

.yourText::before{

-webkit-text-stroke-width: 1px;

-webkit-text-stroke-color: #666;

}

If you’re feeling difficult to understand what I am saying. You can watch the video given below.

Video of how to make a responsive landing page

As you’ve seen in the above video, all the landing page design is made with pure CSS. You can also create this landing although you are a beginner. If you like this landing page and want to get source code, you can easily get it. Just scroll down your page.

Landing Page in HTML and CSS [Source Codes]

To create this landing page you need to create two files i.e. one HTML file and one CSS file inside the same folder. After creating files just paste the below codes in your file. First, paste the below code into your index.html file.

index.html

    <!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="style.css">
    <title>Landing Page</title>
</head>

<body>
    <div class="container">
        <div class="left">
            <p>titanium</p>
        </div>
        <div class="right">
            <nav>
                <div class="logo">
                    <img src="logot.png" alt="">
                </div>
                <input type="checkbox" id="check">
                <ul>
                    <li><a href="">what we do</a></li>
                    <li><a href="">join the team</a></li>
                    <li><a href="">GET IN TOUCH</a></li>
                </ul>
                <label for="check" class="hamburger">
                    <div class="line line1"></div>
                    <div class="line line2"></div>
                    <div class="line line3"></div>
                </label>
            </nav>
            <div class="hero">
                <p class="heading">
                    when you<br>feel bored<br>make a coffee,<br>start to code
                </p>
                <p class="sub-heading">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eos commodi libero autem quam
                    ducimus
                </p>
                <p class="discover">Rock</p>
            </div>
        </div>
    </div>
</body>

</html>

Now paste the below CSS code into your style.css file.

style.css

    @import url("https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@200&family=Roboto+Condensed:wght@700&family=Roboto:wght@300&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container .left {
  width: 200px;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

.container .left p {
  -webkit-transform: translate(0, 375px) rotate(270deg);
          transform: translate(0, 375px) rotate(270deg);
  font-size: 140px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 15px;
}

.container .right {
  width: 100%;
  height: 100%;
  background-color: #000d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.container .right nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .right nav .logo {
  margin-left: 100px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.container .right nav .logo img {
  width: 50px;
}

.container .right nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 50px;
}

.container .right nav ul li {
  list-style: none;
  margin-right: 40px;
}

.container .right nav ul li a {
  text-decoration: none;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.container .right nav ul li a:hover {
  color: #ddd;
}

.container .right nav input {
  display: none;
}

.container .right nav #check:checked ~ ul {
  margin-left: 0px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.container .right nav .hamburger {
  margin-right: 30px;
  display: none;
}

.container .right nav .hamburger .line {
  width: 40px;
  height: 3px;
  background-color: #fff;
  margin-bottom: 5px;
}

.container .right nav .hamburger .line2 {
  width: 30px;
  margin-left: 10px;
}

.container .right nav .hamburger .line3 {
  width: 20px;
  margin-left: 20px;
}

.container .right .hero {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.container .right .hero .heading {
  margin-left: 100px;
  color: #fff;
  font-family: sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
}

.container .right .hero .heading::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  border-radius: 50%;
  right: 0;
  margin-right: 300px;
  margin-top: 40px;
  -webkit-animation: circle 4s linear infinite;
          animation: circle 4s linear infinite;
}

@-webkit-keyframes circle {
  0% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
}

@keyframes circle {
  0% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
}

.container .right .hero .sub-heading {
  color: #fff6;
  margin-left: 100px;
  width: 300px;
}

.container .right .hero .discover {
  color: #fff;
  text-align: right;
  margin-right: 30px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 80px;
  font-weight: 700;
  margin-top: 50px;
  position: relative;
}

.container .right .hero .discover::before {
  content: 'Let';
  position: absolute;
  margin-left: -160px;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #666;
}

@media (max-width: 900px) {
  .container .left {
    width: 150px;
  }
  .container .left p {
    font-size: 120px;
  }
  .container .right nav .logo {
    margin-left: 30px;
  }
  .container .right nav ul {
    margin-right: 10px;
  }
  .container .right nav ul li {
    margin-right: 15px;
  }
  .container .right .hero .heading {
    margin-left: 30px;
  }
  .container .right .hero .heading::before {
    margin-right: 50px;
  }
  .container .right .hero .sub-heading {
    margin-left: 30px;
  }
}

@media (max-width: 600px) {
  .container .left {
    display: none;
  }
  .container .right nav .logo {
    margin-left: 10px;
  }
  .container .right nav ul {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    position: absolute;
    top: 60px;
    margin-left: -100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #000;
    z-index: 999;
  }
  .container .right nav ul li {
    margin-top: 20px;
    padding-left: 10px;
  }
  .container .right nav .hamburger {
    display: block;
  }
  .container .right .hero .heading {
    font-size: 30px;
    margin-left: 10px;
  }
  .container .right .hero .sub-heading {
    width: 200px;
    margin-left: 10px;
  }
  .container .right .hero .discover {
    font-size: 50px;
  }
  .container .right .hero .discover::before {
    margin-left: -100px;
  }
}

That’s all, now you’ve successfully created your own responsive landing page using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down your queries. I’m always ready to help you.

Video of how to make a responsive landing page

Landing Page in HTML and CSS [Source Codes]

index.html

style.css

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form