Responsive home page with HTML and CSS with full code
Preview:
1) Pc View:
2) Mobile View:
HTML Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Website using HTML and CSS</title>
</head>
<body>
<div class="header-area">
<div class="menu">
<div class="logo">
<img id="logo-image" src="13511.png" alt="">
</div>
<ul class="nav-area">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="banner-text">
<h1>We are <span>Creative</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
magnam dolore explicabo modi rem nullaoptio cum aliquam esse illo laborum
qui a distinctio, sunt nesciunt enim.</p>
<a href="#">Contact Us</a>
</div>
</div>
</body>
</html>
CSS Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: poppins, sans-serif;
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
url(image01.jpg) no-repeat;
/* -webkit-background-size: cover; */
height: 100vh;
background-size: cover;
/* background-position: center center; */
}
.menu {
width: 1170px;
margin: auto;
}
.header-area {
position: relative;
}
.nav-area {
float: right;
list-style: none;
margin-top: 40px;
}
.nav-area li {
display: inline-block;
}
.nav-area li a {
color: #fff;
text-decoration: none;
padding: 5px 20px;
font-size: 16px;
text-transform: uppercase;
}
.nav-area li a:hover {
background: #fff;
color: #000;
}
.logo {
float: left;
}
.logo img {
padding: 10px 0;
width: 10vh;
height: 10vh;
}
.banner-text {
position: absolute;
width: 600px;
height: 300px;
margin: 18% 30%;
text-align: center;
}
.banner-text h1{
color: #fff;
text-transform: uppercase;
font-size: 60px;
}
.banner-text h1 span{
color: #00ffff;
}
.banner-text p{
color: #fff;
font-size: 15px;
line-height: 1.5;
}
.banner-text a{
border: 1px solid #fff;
color: #fff;
display: inline-block;
margin-top: 20px;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
padding: 10px 25px;
}
.banner-text a:hover{
background-color: #fff;
color:#000
}
/*Responsive*/
@media(max-width: 800px){
.menu{
width: 100%;
}
.logo{
float: none;
width: 50%;
text-align: center;
margin: auto;
}
.nav-area{
float: none;
margin-top: 0;
text-align: center;
}
.nav-area li a{
padding: 5px;
font-size: 11px;
}
.banner-text{
width: 100%;
height: auto;
margin: 20% 0;
}
.banner-text h1{
font-size: 30px;
}
.banner-text p{
font-size: 20px;
width: 90%;
margin: auto;
line-height: 1.5;
}
}
Download all files from here:
https://drive.google.com/file/d/1KJxZj2XmTxdQwsySvVcRCIc3fj-cQnyF/view?usp=sharing-By CodeStudio