<div class="container bg-white mt-sm-4 mb-5">
<div class="d-md-flex flex-md-row">
<div class="brand text-uppercase h4 font-weight-bold"> <a href="#"><span class="fa fa-yoast pr-1"></span>yoast</a> </div>
<div class="ml-auto px-2 pt-1 border rounded search"> <input type="text" placeholder="Search"><span class="fa fa-search text-muted"></span> </div>
<div class="btn px-4 ml-md-3">Request a demo</div>
</div>
<div class="d-lg-flex align-items-center">
<nav class="navbar navbar-expand-lg navbar-light bg-white"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Storage Security</a> <a class="dropdown-item" href="#">Secure Gateway</a> <a class="dropdown-item" href="#">All Products</a> </div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Partners </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Security Partners</a> <a class="dropdown-item" href="#">Channel Partners</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Resources</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Company </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">News</a> <a class="dropdown-item" href="#">About Us</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact us</a> </li>
</ul>
</div>
</nav>
<div class="text-muted ml-auto" id="language"> <select name="language" id="lang" class="text-muted">
<option value="eng" selected>EN</option>
<option value="eng">ES</option>
<option value="eng">DE</option>
</select> </div>
</div>
<div class="wrapper d-flex justify-content-center flex-column px-md-5 px-1">
<div class="h3 text-center font-weight-bold">Register for a free demo</div>
<div class="row my-4">
<div class="col-md-6"> <label>Full Name</label> <input type="text" placeholder="Jhon Smith"> </div>
<div class="col-md-6 pt-md-0 pt-4"> <label>Job Title</label> <input type="text" placeholder="Manager"> </div>
</div>
<div class="row my-md-4 my-2">
<div class="col-md-6"> <label>Mail</label> <input type="email" placeholder="
[email protected]"> </div>
<div class="col-md-6 pt-md-0 pt-4"> <label>Phone</label> <input type="tel" placeholder="+7 483 779 90 60"> </div>
</div>
<div class="row my-md-4 my-2">
<div class="col-md-6"> <label>Company</label> <input type="email" placeholder="Company Name"> </div>
<div class="col-md-6 pt-md-0 pt-4"> <label>Country</label> <select name="country" id="country">
<option value="ind">India</option>
<option value="us">USA</option>
<option value="uk">UK</option>
<option value="aus">Australia</option>
</select> </div>
</div> <label class="mt-md-0 mt-2">Company Size</label>
<div class="d-lg-flex justify-content-between align-items-center pb-4">
<div class="size"> <label class="option"> <input type="radio" name="radio">< 250 <span class="checkmark"></span> </label> </div>
<div class="size"> <label class="option"> <input type="radio" name="radio">251 - 1000 <span class="checkmark"></span> </label> </div>
<div class="size"> <label class="option"> <input type="radio" name="radio">1001 - 5000 <span class="checkmark"></span> </label> </div>
<div class="size"> <label class="option"> <input type="radio" name="radio">5001 - 10,000 <span class="checkmark"></span> </label> </div>
<div class="size"> <label class="option"> <input type="radio" name="radio">> 10,000 <span class="checkmark"></span> </label> </div>
</div>
<div class="d-flex justify-content-end"> <button class="btn">Request a demo</button> </div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif
}
body {
background-color: #900c3f
}
.container {
padding: 20px 50px;
min-height: 450px
}
.fa-yoast {
color: #ac1f32;
font-weight: bold
}
.h4 {
font-family: 'Poppins', sans-serif
}
a {
color: #333
}
a:hover {
text-decoration: none;
color: #444
}
.search {
background-color: #fdfbfc
}
.search input {
width: 100px;
border: none;
outline: none;
padding-top: 2px;
padding-bottom: 2px;
background-color: #fdfbfc
}
div.btn,
button.btn {
background-color: #ac1f32;
color: #eee
}
div.btn:hover,
button.btn:hover {
background-color: #ac1f32d7
}
.navbar-light .navbar-nav .nav-link {
color: #333
}
nav {
float: left
}
#language {
float: right
}
#language select {
border: none;
outline: none
}
.wrapper {
width: 85%;
margin: 20px auto;
box-shadow: 1px 1px 30px 10px rgba(250, 250, 250, 0.8)
}
.h3 {
padding-top: 40px;
font-size: 34px
}
label {
display: block;
font-size: 0.8rem;
font-weight: 700
}
input {
border: none;
outline: none;
border-bottom: 2px solid #ddd;
width: 100%;
padding-bottom: 10px
}
.wrapper {
clear: both
}
#country {
border: none;
outline: none;
width: 100%;
padding-bottom: 12px;
border-bottom: 2px solid #ddd
}
.wrapper .col-md-6:hover label {
color: #ac1f32
}
.wrapper .col-md-6:hover input,
.wrapper .col-md-6:hover #country {
border-color: #ac1f32;
cursor: pointer
}
.wrapper .col-md-6 input:focus {
border-color: #ac1f32
}
.option {
position: relative;
padding-left: 30px;
display: block;
cursor: pointer;
color: #888
}
.option input {
display: none
}
.checkmark {
position: absolute;
top: -1px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%
}
.option input:checked~.checkmark:after {
display: block
}
.option .checkmark:after {
content: "\2713";
width: 10px;
height: 10px;
display: block;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out 0s
}
.option:hover input[type="radio"]~.checkmark {
background-color: #f4f4f4
}
.option input[type="radio"]:checked~.checkmark {
background: #ac1f32;
color: #fff;
transition: 300ms ease-in-out 0s
}
.option input[type="radio"]:checked~.checkmark:after {
transform: translate(-50%, -50%) scale(1);
color: #fff
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.5rem;
padding-left: 0rem
}
.navbar {
padding: 0.5rem 0rem;
width: 75%
}
}
@media(max-width: 991px) {
.dropdown-menu {
border: none
}
#language {
padding-top: 20px
}
.navbar {
padding: 0.5rem 0rem
}
}
@media(max-width: 767px) {
.search input {
width: 90%
}
.search {
margin-bottom: 10px
}
div.btn {
width: 100%
}
.h3 {
font-size: 25px
}
.brand {
text-align: center
}
.container {
padding: 20px;
margin-left: 0px
}
.navbar {
padding: 0.5rem 0rem
}
}
@media(max-width: 374px) {
.h3 {
font-size: 21px
}
}