how to create a website design using html And css

Hello friends, in this blog today you will learn how to create html and CSS and using website design. We created a header page of a website using html and CSS which we have shared, you will learn to make this website page easily.

We had previously shared an eCommerce website, you can click on this link and go to that page and read it.You might know that a website is a web page and a collection of content also known as a domain name and it is published on the web server. The website is dedicated to a particular subject such as news entertainment or social that you Just learn how to create html and CSS of website.

You can see in this image that it is created from the source code of html and CSS only, which will make you learn how to make it easily. This website has a logo on the left side and has a tittle written below it, which is a logo required for a website, which has been placed in this website, this website has 5 menus in the right site which is like Home, About, Classes, schedules and contacts have been hover over these sub menus. I mean to say that moving the mouse over this menu changes the color. You have a logging button on the right side of the menu which you need to click on Logging the form is open on the screen, written JavaScript code that you will learn to make easy use of.

And in this website, the following two buttons have been designed, which has been border radius, this button also hovers when the mouse is moved. I have to say that moving the mouse over the button changes the color and the text of the button Also gets a color change designed with the help of CSS

You have a login form in the website, when you click on the logging in button, the logging form opens, it has a name password in the input field and a submit button. This website is designed for a design. This website is not a work website. If you are a beginner in this and you are learning webdesign then you will get help from this website.

Website Design Using Html And CSS Source Codes

We first know about html of website design, we have taken a div inside the body tag and named this div as wrapper and inside the wrapper also took a div whose class name is header and inside this header we have two And the div whose class name is sub-header and bttm has also taken a div inside the class sub-header, whose class name is top-header, two div is taken inside the top-header and one div's class name is logo and the other Ka nav has taken a p tag and h3 tag inside the class logo inside which the text is written

After this the under ul tag of class nav is taken. Ul tag is called unordered list. Within this ul, six li tag is taken. Li tag is called list item and all of these tags have a tag. This tag is said to be used to link something, inside it the name of the menu is written.

And two div is taken inside bttm whose class name is btn-head, this has text written and button created inside the first div and form tag is taken inside the second div which you see in the right side of the image above. And three social icons are placed below its input

We know about the css style of website design. First of all we have tagged the page of the tag page of Hamesa to the margin padding and boxed the box size, then we have given the background image by giving width and height to the class wrapper and all other tags. A website has been styled in the same way that you are seeing in the image above.

This website has not been designed in response, if you want to make it responsive, then you can style it by giving size according to the device using the @ media screen, which you can easily see this website in mobile and tab.

If you are having difficulties in understanding this, then you can understand by watching the video of this website, the video which has been given below, you can easily see it by clicking on it.

Video Tutorial of website using html And CSS

I hope you have understood this tutorial and have also understood how the source code of this website has been used, so if you like this website then you can get the source code of this website which we can use this source The code is given in two files, copy both these files and paste them in your file.

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="css/all.min.css" rel="stylesheet">
    <link href="websit.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="header fl">
            <div class="sub-header">
                <div class="top-header">
                    <div class="logo fl">
                        <p>
RAVIWEB<span>DESIGN</span></p>
<h3>
Raviweb design tutorial</h3>
</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="#" onclick="document.getElementById('form').style.display='block'"><span class="sin">LOGIN</span></a></li>
</ul>
</div>
</div>
<!--------end top header-->
            </div>
<!----end sub header-->
            <div class="bttm">
                <div class="btn-head fl">
                    <h1>
RAVI WEB DESIGN <span>TUTORIAL</span></h1>
<h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled.</h5>
<div class="bcom fl">
                        <p>
BECOME A MEMBER</p>
</div>
<div class="bcom fl">
                        <p>
LEARN MORE</p>
</div>
</div>
<div class="btn-head fr">
                    <div id="form">
                        <h2>
LOGIN</h2>
<form method="POST">
                            <p>
<input type="text" name="uname" placeholder="username" class="inpt" required></p>
<p>
<input type="password" name="uid" placeholder="password" class="inpt" required></p>
<p>
<input type="password" name="cpas" placeholder="confirm password" class="inpt" required></p>
<p>
<input type="submit" name="login" value="SUBMIT" class="log"></p>
<p>
<i class="fab fa-facebook bg1"></i>
                                <i class="fab fa-twitter bg2"></i>
                                <i class="fab fa-google-plus bg3"></i>
                            </p>
</form>
</div>
</div>
</div>
</div>
</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;}

Website Design Using Html And CSS Source Codes

Video Tutorial of website using html And CSS

HTML CODE FILE :

CSS CODE FILE :

Post a Comment

Post a Comment

About Us

Contact Form

how to create a website design using html And css

Website Design Using Html And CSS Source Codes

Video Tutorial of website using html And CSS

HTML CODE FILE :

CSS CODE FILE :

You might like

Post a Comment

Post a Comment

Contact Form