CREATE NEW WEBSITE USING HTML AND CSS
- hiravepradnya19
- Oct 17, 2020
- 2 min read
Updated: Oct 21, 2020
1. Plan your layout
The first step of any website is always to know what you want on it and (vaguely) how you want it to look. So, the first step is to do a rough sketch - either on paper or on the computer, depending on which you find easier.
2. Get the ‘boilerplate code’ set up
Now, it’s time to get the basic code that you have at the start of any website (this is commonly called the boilerplate).
Do this by:
Creating a new folder on your computer for the website
Create new empty index.html and style.css files inside
Add the basic ‘boilerplate code’ to your index.html file:
Finally, open up your index.html in a web browser to check everything’s working:
HTML Code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700%7CPT+Serif:400,700,400italic'
rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Montserrat|open+sans"
rel="stylesheet">
</head>
<body>
<div class="bgimage">
<div class="menu">
<div class="leftmenu">
<h4> Pradnya Hirave </h4>
</div>
<div class="rightmenu">
<ul>
<li id="firstlist"> HOME </li>
<li> Services </li>
<li> images </li>
<li> About us </li>
<li> Contact </li>
</ul>
</div>
</div>
<div class="text">
<h4> DESIGN • DEVELOPMENT • BRANDING </h4>
<h1> CREATIVE & EXPERIENCED </h1>
<h3> WE ARE THE ONE OF THE WORLD'S TOP CREATIVE DESIGN AGENCIES</h3>
<button id="buttonone"> Watch Video </button>
<button id="buttontwo"> Explore More </button>
</div>
</div>
</body>
</html>
Css code:
*{
margin: 0px;
padding: 0px;
}
.bgimage{
background-image: url('lappy.jpg');
background-size: 90% 110%;
width: 100%;
height: 100vh;
}
.menu{
width: 100%;
height: 100px;
background-color: rgba(0,0,0,0.5) ;
}
.leftmenu{
width: 25%;
line-height: 100px;
float: left;
/* background-color: yellow; */
}
.leftmenu h4{
padding-left: 70px;
font-weight: bold;
color: white;
font-size: 22px;
font-family: 'Montserrat',sans-serif;
}
.rightmenu{
width: 75%;
height: 100px;
float: right;
/* background-color: red; */
}
.rightmenu ul {
margin-left: 300px;
}
.rightmenu ul li {
font-family: 'Montserrat',sans-serif;
display: inline-block;
list-style: none;
font-size: 15px;
color: white;
font-weight: bold;
line-height: 100px;
margin-left: 40px;
text-transform: uppercase;
}
color: orange;
}
.rightmenu ul li:hover{
color: orange;
}
.text{
width: 100%;
margin-top: 185px;
text-transform: uppercase;
text-align: center;
color: white;
}
.text h4{
font-size: 14px;
font-family: 'open Sans', sans-serif;
}
.text h1{
font-size: 62px;
font-family: 'Montserrat', sans-serif;
font-weight: 700px;
margin: 14px 0px;
}
.text h3{
font-size: 12px;
font-family: 'open Sans', sans-serif;
}
background-color: white;
border: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
line-height: 40px;
width: 150px;
font-family: 'Montserrat', sans-serif;
margin-top: 25px;
border: 3px solid white;
}
background-color: transparent;
border: none;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: bold;
line-height: 40px;
border: 3px solid white;
width: 150px;
}
Opmerkingen