<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style2.css">
<title>Navigation Bar</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
background-color: rgb(68, 59, 17);
overflow: hidden;
text-transform: capitalize;
font-size: 13px;
}
li{
float: left;
}
li a, .dropbtn{
text-decoration: none;
color: white;
padding: 16px;
display: inline-block;
}
li:hover,.dropdown:hover .dropbtn{
background-color: red;
}
.dropdown{
display: inline-block;
}
.dropdown-content{
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
background-color: white;
z-index: 1;
position: absolute;
}
.dropdown-content a{
color: black;
padding: 15px;
display: block;
}
.dropdown-content a:hover{
background-color: gray;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.active{
background-color: greenyellow;
}
.right{
float: right;
}
/*header styling*/
header{
background: rgba(0,0,0,0.3)url('../html/images/2\ girls\ dancing.png') no-repeat;
background-position: center;
background-size: cover;
background-blend-mode: darken;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.header-info{
text-align: center;
color: white;
width: 50%;
}
.header-info h1{
font-size: 60px;
text-shadow: 1px 1px 1px black;
}
.header-info a{
text-decoration: none;
color: white;
background-color: greenyellow;
width: 20%;
display: block;
margin: 15px auto;
padding: 10px;
border-radius: 4px;
}
.cta{
margin: 64px 0;
background-color: lightgray;
padding: 20px;
}
.col-25{
width: 25%;
float: left;
margin-top: 6px;
}
.col-75{
float: left;
width: 75%;
margin-top: 6px;
}
input[type=submit]{
float: right;
padding: 10px 15px;
background-color: greenyellow;
color: white;
border: none;
}
label{
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit]:hover{
background-color: rgb(146, 223, 32);
}
.row::after{
content: "";
clear: both;
display: table;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px 20px;
margin: 6px 0;
resize: vertical;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
</li>
<li class="right"><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<div class="header-info">
<h1>You are worth it</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima reprehenderit provident voluptas illo excepturi esse atque nostrum, laboriosam voluptates.</p>
<a href="#">Sign up</a>
</div>
</header>
<section class="cta">
<form action="#">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" name="first-name" id="fname" placeholder="first-name">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" name="last-name" id="lname" placeholder="last-name">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select name="country" id="country">
<option value="India">India</option>
<option value="India">India</option>
<option value="India">India</option>
<option value="India">India</option>
<option value="India">India</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fb">Feedback</label>
</div>
<div class="col-75">
<textarea name="feedback" id="fb" style="height: 200px;" placeholder="Write Message..."></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</section>
</body>
</html>
Comments
Post a Comment