mam-project-templates
Version:
my personal templating projects
294 lines (258 loc) • 12.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deft | CodeRare</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Favicon ================== -->
<!-- Standard -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon-144.png">
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon-114.png">
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon-72.png">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon-57.png">
<!-- Resources style ================== -->
<link href="css/theme-Mountise.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<section class="animsition">
<div id="leftSide">
<div id="homeCenter" class="gradient">
<!-- Your logo -->
<img src="img/logo2.png" alt="" class="main-logo" />
<div class="h-content">
<div class="heading text-white">
<h1> Amanda <i class="ion-heart"></i> Joshua are getting married</h1>
<h4 class="uppercase filled">28th FEBRUARY MELBOURNE, VICTORIA</h4>
</div>
</div>
<ul class="social_icons">
<li><a href="#"><i class="icon ion-social-facebook"></i></a></li>
<li><a href="#"><i class="icon ion-social-twitter"></i></a></li>
<li><a href="#"><i class="icon ion-social-instagram"></i></a></li>
<li><a href="#"><i class="icon ion-social-linkedin"></i></a></li>
<li><a href="#"><i class="icon ion-social-youtube"></i></a></li>
</ul>
</div>
</div>
<div id="rightSide">
<div class="portfolio">
<ul class="gallery">
<li class="item col-sm-6 col-xs-12">
<a href="img/groom.jpg" title="Groom">
<figure>
<!-- Your picture -->
<img src="img/groom.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Groom</h4>
<span>Amanda & Joshua</span>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="item col-sm-6 col-xs-12">
<a href="img/bride.jpeg" title="Bride">
<figure>
<!-- Your picture -->
<img src="img/bride.jpeg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Bride</h4>
<span>Amanda & Joshua</span>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="item col-sm-6 col-xs-12">
<a href="img/cross-jesus-wedding-crucifix.jpg" title="Cross Jesus Wedding">
<figure>
<!-- Your picture -->
<img src="img/cross-jesus-wedding-crucifix.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Cross Jesus Wedding</h4>
<span>Amanda & Joshua</span>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="item col-sm-6 col-xs-12">
<a href="img/wedding-location.jpg" title="Wedding Location">
<figure>
<!-- Your picture -->
<img src="img/wedding-location.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Wedding Location</h4>
<span>Amanda & Joshua</span>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="item col-sm-6 col-xs-12">
<a href="img/bride-shoes.jpg" title="Bride shoes">
<figure>
<!-- Your picture -->
<img src="img/bride-shoes.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Bride shoes</h4>
<span>Amanda & Joshua</span>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="item col-sm-6 col-xs-12">
<a href="img/pexels-photo-29858.jpg" title="Groom shoes">
<figure>
<!-- Your picture -->
<img src="img/pexels-photo-29858.jpg" alt="This is my work" class="img img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Groom shoes</h4>
<span>Amanda & Joshua</span>
</div>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<div id="countdown" class="row">
<h2>You're invited to our wedding!</h2>
<div class="mb50" id="clock" data-date="2017/02/28 12:00:00"></div>
<div class="col-sm-8 col-xs-12">
<div class="title">
<address class="row">
<span class="col-sm-12 col-xs-12">
<i class="ion-android-calendar"></i>
February 28th, 2017
</span>
<span class="col-sm-12 col-xs-12">
<i class="ion-android-time"></i>
5:00 pm - 7:00 pm
</span>
<span class="col-sm-12 col-xs-12">
<i class="ion-android-map"></i>
371 Pin Oak Drive, Monsey, NY 10952
</span>
</address>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="launch-date">
<h2>28</h2>
<span>February</span>
</div>
</div>
</div>
<div class="about">
<h2>Our Story.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<div class="service row">
<div class="feature col-sm-4 col-xs-4">
<i class="ion-heart"></i>
<h6>CEREMONY</h6>
</div>
<div class="feature col-sm-4 col-xs-4">
<i class="ion-wineglass"></i>
<h6>COCKTAILS</h6>
</div>
<div class="feature col-sm-4 col-xs-4">
<i class="ion-fork"></i>
<h6>DINNER</h6>
</div>
</div>
</div>
<div class="quotes-stripe">
<div class="row">
<span class="quote-mark col-sm-4">
<img src="img/quotes.png" alt="Quote mark" />
</span>
<blockquote>
<q>
You know you're in love when you can't fall asleep because reality is finally better than your dreams.
</q>
<cite class="author uppercase">Dr. Seuss</cite>
</blockquote>
</div>
</div>
<div id="map" class="mid-height"></div>
<div id="contact" class="row">
<h2>Please <strong>RSVP</strong> by December 14, 2016</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<address class="row">
<span class="col-sm-6 col-xs-12">
<i class="ion-location"></i>
1355 Market Street, Suite 900
San Francisco, CA 94103
</span>
<span class="col-sm-6 col-xs-12">
<i class="ion-ios-telephone"></i>
(123) 456-7890
</span>
<span class="col-sm-6 col-xs-12">
<i class="ion-email"></i>
hello@coderare.com
</span>
</address>
<form id="contact_form" class="row" method="post" action="php/mailer.php">
<div class="col-sm-6 col-xs-12">
<input type="name" name="name" class="input-name" placeholder="Name">
<input type="email" name="email" class="input-email" placeholder="Email">
</div>
<div class="col-sm-6 col-xs-12">
<textarea name="message" class="input-message" placeholder="Message"></textarea>
</div>
<div class="col-sm-12 col-xs-12">
<button class="submit">Send</button>
</div>
<div id="form-messages" class="col-sm-12 col-xs-12">
<span class="success col-sm-12 col-xs-12"></span>
<span class="error col-sm-12 col-xs-12"></span>
</div>
</form>
</div>
<footer>
<p class="uppercase">© Deft - Made With Love <i class="ion-heart"></i></p>
<div class="drag">
<i class="up ion-arrow-up-c"></i>
</div>
</footer>
</div>
</section>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/animsition.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/twitterFetcher_min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/photoswipe.min.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>
<script src="js/jqinstapics.min.js"></script>
<script src="js/map.js"></script>
<script src="js/script.js"></script>
</body>
</html>