Designing A Professional Responsive Website Uding HTML and CSS
Copy HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Vandar</title>
</head>
<body>
<section id="home">
<div class="nav-bar">
<div class="title">
<a href="#">Technical Vandar</a>
</div>
<div class="menu-bar">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Videos</a>
<a href="#">Contact</a>
</div>
</div>
<div class="text">
<h1>Technical Vandar</h1>
<h2>Official Tech Channel.</h2>
</div>
<div class="button">
<a href="#">Get Started</a>
</div>
</section>
</body>
</html>
Copy CSS File:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(img/1.jpg);
}
.title{
margin-top: 35px;
margin-left: 30px;
}
.title a{
font-size: 35px;
color: white;
border-left: 3px solid white;
text-decoration: none;
}
.title a:hover{
color: red;
}
.menu-bar{
float: right;
}
.menu-bar a{
text-decoration: none;
font-size: 25px;
color: white;
margin: 20px;
}
.menu-bar a:hover{
color: red;
}
.text{
margin-top: 250px;
margin-left: 650px;
color: white;
font-size: 25px;
}
.text h1{
font-size: 50px;
}
.text h2{
margin-left: 35px;
white-space: nowrap;
overflow: hidden;
font-size: 30px;
animation: textanim 5s;
}
.button{
margin-top: 20px;
border-radius: 10px;
border: 1px solid black;
width: 150px;
text-align: center;
background-color: rgb(0, 255, 34);
margin-left: 770px;
}
.button a{
text-decoration: none;
font-size: 30px;
color: white;
}
.button:hover{
background-color: white;
}
.button a:hover{
color: rgb(0, 255, 34);
}
@keyframes textanim{
0%{
width: 0ch;
}
100%{
width: 31ch;
}
}
::selection{
color: red;
}
Comments
Post a Comment