10182100208
/
style-transform-master
複製自 10185101162/style-transform-master
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

添加前端代码 

添加前端代码
master
何雨菁 3 年之前
committed by Gitea
父節點
d1c93ce2a2
當前提交
349186470e
共有 1 個檔案被更改，包括 965 行新增 和 0 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +965
    -0
      style-transform-master/style-transform-master/html/index.html

+ 965
- 0
style-transform-master/style-transform-master/html/index.html 查看文件

@ -0,0 +1,965 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Businnes, Portfolio, Corporate">
<meta name="Author" content="WebThemez">
<title>Home</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="elegant_font/style.css" />
<!--[if lte IE 7]><script src="elegant_font/lte-ie7.js"></script><![endif]-->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/slider-pro.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/owl.transitions.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="elegant_font/style.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div class="preloader">
<div class="status"></div>
</div>
<!-- Header End -->
<header>
<!-- Navigation Menu start-->
<nav id="topNav" class="navbar navbar-default main-menu">
<div class="container">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse"
data-target="#collapsingNavbar">
☰
</button>
<a class="navbar-brand page-scroll" href="#slider"><img class="logo" id="logo" src="images/logo.png"
alt="logo"></a>
<div class="collapse navbar-toggleable-sm" id="collapsingNavbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#slider">HOME</a>
</li>
<li>
<a href="#about">ABOUT</a>
</li>
<li>
<a href="#services">SERVICES</a>
</li>
<li>
<a href="#menuCard">MENU</a>
</li>
<li>
<a href="#portfolio">RESULT</a>
</li>
<li>
<a href="#team">MEMBERS</a>
</li>
<li>
<a href="#clients">FEEDBACK</a>
</li>
<li>
<a href="#contact">CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Header End -->
<section class="slider-pro slider" id="slider">
<div class="sp-slides">
<!-- Slides -->
<div class="sp-slide main-slides">
<div class="img-overlay"></div>
<img class="sp-image" src="images/slider/slider-img-1.jpg" alt="Slider 1" />
<h1 class="sp-layer slider-text-big" data-position="left" data-show-transition="left"
data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
<span class="highlight-texts">Healthy Food</span>
</h1>
<p class="sp-layer" data-position="left" data-vertical="15%" data-show-delay="2000"
data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
Lorem ipsum dolor sit amectetur adipici
</p>
</div>
<!-- Slides End -->
<!-- Slides -->
<!-- <div class="sp-slide main-slides">
<div class="img-overlay"></div>
<img class="sp-image" src="images/slider/slider-img-2.jpg" alt="Slider 2"/>
<h1 class="sp-layer slider-text-big"
data-position="left" data-show-transition="left" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
<span class="highlight-texts">Amazing Ambiance</span>
</h1>
<p class="sp-layer"
data-position="left" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
Lorem ipsum dolor sit ametectetur adipis
</p>
</div> -->
<!-- Slides End -->
<!-- Slides -->
<!-- <div class="sp-slide main-slides">
<div class="img-overlay"></div>
<img class="sp-image" src="images/slider/slider-img-3.jpg" alt="Slider 3"/>
<h1 class="sp-layer slider-text-big"
data-position="left" data-show-transition="left" data-hide-transition="right" data-show-delay="1500" data-hide-delay="200">
<span class="highlight-texts">Best Sea Food</span>
</h1>
<p class="sp-layer"
data-position="left" data-vertical="15%" data-show-delay="2000" data-hide-delay="200" data-show-transition="left" data-hide-transition="right">
Lorem ipsum dolor sit ansectetur adipis
</p>
</div> -->
<!-- Slides End -->
</div>
</section>
<!-- Main Slider End -->
<section id="about" class="about-sec section-wrapper description">
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">About</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod, nam corporis quas, saepe minima error aperiam dolorum
aliquam, quis deserunt eos eius quisquam odio itaque.</p>
</div>
<!-- Section Header End -->
<div class="col-md-6 col-sm-6 col-xs-12 custom-sec-img wow fadeInDown">
<img src="images/features.jpg" alt="Custom Image">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 customized-text wow fadeInDown black-ed">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa sit, numquam amet voluptatibus
obcaecati ea maiores totam nostrum, ad iure rerum quas harum ipsum. lobcaecati ea maiores totam
nostrum, ad iure rerum quas harum ipsum. Rem ea ducimus quos quae quo.</p>
<div class="row">
<div class="col-md-11">
<strong>Bootstrap</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto, natus est
ducimus saepe laborum</p>
</div>
</div>
<div class="row">
<div class="col-md-11">
<strong>Responisve Theme</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto, natus est
ducimus saepe laborum Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row">
<div class="col-md-11">
<strong>HTML5/CSS3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto, natus est
ducimus saepe laborum Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="services" class="section-wrapper">
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">Services</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod, nam corporis quas, saepe minima error aperiam dolorum
aliquam, quis deserunt eos eius quisquam odio itaque.</p>
</div>
<!-- Section Header End -->
<div class="our-services">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 text-xs-center wow fadeInDown" data-wow-delay=".2s">
<div class="service-box">
<div class="icon">
<h3>Breakfast</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam
nulla.</p>
<img src="images/breakfast.jpg" alt="Custom Image">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 text-xs-center wow fadeInDown" data-wow-delay=".2s">
<div class="service-box">
<div class="icon">
<h3>Lunch </h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam
nulla.</p>
<img src="images/lunch.jpg" alt="Custom Image">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 text-xs-center wow fadeInDown" data-wow-delay=".2s">
<div class="service-box">
<div class="icon">
<h3>Dinner</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam
nulla.</p>
<img src="images/dinner.jpg" alt="Custom Image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 text-xs-center wow fadeInDown" data-wow-delay=".1s">
<div class="service-box">
<div class="icon">
<i class="icon_star-half_alt"></i>
<h3>Buffeat</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam
nulla.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 text-xs-center wow fadeInDown" data-wow-delay=".1s">
<div class="service-box">
<div class="icon">
<i class="icon_music"></i>
<h3>Parties</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam
nulla.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 text-xs-center wow fadeInDown" data-wow-delay=".1s">
<div class="service-box">
<div class="icon">
<i class="icon_cog"></i>
<h3>Rooms</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero praesentium quam
nulla.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="menus style3" id="menuCard">
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">Menu Card</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod, nam corporis quas, saepe minima error aperiam dolorum
aliquam, quis deserunt eos eius quisquam odio itaque.</p>
</div>
<!-- Section Header End -->
<div class="menus-container">
<!-- menu -->
<div class="menu row">
<div class="col-md-6 wow fadeInRight animated"
style="visibility: visible; animation-name: fadeInRight;">
<div class="menu-column">
<div class="food">
<div class="food-desc">
<h6 class="food-name">Chicken Masala</h6>
<div class="dots"></div>
<div class="food-price">
<span>5.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with “butter”</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Mango Rice with Curd</h6>
<div class="dots"></div>
<div class="food-price">
<span>16.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with chat masala</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Mutton Fry Rice</h6>
<div class="dots"></div>
<div class="food-price">
<span>22.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with pure meat</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Eggs Mancuriya</h6>
<div class="dots"></div>
<div class="food-price">
<span>22.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with Vegies</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Chicken Currey </h6>
<div class="dots"></div>
<div class="food-price">
<span>15.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with curry leafs</span>
</div><!-- /food-details -->
</div><!-- /food -->
</div><!-- /menu-column -->
</div><!-- /col-md-6 -->
<div class="col-md-6 wow fadeInLeft animated"
style="visibility: visible; animation-name: fadeInLeft;">
<div class="menu-column">
<div class="food">
<div class="food-desc">
<h6 class="food-name">Pure Veg Salad</h6>
<div class="dots"></div>
<div class="food-price">
<span>5.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with all veg</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Veg Fry Rice</h6>
<div class="dots"></div>
<div class="food-price">
<span>16.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with best fry</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Chines Noodles</h6>
<div class="dots"></div>
<div class="food-price">
<span>22.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with all spices</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Chicken Manchuriah</h6>
<div class="dots"></div>
<div class="food-price">
<span>22.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with hot and wet</span>
</div><!-- /food-details -->
</div><!-- /food -->
<div class="food">
<div class="food-desc">
<h6 class="food-name">Veg Fry Rice </h6>
<div class="dots"></div>
<div class="food-price">
<span>15.00</span>
</div><!-- /food-price -->
</div><!-- /food-desc -->
<div class="food-details">
<span>with egg and chicken </span>
</div><!-- /food-details -->
</div><!-- /food -->
</div><!-- /menu-column -->
</div><!-- /col-md-6 -->
</div><!-- /row -->
</div><!-- /menu-carousel -->
</div><!-- /menus-container -->
</div><!-- /container -->
</section>
<div class="tlinks">Collect from <a href="http://www.baisheng999.com/">手机网站模板</a></div>
<section id="portfolio" class="bgSection portfolio-section">
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">RESULT</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod, nam corporis quas, saepe minima error aperiam dolorum
aliquam, quis deserunt eos eius quisquam odio itaque.</p>
</div>
<!-- Section Header End -->
</div>
</div>
<!-- Works -->
<div class="portfolio-works wow fadeIn" data-wow-duration="2s">
<!-- Filter Button Start -->
<div id="portfolio-filter" class="portfolio-filter-btn-group">
<ul>
<li>
<a href="#" class="selected" data-filter="*">ALL</a>
<a href="#" data-filter=".web">SOURCE</a>
<a href="#" data-filter=".seo">STYLE</a>
<a href="#" data-filter=".works">RESULT</a>
<!-- <a href="#" data-filter=".brands">EUROPEN</a> -->
</li>
</ul>
</div>
<!-- Filter Button End -->
<div class="portfolio-items">
<!-- <div> -->
<!-- Portfolio Items -->
<!-- <div class="item portfolio-item web seo works">
<img src="images/img-portfolio/portfolio1.jpg" alt="">
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio1.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div> -->
<!-- Portfolio Items End -->
<!-- Portfolio Items -->
<div class="item portfolio-item web">
<img src="images/img-portfolio/portfolio2.jpg" alt="" width="1000px">
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio2.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Portfolio Items End -->
<!-- Portfolio Items -->
<div class="item portfolio-item seo">
<img src="images/img-portfolio/portfolio3.jpg" alt="" >
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio3.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Portfolio Items End -->
<!-- Portfolio Items -->
<div class="item portfolio-item works">
<img src="images/img-portfolio/portfolio4.jpg" alt="" >
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio4.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Portfolio Items -->
<!-- Portfolio Items -->
<!-- <div class="item portfolio-item web brands">
<img src="images/img-portfolio/portfolio5.jpg" alt="">
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio5.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div> -->
<!-- Portfolio Items End -->
<!-- Portfolio Items -->
<!-- <div class="item portfolio-item works seo">
<img src="images/img-portfolio/portfolio6.jpg" alt="">
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio6.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div> -->
<!-- Portfolio Items End -->
<!-- <div class="item portfolio-item brands seo">
<img src="images/img-portfolio/portfolio1.jpg" alt="">
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio7.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div> -->
<!-- Portfolio Items End -->
<!-- Portfolio Items -->
<!-- <div class="item portfolio-item web seo works">
<img src="images/img-portfolio/portfolio2.jpg" alt="">
<div class="portfolio-details-wrapper">
<div class="portfolio-details">
<div class="portfolio-meta-btn">
<ul class="work-meta">
<li class="lighbox"><a href="images/img-portfolio/portfolio8.jpg"
class="featured-work-img"><i class="fa fa-search-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div> -->
<!-- Portfolio Items End -->
</div>
</div>
<!-- Works End -->
</section>
<!-- Portfolio Section End -->
<section id="info" class="info-section">
<div class="container text-xs-center">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">Stats</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod, nam corporis quas, saepe minima error aperiam dolorum aliquam,
quis deserunt eos eius quisquam odio itaque.</p>
</div>
<!-- Section Header End -->
<div class="row wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
<div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
<i class="icon_mic_alt wow pulse" style="visibility: visible; animation-name: pulse;"></i>
<h4>Margins</h4>
<h1 class="text-primary">100,000</h1>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
<i class="icon_gift_alt wow pulse" style="visibility: visible; animation-name: pulse;"></i>
<h4>Completed</h4>
<h1 class="text-primary">34201</h1>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
<i class="icon_mobile wow pulse" style="visibility: visible; animation-name: pulse;"></i>
<h4>Projects</h4>
<h1 class="text-primary">152</h1>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-xs-center">
<i class="icon_lightbulb_alt wow pulse" style="visibility: visible; animation-name: pulse;"></i>
<h4>Customers</h4>
<h1 class="text-primary">56500</h1>
</div>
</div>
</div>
</section>
<section id="team" class="bgSection teams-section">
<div class="parallax-overlay"></div>
<div class="teams-wrapper wow fadeInDown">
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text-inverted">MEMBERS</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quod, nam corporis quas, saepe minima error aperiam
dolorum aliquam, quis deserunt eos eius quisquam odio itaque.</p>
</div>
<!-- teams Slider -->
<div id="teams" class="owl-carousel teams">
<!-- Slides -->
<div class="teams-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
<img src="images/img-teams/team1.jpg" alt="">
<p>何雨菁</p>
<p>学号：10174102126</p>
<p>邮箱：heyujing0@163.com</p>
</div>
<!-- Slides End -->
<!-- Slides -->
<div class="teams-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
<img src="images/img-teams/team2.jpg" alt="">
<p class="client-info">Randy Dode</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisic</p>
</div>
<!-- Slides End -->
<!-- Slides -->
<div class="teams-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
<img src="images/img-teams/team3.jpg" alt="">
<p>章可儿</p>
<p>学号：10182100208</p>
<p>邮箱：19966422680@163.com</p>
</div>
<!-- Slides End -->
</div>
</div>
</div>
</div>
</section>
<!-- Clients Section -->
<section id="clients" class="clients-section">
<!-- Container Ends -->
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">Customer Feedback</span></h2>
</div>
<!-- Section Header End -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonials">
<div class="active item">
<blockquote>
<p>Denim you probably haven't heard of. Lorem ipsum dolor met consectetur
adipisicing sit amet, consectetur adipisicing elit, of them jean shorts sed
magna aliqua. Lorem ipsum dolor met.</p>
</blockquote>
<div class="carousel-info">
<img alt="" src="images/img1-small.jpg" class="pull-left">
<div class="pull-left">
<span class="testimonials-name">Lina Mars</span>
<span class="testimonials-post">Commercial Director</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Container Ends -->
</section>
<!-- Client Section End -->
<section id="contact" class="section-wrapper contact-section" data-stellar-background-ratio="0.5">
<div class="parallax-overlay"></div>
<div class="container">
<div class="row">
<!-- Section Header -->
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">Contact Us</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">We love feedback. Fill out
the form below and we'll get back to you as soon as possible. in minus distinctio dolores ipsam.
</p>
</div>
<!-- Section Header End -->
<div class="contact-details">
<!-- Contact Form -->
<div class="contact-form wow bounceInRight">
<!--NOTE: Update your email Id in "contact_me.php" file in order to receive emails from your contact form-->
<form name="sentMessage" id="contactForm" novalidate method="post">
<div class="col-md-6">
<img id="cropedBigImg0" src="" class="teams-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1"/>
<input type="file" id="chooseImage0"
accept="image/gif,image/jpeg, image/png, image/jpg" />
<p class="help-block"></p>
</div>
<div class="col-md-6">
<img id="cropedBigImg1" src="" class="teams-slides col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1"/>
<input type="file" id="chooseImage1"
accept="image/gif,image/jpeg, image/png, image/jpg" />
</div>
<div class="col-md-12">
<textarea class="form-control" placeholder="请输入训练轮数" id="message"></textarea>
</div>
<div class="col-md-8 col-md-offset-2"><br>
<div id="success"> </div><button type="submit" class="btn btn-primary" onclick="window.location.href = '#portfolio'">Submit
Message</button>
</div>
</form>
<!-- <div class="div_model">
<img id="cropedBigImg0" src="images/0.png" class="div_model_img"/>
<input type="file"class="file" accept="image/gif,image/jpeg, image/png, image/jpg"id="chooseImage0">
</div> -->
<script>
function ProcessFile1(e) {
var src_img = document.getElementById('chooseImage0').files[0];
console.log(src_img);
if (src_img) {
var reader = new FileReader();
reader.onload = function (event) {
var txt = event.target.result;
$("#cropedBigImg0").attr('src', txt);//将图片base64字符串赋值给img的src
//console.log(txt)//base64
};
}
reader.readAsDataURL(src_img);
}
function ProcessFile2(e) {
var tar_img = document.getElementById('chooseImage1').files[0];
console.log(tar_img);
if (tar_img) {
var reader = new FileReader();
reader.onload = function (event) {
var txt = event.target.result;
$("#cropedBigImg1").attr('src', txt);//将图片base64字符串赋值给img的src
//console.log(txt)//base64
};
}
reader.readAsDataURL(tar_img);
}
function contentLoaded0() {
document.getElementById('chooseImage0').addEventListener('change',
ProcessFile1, false);
}
function contentLoaded1() {
document.getElementById('chooseImage1').addEventListener('change',
ProcessFile2, false);
}
// var model=document.getElementById('model');
// var input=model.querySelectorAll('input');
window.addEventListener("DOMContentLoaded", contentLoaded0, false);
window.addEventListener("DOMContentLoaded", contentLoaded1, false);
</script>
</div>
</div>
</div>
</section>
<!-- Contact Section End -->
<section class="footer-container">
<div class="container">
<div class="row footer-containertent">
<div class="col-md-4">
<img src="images/logo.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro quos iste ratione doloribus
asperiores, error omnis delectus rerum sapiente. Et, aliquam modi beatae quae in perferendis ab
est fugiat!</p>
</div>
<div class="col-md-4">
<h4>News & Updates</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, nam corporis quas, saepe minima
error aperiam dolorum aliquam, quis deserunt eos eius quisquam odio itaque.</p>
</div>
<div class="col-md-4 contac-us">
<h4>Contact Us</h4>
<p>Lorem ipsum dolor sit amet adipisicing elit.</p>
<ul>
<li><i class="fa fa-home"></i>123 New Venu Street</li>
<li><i class="fa fa-phone"></i>001 123 12345 99</li>
<li><i class="fa fa-envelope-o"></i>support@website.com</li>
</ul>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="footer-containertent">
<ul class="footer-social-info">
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-pinterest"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus"></i></a>
</li>
</ul>
<br /><br />
<p>Copyright &copy; 2017.Company name All rights reserved.More Templates <a
href="http://www.baisheng999.com/" target="_blank" title="网站模板库">网站模板库</a> - Collect from <a
href="http://www.baisheng999.com/" title="网页模板" target="_blank">网页模板</a></p>
</div>
</div>
</div>
</footer>
<!-- Footer End -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/jquery.easypiechart.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sliderPro.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="contact/jqBootstrapValidation.js"></script>
<script src="contact/contact_me.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

Write Preview
Loading…
取消
儲存