how to Create a Gym Website using HTML and CSS with Source Code
Howdy associates, on this weblog you’ll learn to design web site with html and CSS. In case you are a newbie on this and you’ve got information of html and CSS, then you’ll be able to perceive this web site design and make good web site design. This web site is designed solely, it has no perform, it’s designed as a design.
You’ll have seen many varieties of web site designed, however on this weblog you’ll learn to design web site with the assistance of html and CSS solely. We’ve got already posted a web site design which is designed for Navigation bar and login type, you’ll be able to learn and click on on the hyperlink to view or learn that web site. Which you might be attending to study login type with web site.
You may see on this picture this can be a web site designed. This web site is designed by coding html and CSS which has the brand of the web site on the left facet of the header and the navigation bar and signup button in the appropriate facet of the navigation bar. Html Contained in the <ul> tag, it’s written within the <li> tag. All these tags are designed with CSS and the navigation bar is finished in a line. In case you are studying net design or need to create a web site easy web site design then you might be in the appropriate place. You’ve got come to learn about this design The right info will likely be given in
If you wish to perceive by watching the video of this web site design, then you’ll be able to perceive it by watching the video. This video is shared beneath, you’ll be able to watch the video by clicking on the video, you’ll be able to click on on our YouTube channel and get details about the entire web site design, you’ll be able to click on on the hyperlink and are available to our channel which you Design info is offered.
I hope you could have understood by trying on the web site design tutorial how the code of the header of this web site has been written and you’ve got additionally understood concerning the code of Navigation bar inside this header and the code of those html in CSS You will need to have absolutely understood how the design has been designed and the way this peak and width have been used.
Web site Design Using Html and CSS Source Codes
We all know concerning the html code of web site design, we took a div contained in the physique whose class identify is wrapper and took a div inside it and wrote its class identify header, took two div on this header whose class identify is sub-header and btn -head positioned class inside sub-header took one other div whose class identify is top-header Inside this div we’ve taken the div of emblem and the tag of navigation bar. We’ve got used the menu of this navigation bar to tag the unordered record A li record is finished inside this sub, it’s known as record model underneath a anchor tag of this record model is taken and inside this anchor tag the menu of unordered record is written unordered record six record model tag is taken which Hyperlink to anchor tag is taken inside all
A p tag is taken inside the category btn-head. p tag is used for paragraphs and h1 tag is taken beneath this p tag, inside which a span tag is taken span tag is an inline factor of this tag. Utilizing this, we will write textual content in a line, so after this tag we’ve taken a div whose class identify is bcom, we’ve used this div as a button on this web site with underneath taking a p tag which Seems to be higher
Now tell us concerning the model of some css of this web site, to begin with it’s important to zero this web page with margin and padding from * and border-box the box-size, after this the category wrapper is sized in width and peak and The background picture has been given colour within the background by giving width and peak to the category header of this wrapper, equally all different tags have additionally been designed within the web site by giving dimension colour and so on.
To design this web site as ST Maltimedia display, you’ll be able to design by giving the scale of various units, which you’ll simply see in mobiles and flames as in case you have totally different dimension of every gadget and totally different laptop computer. cell and tab have totally different dimension aap could be styled in response to their very own.
If you wish to get the code of this web site design, then you will get the supply code to know it, during which we’ve given two code information, one html and the opposite CSS code file, each these code information are given beneath which you copy of scroll automobile You may get these by copying these supply code and paste it within the file. Which can make it simpler so that you can perceive.
Video Tutorial of web site design utilizing html and CSS
I hope you could have understood by trying on the web site design tutorial how the code of the header of this web site has been written and you’ve got additionally understood concerning the code of Navigation bar inside this header and the code of those html in CSS You will need to have absolutely understood how the design has been designed and the way this peak and width have been used.
Web site Design Utilizing Html and CSS Supply Codes
We all know concerning the html code of web site design, we took a div contained in the physique whose class identify is wrapper and took a div inside it and wrote its class identify header, took two div on this header whose class identify is sub-header and btn -head positioned class inside sub-header took one other div whose class identify is top-header Inside this div we’ve taken the div of emblem and the tag of navigation bar. We’ve got used the menu of this navigation bar to tag the unordered record A li record is finished inside this sub, it’s known as record model underneath a anchor tag of this record model is taken and inside this anchor tag the menu of unordered record is written unordered record six record model tag is taken which Hyperlink to anchor tag is taken inside all
A p tag is taken inside the category btn-head. p tag is used for paragraphs and h1 tag is taken beneath this p tag, inside which a span tag is taken span tag is an inline factor of this tag. Utilizing this, we will write textual content in a line, so after this tag we’ve taken a div whose class identify is bcom, we’ve used this div as a button on this web site with underneath taking a p tag which Seems to be higher
Now tell us concerning the model of some css of this web site, to begin with it’s important to zero this web page with margin and padding from * and border-box the box-size, after this the category wrapper is sized in width and peak and The background picture has been given colour within the background by giving width and peak to the category header of this wrapper, equally all different tags have additionally been designed within the web site by giving dimension colour and so on.
To design this web site as ST Maltimedia display, you’ll be able to design by giving the scale of various units, which you’ll simply see in mobiles and flames as in case you have totally different dimension of every gadget and totally different laptop computer. cell and tab have totally different dimension aap could be styled in response to their very own.
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;}
