<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vidaloka" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Gallery</a></li>
<li><a href="#">Contact Us</a></li>
<li><a class="phone" href="#"><i class="fa fa-phone" aria-hidden="true"></i>
700 3367 625</a></li>
</ul>
</div>
</div>
</nav>
<!-- banner -->
<div class="banner" style="background-image:url('https://via.placeholder.com/1349x600');">
<div class="overlay"></div>
<div class="content">
<div class="container">
<div class="col-md-7">
<h2><span>AQUA</span><br /> The Perfect Modern Living</h2>
<p>Aqua Beamount project is proudly associated with Quintessentially, a world renowned UK based luxury lifestyles group as a lifestyle partner offering the best concierge service globally. </p>
<a href="#" class="btn btn-primary">Contact Us</a>
</div>
<div class="col-md-5">
<form>
<h3>Register below to get a call back.</h3>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Phone">
</div>
<div class="form-group">
<input type="Email" class="form-control" id="exampleInputPassword1" placeholder="Email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
/*
-------------------------------------
1.core css
-------------------------------------
*/
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
font-family: 'Poppins', sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
font-family: 'Vidaloka', serif;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
p b {
font-weight: 500;
}
.img-responsive {
width: 100%;
}
.overlay {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
}
a,
.btn,
a:hover,
a:focus,
.transition,
#back-to-top:hover {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a {
text-decoration: none;
color: #2874a6;
}
a:hover,
a:focus {
text-decoration: none;
color: #2874a6;
}
form {
position: relative;
top: -24px;
max-width: 342px;
margin: 0 auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
padding: 44px 28px 36px;
background-color: #fff;
border-radius: 4px;
}
form h3 {
color: #2874a6;
line-height: 1.3;
font-size: 22px;
margin-bottom: 14px;
font-family: 'Poppins', sans-serif;
}
form .btn {
margin-top: 0px;
padding: 8px 26px !important;
font-size: 14px;
}
.form-group .form-control:focus {
outline: none;
box-shadow: none;
background: #fff;
border-color: #2874a6;
}
.form-control {
padding: 12px 20px;
height: 38px;
border-radius: 0px;
}
.form-group {
margin-bottom: 10px;
}
.btn-primary {
padding: 8px 36px;
border-radius: 50px;
font-size: 16px;
background-color: #2874a6;
border-color: transparent;
margin-top: 15px;
}
.btn-primary:hover {
background-color: #1e577d;
border-color: transparent;
}
.section {
padding-top: 80px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
}
.title {
font-size: 45px;
margin-bottom: 20px;
letter-spacing: -1px;
color: #494949;
}
.title span {
font-size: 50px;
color: #2874a6;
}
/*
-------------------------------------
2.navbar
-------------------------------------
*/
.navbar {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
background-color: transparent;
border-radius: 0px;
margin-bottom: 0px;
border-color: transparent;
}
.navbar .navbar-nav > li > a {
padding-top: 30px;
padding-bottom: 25px;
}
.navbar .nav li a {
text-transform: uppercase;
font-weight: 500;
color: #444;
}
.navbar img {
width: 150px;
position: relative;
top: 4px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.phone {
background: #2874a6;
color: #fff !important;
border-radius: 50px !important;
padding: 9px 18px 7px !important;
position: relative !important;
top: 20px !important;
font-weight: 400 !important;
font-size: 13px !important;
left: 8px;
}
.phone:hover {
background: #337ab7 !important;
}
.shrink-nav {
-webkit-box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.4);
background-color: #fff;
}
.shrink-nav .navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px;
padding: 20px 10px 16px;
}
.shrink-nav .phone {
top: 9px !important;
}
.shrink-nav img {
width: 100px;
position: relative;
top: -11px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
/*
-------------------------------------
3.banner
-------------------------------------
*/
.banner {
padding-top: 180px;
padding-bottom: 110px;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
position: relative;
overflow: hidden;
}
.banner .content h2 {
font-size: 45px;
margin-bottom: 15px;
letter-spacing: 1.6px;
line-height: 1.2;
}
.banner .content h2 span {
font-size: 55px;
font-weight: 700;
color: #2874a6;
}
.banner .content p {
font-weight: 400;
margin-bottom: 5px;
font-size: 16px;
line-height: 1.6;
}
.banner .btn {
padding: 10px 36px;
}
/*
---------------------------------
---------------------------------
********CODING FOR LESS**********
---------------------------------
---------------------------------
*/
/*
-------------------------------------
1.core css
-------------------------------------
*/
@primary-color:#2874A6;
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
font-family: 'Poppins', sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 1.5;
}
h1,h2,h3,h4,h5,h6{
margin: 0px;
font-family: 'Vidaloka', serif;
}
p{
font-size: 16px;
font-weight: 400;
line-height: 1.8;
b{
font-weight: 500;
}
}
.img-responsive {
width: 100%;
}
.overlay {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
}
a,.btn,
a:hover,
a:focus,.transition, #back-to-top:hover {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a{
text-decoration: none;
color: @primary-color;
}
a:hover,
a:focus {
text-decoration: none;
color: @primary-color;
}
.form-area{
position: relative;
top: -24px;
max-width: 342px;
margin: 0 auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
padding: 44px 28px 36px;
background-color: #fff;
border-radius: 4px;
h3{
color: @primary-color;
line-height: 1.3;
font-size: 22px;
margin-bottom: 14px;
font-family: 'Poppins', sans-serif;
}
.btn{
margin-top: 0px;
padding: 8px 26px !important;
font-size: 14px;
}
}
.form-group .form-control:focus {
outline: none;
box-shadow: none;
background: #fff;
border-color: @primary-color;
}
.form-control {
padding: 12px 20px;
height: 38px;
border-radius: 0px;
}
.form-group {
margin-bottom: 10px;
}
.btn-primary{
padding: 8px 36px;
border-radius: 50px;
font-size: 16px;
background-color: @primary-color;
border-color: transparent;
margin-top: 15px;
&:hover{
background-color:darken(@primary-color, 10%);
border-color: transparent;
}
}
.section{
padding-top: 80px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
}
.title{
font-size: 45px;
margin-bottom: 20px;
letter-spacing: -1px;
color: #494949;
span{
font-size: 50px;
color: @primary-color;
}
}
/*
-------------------------------------
2.navbar
-------------------------------------
*/
.navbar{
.transition;
background-color: transparent;
border-radius: 0px;
margin-bottom: 0px;
border-color: transparent;
.navbar-nav>li>a {
padding-top: 30px;
padding-bottom: 25px;
}
.nav{
li{
a{
text-transform: uppercase;
font-weight: 500;
color: #444;
}
}
}
img{
width: 150px;
position: relative;
top: 4px;
.transition;
}
}
.phone{
background: @primary-color;
color: #fff !important;
border-radius: 50px !important;
padding: 9px 18px 7px !important;
position: relative !important;
top: 20px !important;
font-weight: 400 !important;
font-size: 13px !important;
left: 8px;
&:hover{
background: #337ab7 !important;
}
}
.shrink-nav{
-webkit-box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.4);
background-color: #fff;
.navbar-nav>li>a {
padding-top: 20px;
padding-bottom: 20px;
padding: 20px 10px 16px;
}
.phone{
top: 9px !important;
}
img{
width: 100px;
position: relative;
top: -11px;
.transition;
}
}
/*
-------------------------------------
3.banner
-------------------------------------
*/
.banner {
padding-top: 180px;
padding-bottom: 110px;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
position: relative;
overflow: hidden;
.content{
h2{
font-size: 45px;
margin-bottom: 15px;
letter-spacing: 1.6px;
line-height: 1.2;
span{
font-size: 55px;
font-weight: 700;
color: @primary-color;
}
}
p {
font-weight: 400;
margin-bottom: 5px;
font-size: 16px;
line-height: 1.6;
}
}
.btn{
padding: 10px 36px;
}
}
$(window).on('scroll',function(){
/*--------------------------------
2.shrink nav
---------------------------------*/
var wscroll = $(this).scrollTop();
if(wscroll > 20){
$(".navbar").addClass("shrink-nav");
}
else{
$(".navbar").removeClass("shrink-nav");
}
});
