Hey, guys again welcome back to the brand new tutorial in this tutorial we gonna learn how to create this beautiful website for card companies using HTML CSS only. in this tutorial, we will learn How to create a modern website using HTML and CSS step by step website tutorial.
The HTML
Let’s start with basic HTML for making a skeleton of the website . We have to start with navbar and then move to the header part of the website then jump to the image part. Using the below code you will
<!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>
The CSS
let’s make a very basic styling using CSS to make our header part. As I mention in upper part using our HTML we have created all the components of navbar and header text para and image lets make this header looks beautiful by applying some CSS to out skeleton. Here below I have mention all the code for designing our header. you can check this out and play around with these values and see what effect you will get.
@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 ✨
Download Link Assets
People are also reading:
- Crypto-currency website| Source Code Free Download
- How To Create Sign Up Form In HTML and CSS
- Top Stunning Free Websites to Download Responsive HTML Templates 2021
- JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design
- How to make Interactive Feedback Design Using HTML CSS & JS
- 5 amazing ways to earn Money online as a side option .
- finest alternative of Chinese apps for Android and iOS
- Top Best 5 Fonts Of 2020 Used By Professional Graphic Designers