Difference between revisions of "Team:FAFU-CHINA"

Line 1: Line 1:
−
<head>
+
{{Template:Team:DukeHomePage/CSS}}
−
<title>HOME</title>
+
 
−
<meta name="keywords" content="" />
+
<html>
−
<meta name="description" content="" />
+
 
−
<meta charset="UTF-8">
+
<div class="main">
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
 
−
<link href='http://fonts.useso.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
+
<!--
−
<link href="css/font-awesome.min.css" rel="stylesheet">
+
Gel picture links from Matt Farnitano
−
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
+
 
−
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css">
+
GEL MCF 6-25-14.png
−
</head>
+
GEL MCF_7-1-14.png
−
<body>
+
GEL MCF_7-14-14_2.png
−
<nav id="responsive-menu">
+
GEL MCF_7-14-14_3.png
−
        <ul class="menu-holder">
+
GEL MCF_7-29-14_2.png
−
            <li class="active"><a href="#home"><i class="fa fa-home"></i>Home</a></li>
+
GEL MCF_7-29-14.png
−
            <li><a href="#about"><i class="fa fa-briefcase"></i>About</a></li>
+
GEL MCF 8-1-14 1.png
−
            <li><a href="#services"><i class="fa fa-cogs"></i>Services</a></li>
+
GEL MCF_8-1-14_2.png
−
            <li><a href="#products"><i class="fa fa-list"></i>Products</a></li>
+
GEL MCF_8-4-14_1.png
−
            <li><a href="#contact"><i class="fa fa-envelope"></i>Contact</a></li>
+
GEL MCF_8-4-14_2.png
−
        </ul>
+
GEL MZ_7-31-14.png
−
    </nav>
+
GEL 7-30-14_1.png
−
    <div class="templatemo-site-header">
+
GEL 7-30-14_2.png
−
<div class="container">
+
GEL 8-2-14 1 MCF.png
−
<div class="row templatemo-position-relative">
+
GEL 8-4-14_3.png
−
<nav class="hidden-xs text-uppercase templatemo-nav">
+
GEL MCF_6-17-14.png
−
<ul class="menu-holder">
+
GEL MCF_6-18-14.png
−
<li class="active"><a href="#home">Home</a></li>
+
GEL Mcf_6-19-14.png
−
<li><a href="#about">About</a></li>
+
GEL MCF_6-24-14_2.png
−
<li><a href="#services">Services</a></li>
+
GEL MCF_6-24-14.png
−
<li><a href="#products">Products</a></li>
+
GEL 7-23-14_MCF_4.png
−
<li><a href="#contact">Contact</a></li>
+
GEL 7-24-14_AJC.png
−
</ul>
+
GEL 7-25-14_1_MCF.png
−
</nav>
+
GEL 7-25-14_2_MCF.png
−
<h1 class="templatemo-site-name">
+
GEL 7-26-14_MCF_1.png
−
                <span class="templatemo-brown">The</span>
+
GEL 7-26-14_MCF_2.png
−
                <span class="templatemo-gold">Brownie</span>
+
GEL 7-28-14_1.png
−
                </h1>
+
GEL 7-28-14_2.png
−
<div class="text-right visible-xs">
+
GEL 7-28-14.png
−
            <a href="#" id="mobile_menu"><span class="fa fa-bars"></span></a>
+
GEL 7-29-14_1.png
−
        </div>
+
GEL 7-29-14_2.png
−
</div>
+
GEL 7-16-14_3.png
−
</div>   
+
GEL 7-17--14_2.png
−
    </div>
+
GEL 7-17-14_1.png
−
<section id="home" class="templatemo-section">
+
GEL 7-18-14_1.png
−
<div class="container">
+
GEL 7-18-14.png
−
<div class="row">
+
GEL 7-21-14_1_MCF.png
−
<div class="col-lg-6 col-md-6 templatemo-position-relative">
+
GEL 7-21-14_2_MCF.png
−
<div class="templatemo-flex-center templatemo-black-bg text-center">
+
GEL 7-23-14_MCF_1.png
−
<div class="templatemo-home-image-container">
+
GEL 7-23-14_MCF_2.png
−
<img src="images/bicycle.jpg" alt="Home" class="templatemo-home-image">
+
GEL 7-23-14_MCF_3.png
−
<div class="templatemo-image-overlay">
+
GEL 7-9-14_1.png
−
<span class="fa fa-search templatemo-search-icon"></span>
+
GEL 7-9-14_2.png
−
<p class="text-uppercase templatemo-gold">The Stret</p>
+
GEL 7-9-14_3.png
−
<p class="text-uppercase">Sioutis mauris Justo</p>
+
GEL 7-9-14_4.png
−
</div>
+
GEL 7-10-14_MCF.png
−
</div>
+
GEL 7-11-14_2.png
−
</div>
+
GEL 7-11-14_3.png
−
</div>
+
GEL 7-11-14_AJC.png
−
<div class="col-lg-6 col-md-6">
+
GEL 7-11-14.png
−
<div class="templatemo-content-box templatemo-second-box">
+
GEL 7-14-14_MCF.png
−
<h2 class="templatemo-brown">duis sed odio amet</h2>
+
GEL 7-16-14_1.png
−
<h3 class="templatemo-gold">class  apent  tacit  sioutis mauris just olmorbi</h3>
+
GEL 7-16-14_2.png
−
<p class="margin-top-30">The Brownie is free responsive template from <span class="blue">template</span><span class="green">mo</span>.com website. You can use this layout for any of your website. Please spread a word about us. Thank you. This template uses CSS Flexbox, which is supported on IE 10+ and recent versions of all other major browsers. Check out <a href="#/#feat=flexbox" target="_blank">caniuse.com</a> for detailed browser support information.</p>
+
GEL 6-23-14.png
−
<a href="#" class="btn text-uppercase templatemo-btn templatemo-info-btn">Lorem Ipsum</a>
+
GEL 6-25-14_AJC.png
−
</div>
+
GEL 6-26-14_MCF.png
−
</div>
+
GEL 7_28_14.png
−
</div>
+
GEL 7_29_14_AJC.png
−
</div>
+
GEL 7-6-14_AJC_2.png
−
</section>
+
GEL 7-6-14_AJC.png
−
    <div class="copyrights">Collect from <a href="http://www.17sucai.com/" >免费模板</a></div>
+
GEL 7-8-14_2_AJC.png
−
<section id="about" class="templatemo-section">
+
GEL 7-8-14.png
−
<div class="container">
+
GEL 6-11-14_MCF.png
−
<div class="row">
+
GEL 6-13-14__2.png
−
<div class="col-lg-6 col-md-6">
+
GEL 6-13-14_MCF_bbs1.png
−
<div class="templatemo-content-box text-right">
+
GEL 6-13-14.png
−
<h2 class="templatemo-brown">
+
GEL 6-16-14_AJC.png
−
<span class="templatemo-section-title">Meet Our</span>
+
GEL 6-16-14_MCF.png
−
<span class="templatemo-section-title">Creative <span class="templatemo-gold"><strong>Team</strong></span></span>
+
GEL 6-16-14_2.png
−
</h2>
+
GEL 6-16-14_4.png
−
<p class="margin-top-30">Lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
+
GEL 6-18-14_MCF.png
−
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
+
GEL 6-20-14_MCF.png
−
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Proin condimentum fermentum nunc. Suspendisse in orci enim.</p>
+
GEL 6_12_14_AJC.png
−
</div>
+
GEL 6_13_14.png
−
</div>
+
GEL 6_12_14_3-40_AJC.png
−
<div class="col-lg-6 col-md-6">
+
GEL 6_10_14_AJC.png
−
<div class="templatemo-flex-center templatemo-black-bg">
+
 
−
<div class="templatemo-flex-center templatemo-brown-rectangle-bg">
+
 
−
<div class="jcarousel-wrapper templatemo-team">
+
-->
−
<div class="jcarousel">
+
<!-- consider doing away with CSS and making images that look like the buttons but have the same mouseover effects-->
−
    <ul>
+
<!--tr must be the maximum height of the element. td must be the maximum width of the element. -->
−
        <li>
+
<table id="bodyContent" align="center">
−
        <div class="text-center templatemo-team-member-container">
+
<tr height="110px">
−
        <div class="templatemo-member-img-container">
+
<td width="110px"><a href="https://2014.igem.org/Team:Duke/Team" class="sq-button"> <img src="https://static.igem.org/mediawiki/2014/5/50/Whoweare.png" /></a></td>
−
        <img src="images/team-img-frame.png" alt="Team img frame" class="templatemo-img-frame">
+
<td width="110px"><a href="https://2014.igem.org/Team:Duke/Project" class="sq-button"><img src="https://static.igem.org/mediawiki/2014/f/f3/Whatwedid.png" /></a></td>
−
        <img src="images/team-member-1.jpg" alt="Team Member 1" class="tm-team-member-img">
+
<td width="110px"><a href="https://2014.igem.org/Team:Duke/Notebook" class="sq-button"><img src="https://static.igem.org/mediawiki/2014/8/82/Howwedidit.png" /></a></td>
−
        </div>        
+
<td width="110px"><a href="https://2014.igem.org/Team:Duke/Policy" class="sq-button"><img src="https://static.igem.org/mediawiki/2014/8/89/Whyitmatters.png" /></a></td>
−
<h3 class="tm-team-member-title templatemo-gold text-uppercase margin-top-15">Aenean sollicitudin</h3>
+
</tr>
−
<img src="images/underline.png" alt="Underline" class="margin-top-15 img-responsive center-block">
+
</table>
−
<p class="margin-top-15">Ribendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
+
 
−
<p class="templatemo-brown text-uppercase">Duised odio</p>
+
</div>
−
</div>
+
 
−
        </li>
+
−
        <li>
+
−
        <div class="text-center templatemo-team-member-container">
+
−
        <div class="templatemo-member-img-container">
+
−
        <img src="images/team-img-frame.png" alt="Team img frame" class="templatemo-img-frame">
+
−
<img src="images/team-member-2.jpg" alt="Team Member 2" class="img-circle tm-team-member-img">
+
−
</div>
+
−
<h3 class="tm-team-member-title templatemo-gold text-uppercase margin-top-15">Ribendum auctor</h3>
+
−
<img src="images/underline.png" alt="Underline" class="margin-top-15">
+
−
<p class="margin-top-15">Aenean sollicitudin, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
+
−
<p class="templatemo-brown text-uppercase">Nisi elit</p>
+
−
</div>        
+
−
        </li>
+
−
        <li>
+
−
        <div class="text-center templatemo-team-member-container">
+
−
        <div class="templatemo-member-img-container">
+
−
        <img src="images/team-img-frame.png" alt="Team img frame" class="templatemo-img-frame">
+
−
<img src="images/team-member-3.jpg" alt="Team Member 3" class="img-circle tm-team-member-img">
+
−
</div>
+
−
<h3 class="tm-team-member-title templatemo-gold text-uppercase margin-top-15">sagittis sem</h3>
+
−
<img src="images/underline.png" alt="Underline" class="margin-top-15">
+
−
<p class="margin-top-15">Ribendum auctornisi elit consequat ipsum, nisi elit sem nibh id elit.</p>
+
−
<p class="templatemo-brown text-uppercase">Nec sagittis</p>
+
−
</div>        
+
−
        </li>
+
−
    </ul>
+
−
</div>
+
−
<a href="#" class="jcarousel-control-prev inactive">&lsaquo;</a>
+
−
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
<section id="services" class="templatemo-section">
+
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-lg-6 col-md-6">
+
−
<div class="templatemo-flex-center templatemo-black-bg text-center">
+
−
<div class="templatemo-flex-center templatemo-brown-rectangle-bg">
+
−
<div class="templatemo-flex-item-ie-fix padding-30">
+
−
<h2 class="templatemo-gold">Our Plans</h2>
+
−
<div class="templatemo-service-container margin-top-15">
+
−
<img src="images/plan-1.png" alt="Plan 1" class="templatemo-service-image">
+
−
<div class="templatemo-service-content text-left">
+
−
<h3 class="templatemo-service-title templatemo-brown">duis sed odio sit amet</h3>
+
−
<p class="templatemo-service-description">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
+
−
</div>
+
−
</div>
+
−
<div class="templatemo-service-container">
+
−
<img src="images/plan-2.png" alt="Plan 2" class="templatemo-service-image">
+
−
<div class="templatemo-service-content text-left">
+
−
<h3 class="templatemo-service-title templatemo-brown">sagittis sem nibhd</h3>
+
−
<p class="templatemo-service-description">Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat.</p>
+
−
</div>
+
−
</div>
+
−
<div class="templatemo-service-container">
+
−
<img src="images/plan-3.png" alt="Plan 3" class="templatemo-service-image">
+
−
<div class="templatemo-service-content text-left">
+
−
<h3 class="templatemo-service-title templatemo-brown">duis sed odio sit amet</h3>
+
−
<p class="templatemo-service-description">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="col-lg-6 col-md-6">
+
−
<div class="templatemo-content-box templatemo-second-box">
+
−
<h2 class="templatemo-brown">
+
−
<span class="templatemo-section-title">Powerful</span>
+
−
<span class="templatemo-section-title">Creative <span class="templatemo-gold"><strong>Design</strong></span></span>
+
−
</h2>
+
−
<p class="margin-top-30">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudinl
+
−
dorem quis bibendum auctor, nisi elit consequat ipsum, nec sagit. tis</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
<section id="products" class="templatemo-section">
+
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-lg-6 col-md-6">
+
−
<div class="templatemo-content-box text-right">
+
−
<h2 class="templatemo-brown">
+
−
<span class="templatemo-section-title">The Best</span>
+
−
<span class="templatemo-section-title">Quality <span class="templatemo-gold"><strong>Products</strong></span></span>
+
−
</h2>
+
−
<p class="margin-top-30">Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-lg-6 col-md-6">
+
−
<div class="templatemo-flex-center templatemo-black-bg">
+
−
<div class="templatemo-flex-center templatemo-brown-rectangle-bg">
+
−
<div class="jcarousel-wrapper templatemo-products">
+
−
<div class="jcarousel">
+
−
    <ul>
+
−
        <li>
+
−
        <div class="templatemo-product-container text-center">
+
−
<h3 class="templatemo-gold">Product Name</h3>
+
−
<img src="images/product-1.png" alt="Product 1" class="templatemo-product-img">
+
−
</div>
+
−
        </li>
+
−
        <li>
+
−
        <div class="templatemo-product-container text-center">
+
−
<h3 class="templatemo-gold">Smart Phone</h3>
+
−
<img src="images/product-2.png" alt="Product 2" class="templatemo-product-img">
+
−
</div>        
+
−
        </li>
+
−
        <li>
+
−
        <div class="templatemo-product-container text-center">
+
−
<h3 class="templatemo-gold">Cogs</h3>
+
−
<img src="images/product-3.png" alt="Product 3" class="templatemo-product-img">
+
−
</div>        
+
−
        </li>
+
−
    </ul>
+
−
</div>
+
−
<a href="#" class="jcarousel-control-prev inactive">&lsaquo;</a>
+
−
                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
<section id="contact" class="templatemo-section">
+
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-lg-6 col-md-6">
+
−
<div class="templatemo-flex-center templatemo-black-bg">
+
−
<form action="#" method="post">
+
−
<div class="tm-contact-form">
+
−
                <div class="form-group">
+
−
                    <input type="text" id="contact_name" class="form-control" placeholder="Name..." />
+
−
                </div>
+
−
                <div class="form-group">
+
−
                    <input type="email" id="contact_email" class="form-control" placeholder="Email..." />
+
−
                </div>
+
−
                <div class="form-group">
+
−
                    <input type="text" id="contact_subject" class="form-control" placeholder="Subject..." />
+
−
                </div>
+
−
                <div class="form-group">
+
−
                    <textarea id="contact_message" class="form-control" rows="8" placeholder="Message..."></textarea>
+
−
                </div>
+
−
                </div>
+
−
                <button type="submit" class="btn text-uppercase templatemo-btn templatemo-send-btn">Send</button>
+
−
            </form>
+
−
</div>
+
−
</div>
+
−
<div class="col-lg-6 col-md-6">
+
−
<div class="templatemo-content-box templatemo-second-box">
+
−
<h2 class="templatemo-brown">Get In <span class="templatemo-gold">Touch</span></h2>
+
−
<p class="margin-top-30">Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio nisi elit consequat ipsum, nec sagittis sem nibh id elit. . </p>
+
−
<div>
+
−
<img src="images/social-icons.png" alt="Social icons" class="templatemo-social-icons-img">
+
−
<a href="http://www.facebook.com"><div id="facebook" class="templatemo-social-icon"></div></a>
+
−
<a href="http://www.twitter.com"><div id="twitter" class="templatemo-social-icon"></div></a>
+
−
<a href="http://plus.google.com"><div id="google" class="templatemo-social-icon"></div></a>
+
−
<a href="http://www.vimeo.com"><div id="vimeo" class="templatemo-social-icon"></div></a>
+
−
<a href="http://www.flickr.com"><div id="flickr" class="templatemo-social-icon"></div></a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
<footer class="container margin-top-30">
+
−
<div class="row">
+
−
<div class="col-lg-12">
+
−
<p class="templatemo-copyright-container text-uppercase small templatemo-brown">
+
−
<span class="templatemo-copyright-design">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
</footer>
+
−
<script src="js/jquery-1.11.1.min.js"></script>
+
−
<script src="js/jquery.jcarousel.min.js"></script>
+
−
<script src="js/templatemo_script.js"></script>
+
−
</body>
+
 
</html>
 
</html>
 +
 +
 +
<!-- https://2014.igem.org/File:Whatwedid.png or https://static.igem.org/mediawiki/2014/f/f3/Whatwedid.png
 +
https://2014.igem.org/File:Whoweare.png
 +
https://2014.igem.org/File:Howwedidit.png
 +
https://2014.igem.org/File:Whyitmatters.png -->

Revision as of 19:43, 21 August 2015

Template:Team:DukeHomePage/CSS