mam-project-templates
Version:
my personal templating projects
449 lines (383 loc) • 20.9 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-144.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-Mosqlue.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/logo.png" alt="" class="main-logo" />
<div class="h-content">
<h1>Discussing future trends in e-commerce and digital.</h1>
<h4 class="uppercase">2ND AUGUST MELBOURNE, VICTORIA</h4>
</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="swipe_portfolio">
<div class="my-gallery row" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/person-woman-art-creative.jpg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/person-woman-art-creative.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Art Gallery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/pexels-photo-24407.jpg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/pexels-photo-24407.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Ink</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/pexels-photo-57690.jpeg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/pexels-photo-57690.jpeg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/tower.jpeg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/tower.jpeg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Tower</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/wood-coffee-camera-desk-16510.jpg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/wood-coffee-camera-desk-16510.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Mirror</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/coffee-photo.jpg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/coffee-photo.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Coffee</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/pexels-photo-99614.jpeg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/pexels-photo-99614.jpeg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Plant</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-6">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/wood-wooden-design-sculpture.jpg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/wood-wooden-design-sculpture.jpg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Art</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="item col-sm-4 col-xs-12">
<!-- Link to the picture and to open the gallery / Fill up well the data-size property -->
<a href="img/pexels-photo-51358.jpeg" itemprop="contentUrl" data-size="600x600">
<!-- Your picture -->
<img src="img/pexels-photo-51358.jpeg" itemprop="thumbnail" alt="This is my work" class="img-responsive" />
</a>
<!-- Picture's description below this one -->
<figcaption itemprop="caption description">
<div class="photo-details">
<h4>Statue</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="subscribe">
<h2>Our next event coming this year</h2>
<div class="mb100" id="clock" data-date="2016/08/02 12:00:00"></div>
<form
id="subscribe-form"
action="http://coderare.us12.list-manage.com/subscribe/post-json?u=112a29375b248b89f47be54b7&id=e46717ab68"
method="get">
<input type="email" name="EMAIL" class="input-email" value="" placeholder="Email address *">
<input type="submit" name="subscribe" class="submit input-submit" value="Subscribe">
<div id="subscribe-result"></div>
</form>
</div>
<div class="about">
<h2>Get started fast with one of our unique, pre-built concepts.</h2>
<p>
Customers love our block-based approach to template building,
it makes assembling beautiful pages fast and enjoyable, leaving
more time to craft your perfect layout. love our block-based
approach to template building, it makes assembling beautiful pages
fast and enjoyable, leaving more time to craft your perfect layout.
</p>
<p>
Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
</p>
<div class="service row">
<div class="feature col-sm-3 col-xs-3">
<i class="ion-wand"></i>
<h6>DESIGN</h6>
</div>
<div class="feature col-sm-3 col-xs-3">
<i class="ion-cube"></i>
<h6>CODING</h6>
</div>
<div class="feature col-sm-3 col-xs-3">
<i class="ion-arrow-graph-up-right"></i>
<h6>MARKETING</h6>
</div>
<div class="feature col-sm-3 col-xs-3">
<i class="ion-bug"></i>
<h6>MANAGEMENT</h6>
</div>
</div>
</div>
<div class="team">
<h2>Meet our delightful panel of speakers</h2>
<p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
<div class="row">
<div class="member col-sm-4 col-xs-12">
<div class="member-img">
<img src="img/member1.jpg" alt="This is my work" class="img-responsive"/>
<div class="member-overlay">
<div class="overlay-info">
<h5>PATRICK STENSON</h5>
<h6>(Design Director)</h6>
<a href="#"><i class="icon ion-social-facebook"></i></a>
<a href="#"><i class="icon ion-social-twitter"></i></a>
<a href="#"><i class="icon ion-social-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="member col-sm-4 col-xs-12">
<div class="member-img">
<img src="img/member2.jpg" alt="This is my work" class="img-responsive"/>
<div class="member-overlay">
<div class="overlay-info">
<h5>PATRICK STENSON</h5>
<h6>(Design Director)</h6>
<a href="#"><i class="icon ion-social-facebook"></i></a>
<a href="#"><i class="icon ion-social-twitter"></i></a>
<a href="#"><i class="icon ion-social-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="member col-sm-4 col-xs-12">
<div class="member-img">
<img src="img/member3.jpg" alt="This is my work" class="img-responsive"/>
<div class="member-overlay">
<div class="overlay-info">
<h5>ANDREA ARKOV</h5>
<h6>(Art Director)</h6>
<a href="#"><i class="icon ion-social-facebook"></i></a>
<a href="#"><i class="icon ion-social-twitter"></i></a>
<a href="#"><i class="icon ion-social-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clients">
<div class="row">
<div class="client col-sm-3 col-xs-3">
<img src="img/client1.png" alt="client">
</div>
<div class="client col-sm-3 col-xs-3">
<img src="img/client2.png" alt="client">
</div>
<div class="client col-sm-3 col-xs-3">
<img src="img/client3.png" alt="client">
</div>
<div class="client col-sm-3 col-xs-3">
<img src="img/client4.png" alt="client">
</div>
</div>
</div>
<div id="contact" class="row">
<h2>Get in <strong>touch</strong>, we'd love to hear from you.</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
Melbourne, Victoria
</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>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<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/script.js"></script>
</body>
</html>