Team:SMTexas

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
<html>
-
<html lang="en">
+
<head>
-
 
+
    <title>Sonic Template</title>
-
<style>
+
<meta name="keywords" content="sonic, responsive, free template, fluid layout, bootstrap, templatemo" />
-
a, abbr, acronym, address, applet, article, aside, audio,
+
<meta name="description" content="Sonic is one-page responsive free template using Bootstrap. This layout is suitable for creative portfolio showcase." />
-
b, blockquote, big, body,
+
<meta charset="utf-8">
-
center, canvas, caption, cite, code, command,
+
<meta name="viewport" content="initial-scale=1">
-
datalist, dd, del, details, dfn, dl, div, dt,
+
   
-
em, embed,
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
-
fieldset, figcaption, figure, font, footer, form,
+
<link rel="stylesheet" href="css/bootstrap.min.css">
-
h1, h2, h3, h4, h5, h6, header, hgroup, html,
+
<link rel="stylesheet" href="css/font-awesome.min.css">
-
i, iframe, img, ins,
+
<link rel="stylesheet" href="css/templatemo_misc.css">
-
kbd,
+
<link rel="stylesheet" href="css/templatemo_style.css">
-
keygen,
+
</head>
-
label, legend, li,
+
<body>
-
meter,
+
-
nav,
+
-
object, ol, output,
+
-
p, pre, progress,
+
-
q,
+
-
s, samp, section, small, span, source, strike, strong, sub, sup,
+
-
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
+
-
u, ul,
+
-
var{
+
-
    background: transparent;
+
-
    border: 0 none;
+
-
    font-size: 100%;
+
-
    margin: 0;
+
-
padding: 0;
+
-
border: 0;
+
-
outline: 0;
+
-
    vertical-align: top; }
+
-
 
+
-
ol, ul {
+
-
list-style: none;
+
-
}
+
-
blockquote, q {
+
-
quotes: none;
+
-
}
+
-
table, table td {
+
-
padding:0;
+
-
border:none;
+
-
border-collapse:collapse;
+
-
}
+
-
img {
+
-
vertical-align:top;
+
-
}
+
-
embed {
+
-
vertical-align:top;
+
-
}
+
-
/* Getting the new tags to behave */
+
-
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
+
-
mark, rp, rt, ruby, summary, time {display:inline;}
+
-
/* Global properties ======================================================== */
+
-
html {width:100%;}
+
-
body {font-family:Arial, Helvetica, sans-serif;font-size:100%;color:#808080;min-width:980px;background:#f5f5f5}
+
-
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
+
-
.bg {width:100%; background:url(../images/bg-top.jpg) center 0 no-repeat;}
+
-
.main {
+
-
width:980px;
+
-
padding:0;
+
-
margin:0 auto;
+
-
font-size:0.8125em;
+
-
line-height:1.846em;
+
-
}
+
-
 
+
-
a {color:#43bfff; outline:none;}
+
-
a:hover {text-decoration:none;}
+
-
 
+
-
.col-1, .col-2 {float:left; width:180px;}
+
-
.col-1 {margin-right:25px;}
+
-
 
+
-
.wrapper {width:100%; overflow:hidden;}
+
-
.extra-wrap {overflow:hidden;}
+
-
+
-
p {margin-bottom:18px;}
+
-
.p0 {margin-bottom:0px;}
+
-
.p1 {margin-bottom:8px;}
+
-
.p2 {margin-bottom:15px;}
+
-
.p3 {margin-bottom:30px;}
+
-
.p4 {margin-bottom:40px;}
+
-
.p5 {margin-bottom:50px;}
+
-
 
+
-
.reg {text-transform:uppercase;}
+
-
 
+
-
.fleft {float:left;}
+
-
.fright {float:right;}
+
-
 
+
-
.alignright {text-align:right;}
+
-
.aligncenter {text-align:center;}
+
-
 
+
-
.it {font-style:italic;}
+
-
 
+
-
.color-1 {color:#808080;}
+
-
.color-2 {color:#000;}
+
-
.color-3 {color:#43bfff;}
+
-
 
+
-
.img-border {
+
-
padding:4px;
+
-
border:1px solid #e5e5e5;
+
-
background:#fff;
+
-
float:left;
+
-
}
+
-
 
+
-
.border {border:1px solid #e5e5e5;}
+
-
 
+
-
/*********************************boxes**********************************/
+
-
.indent {padding:0 30px;}
+
-
.indent2 {padding:15px 30px 0;}
+
-
.indent-top {padding-top:14px;}
+
-
.indent-left {padding-left:30px;}
+
-
.indent-right {padding-right:50px;}
+
-
 
+
-
.indent-bot {margin-bottom:20px;}
+
-
.indent-bot2 {margin-bottom:30px;}
+
-
.indent-bot3 {margin-bottom:45px;}
+
-
 
+
-
.prev-indent-bot {margin-bottom:10px;}
+
-
.prev-indent-bot2 {margin-bottom:12px;}
+
-
.img-indent-bot {margin-bottom:25px;}
+
-
.margin-bot {margin-bottom:35px;}
+
-
 
+
-
.img-indent {float:left; margin:0 20px 0px 0;}
+
-
.img-indent2 {float:left; margin:0 13px 0px 0;}
+
-
.img-indent-r {float:right; margin:0 0px 0px 40px;}
+
-
 
+
-
.buttons a:hover {cursor:pointer;}
+
-
 
+
-
.menu li a,
+
-
.list-1 li a,
+
-
.link,
+
-
.button,
+
-
h1 a {text-decoration:none;}
+
-
 
+
-
/*********************************header*************************************/
+
-
header {
+
-
width:100%;
+
-
position:relative;
+
-
z-index:2;
+
-
}
+
-
 
+
-
.border-top {
+
-
width:950px;
+
-
padding-top:11px;
+
-
margin:0 auto 37px;
+
-
background:url(../images/border-top.gif) left 11px repeat-x;
+
-
}
+
-
 
+
-
h1 {
+
-
padding:40px 0 0 35px;
+
-
position:relative;
+
-
font-weight:normal;
+
-
float:left;
+
-
}
+
-
h1 a {
+
-
display:inline-block;
+
-
font-size:40px;
+
-
line-height:1.2em;
+
-
color:#1c1b18;
+
-
letter-spacing:-1px;
+
-
}
+
-
/***** menu *****/
+
<!-- This one in here is responsive menu for tablet and mobiles -->
-
.menu {
+
    <div class="responsive-navigation visible-sm visible-xs">
-
padding:49px 34px 0 0;
+
        <a href="#" class="menu-toggle-btn">
-
float:right;
+
            <i class="fa fa-bars fa-2x"></i>
-
}
+
        </a>
-
.menu li {
+
        <div class="navigation responsive-menu">
-
float:left;
+
            <ul>
-
position:relative;
+
                <li class="home"><a href="#templatemo">Home</a></li>
-
padding-right:42px;
+
            <li class="about"><a href="#about">About Us</a></li>
-
}
+
            <li class="services"><a href="#services">Services</a></li>
-
.menu li:first-child {padding-right:34px;}
+
            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
-
.menu li.last-item {padding-right:0;}
+
            <li class="contact"><a href="#contact">Contact</a></li>
-
.menu li a {
+
            </ul> <!-- /.main_menu -->
-
display:inline-block;
+
        </div> <!-- /.responsive_menu -->
-
font-size:14px;
+
    </div> <!-- /responsive_navigation -->
-
line-height:1.2em;
+
-
padding-top:16px;
+
-
color:#808080;
+
-
background:url(../images/menu-marker.gif) center -20px no-repeat;
+
-
}
+
-
.menu li a.active,
+
-
.menu > li > a:hover {background-position:center 0; color:#1c1b18;}
+
-
.slider-bg {
+
<div id="main-sidebar" class="hidden-xs hidden-sm">
-
width:960px;
+
<div class="logo">
-
height:279px;
+
<a href="http://www.templatemo.com/preview/templatemo_394_sonic" rel="nofollow"><h1>Sonic</h1></a>
-
padding:0 10px 42px 10px;
+
<span>Creative Portfolio Template</span>
-
background:url(../images/slider-bg-sp.png) 0 0 no-repeat;
+
</div> <!-- /.logo -->
-
}
+
-
.slider {
+
-
width:100%;
+
-
height:279px;
+
-
background:url(../images/slider-img-sp.jpg) 1px 0 no-repeat;
+
-
position:relative;
+
-
overflow:hidden;
+
-
}
+
-
#page1 .slider-bg {height:399px; background:url(../images/slider-bg.png) 0 0 no-repeat;}
+
-
#page1 .slider {height:399px; background:url(../images/slider-img.jpg) 1px 0 no-repeat;}
+
-
.banner {
+
<div class="navigation">
-
width:320px;
+
        <ul class="main-menu">
-
height:200px;
+
            <li class="home"><a href="#templatemo">Home</a></li>
-
position:absolute;
+
            <li class="about"><a href="#about">About Us</a></li>
-
right:100px;
+
            <li class="services"><a href="#services">Services</a></li>
-
top:40px;
+
            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
-
}
+
            <li class="contact"><a href="#contact">Contact</a></li>
-
#page1 .banner {right:70px; top:100px;}
+
        </ul>
-
.banner a {
+
</div> <!-- /.navigation -->
-
font-size:21px;
+
-
line-height:1.2em;
+
-
}
+
-
.title-1 {
+
-
display:block;
+
-
font-size:53px;
+
-
line-height:1.2em;
+
-
color:#fff;
+
-
text-transform:uppercase;
+
-
margin-bottom:-7px;
+
-
}
+
-
.text-1 {
+
-
display:block;
+
-
font-size:28px;
+
-
line-height:1.2em;
+
-
color:#ccc;
+
-
margin-bottom:30px;
+
-
}
+
-
/*********************************content*************************************/
+
</div> <!-- /#main-sidebar -->
-
#content {
+
-
width:100%;
+
-
padding:0 0 40px;
+
-
position:relative;
+
-
z-index:1;
+
-
}
+
-
.spacer-1 {
+
<div id="main-content">
-
width:100%;
+
-
background:url(../images/pic-1.gif) 217px 0 repeat-y;
+
-
}
+
-
h3 {
+
<div id="templatemo">
-
font-size:32px;
+
<div class="main-slider">
-
line-height:2em;
+
<div class="flexslider">
-
color:#1c1b18;
+
<ul class="slides">
-
font-weight:normal;
+
                   
-
letter-spacing:-1px;
+
<li>
-
margin-bottom:-5px
+
<div class="slider-caption">
-
}
+
<h2>Responsive Layout</h2>
-
h4 {
+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
-
font-size:21px;
+
<a href="http://www.templatemo.com/page/1" rel="nofollow" class="largeButton homeBgColor">Read More</a>
-
line-height:24px;
+
</div>
-
color:#1c1b18;
+
<img src="images/slide1.jpg" alt="Slide 1">
-
font-weight:normal;
+
</li>
-
margin-bottom:18px;
+
                       
-
}
+
<li>
-
h6 {color:#1c1b18;}
+
<div class="slider-caption">
 +
<h2>Portfolio Website</h2>
 +
<p>Fusce convallis enim vitae sagittis mollis. Sed bibendum ultricies dignissim.</p>
 +
<a href="http://www.templatemo.com/page/2" rel="nofollow" class="largeButton homeBgColor">Details</a>
 +
</div>
 +
<img src="images/slide2.jpg" alt="Slide 2">
 +
</li>
 +
                       
 +
                        <li>
 +
<div class="slider-caption">
 +
<h2>Free Templates</h2>
 +
<p>All templates are free to download and use for your personal or commercial websites.</p>
 +
<a href="http://www.templatemo.com" rel="nofollow" class="largeButton homeBgColor">Downloads</a>
 +
</div>
 +
<img src="images/slide3.jpg" alt="Slide 3">
 +
</li>
 +
                       
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="container-fluid">
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="welcome-text">
 +
<h2>Welcome to Sonic Template</h2>
 +
<p>Sonic is provided by templatemo website for everyone. Credit goes to <a href="http://flexslider.woothemes.com" rel="nofollow">FlexSlider</a>. Maecenas adipiscing pellentesque elit eu volutpat. Integer vitae <a href="#">pulvinar magna</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi metus, nec sagittis purus ultrices id.</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div> <!-- /#sTop -->
-
.border-bot {
+
<div class="container-fluid">
-
width:100%;
+
-
padding-bottom:11px;
+
-
background:url(../images/pic-1.gif) 0 bottom repeat-x;
+
-
}
+
-
.circle {
+
<div id="about" class="section-content">
-
width:58px;
+
<div class="row">
-
height:58px;
+
<div class="col-md-12">
-
font-size:32px;
+
<div class="section-title">
-
line-height:58px;
+
<h2>About Us</h2>
-
color:#fff;
+
</div>
-
background:url(../images/circle.png) 0 0 no-repeat;
+
</div>
-
text-align:center;
+
</div>
-
float:left;
+
<div class="row">
-
margin-right:15px;
+
<div class="col-md-4">
-
margin-top:8px;
+
<div class="member-item">
-
}
+
<div class="member-thumb">
 +
<img src="images/team1.jpg" alt="girl 1">
 +
<div class="overlay">
 +
<ul class="social-member">
 +
<li><a href="#" class="fa fa-facebook"></a></li>
 +
<li><a href="#" class="fa fa-twitter"></a></li>
 +
<li><a href="#" class="fa fa-linkedin"></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="member-content">
 +
<h4>Christina Welldone</h4>
 +
<p>Marketing Director</p>
 +
</div>
 +
</div>
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="member-item">
 +
<div class="member-thumb">
 +
<img src="images/team2.jpg" alt="girl 2">
 +
<div class="overlay">
 +
<ul class="social-member">
 +
<li><a href="#" class="fa fa-facebook"></a></li>
 +
<li><a href="#" class="fa fa-twitter"></a></li>
 +
<li><a href="#" class="fa fa-linkedin"></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="member-content">
 +
<h4>Teri Belle</h4>
 +
<p>Creative Executive</p>
 +
</div>
 +
</div>
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="member-item">
 +
<div class="member-thumb">
 +
<img src="images/team3.jpg" alt="girl 3">
 +
<div class="overlay">
 +
<ul class="social-member">
 +
<li><a href="#" class="fa fa-facebook"></a></li>
 +
<li><a href="#" class="fa fa-twitter"></a></li>
 +
<li><a href="#" class="fa fa-linkedin"></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="member-content">
 +
<h4>Tawana Cherry</h4>
 +
<p>Company President</p>
 +
</div>
 +
</div>
 +
</div> <!-- /.col-md-4 -->
 +
</div> <!-- /.row -->
 +
<div class="row our-story">
 +
<div class="col-md-8">
 +
<h3>Our Management Team</h3>
 +
Quisque in metus tristique, gravida dolor ut, varius neque. Maecenas ac risus aliquam, facilisis massa id, vulputate elit. Curabitur pretium arcu dictum, faucibus diam quis, commodo turpis. Proin viverra, risus eget egestas sodales, felis ante scelerisque ligula, eget condimentum diam ligula eu tellus.
 +
                        <br><br>
 +
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, exercitationem, laboriosam, modi non quisquam voluptas accusamus numquam ipsum reiciendis saepe veniam cupiditate explicabo autem. Repudiandae tempore dolore deserunt nemo voluptatum consectetur aspernatur expedita aliquid iste illo enim molestias vel animi quod.
 +
</div>
 +
<div class="col-md-4">
 +
<div class="story-image">
 +
<img src="images/responsive-design.jpg" alt="">
 +
</div>
 +
</div>
 +
</div> <!-- /.row -->
 +
</div> <!-- /#about -->
 +
 +
<div id="services" class="section-content">
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="section-title">
 +
<h2>Services</h2>
 +
</div> <!-- /.section-title -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
<div class="row">
 +
<div class="col-md-4">
 +
<div class="service-item clearfix">
 +
<div class="service-icon">
 +
<i class="fa fa-bolt fa-2x"></i>
 +
</div>
 +
<div class="service-content">
 +
<h3>The Best<br>Support Ever</h3>
 +
</div>
 +
</div> <!-- /.service-item -->
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="service-item">
 +
<div class="service-icon">
 +
<i class="fa fa-laptop fa-2x"></i>
 +
</div>
 +
<div class="service-content">
 +
<h3>Fully<br>Responsive Design</h3>
 +
</div>
 +
</div> <!-- /.service-item -->
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="service-item">
 +
<div class="service-icon">
 +
<i class="fa fa-pencil fa-2x"></i>
 +
</div>
 +
<div class="service-content">
 +
<h3>Unlimited<br>Layouts Options</h3>
 +
</div>
 +
</div> <!-- /.service-item -->
 +
</div> <!-- /.col-md-4 -->
 +
</div> <!-- /.row -->
 +
<div class="row our-skills">
 +
<div class="col-md-8">
 +
<h3>Our Skills</h3>
 +
Integer hendrerit erat sed tellus pretium, eu sodales eros dignissim. Duis augue eros, mollis ac velit at, rutrum tincidunt ipsum. Morbi semper dui id fringilla semper. Etiam vulputate sagittis vestibulum. Vivamus ac ante cursus, feugiat ipsum et, aliquet justo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, minima soluta numquam perferendis illum alias omnis commodi error veritatis a esse nostrum asperiores recusandae.
 +
</div>
 +
<div class="col-md-4">
 +
<ul class="progess-bars">
 +
<li>
 +
<div class="progress">
 +
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">Graphics 90%</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="progress">
 +
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">HTML5 CSS3 75%</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="progress">
 +
<div class="progress-bar" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width: 66%;">WordPress 66%</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="progress">
 +
<div class="progress-bar" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="width: 88%;">Marketing 88%</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div> <!-- /#services -->
-
.box {
+
<div id="portfolio" class="section-content">
-
width:100%;
+
<div class="row">
-
background:url(../images/box-tail.gif) 0 0 repeat-x;
+
<div class="col-md-12">
-
}
+
<div class="section-title">
 +
<h2>Portfolio</h2>
 +
</div> <!-- /.section-title -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
<div class="row">
 +
<div class="col-md-4">
 +
<div class="portfolio-item">
 +
<div class="portfolio-thumb">
 +
<img src="images/portfolio/1.jpg" alt="Fantasy">
 +
<div class="overlay-p">
 +
<a href="images/portfolio/1.jpg" data-gal="prettyPhoto">
 +
<i class="fa fa-arrows-alt fa-2x"></i>
 +
</a>
 +
</div>
 +
</div> <!-- /.portfolio-thumb -->
 +
<h3 class="portfolio-title"><a href="#">Fantasy</a></h3>
 +
</div> <!-- /.portfolio-item -->
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="portfolio-item">
 +
<div class="portfolio-thumb">
 +
<img src="images/portfolio/2.jpg" alt="Botany">
 +
<div class="overlay-p">
 +
<a href="images/portfolio/2.jpg" data-gal="prettyPhoto">
 +
<i class="fa fa-arrows-alt fa-2x"></i>
 +
</a>
 +
</div>
 +
</div> <!-- /.portfolio-thumb -->
 +
<h3 class="portfolio-title"><a href="#">Botany</a></h3>
 +
</div> <!-- /.portfolio-item -->
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="portfolio-item">
 +
<div class="portfolio-thumb">
 +
<img src="images/portfolio/3.jpg" alt="Universe">
 +
<div class="overlay-p">
 +
<a href="images/portfolio/3.jpg" data-gal="prettyPhoto">
 +
<i class="fa fa-arrows-alt fa-2x"></i>
 +
</a>
 +
</div>
 +
</div> <!-- /.portfolio-thumb -->
 +
<h3 class="portfolio-title"><a href="#">Universe</a></h3>
 +
</div> <!-- /.portfolio-item -->
 +
</div> <!-- /.col-md-4 -->
 +
</div> <!-- /.row -->
 +
<div class="row">
 +
<div class="col-md-4">
 +
<div class="portfolio-item">
 +
<div class="portfolio-thumb">
 +
<img src="images/portfolio/4.jpg" alt="Channel">
 +
<div class="overlay-p">
 +
<a href="images/portfolio/4.jpg" data-gal="prettyPhoto">
 +
<i class="fa fa-arrows-alt fa-2x"></i>
 +
</a>
 +
</div>
 +
</div> <!-- /.portfolio-thumb -->
 +
<h3 class="portfolio-title"><a href="#">Channel</a></h3>
 +
</div> <!-- /.portfolio-item -->
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="portfolio-item">
 +
<div class="portfolio-thumb">
 +
<img src="images/portfolio/5.jpg" alt="Dragonfly">
 +
<div class="overlay-p">
 +
<a href="images/portfolio/5.jpg" data-gal="prettyPhoto">
 +
<i class="fa fa-arrows-alt fa-2x"></i>
 +
</a>
 +
</div>
 +
</div> <!-- /.portfolio-thumb -->
 +
<h3 class="portfolio-title"><a href="#">Dragonfly</a></h3>
 +
</div> <!-- /.portfolio-item -->
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<div class="portfolio-item">
 +
<div class="portfolio-thumb">
 +
<img src="images/portfolio/6.jpg" alt="Titanium">
 +
<div class="overlay-p">
 +
<a href="images/portfolio/6.jpg" data-gal="prettyPhoto">
 +
<i class="fa fa-arrows-alt fa-2x"></i>
 +
</a>
 +
</div>
 +
</div> <!-- /.portfolio-thumb -->
 +
<h3 class="portfolio-title"><a href="#">Titanium</a></h3>
 +
</div> <!-- /.portfolio-item -->
 +
</div> <!-- /.col-md-4 -->
 +
</div> <!-- /.row -->
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="load-more">
 +
<a href="#portfolio" class="largeButton portfolioBgColor">Load More</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div> <!-- /#portfolio -->
-
.button {
+
<div id="contact" class="section-content">
-
display:inline-block;
+
<div class="row">
-
padding:9px 20px;
+
<div class="col-md-12">
-
font-size:21px;
+
<div class="section-title">
-
line-height:1.2em;
+
<h2>Contact Us</h2>
-
color:#fff;
+
</div> <!-- /.section-title -->
-
background:#1c1b18;
+
</div> <!-- /.col-md-12 -->
-
cursor:pointer;
+
</div> <!-- /.row -->
-
}
+
<div class="row">
-
.button:hover {color:#fff;}
+
<div class="col-md-12">
 +
<div class="map-holder">
 +
<div class="google-map-canvas" id="map-canvas" style="height: 400px;">
 +
                    </div>
 +
</div> <!-- /.map-holder -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
<div class="row contact-form">
 +
<div class="col-md-4">
 +
<label for="name-id" class="required">Name:</label>
 +
<input name="name-id" type="text" id="name-id" maxlength="40">
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<label for="email-id" class="required">Email:</label>
 +
<input name="email-id" type="text" id="email-id" maxlength="40">
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-4">
 +
<label for="subject-id">Subject:</label>
 +
<input name="subject-id" type="text" id="subject-id" maxlength="60">
 +
</div> <!-- /.col-md-4 -->
 +
<div class="col-md-12">
 +
<label for="message-id" class="required">Message:</label>
 +
<textarea name="message-id" id="message-id" rows="6"></textarea>
 +
</div> <!-- /.col-md-12 -->
 +
<div class="col-md-12">
 +
<div class="submit-btn">
 +
<a href="#" class="largeButton contactBgColor">Send Message</a>
 +
</div> <!-- /.submit-btn -->
 +
</div> <!-- /.col-md-12 -->
 +
</div>
 +
</div> <!-- /#contact -->
-
.list-1 li {
+
</div> <!-- /.container-fluid -->
-
line-height:20px;
+
-
padding:7px 0 8px 20px;
+
-
background:url(../images/marker-1.gif) 0 12px no-repeat;
+
-
}
+
-
.list-1 li a {display:inline-block; color:#808080;}
+
-
.list-1 li a:hover {color:#43bfff; text-decoration:underline;}
+
-
.list-2 li {
+
<div class="site-footer">
-
line-height:20px;
+
<div class="first-footer">
-
padding:7px 0 8px 20px;
+
<div class="container-fluid">
-
background:url(../images/marker-1.gif) 0 12px no-repeat;
+
<div class="row">
-
}
+
<div class="col-md-12">
-
.list-2 li a {display:inline-block;}
+
<div class="social-footer">
 +
<ul>
 +
<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>
 +
<li><a href="#" class="fa fa-linkedin"></a></li>
 +
<li><a href="#" class="fa fa-rss"></a></li>
 +
</ul>
 +
</div> <!-- /.social-footer -->
 +
</div> <!-- /.col-md-12 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container-fluid -->
 +
</div> <!-- /.first-footer -->
 +
<div class="bottom-footer">
 +
<div class="container-fluid">
 +
<div class="row">
 +
<div class="col-md-6">
 +
<p class="copyright">Copyright © 2084 <a href="#">Your Company Name</a>
 +
                            </p>
 +
</div> <!-- /.col-md-6 -->
 +
<div class="col-md-6 credits">
 +
<p>Design: <a href="http://www.templatemo.com/preview/templatemo_394_sonic" rel="nofollow">Sonic</a></p>
 +
                            <!-- / please support templatemo.com by providing a credit link. thank you. / -->
 +
</div> <!-- /.col-md-6 -->
 +
</div> <!-- /.row -->
 +
</div> <!-- /.container-fluid -->
 +
</div> <!-- /.bottom-footer -->
 +
</div> <!-- /.site-footer -->
-
.link:hover {text-decoration:underline;}
+
</div> <!-- /#main-content -->
-
.link-1 {color:#1c1b18;}
+
<!-- JavaScripts -->
-
.link-1:hover {text-decoration:none;}  
+
<script src="js/jquery-1.10.2.min.js"></script>
 +
<script src="js/jquery.singlePageNav.js"></script>
 +
<script src="js/jquery.flexslider.js"></script>
 +
<script src="js/jquery.prettyPhoto.js"></script>
 +
<script src="js/custom.js"></script>
 +
<script>
 +
$(document).ready(function(){
 +
$("a[data-gal^='prettyPhoto']").prettyPhoto({hook: 'data-gal'});
 +
});
-
dl span {float:left; width:88px; font-weight:bold; color:#1c1b18;}
+
        function initialize() {
 +
          var mapOptions = {
 +
            zoom: 11,
 +
            center: new google.maps.LatLng(16.8451789,96.1439764)
 +
          };
-
/***** contact form *****/
+
          var map = new google.maps.Map(document.getElementById('map-canvas'),
-
#contact-form {
+
              mapOptions);
-
display:block;
+
        }
-
width:100%;
+
-
}
+
-
#contact-form label {
+
-
display:block;
+
-
height:35px;
+
-
overflow:hidden;
+
-
}
+
-
#contact-form input {
+
-
float:left;
+
-
width:443px;
+
-
font-size:12px;
+
-
line-height:1.25em;
+
-
color:#808080;
+
-
padding:7px 9px;
+
-
margin:0;
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
border:1px solid #dcdcdc;
+
-
background:#fff;
+
-
outline:none;
+
-
}
+
-
#contact-form textarea {
+
-
float:left;
+
-
height:183px;
+
-
width:443px;
+
-
font-size:12px;
+
-
line-height:1.25em;
+
-
color:#808080;
+
-
padding:7px 9px;
+
-
margin:0;
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
border:1px solid #dcdcdc;
+
-
background:#fff;
+
-
overflow:auto;
+
-
outline:none;
+
-
}
+
-
.text-form {
+
-
float:left;
+
-
display:block;
+
-
font-size:13px;
+
-
line-height:18px;
+
-
width:96px;
+
-
color:#808080;
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
}
+
-
.buttons {padding:8px 30px 0 0; text-align:right;}
+
        function loadScript() {
-
.buttons a {margin-left:6px;}
+
          var script = document.createElement('script');
-
+
          script.type = 'text/javascript';
-
+
          script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
-
aside {
+
              'callback=initialize';
-
width:100%;
+
          document.body.appendChild(script);
-
padding:40px 0 30px;
+
        }
-
background:#fff;
+
-
}
+
-
.title-2 {
+
-
display:block;
+
-
padding-left:20px;
+
-
font-size:21px;
+
-
line-height:43px;
+
-
color:#fff;
+
-
background:#1c1b18;
+
-
margin-bottom:16px;
+
-
}
+
-
+
-
/****************************footer************************/
+
-
footer {
+
-
width:100%;  
+
-
height:114px;
+
-
position:relative;
+
-
z-index:99;
+
-
overflow:hidden;
+
-
}
+
-
.footer-bg {
+
-
margin:0 auto;
+
-
width:960px;
+
-
padding:35px 0;
+
-
color:#f5f5f5;
+
-
background:#1f1c1a;
+
-
}
+
-
.footer-bg a {color:#f5f5f5;}
+
-
.list-services {
+
        window.onload = loadScript;
-
padding:0;
+
    </script>
-
}
+
-
.list-services li {
+
-
float:left;
+
-
padding:0 0 0 10px;
+
-
}
+
-
+
-
/*********extra***********/
+
-
.block {height:114px;}
+
-
.extra {
+
-
min-height:100%;
+
-
height:auto !important;
+
-
height:100%;
+
-
margin: 0 auto -114px;
+
-
position:relative;
+
-
overflow:hidden;
+
-
}
+
-
html, body {height:100%;}
+
-
/*
+
-
Variable Grid System.
+
-
Learn more ~ http://www.spry-soft.com/grids/
+
-
Based on 960 Grid System - http://960.gs/
+
-
Licensed under GPL and MIT.
+
</body>
-
*/
+
-
 
+
-
 
+
-
/* Containers
+
-
----------------------------------------------------------------------------------------------------*/
+
-
.container_12 {
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
width: 960px;
+
-
}
+
-
 
+
-
/* Grid >> Global
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.grid_1,
+
-
.grid_2,
+
-
.grid_3,
+
-
.grid_4,
+
-
.grid_5,
+
-
.grid_6,
+
-
.grid_7,
+
-
.grid_8,
+
-
.grid_9,
+
-
.grid_10,
+
-
.grid_11,
+
-
.grid_12 {
+
-
display:inline;
+
-
float: left;
+
-
position: relative;
+
-
margin-left: 10px;
+
-
margin-right: 10px;
+
-
}
+
-
 
+
-
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.alpha {
+
-
margin-left: 0;
+
-
}
+
-
 
+
-
.omega {
+
-
margin-right: 0;
+
-
}
+
-
 
+
-
/* Grid >> 12 Columns
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.container_12 .grid_1 {
+
-
width:60px;
+
-
}
+
-
 
+
-
.container_12 .grid_2 {
+
-
width:140px;
+
-
}
+
-
 
+
-
.container_12 .grid_3 {
+
-
width:220px;
+
-
}
+
-
 
+
-
.container_12 .grid_4 {
+
-
width:300px;
+
-
}
+
-
 
+
-
.container_12 .grid_5 {
+
-
width:380px;
+
-
}
+
-
 
+
-
.container_12 .grid_6 {
+
-
width:460px;
+
-
}
+
-
 
+
-
.container_12 .grid_7 {
+
-
width:540px;
+
-
}
+
-
 
+
-
.container_12 .grid_8 {
+
-
width:620px;
+
-
}
+
-
 
+
-
.container_12 .grid_9 {
+
-
width:700px;
+
-
}
+
-
 
+
-
.container_12 .grid_10 {
+
-
width:780px;
+
-
}
+
-
 
+
-
.container_12 .grid_11 {
+
-
width:860px;
+
-
}
+
-
 
+
-
.container_12 .grid_12 {
+
-
width:940px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/* Prefix Extra Space >> 12 Columns
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.container_12 .prefix_1 {
+
-
padding-left:80px;
+
-
}
+
-
 
+
-
.container_12 .prefix_2 {
+
-
padding-left:160px;
+
-
}
+
-
 
+
-
.container_12 .prefix_3 {
+
-
padding-left:240px;
+
-
}
+
-
 
+
-
.container_12 .prefix_4 {
+
-
padding-left:320px;
+
-
}
+
-
 
+
-
.container_12 .prefix_5 {
+
-
padding-left:400px;
+
-
}
+
-
 
+
-
.container_12 .prefix_6 {
+
-
padding-left:480px;
+
-
}
+
-
 
+
-
.container_12 .prefix_7 {
+
-
padding-left:560px;
+
-
}
+
-
 
+
-
.container_12 .prefix_8 {
+
-
padding-left:640px;
+
-
}
+
-
 
+
-
.container_12 .prefix_9 {
+
-
padding-left:720px;
+
-
}
+
-
 
+
-
.container_12 .prefix_10 {
+
-
padding-left:800px;
+
-
}
+
-
 
+
-
.container_12 .prefix_11 {
+
-
padding-left:880px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/* Suffix Extra Space >> 12 Columns
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.container_12 .suffix_1 {
+
-
padding-right:80px;
+
-
}
+
-
 
+
-
.container_12 .suffix_2 {
+
-
padding-right:160px;
+
-
}
+
-
 
+
-
.container_12 .suffix_3 {
+
-
padding-right:240px;
+
-
}
+
-
 
+
-
.container_12 .suffix_4 {
+
-
padding-right:320px;
+
-
}
+
-
 
+
-
.container_12 .suffix_5 {
+
-
padding-right:400px;
+
-
}
+
-
 
+
-
.container_12 .suffix_6 {
+
-
padding-right:480px;
+
-
}
+
-
 
+
-
.container_12 .suffix_7 {
+
-
padding-right:560px;
+
-
}
+
-
 
+
-
.container_12 .suffix_8 {
+
-
padding-right:640px;
+
-
}
+
-
 
+
-
.container_12 .suffix_9 {
+
-
padding-right:720px;
+
-
}
+
-
 
+
-
.container_12 .suffix_10 {
+
-
padding-right:800px;
+
-
}
+
-
 
+
-
.container_12 .suffix_11 {
+
-
padding-right:880px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/* Push Space >> 12 Columns
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.container_12 .push_1 {
+
-
left:80px;
+
-
}
+
-
 
+
-
.container_12 .push_2 {
+
-
left:160px;
+
-
}
+
-
 
+
-
.container_12 .push_3 {
+
-
left:240px;
+
-
}
+
-
 
+
-
.container_12 .push_4 {
+
-
left:320px;
+
-
}
+
-
 
+
-
.container_12 .push_5 {
+
-
left:400px;
+
-
}
+
-
 
+
-
.container_12 .push_6 {
+
-
left:480px;
+
-
}
+
-
 
+
-
.container_12 .push_7 {
+
-
left:560px;
+
-
}
+
-
 
+
-
.container_12 .push_8 {
+
-
left:640px;
+
-
}
+
-
 
+
-
.container_12 .push_9 {
+
-
left:720px;
+
-
}
+
-
 
+
-
.container_12 .push_10 {
+
-
left:800px;
+
-
}
+
-
 
+
-
.container_12 .push_11 {
+
-
left:880px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/* Pull Space >> 12 Columns
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
.container_12 .pull_1 {
+
-
left:-80px;
+
-
}
+
-
 
+
-
.container_12 .pull_2 {
+
-
left:-160px;
+
-
}
+
-
 
+
-
.container_12 .pull_3 {
+
-
left:-240px;
+
-
}
+
-
 
+
-
.container_12 .pull_4 {
+
-
left:-320px;
+
-
}
+
-
 
+
-
.container_12 .pull_5 {
+
-
left:-400px;
+
-
}
+
-
 
+
-
.container_12 .pull_6 {
+
-
left:-480px;
+
-
}
+
-
 
+
-
.container_12 .pull_7 {
+
-
left:-560px;
+
-
}
+
-
 
+
-
.container_12 .pull_8 {
+
-
left:-640px;
+
-
}
+
-
 
+
-
.container_12 .pull_9 {
+
-
left:-720px;
+
-
}
+
-
 
+
-
.container_12 .pull_10 {
+
-
left:-800px;
+
-
}
+
-
 
+
-
.container_12 .pull_11 {
+
-
left:-880px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/* Clear Floated Elements
+
-
----------------------------------------------------------------------------------------------------*/
+
-
 
+
-
/* http://sonspring.com/journal/clearing-floats */
+
-
 
+
-
.clear {
+
-
clear: both;
+
-
display: block;
+
-
overflow: hidden;
+
-
visibility: hidden;
+
-
width: 0;
+
-
height: 0;
+
-
}
+
-
 
+
-
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
+
-
 
+
-
.clearfix:after {
+
-
clear: both;
+
-
content: ' ';
+
-
display: block;
+
-
font-size: 0;
+
-
line-height: 0;
+
-
visibility: hidden;
+
-
width: 0;
+
-
height: 0;
+
-
}
+
-
 
+
-
.clearfix {
+
-
display: inline-block;
+
-
}
+
-
 
+
-
* html .clearfix {
+
-
height: 1%;
+
-
}
+
-
 
+
-
.clearfix {
+
-
display: block;
+
-
}
+
-
</style>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<head>
+
-
<title></title>
+
-
<meta charset="utf-8">
+
-
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
+
-
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+
-
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">  
+
-
<!--[if lt IE 7]>
+
-
<div style=' clear: both; text-align:center; position: relative;'>
+
-
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
+
-
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
+
-
</a>
+
-
</div>
+
-
<![endif]-->
+
-
<!--[if lt IE 9]>
+
-
<script type="text/javascript" src="js/html5.js"></script>
+
-
<![endif]-->
+
-
</head>
+
-
<body id="page1">
+
-
<div class="extra">
+
-
<!--==============================header=================================-->
+
-
<header>
+
-
<div class="main">
+
-
<div class="border-top">
+
-
<div class="wrapper">
+
-
<h1><a href="index.html">Jason Smith</a></h1>
+
-
<nav>
+
-
<ul class="menu">
+
-
<li><a class="active" href="index.html">About</a></li>
+
-
<li><a href="services.html">Services</a></li>
+
-
<li><a href="areas.html">Areas of Practice</a></li>
+
-
<li><a href="clients.html">Clients</a></li>
+
-
<li><a href="faq.html">FAQ</a></li>
+
-
<li class="last-item"><a href="contacts.html">Contacts</a></li>
+
-
</ul>
+
-
</nav>
+
-
</div>
+
-
</div>
+
-
<div class="slider-bg">
+
-
<div class="slider">
+
-
<div class="banner">
+
-
<strong class="title-1">REALIZE</strong>
+
-
<span class="text-1">your constitutional right for qualified</span>
+
-
<a class="link" href="#">legal help</a>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</header>
+
-
<!--==============================content================================-->
+
-
<section id="content"><div class="ic">More Website Templates @ TemplateMonster.com - December 26, 2011!</div>
+
-
<div class="main">
+
-
<div class="container_12">
+
-
<div class="wrapper p3">
+
-
<article class="grid_8">
+
-
<div class="indent-left">
+
-
<h3>Welcome!</h3>
+
-
<h4 class="color-3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</h4>
+
-
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fugat harum quidem rerum facilis est et expedita.
+
-
</div>
+
-
</article>
+
-
<article class="grid_4">
+
-
<div class="indent-left indent-top">
+
-
<h4 class="prev-indent-bot2">Success Stories</h4>
+
-
<ul class="list-1">
+
-
<li><a href="#">At vero eos et accusamus et iusto</a></li>
+
-
<li><a href="#">Odio dignissimos ducimus</a></li>
+
-
<li><a href="#">Blanditiis praesentium voluptatum</a></li>
+
-
<li><a href="#">Deleniti atque corrupti quos</a></li>
+
-
<li><a href="#">Rolores et quas molestias excepturi</a></li>
+
-
</ul>
+
-
</div>
+
-
</article>
+
-
</div>
+
-
<aside>
+
-
<div class="wrapper">
+
-
<article class="grid_4">
+
-
<div class="indent">
+
-
<span class="title-2">Capital <strong>Market</strong></span>
+
-
<div class="prev-indent-bot2 wrapper">
+
-
<figure class="img-border"><img src="images/page1-img1.jpg" alt=""></figure>
+
-
</div>
+
-
<p class="p2">Jason Smith is one of <a class="link" target="_blank" href="http://blog.templatemonster.com/free-website-templates/ ">free website tem plates</a> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution. It is also XHTML &amp; CSS valid.</p>
+
-
<a class="link-1" href="#">Read More</a>
+
-
</div>
+
-
</article>
+
-
<article class="grid_4">
+
-
<div class="indent">
+
-
<span class="title-2">Banking &amp; <strong>Finance</strong></span>
+
-
<div class="prev-indent-bot2 wrapper">
+
-
<figure class="img-border"><img src="images/page1-img2.jpg" alt=""></figure>
+
-
</div>
+
-
<p class="p2">This <a class="link" href="http://blog.templatemonster.com/2012/01/02/free-website-template-law-business/">Jason Smith Template</a> goes with two packages – with PSD source files and without them. PSD source files are available for free for the registered members of TemplateMonster.com. </p>
+
-
<a class="link-1" href="#">Read More</a>
+
-
</div>
+
-
</article>
+
-
<article class="grid_4">
+
-
<div class="indent">
+
-
<span class="title-2">Employment <strong>Law</strong></span>
+
-
<div class="prev-indent-bot2 wrapper">
+
-
<figure class="img-border"><img src="images/page1-img3.jpg" alt=""></figure>
+
-
</div>
+
-
<p class="p2">This website template has several pages: <a class="link color-1" href="index.html">About Us</a>, <a class="link color-1" href="services.html">Services</a>, <a class="link color-1" href="areas.html">Areas of Practice</a>, <a class="link color-1" href="clients.html">Clients</a>, <a class="link color-1" href="faq.html">Frequently Asked Questions</a>, <a class="link color-1" href="contacts.html">Contact Us</a> (note that contact us form – doesn't work).</p>
+
-
<a class="link-1" href="#">Read More</a>
+
-
</div>
+
-
</article>
+
-
</div>
+
-
</aside>
+
-
</div>
+
-
</div>
+
-
<div class="block"></div>
+
-
</section>
+
-
</div>
+
-
</body>
+
</html>
</html>

Revision as of 01:59, 4 April 2014

Sonic Template

  • Responsive Layout

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

    Read More
    Slide 1

  • Portfolio Website

    Fusce convallis enim vitae sagittis mollis. Sed bibendum ultricies dignissim.

    Details
    Slide 2

  • Free Templates

    All templates are free to download and use for your personal or commercial websites.

    Downloads
    Slide 3

Welcome to Sonic Template

Sonic is provided by templatemo website for everyone. Credit goes to FlexSlider. Maecenas adipiscing pellentesque elit eu volutpat. Integer vitae pulvinar magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi metus, nec sagittis purus ultrices id.

About Us

girl 1

Christina Welldone

Marketing Director

girl 2

Teri Belle

Creative Executive

girl 3

Tawana Cherry

Company President

Our Management Team

Quisque in metus tristique, gravida dolor ut, varius neque. Maecenas ac risus aliquam, facilisis massa id, vulputate elit. Curabitur pretium arcu dictum, faucibus diam quis, commodo turpis. Proin viverra, risus eget egestas sodales, felis ante scelerisque ligula, eget condimentum diam ligula eu tellus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, exercitationem, laboriosam, modi non quisquam voluptas accusamus numquam ipsum reiciendis saepe veniam cupiditate explicabo autem. Repudiandae tempore dolore deserunt nemo voluptatum consectetur aspernatur expedita aliquid iste illo enim molestias vel animi quod.

Services

The Best
Support Ever

Fully
Responsive Design

Unlimited
Layouts Options

Our Skills

Integer hendrerit erat sed tellus pretium, eu sodales eros dignissim. Duis augue eros, mollis ac velit at, rutrum tincidunt ipsum. Morbi semper dui id fringilla semper. Etiam vulputate sagittis vestibulum. Vivamus ac ante cursus, feugiat ipsum et, aliquet justo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, minima soluta numquam perferendis illum alias omnis commodi error veritatis a esse nostrum asperiores recusandae.
  • Graphics 90%
  • HTML5 CSS3 75%
  • WordPress 66%
  • Marketing 88%

Portfolio

Fantasy

Fantasy

Botany

Botany

Universe

Universe

Channel

Channel

Dragonfly

Dragonfly

Titanium

Titanium

Load More

Contact Us

Send Message

Copyright © 2084 Your Company Name

Design: Sonic

Retrieved from "http://2014hs.igem.org/Team:SMTexas"