mam-project-templates
Version:
my personal templating projects
356 lines (312 loc) • 17.4 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-FuchiStudio.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<section class="animsition">
<div id="leftSide" class="gradient">
<div id="home" >
<!-- Your logo -->
<img src="img/logo.png" alt="" class="main-logo" />
<div class="h-content">
<h1>Hello Guys!<br> Deft is Coming Soon...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua dolor sit amet.</p>
</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="project">
<ul class="gallery project_navigation">
<li class="item col-sm-6 col-xs-12">
<figure>
<!-- Your picture -->
<img src="img/pexels-photo-14075.jpeg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Music Player</h4>
<span>By Code Rare</span>
</div>
<a href="#project1" class="view">VIEW</a>
</figcaption>
</figure>
</li>
<li class="item col-sm-6 col-xs-12">
<figure>
<!-- Your picture -->
<img src="img/shells-massage-therapy-sand.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Sea Shells</h4>
<span>By Code Rare</span>
</div>
<a href="#project2" class="view">VIEW</a>
</figcaption>
</figure>
</li>
<li class="item col-sm-6 col-xs-12">
<figure>
<!-- Your picture -->
<img src="img/typing-vintage-technology-keyboard.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Typing</h4>
<span>By Code Rare</span>
</div>
<a href="#project3" class="view">VIEW</a>
</figcaption>
</figure>
</li>
<li class="item col-sm-6 col-xs-12">
<figure>
<!-- Your picture -->
<img src="img/hand-taking-photo-photography-vintage.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Camera</h4>
<span>By Code Rare</span>
</div>
<a href="#project4" class="view">VIEW</a>
</figcaption>
</figure>
</li>
<li class="item col-sm-6 col-xs-12">
<figure>
<!-- Your picture -->
<img src="img/guitar.jpg" alt="This is my work" class="img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Guitar</h4>
<span>By Code Rare</span>
</div>
<a href="#project5" class="view">VIEW</a>
</figcaption>
</figure>
</li>
<li class="item col-sm-6 col-xs-12">
<figure>
<!-- Your picture -->
<img src="img/food-plate-yellow-white.jpg" alt="This is my work" class="img img-responsive" />
<!-- Picture's description below this one -->
<figcaption class="caption">
<div class="photo-details">
<h4>Food</h4>
<span>By Code Rare</span>
</div>
<a href="#project6" class="view">VIEW</a>
</figcaption>
</figure>
</li>
</ul>
<ul class="project_info">
<li id="project1">
<div class="project_content">
<h2>YOUR TITLE GOES HERE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
</div>
</li>
<li id="project2">
<div class="project_content">
<h2>YOUR TITLE GOES HERE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
</div>
</li>
<li id="project3">
<div class="project_content">
<h2>YOUR TITLE GOES HERE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
</div>
</li>
<li id="project4">
<div class="project_content">
<h2>YOUR TITLE GOES HERE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
</div>
</li>
<li id="project5">
<div class="project_content">
<h2>YOUR TITLE GOES HERE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
</div>
</li>
<li id="project6">
<div class="project_content">
<h2>YOUR TITLE GOES HERE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?
</p>
</div>
</li>
</ul>
</div>
<div id="subscribe">
<h2>Stay tunned we're 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-heart"></i>
<h6>SIMPLE</h6>
</div>
<div class="feature col-sm-3 col-xs-3">
<i class="ion-erlenmeyer-flask"></i>
<h6>CREATIVE</h6>
</div>
<div class="feature col-sm-3 col-xs-3">
<i class="ion-waterdrop"></i>
<h6>SMOOTH</h6>
</div>
<div class="feature col-sm-3 col-xs-3">
<i class="ion-code"></i>
<h6>STABLE</h6>
</div>
</div>
</div>
<div class="pricing">
<div class="row">
<div class="offers col-sm-8 col-xs-8">
<ul class="col-sm-6 col-xs-6">
<li>Hosting</li>
<li>Web Security</li>
<li>Domain</li>
</ul>
<ul class="col-sm-6 col-xs-6">
<li>24/7 Support</li>
<li>Email Hosting</li>
<li>Premium DNS</li>
</ul>
</div>
<div class="price col-sm-4 col-xs-4">
<h5 class="rate">29</h5>
<p><strong>Per Month</strong></p>
</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
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@Code Rarecom
</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/script.js"></script>
</body>
</html>