Hello friends, in this blog you will learn how to design website with html and CSS. If you are a beginner in this and you have knowledge of html and CSS, then you can understand this website design and make good website design. This website is designed only, it has no function, it is designed as a design.
You may have seen many types of website designed, but in this blog you will learn how to design website with the help of html and CSS only. We have already posted a website design which is designed for Navigation bar and login form, you can read and click on the link to view or read that website. Which you are getting to learn login form with website
You can see in this image this is a website designed. This website is designed by coding html and CSS which has the logo of the website on the left side of the header and the navigation bar and signup button in the right side of the navigation bar. Html Inside the <ul> tag, it is written in the <Li> tag. All these tags are designed with CSS and the navigation bar is done in a line. If you are learning webdesign or want to create a website simple website design then you are in the right place. You have come to know about this design The correct information will be given in
If you want to understand by watching the video of this website design, then you can understand it by watching the video. This video is shared below, you can watch the video by clicking on the video, you can click on our YouTube channel and get information about the whole website design, you can click on the link and come to our channel which you Design information is provided
Video Tutorial of website design using html and css
I hope you have understood by looking at the website design tutorial how the code of the header of this website has been written and you have also understood about the code of Navigation bar inside this header and the code of these html in CSS You must have fully understood how the design has been designed and how this height and width have been used.
Website Design Using Html and CSS Source Codes
We know about the html code of website design, we took a div inside the body whose class name is wrapper and took a div inside it and wrote its class name header, took two div in this header whose class name is sub-header and btn -head placed class inside sub-header took another div whose class name is top-header Inside this div we have taken the div of logo and the tag of navigation bar. We have used the menu of this navigation bar to tag the unordered list A li list is done inside this sub, it is called list style under a anchor tag of this list style is taken and inside this anchor tag the menu of unordered list is written unordered list six list style tag is taken which Link to anchor tag is taken inside all
A p tag is taken inside the class btn-head. p tag is used for paragraphs and h1 tag is taken below this p tag, inside which a span tag is taken span tag is an inline element of this tag. Using this, we can write text in a line, so after this tag we have taken a div whose class name is bcom, we have used this div as a button in this website with under taking a p tag which Looks better
Now let us know about the style of some css of this website, first of all you have to zero this page with margin and padding from * and border-box the box-size, after this the class wrapper is sized in width and height and The background image has been given color in the background by giving width and height to the class header of this wrapper, similarly all other tags have also been designed in the website by giving size color etc.
To design this website as @media screen, you can design by giving the size of different devices, which you can easily see in mobiles and flames as if you have different size of each device and different laptop. mobile and tab have different size aap can be styled according to their own.
If you want to get the code of this website design, then you can get the source code to understand it, in which we have given two code files, one html and the other CSS code file, both these code files are given below which you copy of scroll car You can get these by copying these source code and paste it in the file. Which will make it easier for you to understand.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="website.css" rel="stylesheet">
</head>
<body>
<div class="warpper">
<div class="header fl">
<div class="sub-header">
<div class="top-header">
<div class="logo fl">
<p>RAVIWEB <span>DESIGN</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>
<!-------end top header-->
</div>
<!---------sub header-->
<div class="btn-head">
<p>WEBSITE DESIGN TUTORIAL</p>
<h1>RAVI WEB DESIGN <span>TUTORIAL</span></h1>
<div class="bcom">
<p> BECOME A MEMBER</p>
</div>
</div>
</div>
<!----end header-->
</div>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.fl{float: left;}
.fr{float: right;}
.wrapper{
width: 100%;
height: 100vh;
background-image: url("image/im1.png");
background-repeat: no-repeat;
background-size: cover;
}
.header{
width: 100%;
height: 100vh;
background-color: #0a193dc4;
}
.sub-header{
width: 100%;
background-color: #08192c83;
position: fixed;
top: 0;
}
.top-header{
width: 80%;
height: 80px;
margin: auto;
}
.logo{
width: 30%;
}
.logo p{
padding: 22px 5% 0 0;
font-size: 20px;
color: #fff;
font-weight: bold;
}
.logo p span{color: #ff2855;}
.logo h3{
color: #cecccc;
font-size: 10px;
margin-left: 5%;
}
.nav{
width: 70%;
margin-top: 10px;
}
.nav ul{
text-align: right;
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: #fff;
}
.nav ul li a:hover{color: #ff2855;}
.home{color: #ff2855;}
.sin{
background-color: #ff2855;
padding: 20px 4%;
border-radius: 30px;
}
.sin:hover{
color: #ff2855;
background-color: #08192c;
border: 1px solid #04244983;
}
.bttm{
width: 80%;
margin: auto;
}
.btn-head{
width: 50%;
margin-top: 200px;
}
.btn-head h1{
text-align: center;
color: #FBFDFC;
font-size: 40px;
margin-top: 50px;
}
.btn-head h1 span{color: #ED553D;}
.btn-head h5{
text-align: center;
font-size: 14px;
line-height: 25px;
letter-spacing: 1px;
color: rgb(230, 230, 230);
font-weight: bold;
margin-top: 15px;
}
.bcom{
width: 40%;
height: 50px;
background-color: #ff2855;
margin-left: 5%;
margin-top: 25px;
border-radius: 30px;
color: #fff;
cursor: pointer;
}
.bcom:hover{
background-color: #08192c;
color: #ff2855;
}
.bcom p{
font-size: 16px;
text-align: center;
line-height: 50px;
font-weight: bold;
}
#form{
width: 70%;
height: 400px;
margin-left: 30%;
background-color: #08192ce5;
border-radius: 10px;
display: none;
}
#form h2{
padding: 15px 0%;
text-align: center;
color: #ff2855;
border-radius: 10px 10px 0 0;
background-color: rgba(8, 25, 44, 0.911);
}
#form p{
text-align: center;
margin-top: 20px;
}
.inpt{
width: 80%;
height: 40px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #e0e0e0;
color: #706868;
font-size: 16px;
}
.inpt::placeholder{
color: #ED553D;
font-size: 16px;
}
.log{
width: 60%;
height: 40px;
background-color: #ff2855;
border-radius: 25px;
color: #fff;
font-weight: bold;
outline: none;
font-size: 16px;
border: none;
box-shadow: 2px 2px 10px rgb(1, 4, 8);
cursor: pointer;
}
.log:hover{
background-color: #EB2553;
color: #08192c;
}
#form p i{
font-size: 20px;
padding: 10px;
color: #fff;
margin-right: 5%;
cursor: pointer;
border-radius: 180px;
}
.bg1{
background-color: rgb(17, 20,211);
}
.bg2{background-color: #248ddd;}
.bg3{background-color: #e93d26;}
Post a Comment