494 lines
18 KiB
HTML
494 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<script src="js/destruct.js"></script>
|
|
<title>Superfresh Bootstrap Template</title>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="keywords" content="" />
|
|
<meta name="description" content="" />
|
|
<!-- stylesheet css -->
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
|
<link rel="stylesheet" href="css/nivo-lightbox.css" />
|
|
<link rel="stylesheet" href="css/nivo_themes/default/default.css" />
|
|
<link rel="stylesheet" href="css/templatemo-style.css" />
|
|
<!-- google web font css -->
|
|
<link
|
|
href="http://fonts.googleapis.com/css?family=Raleway:400,300,600,700"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
</head>
|
|
<body data-spy="scroll" data-target=".navbar-collapse" id="top">
|
|
<!-- navigation -->
|
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button
|
|
class="navbar-toggle"
|
|
data-toggle="collapse"
|
|
data-target=".navbar-collapse"
|
|
>
|
|
<span class="icon icon-bar"></span>
|
|
<span class="icon icon-bar"></span>
|
|
<span class="icon icon-bar"></span>
|
|
</button>
|
|
<a href="#" class="navbar-brand">Superfresh.</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#home" class="smoothScroll">HOME</a></li>
|
|
<li><a href="#service" class="smoothScroll">SERVICE</a></li>
|
|
<li><a href="#about" class="smoothScroll">ABOUT</a></li>
|
|
<li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
|
|
<li><a href="#pricing" class="smoothScroll">PRICE</a></li>
|
|
<li><a href="#contact" class="smoothScroll">CONTACT</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- home section -->
|
|
<div id="home">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-offset-6 col-md-6 col-sm-offset-6 col-sm-6">
|
|
<h2>welcome to</h2>
|
|
<h1>Superfresh <strong>Design Studio</strong></h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
|
erat volutpat.
|
|
</p>
|
|
<a href="#service" class="btn btn-default smoothScroll"
|
|
>GET STARTED</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- service section -->
|
|
<div id="service">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<h2>Here's How we work.</h2>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<i class="fa fa-paper-plane"></i>
|
|
<h3>Research.</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
|
erat volutpat.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<i class="fa fa-bell-o"></i>
|
|
<h3>Design.</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
|
erat volutpat.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<i class="fa fa-coffee"></i>
|
|
<h3>Coding.</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
|
erat volutpat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- about section -->
|
|
<div id="about">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<h2>The Superfresh Story</h2>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6">
|
|
<img
|
|
src="images/about-img.jpg"
|
|
class="img-responsive"
|
|
alt="about img"
|
|
/>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6">
|
|
<h3>ABOUT US</h3>
|
|
<h4>talented Designers & Developers.</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
|
erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
|
|
elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore
|
|
magna aliquam erat volutpat.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
|
|
nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
|
|
erat volutpat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- team section -->
|
|
<div id="team">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<h2>Behind the Design Studio.</h2>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<img src="images/team1.jpg" class="img-responsive" alt="team img" />
|
|
<h3>James Smith</h3>
|
|
<h4>Creative Director</h4>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<img src="images/team2.jpg" class="img-responsive" alt="team img" />
|
|
<h3>Jonny Doe</h3>
|
|
<h4>CEO / CO-Founder</h4>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<img src="images/team3.jpg" class="img-responsive" alt="team img" />
|
|
<h3>Jonathan Ive</h3>
|
|
<h4>Chief Design Office</h4>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<img src="images/team4.jpg" class="img-responsive" alt="team img" />
|
|
<h3>Mary Lane</h3>
|
|
<h4>UX Designer</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- portfolio section -->
|
|
<div id="portfolio">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<div class="title">
|
|
<h2>Works. Portfolio</h2>
|
|
</div>
|
|
<!-- ISO section -->
|
|
<div class="iso-section">
|
|
<ul class="filter-wrapper clearfix">
|
|
<li>
|
|
<a href="#" data-filter="*" class="selected opc-main-bg"
|
|
>All</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="opc-main-bg" data-filter=".html">Html</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="opc-main-bg" data-filter=".photoshop"
|
|
>Photoshop</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="opc-main-bg" data-filter=".wordpress"
|
|
>Wordpress</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="opc-main-bg" data-filter=".mobile"
|
|
>Mobile</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<div class="iso-box-section">
|
|
<div class="iso-box-wrapper col4-iso-box">
|
|
<div
|
|
class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"
|
|
>
|
|
<a
|
|
href="images/portfolio-img1.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img1.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div
|
|
class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"
|
|
>
|
|
<a
|
|
href="images/portfolio-img2.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img2.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
|
|
<a
|
|
href="images/portfolio-img3.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img3.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12">
|
|
<a
|
|
href="images/portfolio-img4.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img4.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12">
|
|
<a
|
|
href="images/portfolio-img5.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img5.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div
|
|
class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"
|
|
>
|
|
<a
|
|
href="images/portfolio-img6.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img6.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12">
|
|
<a
|
|
href="images/portfolio-img7.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img7.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
<div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
|
|
<a
|
|
href="images/portfolio-img8.jpg"
|
|
data-lightbox-gallery="portfolio-gallery"
|
|
><img src="images/portfolio-img8.jpg" alt="portfolio img"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- pricing section -->
|
|
<div id="pricing">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<h2>Pricing tables</h2>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="plan">
|
|
<div class="plan-title">
|
|
<h3>Basic Plan</h3>
|
|
<small>$ 10 monthly</small>
|
|
</div>
|
|
<ul>
|
|
<li>1 GB SPACE</li>
|
|
<li>20 GB BANDWIDTH</li>
|
|
<li>20 MORE THEMES</li>
|
|
<li>LIFETIME SUPPORT</li>
|
|
</ul>
|
|
<button class="btn btn-warning">Sign Up</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="plan">
|
|
<div class="plan-title">
|
|
<h3>Business Plan</h3>
|
|
<small>$ 10 monthly</small>
|
|
</div>
|
|
<ul>
|
|
<li>1 GB SPACE</li>
|
|
<li>20 GB BANDWIDTH</li>
|
|
<li>20 MORE THEMES</li>
|
|
<li>LIFETIME SUPPORT</li>
|
|
</ul>
|
|
<button class="btn btn-warning">Sign Up</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="plan">
|
|
<div class="plan-title">
|
|
<h3>Student Plan</h3>
|
|
<small>$ 10 monthly</small>
|
|
</div>
|
|
<ul>
|
|
<li>1 GB SPACE</li>
|
|
<li>20 GB BANDWIDTH</li>
|
|
<li>20 MORE THEMES</li>
|
|
<li>LIFETIME SUPPORT</li>
|
|
</ul>
|
|
<button class="btn btn-warning">Sign Up</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- contact section -->
|
|
<div id="contact">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<h2>Tell Us About You.</h2>
|
|
</div>
|
|
<form action="#" method="post">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<div class="col-md-6 col-sm-6">
|
|
<input type="text" placeholder="Name" class="form-control" />
|
|
</div>
|
|
<div class="col-md-6 col-sm-6">
|
|
<input type="email" placeholder="Email" class="form-control" />
|
|
</div>
|
|
<div class="col-md-12 col-sm-12">
|
|
<textarea
|
|
id="message"
|
|
placeholder="Message"
|
|
class="form-control"
|
|
rows="5"
|
|
></textarea>
|
|
</div>
|
|
<div class="col-md-12 col-sm-12">
|
|
<input type="text" placeholder="Subject" class="form-control" />
|
|
</div>
|
|
<div class="col-md-8 col-sm-8">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
|
|
diam nonummy
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<input
|
|
type="submit"
|
|
value="SEND MESSAGE"
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- footer section -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-6">
|
|
<h2>Reach Office.</h2>
|
|
<p>001 Lane Street, California, CA</p>
|
|
<p>Email: <span>Hello[at]superfresh[dot]com</span></p>
|
|
<p>Phone: <span>0024 203423 / 20342 2342</span></p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6">
|
|
<h2>Social Us.</h2>
|
|
<ul class="social-icons">
|
|
<li><a href="#" class="fa fa-facebook"></a></li>
|
|
<li><a href="#" class="fa fa-twitter"></a></li>
|
|
<li><a href="#" class="fa fa-dribbble"></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- divider section -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
<div class="col-md-10 col-sm-10">
|
|
<hr />
|
|
</div>
|
|
<div class="col-md-1 col-sm-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- copyright section -->
|
|
<div class="copyright">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<p>
|
|
© Superfresh 2084. All Rights Reserved | Design: templatemo
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- scrolltop section -->
|
|
<a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a>
|
|
<!-- javascript js -->
|
|
<script src="js/jquery.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/nivo-lightbox.min.js"></script>
|
|
<script src="js/smoothscroll.js"></script>
|
|
<script src="js/jquery.nav.js"></script>
|
|
<script src="js/isotope.js"></script>
|
|
<script src="js/imagesloaded.min.js"></script>
|
|
<script src="js/custom.js"></script>
|
|
</body>
|
|
</html>
|