<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="img/ico" href='images/favicon.png'>
<title>hitgoalz</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/hitgoalz.js"></script>
</head>
<body class="add_overlay">
<!-- ======================== SCROOL UP===========================-->
<div class="scrollup" href="#" style="display: block;"><img class="img-fluid" src="images/top-arrow.png"></div>
<script>
// scrolltop
$('.scrollup').click(function (){
$("html,body").animate({
scrollTop: 0
}, 1000);
return false;
});
// fadeIn fadeOut
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
</script>
<!--===============================================
NAVBAR
===============================================-->
<nav class="top-nav navbar navbar-expand-sm">
<div class="container nav-container">
<div class="hamburger">
<div class="cta">
<div class="toggle-btn type10"></div>
</div>
</div>
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="images/main-logo.png" alt="logo" >
</a>
<!-- Links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Floor Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Schedule & Tour</a>
</li>
</ul>
</div>
</nav>
<!--===============================================
SIDE BAR
===============================================-->
<section class="side-bar-warp">
<div id="side_menu" class="sidebar-menu ">
<nav class="">
<div class="side-bar-logo">
<img src="images/main-logo.png" alt="logo" >
</div>
<ul class="ul_animated navbar-nav nav-fade">
<li class="nav-item">
<a class="nav-link" href="#"> Floor Plans </a>
<span class="hover-item"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Luxuries</a>
<span class="hover-item"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
<span class="hover-item"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lifestyle</a>
<span class="hover-item"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
<span class="hover-item"></span>
</li>
</ul>
</nav>
</div>
</section>
<!--=============================BANNER=============================-->
<section class="banner-warp">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="text-warp text-center">
<h1 class="title">7<sup>2</sup>7</h1>
<p class="sub-title">West Madison</p>
</div>
</div>
</div>
</div>
</section>
<!--==============================HOME==============================-->
<section id="home" class="home-warp">
<div class="container">
<div class="row step_step1">
<div class="col-md-6">
<div class="image-warp">
<div class="dot_image_warp"><img class="img-fluid" src="images/dot-pattern.png"></div>
<div class="main-image"><img class="img-fluid" src="images/home.jpg"></div>
<div class="cricl_image_warp"><img class="img-fluid" src="images/green-circle.png"></div>
</div>
</div>
<div class="col-md-6">
<div class="text-warp">
<h2>Iconic living starts at the intersection of Madison & Halsted.</h2>
<span><a href="#">VIEW THE NEW LUXURY</a></span>
</div>
</div>
</div>
<div class="row step_step1 step-2">
<div class="col-md-6 order-2 order-md-0">
<div class="text-warp">
<div class="circle"><img class="" src="images/circle2.png"></div>
<h2>Premier access to Chicago’s best restaurants & nightlife</h2>
<span><a href="#">VIEW THE NEW LUXURY</a></span>
</div>
</div>
<div class="col-md-6 order-1 order-md-0">
<div class="image-warp">
<div class="food-img"><img class="img-fluid" src="images/food11.jpg"></div>
<div class="bar-img"><img class="img-fluid" src="images/bar-img.jpg"></div>
<div class="restauro-img"><img class="img-fluid" src="images/blackbird-img.png"></div>
<div class="restauro-inside-img"><img class="img-fluid" src="images/mob-EatDrink_004.jpg"></div>
</div>
</div>
</div>
<div class="row step_step1 step-3">
<div class="col-md-6">
<div class="image-warp">
<div class="dot_image_warp"><img class="img-fluid" src="images/LinePattern.png"></div>
<div class="main-image"><img class="img-fluid" src="images/ts-img.jpg"></div>
<div class="pool-img"><img class="img-fluid" src="images/pool-img2.jpg"></div>
<div class="gym-img"><img class="img-fluid" src="images/mob-luximg3.jpg"></div>
</div>
</div>
<div class="col-md-6">
<div class="text-warp">
<div class="circle"><img class="" src="images/circle2.png"></div>
<h2>Unprecedented views & luxe amenities</h2>
<span><a href="#">VIEW THE NEW LUXURY</a></span>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row text-center">
<div class="bootom-text">
<p>We call it West Loop living.</p>
<p>You call it home.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="footer-logo">
<img class="" src="images/m-sm-logo.png">
</div>
</div>
<div class="col-md-3">
<address class="ftr-address">
<a target="_blank" href="http://bit.ly/2uBBx9t">727 west madison street chicago, IL 60661</a>
<a class="call_link tel-link" href="tel:833-284-4119">
<span class="phonenumber">833-284-4119</span></a>
</address>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">pay rent & more</a></li>
<li><a href="#">schedule a tour</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">directions</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">F&F REALTY</a></li>
<li><a href="#">FIFIELD REALTY CO.</a></li>
<li><a href="#">ARES MANAGEMENT</a></li>
<li><a href="#">BOZZUTO</a></li>
</ul>
</div>
</div>
</div>
</footer>
<section class="sub-footer">
<div class="container nav-container">
<div class="row">
<div class="col-md-1">
<a href="#"><img src="images/Grip_Logomark_000000.png"></a>
</div>
<div class="privacy col-md-4">© 727 West Madison.<a href="#">View Privacy Policies.</a></div>
<div class="brand col-md-6">
<a href="#"><img src="images/F_F.png"></a>
<a href="#"><img src="images/Fifield.png"></a>
<a href="#"><img src="images/Ares.png"></a>
<a href="#"><img src="images/Bozzuto.png"></a>
</div>
<div class="col-md-1">
<a><img src="images/ada.png"></a>
<a href="#"><img src="images/eho.png"></a>
</div>
</div>
</div>
</section>
</body>
</html>
@font-face {
font-family: 'TitilliumWeb';
src: url(../font-style/TitilliumWeb-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
src: url(../font-style/Comfortaa-Regular.ttf) format('truetype');
}
body{
background-color: #edede8;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
body.overlay:before {
content: "";
position: fixed;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
z-index: 9999;
transition-duration: 4s;
transition-delay: 2s;
}
/*===========================SUPPORT CLASS===========================*/
@media (min-width: 1366px){
.nav-container {
max-width: 1320px;
}
}
.trans{
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#side_menu::-webkit-scrollbar {
display: none;
}
/*===========================NAVBAR START===========================*/
.navbar {
background-color: #edede8!important;
padding:15px 15px;
}
.navbar-brand {
margin-left: 75px;
}
/*HAMBURGER START*************************/
.hamburger {
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px 0px 0px;
transition: all 1s ease;
position: relative;
}
.cta {
height: 40px;
width: 40px;
cursor: pointer;
z-index: 999999;
position: absolute;
right: -33px;
}
.toggle-btn {
height: 2px;
width: 25px;
background-color: #000;
position: relative;
top: 50%;
left: 0;
margin: auto;
transition: all 0.3s ease-in-out;
}
.toggle-btn:before {
content: "";
height: 2px;
width: 25px;
box-shadow: 0 -10px 0 0 #000;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
}
.toggle-btn:after {
content: "";
height: 2px;
width: 25px;
box-shadow: 0 10px 0 0 #000;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
}
.active .type10 {
background-color: #fff;
transform: rotate(45deg); }
.active .type10:before {
box-shadow: 0 0 0 0 #fff; }
.active .type10:after {
left: -10px;
box-shadow: 0 -10px 0 0 #fff;
transform: translateY(0) rotate(90deg); }
/*HAMBURGER END*************************/
.top-nav .nav-item .nav-link {
display: block;
position: relative;
white-space: nowrap;
color: #333;
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 3px;
}
.top-nav .navbar-brand img{
width: 250px;
}
.user-icon{
width: 35px;
height: 35px;
display: inline-block;
background-color: #b80100;
border-radius: 50px;
}
@media (min-width: 576px){
.navbar-expand-sm .navbar-nav .nav-link {
margin-left: 15px;
}
}
/*============================SIDE BAR START============================*/
#side_menu {
position: fixed;
background-color: #4B5451;
text-shadow: 0 0 black;
height: 100vh;
max-width: 727px;
padding: 20px 4em;
box-sizing: content-box;
z-index: 9999;
overflow: scroll;
left: -100%;
top: 0px;
width: 100%;
box-sizing: border-box;
}
.sidebar-menu {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.full-side-bar {
left: 0px !important;
}
.side-bar-logo {
padding: 0px 95px;
padding-top: 14px;
}
.side-bar-logo img {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.sidebar-menu .navbar-nav {
padding: 6em 70px;
list-style: none;
position: relative;
}
.sidebar-menu .navbar-nav a {
text-decoration: none;
text-transform: uppercase;
display: block;
font-size: 45px;
color: #EAEAEA;
letter-spacing: 9px;
line-height: 95.55px;
}
.sidebar-menu li {
height: 110px;
overflow: hidden;
}
.sidebar-menu li:nth-child(1) span.hover-item {
background: url(../images/shape5.png) , url(../images/circle1.png);
background-position: left 40px top 60px , right 45px top 90px;
background-repeat: no-repeat;
}
.sidebar-menu li:nth-child(2) span.hover-item {
background: url(../images/shape3.png) ,url(../images/circle2.png);
background-position: right 192px top 190px ,right 271px top 198px;
background-repeat: no-repeat;
}
.sidebar-menu li:nth-child(3) span.hover-item {
background: url(../images/shape4.png) ,url(../images/circle5.png);
background-position: right 253px top 289px ,right 185px top 340px;
background-repeat: no-repeat;
}
.sidebar-menu li:nth-child(4) span.hover-item {
background: url(../images/shape1.png) , url(../images/circle4.png);
background-position: right 170px top 400px ,right 200px top 420px;
background-repeat: no-repeat;
}
.sidebar-menu li:nth-child(5) span.hover-item {
background: url(../images/circle5.png) , url(../images/shape5.png);
background-position: left 90px top 645px ,left 54px top 515px;
background-repeat: no-repeat;
}
.sidebar-menu li span.hover-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: 0;
}
.sidebar-menu li:hover span.hover-item {
opacity: 1;
}
/*///////////////ANIMATEED///////////////*/
.ul_animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation: mymove 1s ;
animation-iteration-count: 1;
}
/*FADE IN UP*/
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@keyframes fadeInUp{
0% {
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/*FADE IN DOWN*/
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@keyframes fadeInDown{
0% {
opacity: 0;
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/*////////////////////////////HOME////////////////////////////*/
.banner-warp{
background-image: url(../images/home.jpg);
background-position: top center;
background-repeat: no-repeat;
padding-top: 80px;
padding-bottom: 80px;
}
.banner-warp .text-warp {
padding-top: 135px;
margin-bottom: 50px;
}
.banner-warp .text-warp .title {
margin-top: 50px;
font-size: 114px;
color: #fff;
letter-spacing: 29px;
}
.banner-warp .text-warp sup {
top: -39px;
font-size:95%;
}
.sub-title {
color: #fff;
line-height: 32px;
font-size: 55px;
text-transform: uppercase;
}
.home-warp{
padding-top:70px;
}
/*STEP 1===================*/
.step_step1{
padding-bottom: 50px;
}
.image-warp{
position: relative;
padding:50px;
}
.step_step1 .image-warp{
margin-top: 120px;
}
.main-image{
position: absolute;
top: 40px;
z-index: 99;
}
.dot_image_warp {
position: relative;
top: -100px;
left: -75px;
z-index: 99;
width: 65%;
}
.step_step1 .dot_image_warp:hover {
z-index: 999 !important;
}
.step_step1 .cricl_image_warp{
position: absolute;
top: -100px;
left: -54px;
z-index: -1;
width: 55%;
}
.step_step1 .cricl_image_warp {
position: absolute;
top: -100px;
left: 34px;
z-index: 99;
width: 150px;
}
.step_step1 .text-warp {
width: 65%;
float: right;
margin-top: 201px;
}
.step_step1 h2 {
font-size: 36px;
color: #2B2B2B;
letter-spacing: 0.95px;
line-height: 46px;
padding-bottom: 60px;
font-weight: 300;
}
/*STEP 2===================*/
.step-2 .image-warp {
position: relative;
padding: 50px;
float: right;
position: relative;
margin-top: -351px;
}
.step-2 .text-warp{
float: left;
margin-top: 100px;
position: relative;
width: 79%;
}
.step-2 .text-warp .circle {
position: absolute;
top: 106px;
right: 150px;
}
.step-2 .text-warp .circle{
position: absolute;
top:-100px;
righr:120px;
}
.step-2 h2 {
font-size: 36px;
color: #2B2B2B;
letter-spacing: 0.95px;
line-height: 46px;
padding-bottom: 60px;
font-weight: 300;
}
.step-2 .food-img {
position: relative;
right: -43px;
z-index: 99;
top: 200px;
float: right;
}
.step-2 .bar-img {
position: relative;
z-index: 9;
width: 100%;
margin: 0 auto;
}
.step-2 .restauro-img {
width: 45%;
position: relative;
float: left;
margin-left: -130px;
top: -164px;
}
.step-2 .restauro-inside-img {
width:60%;
position: relative;
right: -45px;
z-index: 9;
float: right;
top: -50px;
}
.step-2 .bar-img:hover {
z-index: 99 !important;
}
.step-2 .restauro-img:hover {
z-index: 99;
}
/*SSTEP 3===========================*/
.step-3 .pool-img {
float: left;
width: 190px;
position: relative;
top: -60px;
margin-left: 47px;
z-index: 99;
}
.step-3 .gym-img {
float: left;
position: relative;
top: -271px;
width: 280px;
left: 280px;
z-index: 99;
}
.step-3 .image-warp {
margin-top: -85px;
}
.step-3 .main-image:hover{
z-index: 999 !important;
}
.step-3 .text-warp {
width: 65%;
float: right;
margin-top: -22px;
}
.step_step1 span a {
font-size: 13px;
color: #000000;
letter-spacing: 3.82px;
line-height: 20px;
font-family: 'Gilroy-SemiBold';
border-bottom: 1px solid #333;
}
/*BOTTOM TEXT SECTION===========================*/
.bootom-text {
padding-bottom: 80px;
width: 100%;
display: block;
margin-top: -160px;
position: relative;
}
.bootom-text p {
font-size: 18px;
color: #2B2B2B;
letter-spacing: 2.15px;
text-align: center;
line-height: 45px;
text-transform: uppercase;
}
/*FOOTER==============================*/
footer {
width: 100%;
float: left;
background: #2b2b2b;
padding: 40px 0;
}
footer img {
filter: invert(100%);
-webkit-filter: invert(100%);
}
footer address{
float: left;
margin-right: 12%;
font-style: normal;
}
footer address a {
color: #fff;
font-size: 18px;
color: #FFFFFF;
letter-spacing: 1.12px;
line-height: 19px;
display: block;
margin-bottom: 20px;
text-transform: capitalize;
}
footer ul {
list-style: none;
}
footer ul li {
padding-bottom: 15px;
}
footer ul li a {
color: #fff;
letter-spacing: 1.97px;
font-size: 11px;
text-transform: uppercase;
}
footer a:hover {
color: #fff;
text-decoration: none;
}
/*SUB FOOTER==========================*/
.sub-footer {
width: 100%;
float: left;
background: #2b2b2b;
padding: 40px 0;
padding-top: 60px;
}
.sub-footer a {
color: #707171;
}
.brand a {
margin-right: 8%;
float: left;
}
.privacy {
font-size: 12px;
color: #707171;
letter-spacing: 0.94px;
line-height: 16px;
}
.scrollup {
text-align: center;
padding: 0px;
width: 42px;
height: 43px;
position: fixed;
bottom: 5px;
right: 30px;
z-index: 9999;
cursor: pointer;
display: none;
}
$(document).ready(function () {
$(document).on('click', '.cta', function () {
$(this).toggleClass('active')
})
});
$(document).ready(function(){
$(".hamburger").click(function(){
$('.add_overlay').toggleClass('overlay');
if ($('.ul_animated').hasClass('nav-fade')) {
$('.sidebar-menu').addClass("full-side-bar");
$('.ul_animated').removeClass('fadeInDown');
$('.ul_animated').addClass("fadeInUp");
$('.ul_animated').removeClass('nav-fade');
} else {
$('.ul_animated').addClass("fadeInDown");
setTimeout(function() {
$('.sidebar-menu').removeClass("full-side-bar");
},300);
$('.ul_animated').removeClass('fadeInUp');
$('.ul_animated').addClass('nav-fade');
}
//$('.ul_animated').toggleClass("fadeInUp");
});
});
//Overlay===============================
$(document).ready(function() {
$('.overlay').click(function() {
$('.sidebar-menu').removeClass("full-side-bar");
$('.add_overlay').toggleClass('overlay');
});
});
