|
<!-- Main Navigation --> |
|
<nav class="main-nav" id="main-nav"> |
|
<div class="content-wrapper-sm"> |
|
<a href="#" class="navbar-brand">CityScapes</a> |
|
<div id="menu-button"> |
|
<div class="bar1"></div> |
|
<div class="bar2"></div> |
|
<div class="bar3"></div> |
|
</div> |
|
<ul class="nav-links"> |
|
<li><a href="#about">About</a></li> |
|
<li><a href="#reserve">Reservations</a></li> |
|
<li><a href="#contact">Contact</a></li> |
|
</ul> |
|
</div> |
|
</nav> |
|
|
|
<!-- Main header --> |
|
<header> |
|
<!-- First replaceble image --> |
|
<img class="img-absolute" src="https://raw.githubusercontent.com/Jesus-E-Rodriguez/cityscapes-landing-page/88c9b44e3def10ae253dd8d44b717cfa78cca42d/img/city.png" alt="City 1"> |
|
<div class="wrapper astonish animated fadeInDown"> |
|
<h1><strong>City</strong>Scapes</h1> |
|
<h2>A free, responsive, landing page. <br> |
|
Created by Jesus Rodriguez.</h2> |
|
</div> |
|
</header> |
|
|
|
<!-- Main content --> |
|
<main> |
|
<div class="content-wrapper" id="about"> |
|
<!-- second replaceble image --> |
|
<img class="img-absolute" src="https://raw.githubusercontent.com/Jesus-E-Rodriguez/cityscapes-landing-page/master/img/city2.png" alt="City 2"> |
|
<div class="grid"> |
|
<div class="grid-col-sm-12 grid-col-md-6 astonish" data-animation="fadeInLeft"> |
|
<h2 class="section-title">About CityScapes</h2> |
|
<p>CityScapes is a fully responsive and customizable landing page template. All images can easily be replaced from the html side, without having to dig through the css.</p> |
|
<p>The full version of this template is available at Github and it comes with the SASS files in order to provide quicker customization features, for those who are developers.</p> |
|
<p>Javascript files are also included, they are used to enhance the user experience but apart from the menu.js file, they are all optional.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="reserve" class="content-wrapper-lg text-center astonish" data-animation="zoomIn"> |
|
<h2 class="section-title">Explore New Pathways</h2> |
|
<p>CityScapes is great for any travel agency or tour agency, that wishes to showcase the focal points of a city. If you want a unique looking landing page that has a unique artistic style that will attract clients, then this is the template for you. Go |
|
ahead and download it for free from Github.</p> |
|
<a href="https://github.com/Jesus-E-Rodriguez/cityscapes-landing-page" class="btn btn-outline-purple" target="_blank">Download</a> |
|
</div> |
|
|
|
<div class="content-wrapper" id="contact"> |
|
<!-- Third replaceble image --> |
|
<img class="img-absolute" src="https://raw.githubusercontent.com/Jesus-E-Rodriguez/cityscapes-landing-page/master/img/city3.png" alt="City 3"> |
|
|
|
<!-- Custom form, important note: you will need additional code in order to make this form work --> |
|
<form class="contact-form astonish" action="#" method="post" data-animation="fadeInRight"> |
|
<h2 class="section-title">Contact Us</h2> |
|
<div class="grid"> |
|
<div class="grid-col-sm-12 grid-col-md-6"> |
|
<div class="form-group"> |
|
<input type="text" name="firstName" required> |
|
<label for="firstName">First Name:</label> |
|
</div> |
|
</div> |
|
<div class="grid-col-sm-12 grid-col-md-6"> |
|
<div class="form-group"> |
|
<input type="text" name="lastName" required> |
|
<label for="lasttName">Last Name:</label> |
|
</div> |
|
</div> |
|
<div class="grid-col-sm-12"> |
|
<div class="form-group"> |
|
<input type="text" name="email" required> |
|
<label for="email">Email:</label> |
|
</div> |
|
</div> |
|
<div class="grid-col-sm-12"> |
|
<div class="form-group"> |
|
<textarea name="message" required></textarea> |
|
<label for="message">Message:</label> |
|
</div> |
|
</div> |
|
</div> |
|
<input class="btn btn-outline-teal" type="submit" value="Send"> |
|
</form> |
|
</div> |
|
|
|
<!-- This is an embedded Google map, this is easily customizable especially if you get a Google API key, this will allow for more customizable features. --> |
|
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d81584.50435706123!2d-80.8378430874413!3d35.23358937843391!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1514142608486" frameborder="0" style="border:0" allowfullscreen></iframe> |
|
</main> |
|
|
|
<!-- Main footer --> |
|
<footer> |
|
<div class="content-wrapper-sm display-flex-between"> |
|
<!-- Easily replaceble copyright information --> |
|
<small>Your copyright 2017.</small> |
|
|
|
<!-- Make sure to edit the links so that they go to your social media. --> |
|
<div class="social-links"> |
|
<ul> |
|
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> |
|
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> |
|
<li><a href="#"><i class="fa fa-snapchat-square" aria-hidden="true"></i></a></li> |
|
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
</footer> |
