Difference between revisions of "Team:FAFU-CHINA"

Line 1: Line 1:
−
 
+
<!DOCTYPE html>
−
计划失败。。正在寻找导入方案
+
<head>
 +
<title>HOME</title>
 +
<meta name="keywords" content="" />
 +
<meta name="description" content="" />
 +
<meta charset="UTF-8">
 +
<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">
 +
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
 +
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css">
 +
</head>
 +
<body>
 +
<nav id="responsive-menu">
 +
        <ul class="menu-holder">
 +
            <li class="active"><a href="#home"><i class="fa fa-home"></i>Home</a></li>
 +
            <li><a href="#about"><i class="fa fa-briefcase"></i>About</a></li>
 +
            <li><a href="#services"><i class="fa fa-cogs"></i>Services</a></li>
 +
            <li><a href="#products"><i class="fa fa-list"></i>Products</a></li>
 +
            <li><a href="#contact"><i class="fa fa-envelope"></i>Contact</a></li>
 +
        </ul>
 +
    </nav>
 +
    <div class="templatemo-site-header">
 +
<div class="container">
 +
<div class="row templatemo-position-relative">
 +
<nav class="hidden-xs text-uppercase templatemo-nav">
 +
<ul class="menu-holder">
 +
<li class="active"><a href="#home">Home</a></li>
 +
<li><a href="#about">About</a></li>
 +
<li><a href="#services">Services</a></li>
 +
<li><a href="#products">Products</a></li>
 +
<li><a href="#contact">Contact</a></li>
 +
</ul>
 +
</nav>
 +
<h1 class="templatemo-site-name">
 +
                <span class="templatemo-brown">The</span>
 +
                <span class="templatemo-gold">Brownie</span>
 +
                </h1>
 +
<div class="text-right visible-xs">
 +
            <a href="#" id="mobile_menu"><span class="fa fa-bars"></span></a>
 +
        </div>
 +
</div>
 +
</div>   
 +
    </div>
 +
<section id="home" class="templatemo-section">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-lg-6 col-md-6 templatemo-position-relative">
 +
<div class="templatemo-flex-center templatemo-black-bg text-center">
 +
<div class="templatemo-home-image-container">
 +
<img src="images/bicycle.jpg" alt="Home" class="templatemo-home-image">
 +
<div class="templatemo-image-overlay">
 +
<span class="fa fa-search templatemo-search-icon"></span>
 +
<p class="text-uppercase templatemo-gold">The Stret</p>
 +
<p class="text-uppercase">Sioutis mauris Justo</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-lg-6 col-md-6">
 +
<div class="templatemo-content-box templatemo-second-box">
 +
<h2 class="templatemo-brown">duis sed odio amet</h2>
 +
<h3 class="templatemo-gold">class  apent  tacit  sioutis mauris just olmorbi</h3>
 +
<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>
 +
<a href="#" class="btn text-uppercase templatemo-btn templatemo-info-btn">Lorem Ipsum</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
    <div class="copyrights">Collect from <a href="http://www.17sucai.com/" >免费模板</a></div>
 +
<section id="about" 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">Meet Our</span>
 +
<span class="templatemo-section-title">Creative <span class="templatemo-gold"><strong>Team</strong></span></span>
 +
</h2>
 +
<p class="margin-top-30">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. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
 +
<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>
 +
</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-team">
 +
<div class="jcarousel">
 +
    <ul>
 +
        <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-1.jpg" alt="Team Member 1" class="tm-team-member-img">
 +
        </div>        
 +
<h3 class="tm-team-member-title templatemo-gold text-uppercase margin-top-15">Aenean sollicitudin</h3>
 +
<img src="images/underline.png" alt="Underline" class="margin-top-15 img-responsive center-block">
 +
<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>
 +
        </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>

Revision as of 19:14, 21 August 2015

<!DOCTYPE html> <head> <title>HOME</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta charset="UTF-8"> <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"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/templatemo_style.css" rel="stylesheet" type="text/css"> </head> <body> <nav id="responsive-menu">

  • <a href="#home">Home</a>
  • <a href="#about">About</a>
  • <a href="#services">Services</a>
  • <a href="#products">Products</a>
  • <a href="#contact">Contact</a>
   </nav>

<nav class="hidden-xs text-uppercase templatemo-nav">

  • <a href="#home">Home</a>
  • <a href="#about">About</a>
  • <a href="#services">Services</a>
  • <a href="#products">Products</a>
  • <a href="#contact">Contact</a>

</nav>

The Brownie

<a href="#" id="mobile_menu"></a>

<section id="home" class="templatemo-section">

<img src="images/bicycle.jpg" alt="Home" class="templatemo-home-image">

The Stret

Sioutis mauris Justo

duis sed odio amet

class apent tacit sioutis mauris just olmorbi

The Brownie is free responsive template from templatemo.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.

<a href="#" class="btn text-uppercase templatemo-btn templatemo-info-btn">Lorem Ipsum</a>

</section>

Collect from <a href="http://www.17sucai.com/" >免费模板</a>

<section id="about" class="templatemo-section">

Meet Our Creative Team

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. Nam nec tellus a odio tincidunt auctor a ornare odio.

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.

  • <img src="images/team-img-frame.png" alt="Team img frame" class="templatemo-img-frame"> <img src="images/team-member-1.jpg" alt="Team Member 1" class="tm-team-member-img">

    Aenean sollicitudin

    <img src="images/underline.png" alt="Underline" class="margin-top-15 img-responsive center-block">

    Ribendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

    Duised odio

  • <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">

    Ribendum auctor

    <img src="images/underline.png" alt="Underline" class="margin-top-15">

    Aenean sollicitudin, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

    Nisi elit

  • <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">

    sagittis sem

    <img src="images/underline.png" alt="Underline" class="margin-top-15">

    Ribendum auctornisi elit consequat ipsum, nisi elit sem nibh id elit.

    Nec sagittis

<a href="#" class="jcarousel-control-prev inactive">‹</a> <a href="#" class="jcarousel-control-next">›</a>

</section> <section id="services" class="templatemo-section">

Our Plans

<img src="images/plan-1.png" alt="Plan 1" class="templatemo-service-image">

duis sed odio sit amet

Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

<img src="images/plan-2.png" alt="Plan 2" class="templatemo-service-image">

sagittis sem nibhd

Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat.

<img src="images/plan-3.png" alt="Plan 3" class="templatemo-service-image">

duis sed odio sit amet

Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

Powerful Creative Design

Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudinl dorem quis bibendum auctor, nisi elit consequat ipsum, nec sagit. tis

</section> <section id="products" class="templatemo-section">

The Best Quality Products

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.

  • Product Name

    <img src="images/product-1.png" alt="Product 1" class="templatemo-product-img">

  • Smart Phone

    <img src="images/product-2.png" alt="Product 2" class="templatemo-product-img">

  • Cogs

    <img src="images/product-3.png" alt="Product 3" class="templatemo-product-img">

<a href="#" class="jcarousel-control-prev inactive">‹</a> <a href="#" class="jcarousel-control-next">›</a>

</section> <section id="contact" class="templatemo-section">

<form action="#" method="post">

<input type="text" id="contact_name" class="form-control" placeholder="Name..." />

<input type="email" id="contact_email" class="form-control" placeholder="Email..." />

<input type="text" id="contact_subject" class="form-control" placeholder="Subject..." />

<textarea id="contact_message" class="form-control" rows="8" placeholder="Message..."></textarea>

<button type="submit" class="btn text-uppercase templatemo-btn templatemo-send-btn">Send</button> </form>

Get In Touch

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. .

<img src="images/social-icons.png" alt="Social icons" class="templatemo-social-icons-img">

<a href="http://www.facebook.com">
</a> <a href="http://www.twitter.com">
</a> <a href="http://plus.google.com">
</a> <a href="http://www.vimeo.com">
</a> <a href="http://www.flickr.com">
</a>

</section> <footer class="container margin-top-30">

Copyright © 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a>

</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>