In this videos you will learn to create a website using HTML and CSS in notepad or any text editor, You will learn to create the header part of the website, I will show you how to add background image in HTML website, Create navigation menu using html. This is a complete tutorial for beginner, who want to learn HTML & CSS website development.
HTML
Before we start writing code first, we need to create a primary structure of the HTML document, so that the browser can understand and start working. The basic HTML structure looks like the following.
After writing the primary structure of the HTML document, you will also write the tags and content you need. After that, you can see the output in your browser. We know that HTML Sudu Mae is used for exposing content in a basic format. To complete our content we need to use CSS, which is an HTML insert and it creates an engaging user interface.
<html>
<head>
<title>Website Design html and css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header f1 ">
<div class="header-sub">
<div class="header-top">
<div class="logo f1"><p>Easy web <span>Coding</span></p></div>
<div class="nav fr">
<ul>
<li><a href="#"><span class="home">HOME</span></a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CLASSES</a></li>
<li><a href="#">SCHEDULES</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><span class="sin">SIGN UP</span></a></li>
</ul>
</div>
</div>
</div>
<div class="btn-head">
<p><span>WEB DESIGN TUTORIALS</span></p>
<h1>Easy Web <span>Coding</span></h1>
<div class="bcome">
<p>BOCOME MEMBER</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
Now, we have time to improve the HTML content, for that, we need to add CSS to the HTML file. CSS can be added to HTML documents in a total of three ways, here we are using outside CSS design using CSS will arrive here after typing and see the output in your browser.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial,Helvetica,sans-serif;
}
.f1{float: left;}
.fr{float: right;}
.wrapper{
width: 100%;
height: 100vh;
background-image: url(bg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.header{
width: 100%;
height: 100Vh;
background-color: rgba(73,80,90,0.55);
}
.header-sub{
width: 100%;
position: absolute;
background-color: rgba(94,101,111,0.65);
}
.header-top{
width: 80%;
height: 80px;
margin: auto;
}
.logo{
width:30%;
}
.logo p{
padding: 22px;
font-size: 32px;
color: #fff;
font-weight: bold;
}
.logo p span{
color: #ED553D;
}
.nav{
width: 70%;
margin-top: 10px;
}
.nav ul{
text-align: center;
margin-top: 20px;
}
.nav ul li{
display: inline;
margin-left: 1%;
}
.nav ul li a{
text-decoration: none;
padding: 20px 1%;
font-size: 16px;
color: white;
}
.nav ul li a:hover{
color: #ED553D;
}
.home{color: #ff2855;}
.btn-head{
width: 80%;
margin: auto;
margin-top:250px;
}
.btn-head p{
text-align: center;
font-size: 35px;
color: #fff;
font-weight: bold;
}
.btn-head p span{
font-family: 'Pacifico', cursive;
}
.btn-head h1{
text-align: center;
color: white;
font-size: 60px;
margin-top:20px;
}
.btn-head h1 span{
color: #ED553D;
}
.bcome{
width: 20%;
height: 50px;
background: #ED553D;
margin-top: 60px;
border-radius: 30px;
margin: auto;
}
.bcome p{
font-size: 15px;
line-height: 50px;
}
.bcome p:hover{
background: #fff;
color: #ED553D;
border-radius: 30px;
}
Reviewed by easycoding
on
September 05, 2020
Rating:
No comments: