In previous post we will create feedback design , JavaScript Clock , Google login clone ,but today we will create a very interactive and modern website landing page using HTML AND CSS ya yes no needed a JavaScript by using html and CSS we can make this landing page . So lest make this landing page step by step .
On this Site you can learn lots of thing which gonna help you to cover most important things which beginner's must have to know during making landing pages, Like we gonna learn *how to make navigation bar * Which consists a logo placement and on right side it consists menus. Apart from the menu there is a very prominent part of the website heading and para sequence we will also cover how to align heading and image in a row .Last but not least we also make a button which changes on hover so that's it , Lets jump into tutorial part .
Important Note
Before jumping Code download all the assets of this website
Download Now
If you like this landing page and want to get the source codes of this tutorial, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program. You can use this landing page with your creative customization and can take this portfolio to the next level with your creativity.
All you need to make this website just make a folder and create a two files of HTML AND CSS file only where you can write the all the necessary code into files .
THE 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">
<title>Card Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<!-- navbar -->
<div class="navbar">
<div class="logo">
<img src="image/logo.png" alt="">
</div>
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- end navbar -->
<div class="row" style="padding-top: 8rem;">
<!-- left text -->
<div class="col-2">
<h1>Choose Card</h1>
<h1>Considering your</h1>
<h1 class="text_info" >Personal Need</h1>
<p class="text_para" >Gold card and Platinum card with many benefits <br> with more entertainments in your life</p>
<a href="" class="btn" >Explore Now →</a>
</div>
<!-- end left text -->
<!-- right image -->
<div class="col-2">
<img src="image/card_01.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
background: #000;
}
body{
font-family: 'Inter', sans-serif;
height: 100vh;
}
.navbar
{
display: flex;
align-items: center;
padding: 20px;
}
nav{
flex: 1;
text-align: right;
}
nav ul{
display: inline-block;
list-style-type: none;
}
nav ul li
{
display: inline-block;
margin-right: 50px;
color: white;
font-weight: 700;
}
ul li:hover {
background: rgb(0, 0, 0);
color: #ffffffe0;
}
a{
text-decoration: none;
color:rgb(255, 255, 255); ;
}
p{
color: rgb(0, 0, 0);
}
.container
{
max-width: 1400px;
margin: auto;
flex-wrap: wrap;
justify-content: space-around;
}
.row
{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2
{
flex-basis: 50%;
min-width: 300px;
}
.col-2 img {
max-width: 100%;
padding: 50px 50px;
}
.col-2 h1 {
font-size: 50px;
line-height: 32px;
margin: 25px 0;
color: rgb(255, 255, 255);
}
.text_info
{
font-size: 40px;
font-weight: 200;
color: white;
}
.text_para
{
margin-top: 2rem;
border-radius: 10px;
color: white;
}
.btn
{
display: inline-block;
background: #f0f0f0;
color: rgb(41,41,41);
padding: 22px 29px;
margin: 30px 0;
border-radius: 9px;
}
.btn:hover {
background: #0004ff;
color: white;
transition: 0.9s;
}
I hope you have learned from this tutorial how we can create the Above website using only HTML & CSS.
Hopefully from this article, you have learned how to make this Header using HTML, CSS.
If you can understand how to make this watch from this article, please comment with your opinion. I have already made many more types of JavaScript mini-projects so you can see those designs if you want.
You can visit my blog for more tutorials like this.
Conclusion
I hope you enjoyed this little project.
Happy Codding ✨
Top comments (0)