Hello friends, today in this blog you’ll learn How To Create A Website Home Page Using HTML And CSS . We’ll use Html & Css to create this Home Page . Earlier I’ve shared a blog on Css Image Hover Effect Using Html Css | Css Image Card Hover Effect .
If You have any Problem so, I Also Created a full video tutorial on this How To Create A Website Home Page Using HTML And CSS you can see this tutorial .
Video Tutorial of ” Home Page Using HTML And CSS “
You might like this:
- Responsive Image Slider
- Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form
- How to Create a Social Media Login Form Using Html & Css
- How To Create Responsive Login Form Using Html Css Only
- How to Create Resume CV Website Using HTML CSS Bootstrap4
Home Page Using HTML And CSS [Source Codes]
To create this Home page First, you need to create Twoe files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Website Home Page Using HTML And CSS from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<body>
<div class="bgimage">
<div class="menu">
<div class="leftmenu">
<h4> NICK </h4>
</div>
<div class="rightmenu">
<ul>
<li id="firstlist">Home</li>
<li>Services</li>
<li>Work</li>
<li>About Us</li>
<li>Blogs</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 class="btn"> Like share</button>
<button class="btn"> Subscribe</button>
</div>
</div>
<!-- /* coding with nick */ -->
</body># CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
/* coding with nick */
*{
margin: 0px;
padding: 0px;
}
.bgimage{
background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),url("BG.jpg");
background-size: 100%;
width: 100%;
height: 100vh;
}
.menu{
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.1);
}
.leftmenu{
width: 20%;
line-height: 100Px;
float: left;
}
.leftmenu h4{
padding-left: 70px;
font-weight: bold;
color: white;
font-size: 22px;
font-family: 'montserrat', sans-serif;
}
.rightmenu{
width: 60%;
height: 100Px;
float: right;
}
.rightmenu ul{
margin-left: 200px;
}
.rightmenu ul li{
display: inline-block;
font-family: 'montserrat', sans-serif ;
list-style: none;
font-size: 15px;
color: white;
font-weight: bold;
line-height: 100px;
margin-left: 40px;
text-transform: uppercase;
cursor: pointer;
}
.rightmenu ul li:hover{
color: #00ccff;
}
#firstlist{
color: #00ccff;
}
.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: 15px;
font-family: 'open sans', sans-serif;
}
.btn{
background-color: rgba(255,255,255, 0.164);
color: white;
font-family: 'montserrat', sans-serif ;
border: none;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
line-height: 40px;
width: 150px;
margin-top: 25px;
border: 3px solid white;
cursor: pointer;
}
.btn:hover{
background-color: white;
color: black;
}
/* coding with nick */That’s all, now you’ve successfully created a Home page using html css . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
