Skip to main content

Modern Websites Landing Page | HTML And CSS

by Rustcode

Modern-Websites-Landing-Page-Design-Rustcode
We know that the website design trend change over time. So in this post, we will discuss the landing page of the modern website. Indirectly we will see how to design the website landing page with the latest trend. We can design a complete website on this trend but here we'll see only landing page. that it.

Here we will use an illustration image(svg element) and simple html and css technology to complete this design. In trending website designing we are using svg element to create the illustration image.

For simplicity, I am using flexbox css to align the elements of our landing page because it(flexbox) is a very easy and trending concept to design websites. Flexbox is in the trending because it provides various options to developers to make the website responsive. Flexbox can covert your normal website flow into the responsive design in just a few lines of code that is the flexibility of it.

This is a very simple way to design a modern website landing page. In this post, you will see that I am not implementing any kind of animation on elements but you can implement various animation with elements and create a very smooth experience for visitors. so let's get started.

RELATED POST:

1. Header Design

In the modern landing page designing, we start with the header. In the header, we will put a logo and 3-4 menu options like this.
Now it is time to convert the header design in html format. So let's do this and write html code for the header.
<!DOCTYPE html>
<html>
   <head>
      <title>Fashion Designer Landing Page</title>
      <link rel="stylesheet" href="style.css" type="text/css">
   </head>
   <body>
      <div id="header">
         <div id="logo">
            <h3><span>Website</span> Name</h3>
         </div>
         <nav>
            <a href="#">HOME</a>
            <a href="#">WORK</a>
            <a href="#">INFO</a>
            <a href="#">GET STARTED</a>
         </nav>
      </div>
   </body>
</html>

After this we need to add an css to beautify our header we will add css to header so that we can align all element of header. 
*{
padding: 0px;
margin: 0px;
font-family: poppins, sans-serif;
font-weight: 700;
box-sizing: border-box;
}

#header{
padding: 20px;
width: 100%;
background: #FFF;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

#header #logo{
font-style: italic;
font-size: 20px;
}

#header #logo span{
color: #564FCC;
}
#header nav{
color: #000;
}

#header nav a{
font-size: 14px;
text-decoration: none;
padding: 10px;
text-align: center;
color: black;
}

#header nav a:hover{
opacity: 0.9;
}

Fonts play a very big role in website development because we represent our ideas through the words on the website. So always ensure that your font is looking cool on the website. Let's import a font-family in our css or you can put that font family link in your header section like this. 
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
</style>

<head>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700" rel="stylesheet">
</head>

In the menu designing, we created a special effect on the last element that name is "Get Started". So let see how to change the last element of the menu. 
#header nav a:last-child{
color: white;
background: #6C63FF;
padding: 10px 20px;
margin-left: 30px;
border-radius: 30px;
}

2. Landing Page

Before developing a landing page, let see our design, which we want to develop. So that we have an idea of ​​what we want to develop.



After look at the design the idea is that we will divide our landing page container into two-part, one part will contain the description, button and main blog-article-heading of the landing page and the other is svg image container.

Now this time the image will be in svg format and we used a flexbox inside the header to align the logo and menu list. The same concept we will apply here(landing page) to develop the inline flow of elements (description and image). Let's start writing the html of the landing page.
<div id="container">
   <div id="content-container">
      <h1>Fashion Designer</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Aenean commodo ligula eget dolor.
         Aenean massa.</p>
      <button>Read More</button>
   </div>
   <div id="bg-container">
      <svg>Click here to download svg element </svg>
   </div>
</div>

Again we will write css to align the landing page element. We have an svg image inside our html document, you can download that svg image from here. For landing page alignment we are using flexbox but you can use any kind of css properties(like: grid) to design this page. We are using a flexbox due to its responsive functionality. So without any further delay let see our "modern landing page" css.
#container{
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 20px;
height: 575px;
}
#bg-container{
width: 50%;
}
#bg-container svg{
width: 100%;
height: 90%;
}
#content-container{
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
}
#content-container h1{
color: #564FCC;
font-weight: 900;
font-size: 80px;
line-height: 0.9em;
margin-bottom: 30px;
}
#content-container p{
line-height: 1.8em;
font-weight: 500;
}
#content-container button{
border: none;
outline: none;
color: #FFF;
background-color: #6C63FF;
padding: 16px 0px;
border-radius: 40px;
font-size: 16px;
width: 160px;
margin-top: 30px;
cursor: pointer;
}
#content-container button:hover{
opacity: 0.9;
}

3. Youtube Video


4. Source Code

After reading this post and watching this YouTube video, I hope you have got a good understanding of all this development. You try to write this code yourself and match it with our source code, which you can download from here.

source code

If this article is useful and informative for you, share it. And if you have any doubt, please leave a comment.

Comments

Post a Comment