实例介绍
【实例简介】暗蓝色扁平化商务
【实例截图】
【核心代码】
| <!doctype html> | |
| <html lang="en-us"> | |
| <head> | |
| <!-- Basic Page Needs --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
| <meta charset="utf-8"> | |
| <title>Allec - Homepage</title> | |
| <meta name="description" content="A Template by Designzway team"> | |
| <meta name="keywords" content="HTML, CSS, JavaScript"> | |
| <meta name="author" content="Designzway team"> | |
| <!-- Mobile Specific Metas--> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta content="telephone=no" name="format-detection"> | |
| <!-- Fonts --> | |
| <!-- Open Sans --> | |
| <link href='http://fonts.useso.com/css?family=Open Sans:300,400italic,600,700italic,400,700,800italic' rel='stylesheet' type='text/css'> | |
| <!-- VarelaRound --> | |
| <link href='http://fonts.useso.com/css?family=Varela Round' rel='stylesheet' type='text/css'> | |
| <!-- Icon Font - Font Awesome --> | |
| <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <!-- Stylesheets --> | |
| <!-- External --> | |
| <!-- Mobile menu --> | |
| <link href="external/z-nav/z-nav.css" rel="stylesheet"> | |
| <!-- Touch slider - Swiper --> | |
| <link href="external/swiper/idangerous.swiper.css" rel="stylesheet" /> | |
| <!-- Custom --> | |
| <link href="css/style.css?v=1" rel="stylesheet" /> | |
| <!-- Basic JavaScript--> | |
| <!-- Modernizr --> | |
| <script src="external/modernizr/modernizr.custom.js"></script> | |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script> | |
| <![endif]--> | |
| <!--[if lte IE 9]> | |
| <link href="css/ie9.css?v=1" rel="stylesheet" /> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class="wrapper" id="top"> | |
| <!-- Index file main container --> | |
| <!-- Header section --> | |
| <header class="header-placement"> | |
| <div class="content"> | |
| <div class="header-fixed header-down"> | |
| <div class="container"> | |
| <!-- Logo --> | |
| <a class="logo" href="index.html"> | |
| <!-- Remove comments to choose image and add comment to h1 --> | |
| <!--<img src="images/logo-full.png" alt="">--> | |
| <h1 class="logo__text">Alle<span class="highlight">c</span><br> | |
| <span class="logo__slogan">your business universe</span> | |
| </h1> | |
| </a> | |
| <!-- End Logo --> | |
| <!-- Navigation section --> | |
| <nav class="z-nav"> | |
| <!-- Toggle for menu mobile view --> | |
| <a href="#" class="z-nav__toggle"> | |
| <span class="menu-icon"></span> | |
| <span class="menu-text">navigation</span> | |
| <div class="menu-head"></div> | |
| </a> | |
| <div class="z-nav-inner"> | |
| <ul class="z-nav__list"> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link z-nav__link--active" href="index.html">Home</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index1.html">Homepage Version 1</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index2.html">Homepage Version 2</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index3.html">Homepage Version 3</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index-host.html">Hosting Homepage</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index-animation.html">Homepage with Canvas Animation</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index.html">Hero Header Version</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="onepage-layout.html">Onepage Version</a></li> | |
| <li class="z-nav__item"> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="#">Dark Headers</a> | |
| <ul class="z-nav__list-secondary z-nav_nested"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-1.html">Default Header</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-2.html">Header with Social Icons</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-3.html">Header with Centred Logo</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-4.html">Two-row Header with Small Logo</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-5.html">Simplified Header</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-6.html">E-commerce Header</a> | |
| </ul> | |
| </li> | |
| <li class="z-nav__item"> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="#">Light Headers</a> | |
| <ul class="z-nav__list-secondary z-nav_nested"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-1-light.html">Default Header</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-2-light.html">Header with Social Icons</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-3-light.html">Header with Centred Logo</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-4-light.html">Two-row Header with Small Logo</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-5-light.html">Simplified Header</a> | |
| <li class="z-nav__item"><a class="z-nav__link" href="header-6-light.html">E-commerce Header</a> | |
| </ul> | |
| </li> | |
| <li class="z-nav__item"> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="#">Dark Footers</a> | |
| <ul class="z-nav__list-secondary z-nav_nested"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-1.html">Default Footer</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-2.html">Footer with Subscription</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-3.html">Footer with Contact Form</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-4.html">Simplified Footer</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-5.html">Footer with Instagram Feed</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-6.html">Centered Footer</a></li> | |
| </ul> | |
| </li> | |
| <li class="z-nav__item"> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="#">Light Footers</a> | |
| <ul class="z-nav__list-secondary z-nav_nested"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-1-light.html">Default Footer</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-2-light.html">Footer with Subscription</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-3-light.html">Footer with Contact Form</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-4-light.html">Simplified Footer</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-5-light.html">Footer with Instagram Feed</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="footer-6-light.html">Centered Footer</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="about.html">About</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="about.html">About</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="single-employee.html">Single employee</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="careers.html">Careers</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="testimonials.html">Testimonials</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="contact1.html">Contact version 1</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="contact2.html">Contact version 2</a></li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="services.html">Services</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="services.html">Services version 1</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="services2.html">Services version 2</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="services3.html">Services version 3</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="single-service.html">Single service</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="pricing-tables.html">Pricing</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="support.html">Support</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="dashboard.html">Dashboard</a></li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="gallery-3col.html">Portfolio</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="gallery-2col.html">Portfolio 2 columns</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="gallery-3col.html">Portfolio 3 columns</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="gallery-4col.html">Portfolio 4 columns</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="gallery-full.html">Portfolio fullwidth</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="case-study.html">Case study</a></li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="index-commerce.html">Shop</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="index-commerce.html">Homepage</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shop-grid-full.html">Catalog fullwidth grid</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shop-list-full.html">Catalog fullwidth list</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shop-grid.html">Catalog grid with sidebar</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shop-list.html">Catalog list with sidebar</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="single-product.html">Single product with sidebar</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="single-product-full.html">Single product fullwidth</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="wishlist.html">Wishlist</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="orders.html">My orders</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="checkout.html">Checkout</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shopping-cart.html">Shopping cart</a></li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="blog.html">Blog</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog.html">Blog with sidebar</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog-full.html">Blog fullwidth</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog-masonry.html">Blog masonry</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog-timeline.html">Blog timeline</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="single-post.html">Single post with sidebar</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="single-post-full.html">Single post fullwidth</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog-audio.html">Blog audio</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog-video.html">Blog video</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="blog-author.html">Post author</a></li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="forum.html">Forum</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="forum.html">Forum page</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="forum-thread.html">Forum thread page</a></li> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| <li class="z-nav__item"> | |
| <!-- Subsidiary menu toogle button --> | |
| <span class="z-nav__toggle-sub plus"><i class="fa fa-plus"></i><i class="fa fa-minus"></i></span> | |
| <a class="z-nav__link" href="site-map.html">Additional</a> | |
| <!-- Subsidiary menu list--> | |
| <ul class="z-nav__list-secondary mega-menu"> | |
| <div class="col-sm-3 col-md-2"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/accordions-and-tabs.html"><i class="fa fa-plus-circle"></i> Accordions & Tabs</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/charts.html"><i class="fa fa-bar-chart-o"></i> Charts</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/controls.html"><i class="fa fa-arrows"></i> Controls</a></li> | |
| </div> | |
| <div class="col-sm-3 col-md-2"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/forms.html"><i class="fa fa-check-square-o"></i> Forms</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/icons.html"><i class="fa fa-user"></i> Icons</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/images.html"><i class="fa fa-picture-o"></i> Images</a></li> | |
| </div> | |
| <div class="col-sm-3 col-md-2"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/promo.html"><i class="fa fa-cube"></i> Promoboxes</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/sliders.html"><i class="fa fa-cogs"></i> Sliders</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/tables.html"><i class="fa fa-table"></i> Tables</a></li> | |
| </div> | |
| <div class="col-sm-3 col-md-2"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="shortcodes/typography.html"><i class="fa fa-font"></i> Typography</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="site-map.html"><i class="fa fa-sitemap"></i> Sitemap</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="404.html"><i class="fa fa-frown-o"></i> 404 error</a></li> | |
| </div> | |
| <div class="clearfix visible-sm"></div> | |
| <div class="col-sm-3 col-md-2"> | |
| <li class="z-nav__item"><a class="z-nav__link" href="comming-soon.html"><i class="fa fa-clock-o"></i> Coming soon</a></li> | |
| <li class="z-nav__item"><a class="z-nav__link" href="login.html"><i class="fa fa-lock"></i> Login/registration</a></li> | |
| </div> | |
| <!-- <li class="z-nav__item"><a class="z-nav__link" href="#">Shortcodes</a></li> --> | |
| </ul> | |
| <!-- end subsidiary menu list--> | |
| </li> | |
| </ul> | |
| </div><!-- end list menu inner container --> | |
| <!-- end list menu item --> | |
| </nav> | |
| <!-- end navigation section --> | |
| </div> <!-- end container --> | |
| </div> <!-- end fixed top block --> | |
| <div class="large-header hero-header"> | |
| <video id='video-header' class="media-element" autoplay="autoplay" preload='none' loop="loop" muted="" src="video/sky.mp4" > | |
| <source type="video/webm" src="video/sky.webm"> | |
| <source type="video/mp4" src="video/sky.mp4"> | |
| <source type="video/ogg" src="video/sky.ogv"> | |
| </video> | |
| <h1 class="main-title">All Mighty of Technology</h1> | |
| <h2 class="main-title-helper waypoint" data-animate-down="header-up" data-animate-up="header-down">gathered in one bootstrap template</h2> | |
| <a class="btn btn-info btn--decorated" href="http://themeforest.net/item/allec-bootstrapless-template-with-page-builder/8986248">Purchase Allec</a> | |
| </div> | |
| </div> | |
| </header><!-- /header --> | |
| <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div> | |
| <section class="container"> | |
| <h3 class="not-visible">Main conrainer</h3> | |
| <div class="row bottom-space"> | |
| <div class="col-sm-4 hidden-xs"> | |
| <div class="feature"> | |
| <div class="feature__image feature__image--page animated fadeInUpStart start-1"> | |
| <img src="images/feature/1.png" alt=""> | |
| </div> | |
| <h3 class="feature__heading">Allec showcase</h3> | |
| <p class="feature__info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.</p> | |
| </div> | |
| </div><!-- end col --> | |
| <div class="col-sm-4 hidden-xs"> | |
| <div class="feature"> | |
| <div class="feature__image feature__image--responsive animated fadeInUpStart start-2"> | |
| <img src="images/feature/2.png" alt=""> | |
| </div> | |
| <h3 class="feature__heading">Compatible with any device</h3> | |
| <p class="feature__info">Aenean porta, elit vitae tristique consequat, nisi tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. </p> | |
| </div> | |
| </div><!-- end col --> | |
| <div class="col-sm-4 hidden-xs"> | |
| <div class="feature"> | |
| <div class="feature__image feature__image--clock animated fadeInUpStart start-3"> | |
| <img src="images/feature/3.png" alt=""> | |
| </div> | |
| <h3 class="feature__heading">Quick implementation</h3> | |
| <p class="feature__info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.</p> | |
| </div> | |
| </div><!-- end col --> | |
| </div><!-- end row --> | |
| <div class="swiper-container fearure-slider"> | |
| <div class="swiper-wrapper"> | |
| <!--Slide--> | |
| <div class="swiper-slide"> | |
| <div class="feature"> | |
| <div class="feature__image feature__image--page"> | |
| <img src="images/feature/1.png" alt=""> | |
| </div> | |
| <h3 class="feature__heading">Allec showcase</h3> | |
| <p class="feature__info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.</p> | |
| </div> | |
| </div> | |
| <!--Slide--> | |
| <div class="swiper-slide"> | |
| <div class="feature"> | |
| <div class="feature__image feature__image--responsive"> | |
| <img src="images/feature/2.png" alt=""> | |
| </div> | |
| <h3 class="feature__heading">Compatible with any device</h3> | |
| <p class="feature__info">Aenean porta, elit vitae tristique consequat, nisi tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. </p> | |
| </div> | |
| </div> | |
| <!--Slide--> | |
| <div class="swiper-slide"> | |
| <div class="feature"> | |
| <div class="feature__image feature__image--clock"> | |
| <img src="images/feature/3.png" alt=""> | |
| </div> | |
| <h3 class="feature__heading">Quick implementation</h3> | |
| <p class="feature__info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-slider-pagination feature-pagination"></div> | |
| </div> | |
| </section><!-- end container --> | |
| <div class="number-container bottom-space--small"> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2 class="block-title block-title--simple" id="number-start">Allec in Numbers</h2> | |
| <!-- Brand shape stat view --> | |
| <div class="col-xs-6 col-md-3 one-column"> | |
| <div class="stat stat--shape"> | |
| <p class="stat__dimension">download</p> | |
| <span class="stat__number" data-result="140k" data-value="140">0</span> | |
| </div> | |
| </div><!-- end col --> | |
| <div class="col-xs-6 col-md-3 one-column"> | |
| <div class="stat stat--shape stat--shape-end"> | |
| <p class="stat__dimension">spent hours</p> | |
| <span class="stat__number" data-result="6718" data-value="471">0</span> | |
| </div> | |
| </div><!-- end col --> | |
| <div class="col-xs-6 col-md-3 one-column"> | |
| <div class="stat stat--shape"> | |
| <p class="stat__dimension">countries</p> | |
| <span class="stat__number" data-result="106" data-value="106">0</span> | |
| </div> | |
| </div><!-- end col --> | |
| <div class="col-xs-6 col-md-3 one-column"> | |
| <div class="stat stat--shape last"> | |
| <p class="stat__dimension">loyal clients</p> | |
| <span class="stat__number" data-result="239" data-value="23">0</span> | |
| </div> | |
| </div><!-- end col --> | |
| </div><!-- end row --> | |
| </div><!-- end container --> | |
| </div> | |
| <div class="container"> | |
| <h2 class="block-title block-title--top-larger">Available Services</h2> | |
| </div> | |
| <!-- Fading slider --> | |
| <div class="swiper-container fading-slider"> | |
| <div class="swiper-wrapper"> | |
| <!--Slide--> | |
| <div class="swiper-slide swiper-no-swiping"> | |
| <!-- Sevrice preview --> | |
| <div class="service"> | |
| <div class="icon icon--strips"> | |
| <i class="icon__item fa fa-credit-card"></i> | |
| </div> | |
| <a class="service__link" href="single-service.html"> | |
| <h3 class="service__heading">Reasonable Price</h3> | |
| </a> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.</p> | |
| </div> | |
| <!-- end sevrice preview --> | |
| </div> | |
| <!-- Slide--> | |
| <div class="swiper-slide swiper-no-swiping"> | |
| <!-- Sevrice preview --> | |
| <div class="service"> | |
| <div class="icon icon--strips"> | |
| <i class="icon__item fa fa-heart"></i> | |
| </div> | |
| <a class="service__link" href="single-service.html"> | |
| <h3 class="service__heading">Made with Love</h3> | |
| </a> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.</p> | |
| </div> | |
| <!-- end sevrice preview --> | |
| </div> | |
| <!--Slide--> | |
| <div class="swiper-slide swiper-no-swiping"> | |
| <!-- Sevrice preview --> | |
| <div class="service"> | |
| <div class="icon icon--strips"> | |
| <i class="icon__item fa fa-cogs"></i> | |
| </div> | |
| <a class="service__link" href="single-service.html"> | |
| <h3 class="service__heading">Fully Customizable</h3> | |
| </a> | |
| <p>Nullam lacinia nibh et nisi luctus rhoncus. Cras vitae purus volutpat, rhoncus mauris quis, elementum neque. In cursus magna eget consequat placerat. Nulla facilisi. </p> | |
| </div> | |
| <!-- end sevrice preview --> | |
| </div> | |
| <!-- Slide--> | |
| <div class="swiper-slide swiper-no-swiping"> | |
| <!-- Sevrice preview --> | |
| <div class="service"> | |
| <div class="icon icon--strips"> | |
| <i class="icon__item fa fa-phone"></i> | |
| </div> | |
| <a class="service__link" href="single-service.html"> | |
| <h3 class="service__heading">Premium-class Support</h3> | |
| </a> | |
| <p>Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.</p> | |
| </div> | |
| <!-- end sevrice preview --> | |
| </div> | |
| <!--Slide--> | |
| <div class="swiper-slide swiper-no-swiping"> | |
| <!-- Sevrice preview --> | |
| <div class="service"> | |
| <div class="icon icon--strips"> | |
| <i class="icon__item fa fa-dashboard"></i> | |
| </div> | |
| <a class="service__link" href="single-service.html"> | |
| <h3 class="service__heading">Efficient Workflow</h3> | |
| </a> | |
| <p>Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.</p> | |
| </div> | |
| <!-- end sevrice preview --> | |
| </div> | |
| <!--Slide--> | |
| <div class="swiper-slide swiper-no-swiping"> | |
| <!-- Sevrice preview --> | |
| <div class="service"> | |
| <div class="icon icon--strips"> | |
| <i class="icon__item fa fa-magic"></i> | |
| </div> | |
| <a class="service__link" href="single-service.html"> | |
| <h3 class="service__heading">Innovative Technologies</h3> | |
| </a> | |
| <p>Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.</p> | |
| </div> | |
| <!-- end sevrice preview --> | |
| </div> | |
| </div> | |
| <div class="fade-slider-control"> | |
| <a class="prev-arrow" href="#"><i class="fa fa-angle-left"></i></a> | |
| <a class="next-arrow" href="#"><i class="fa fa-angle-right"></i></a> | |
| </div><!-- end slider controls--> | |
| <div class="clearfix"></div> | |
| <div class="product-slider-pagination fade-pagination"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="devider-brand"></div> | |
| </div> | |
| <div class="container"> | |
| <h2 class="block-title block-title--simple block-title--bottom-s block-title--top-large">Check Allec in Action</h2> | |
| <div class="row animated-row"> | |
| <div class="col-sm-12 col-md-6 col-md-push-3"> | |
| <div class="image-container image-container--empty animated fadeInUpStart start-2"> | |
| <div class="video-container video-container--large"> | |
| </div> | |
| </div> | |
| </div><!-- end col --> | |
| <div class="col-sm-6 col-md-3 col-md-pull-6"> | |
| <ul class="list list--bordered list--top-line animated fadeInUpStart start-1"> | |
| <li>Etiam augue sem, pellentesque </li> | |
| <li>Duis nec neque posuere, gravida</li> | |
| <li>Cras felis nunc, tempus ut</li> | |
| <li>Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla </li> | |
| <li>Donec imperdiet posuere dolor, at fringilla augue</li> | |
| </ul> | |
| </div><!-- end col --> | |
| <div class="col-sm-6 col-md-3"> | |
| <ul class="list list--bordered list--top-line animated fadeInUpStart start-3"> | |
| <li>Etiam augue sem, pellentesque </li> | |
| <li>Duis nec neque posuere, gravida</li> | |
| <li>Cras felis nunc, tempus ut</li> | |
| <li>Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla </li> | |
| <li>Donec imperdiet posuere dolor, at fringilla augue</li> | |
| </ul> | |
| </div><!-- end col --> | |
| </div><!-- end row --> | |
| <div class="devider-brand"></div> | |
| <div class="col-sm-10 col-sm-offset-1"> | |
| <div class="short-text short-text--uni animated fadeInStart"> | |
| <h4>Nullam lacinia nibh et nisi luctus rhoncus. Cras vitae purus volutpat, rhoncus mauris quis, elementum neque. </h4> | |
| <p>In cursus magna eget consequat placerat. Nulla facilisi. Ut pretium quis lacus quis mollis. Aenean justo mi, adipiscing a ligula id, lobortis porttitor arcu. Cras tincidunt tempus est a scelerisque. Maecenas adipiscing nulla sapien, non laoreet orci accumsan tempus. Vestibulum cursus nisi ut purus lobortis, non aliquet mauris pulvinar. </p> | |
| <a class="link link--top" href="about.html">Learn more</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Colored devider --> | |
| <div class="devider-color bottom-space--m"></div> | |
| <!-- Footer section --> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <!-- Twitter carousel --> | |
| <div class="swiper-container"> | |
| <div class="swiper-wrapper" id="twitter-feed"></div> | |
| <!-- Slider pagination --> | |
| <div class="swiper-pagination"></div> | |
| </div> | |
| <div class="row"> | |
| <!-- Latest post --> | |
| <div class="col-sm-4"> | |
| <h3 class="heading-info">Latest from blog:</h3> | |
| <div class="row"> | |
| <div class="col-xs-6 col-sm-12 one-column"> | |
| <article class="post post--latest"> | |
| <h3 class="not-visible">Latest post</h3> | |
| <a class="post__images" href="single-post.html"> | |
| <img src="http://placehold.it/160x160" alt=""> | |
| </a> | |
| <a class="post__text" href="single-post.html">Mauris orci purus, ultrices dapibus justo non, eleifend consequat lorem. </a> | |
| <time datetime="2014-07-17" class="post__date">July 17, 2014</time> | |
| </article> | |
| </div> | |
| <div class="col-xs-6 col-sm-12 one-column"> | |
| <article class="post post--latest"> | |
| <h3 class="not-visible">Latest post</h3> | |
| <a class="post__images" href="single-post.html"> | |
| <img src="http://placehold.it/160x160" alt=""> | |
| </a> | |
| <a class="post__text" href="single-post.html">Pellentesque et magna malesuada, scelerisque elit ac, convallis lacus. </a> | |
| <time datetime="2014-07-16" class="post__date">July 16, 2014</time> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end latest post --> | |
| <!-- Contact info about company --> | |
| <div class="col-sm-4"> | |
| <h3 class="heading-info heading-info--mobile">Contact info:</h3> | |
| <!-- Contact information about company --> | |
| <address class="contact-info contact-info--list"> | |
| <div class="row"> | |
| <div class="col-xs-6 col-sm-12 one-column"> | |
| <span class="contact-info__item"> | |
| <i class="fa fa-location-arrow"></i> | |
| 101 West Street, New York, NY 12345 | |
| </span> | |
| <span class="contact-info__item"> | |
| <i class="fa fa-mobile"></i> | |
| 1-888-555-5555 / 1-888-123-3535 | |
| </span> | |
| </div> | |
| <div class="col-xs-6 col-sm-12 one-column"> | |
| <span class="contact-info__item"> | |
| <i class="fa fa-envelope"></i> | |
| info@allec.com / sales@allec.com | |
| </span> | |
| <span class="contact-info__item"> | |
| <i class="fa fa-skype"></i> | |
| allec-support | |
| </span> | |
| </div> | |
| </div> | |
| </address> | |
| <!-- end contact information --> | |
| </div> | |
| <!-- end contact info --> | |
| <!-- Social links --> | |
| <div class="col-sm-4"> | |
| <h3 class="heading-info heading-info--mobile">We’re social:</h3> | |
| <div class="social social--default"> | |
| <!-- List with social icons --> | |
| <ul> | |
| <li class="social__item"><a class="social__link" href="https://twitter.com/OliaGozha" target="_blank"><i class="social__icon fa fa-twitter"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="https://www.facebook.com/olia.gozha" target="_blank"><i class="social__icon fa fa-facebook"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="https://plus.google.com/u/0/ OliaGozha/posts" target="_blank"><i class="social__icon fa fa-google-plus"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-pinterest"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-tumblr"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="http://www.linkedin.com/pub/olia-gozha/49/b91/268" target="_blank"><i class="social__icon fa fa-linkedin"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-youtube"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-github-alt"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-flickr"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-vimeo-square"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="http://dribbble.com/OliaGozha" target="_blank"><i class="social__icon fa fa-dribbble"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-stumbleupon"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="http://instagram.com/olechka_dumka#" target="_blank"><i class="social__icon fa fa-instagram"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-soundcloud"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="http://www.behance.net/olia_gozha" target="_blank"><i class="social__icon fa fa-behance"></i></a></li> | |
| <li class="social__item"><a class="social__link" href="#" target="_blank"><i class="social__icon fa fa-vine"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- end social links --> | |
| </div><!-- end row --> | |
| <div class="copy"> | |
| © Allec, 2014. All rights reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> | |
| </div> | |
| </div><!-- end container --> | |
| </footer> | |
| <!-- end footer section --> | |
| <div class="top-scroll"><i class="fa fa-angle-up"></i></div> | |
| </div> | |
| <div class="animationload"> | |
| <div class="preloader"></div> | |
| </div> | |
| <!-- JavaScript--> | |
| <!-- External--> | |
| <!-- jQuery 1.10.1--> | |
| <script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="external/jquery/jquery-1.10.1.min.js"><\/script>')</script> | |
| <!-- Bootstrap 3--> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <!-- Mobile menu --> | |
| <script src="external/z-nav/jquery.mobile.menu.js"></script> | |
| <!-- Touch slider - Swiper --> | |
| <script src="external/swiper/idangerous.swiper.js"></script> | |
| <!-- Twitter feed --> | |
| <script src="external/twitterfeed/twitterfeed.js"></script> | |
| <!-- Scroll to piugin --> | |
| <script src="external/scrollto/jquery.scrollTo.min.js"></script> | |
| <!-- Livicons --> | |
| <script src="external/livicons/livicons-1.3.min.js"></script> | |
| <script src="external/livicons/raphael-min.js"></script> | |
| <!-- Waypoints --> | |
| <script src="external/waypoint/waypoints.min.js"></script> | |
| <!-- Event that will trigger when the element is scrolled in to the viewport.--> | |
| <script src="external/inview/jquery.inview.js"></script> | |
| <!-- Custom --> | |
| <script src="js/custom.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| featureSlider(); | |
| fadingSlider(); | |
| numberStart(); | |
| preloader(); | |
| videoLoop('video-header'); | |
| $('.feature .feature__heading').one('inview', function (event, visible) { | |
| if (visible == true) { | |
| $('.feature__image.start-1').addClass('fadeInUp'); | |
| $('.feature__image.start-2').addClass('fadeInUp stage2'); | |
| $('.feature__image.start-3').addClass('fadeInUp stage3'); | |
| } | |
| }); | |
| $('.animated-row').one('inview', function (event, visible) { | |
| if (visible == true) { | |
| $('.list.start-1').addClass('fadeInUp'); | |
| $('.image-container.start-2').addClass('fadeInUp stage2'); | |
| $('.list.start-3').addClass('fadeInUp stage3'); | |
| } | |
| }); | |
| $('.short-text').one('inview', function (event, visible) { | |
| if (visible == true) { | |
| $(this).addClass('fadeIn slow'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
标签： 网页
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论