Hello readers, Today In this article I am going to show you how to create a Simple Website using HTML & CSS. One of the most beautiful and good-looking designs of a Modern Website Design.
You easily create a Website Design using HTML & CSS then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Website Design
On this Portfolio site, there are a logo left side and a navigation bar right side with a search button. Next Step, On the left side of this site, there are texts with form. And right side image.
Watch the video tutorial to create Website Design
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Website Design step by step completely beautifully. So you can learn how to make this Modern Website. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Website Design Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Ecommerce Product Card Design using CSS
- Responsive Login Form using Bootstrap
- Responsive Sidebar Menu Using JavaScript
Website Design | Source Codes
You have to create an HTML and CSS File For this Website Design. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website esign</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----Font CDN Link---->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="navbar_container">
<div class="logo_container">
<img src="./image/logo1.png">
</div>
<div class="navlinks" id="navlinks_container">
<div class="navlinks">
<a href="#" class="active">Home</a>
<a href="#">Services</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">FAQ</a>
</div>
</div>
<div class="button">
<a href="" class="search"><i class="fa fa-search"></i></a>
</div>
</div>
<div class="banner">
<div class="left">
<div class="left_inner_container">
<h2><span>Subscribe Now</span><br>to Our Newsletter</h2>
<p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus id adipisci, deleniti ab pariatur delectus, totam tempore accusamus beatae cupiditate culpa voluptas.</p>
<div class="box">
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<button class="button2" type="button" name="button">Send<i class="fa fa-caret-right"></i></button>
</form>
</div>
</div>
</div>
<div class="right">
<div class="right_inner_container">
<img id="intro" src="./image/plane.png">
<img id="intro1" src="./image/message.png">
</div>
</div>
</div>
<div class="bottomline"><div class="minline"></div></div>
</div>
</body>
</html>
Second Step, you have to 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.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:[email protected];500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Be vietnam', sans-serif;
overflow: hidden;
}
html{
font-size: 62.5%;
}
.container{
background: #20364b;
position: relative;
}
.navbar_container{
width: 100%;
position: absolute;
height: 10rem;
background: transparent;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0% 10% 0% 10%;
}
.logo_container{
width: 15%;
display: flex;
justify-content: center;
align-items: center;
}
.navlinks{
font-size: 2rem;
width: 100%;
text-align: right;
}
.navlinks a{
text-decoration: none;
font-size: 1.5rem;
color: #fff;
padding-right: 40px;
font-weight: 600;
}
.navlinks a.active,
.navlinks a:hover{
color: #eab31d;
}
.search{
background: #fdc11f;
width: 40px;
height: 40px;
border-radius: 50%;
}
.search i{
position: relative;
font-size: 16px;
background: #fdc11f;
padding: 10px;
border-radius: 50%;
color: #253a49;
}
.button{
margin-top: 8px;
background-color: #70683b;
padding: 7px;
border-radius: 50%;
}
.banner{
height: 70rem;
display: flex;
width: 100%;
justify-content: center;
}
.left, .right{
height: 100%;
width: 50%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.right{
justify-content: flex-start;
background-image: url(image/right1.png);
background-position: center left;
background-repeat: no-repeat;
max-width: 100%;
}
.left_inner_container{
height: 75%;
display: block;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 80%;
}
.left_inner_container h2{
font-size: 37pt;
width: 49rem;
line-height: 42pt;
color: #fff;
}
.left_inner_container h2 span{
color: #fdc11f;
}
.info{
margin-top: 20px;
font-size: 11pt;
width: 40rem;
line-height: 14pt;
word-spacing: 2px;
color: #fff;
}
.right_inner_container{
height: 77%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 80%;
}
.box input,
.box button{
display:block;
}
.box{
margin-top: 20px;
}
.box input{
width: 290px;
height: 40px;
border-radius: 20px;
outline: none;
border: none;
margin-bottom: 25px;
padding-left: 30px;
}
.box input::placeholder{
font-weight: light;
font-size: 11pt;
}
.box .button2{
width: 150px;
height: 50px;
border-radius: 56px;
outline: none;
border: none;
background: #fdc11f;
font-size: 18px;
color: #20364b;
}
.button2 i{
margin-left: 5px;
}
#intro{
width: 10%;
margin-left: 40px;
margin-top: 20px;
}
#intro1{
width: 10%;
margin-bottom: 173px;
margin-left: -73px;
}
.bottomline{
width: 150px;
height: 5px;
background-color: #445668;
display: inline-block;
margin: auto;
position: absolute;
bottom: 90px;
left: 44%;
text-align: center;
border-radius: 10px;
}
.minline{
display: inline-block;
background: #fdc11f;
width: 40px;
height: 5px;
position: absolute;
border-radius: 10px;
left: 40px;
}now you’ve successfully created these Responsive Modern Website Design Using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
