10185101162
/
style-transform-master
3
4
Fork 2
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

修改index页面，完善介绍

master
刘冬煜 3 vuotta sitten
vanhempi
f027a6b940
commit
2473d5b58e
1 muutettua tiedostoa jossa 457 lisäystä ja 459 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +457
    -459
      style-transform-master/style-transform-master/html/index.html

+ 457
- 459
style-transform-master/style-transform-master/html/index.html Näytä tiedosto

@ -1,460 +1,458 @@
<!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/tether.min.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>
<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="#contact">START HERE</a>
</li>
<li>
<a href="#menuCard">WAITING</a>
</li>
<li>
<a href="#portfolio">RESULT</a>
</li>
<li>
<a href="#team">MEMBERS</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">Style Transfer</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">
风格迁移大师
</p>
</div>
</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">不同的美术风格拥有不同的艺术特点，用于表现同一张图片时，情感也有所不同。
随着计算机视觉中特征可视化和生成模型的发展，将一张图片以不同风格呈现成为可能。
风格迁移模型正是将这一可能变成了现实。</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>VGG19</strong>
<p>预训练的卷积神经网络模型，用于实现图片特征提取并衡量损失。</p>
</div>
</div>
<div class="row">
<div class="col-md-11">
<strong>Loss</strong>
<p>采用 Content Loss + Style Loss 双误差方法，在风格迁移变换的同时减少对原图的损失。</p>
</div>
</div>
<div class="row">
<div class="col-md-11">
<strong>HTML5/CSS3/NodeJS</strong>
<p>前端、层叠样式表、后端的实现。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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">START HERE</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
请选择内容图片、风格图片、训练轮数（不超过2000的正整数）。
</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" action="\generate" enctype='multipart/form-data'>
<div class="col-md-6">
<h4>请选择内容图片：</h4>
<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="content_image" name="content_image"
accept="image/gif,image/jpeg, image/png, image/jpg" />
<p class="help-block"></p>
</div>
<div class="col-md-6">
<h4>请选择风格图片：</h4>
<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="style_image" name="style_image"
accept="image/gif,image/jpeg, image/png, image/jpg" />
</div>
<div class="col-md-12">
<textarea class="form-control" placeholder="请输入训练轮数" id="max_epoch" name="max_epoch"></textarea>
</div>
<div class="col-md-8 col-md-offset-2">
<br>
<div id="success"> </div><button type="submit" class="btn btn-primary">开始！</button>
</div>
</form>
<script>
function ProcessFile1(e) {
var src_img = document.getElementById('content_image').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
};
}
reader.readAsDataURL(src_img);
}
function ProcessFile2(e) {
var tar_img = document.getElementById('style_image').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
};
}
reader.readAsDataURL(tar_img);
}
function contentLoaded0() {
document.getElementById('content_image').addEventListener('change',
ProcessFile1, false);
}
function contentLoaded1() {
document.getElementById('style_image').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>
</div>
</section>
<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">内容图片</a>
<a href="#" data-filter=".seo">风格图片</a>
<a href="#" data-filter=".works">结果图片</a>
<!-- <a href="#" data-filter=".brands">EUROPEN</a> -->
</li>
</ul>
</div>
<!-- Filter Button End -->
<div class="portfolio-items">
<!-- Portfolio Items -->
<div class="item portfolio-item web">
<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/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 End -->
</div>
</div>
<!-- Works End -->
</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>刘冬煜</p>
<p>学号：10185101162</p>
<p>邮箱：1124171308@qq.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/team3.jpg" alt="">
<p>章可儿</p>
<p>学号：10182100208</p>
<p>邮箱：19966422680@163.com</p>
</div>
<!-- Slides End -->
</div>
</div>
</div>
</div>
</section>
<!--
<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">
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">联系我们</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>
</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>风格迁移大师——智能的算法绘画专家</p>
</div>
<div class="col-md-4">
<h4>最新公告</h4>
<p>风格迁移大师上线啦！快来上传图片，完成绘画吧！</p>
</div>
<div class="col-md-4 contac-us">
<h4>联系我们</h4>
<ul>
<li><i class="fa fa-home"></i>上海市普陀区中山北路3663号华东师范大学</li>
<!--- <li><i class="fa fa-phone"></i>001 123 12345 99</li> --->
<li><i class="fa fa-envelope-o"></i>http://dase.ecnu.edu.cn/</li>
</ul>
</div>
</div>
</div>
</section>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/tether.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="js/custom.js"></script>
</body>
<!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/tether.min.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>
<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="#contact">START HERE</a>
</li>
<li>
<a href="#menuCard">WAITING</a>
</li>
<li>
<a href="#portfolio">RESULT</a>
</li>
<li>
<a href="#team">MEMBERS</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">Style Transfer</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">
风格迁移大师
</p>
</div>
</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">不同的美术风格拥有不同的艺术特点，用于表现同一张图片时，情感也有所不同。
随着计算机视觉中特征可视化和生成模型的发展，将一张图片以不同风格呈现成为可能。
风格迁移模型正是将这一可能变成了现实。</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>VGG19</strong>
<p>预训练的卷积神经网络模型，用于实现图片特征提取并衡量损失。</p>
</div>
</div>
<div class="row">
<div class="col-md-11">
<strong>Loss</strong>
<p>采用 Content Loss + Style Loss 双误差方法，在风格迁移变换的同时减少对原图的损失。</p>
</div>
</div>
<div class="row">
<div class="col-md-11">
<strong>HTML5/CSS3/NodeJS</strong>
<p>前端、层叠样式表、后端的实现。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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">START HERE</span></h2>
<p class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1">
请选择内容图片、风格图片、训练轮数（不超过2000的正整数）。
</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" action="\generate" enctype='multipart/form-data'>
<div class="col-md-6">
<h4>请选择内容图片：</h4>
<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="content_image" name="content_image"
accept="image/gif,image/jpeg, image/png, image/jpg" />
<p class="help-block"></p>
</div>
<div class="col-md-6">
<h4>请选择风格图片：</h4>
<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="style_image" name="style_image"
accept="image/gif,image/jpeg, image/png, image/jpg" />
</div>
<div class="col-md-12">
<textarea class="form-control" placeholder="请输入训练轮数" id="max_epoch" name="max_epoch"></textarea>
</div>
<div class="col-md-8 col-md-offset-2">
<br>
<div id="success"> </div><button type="submit" class="btn btn-primary">开始！</button>
</div>
</form>
<script>
function ProcessFile1(e) {
var src_img = document.getElementById('content_image').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
};
}
reader.readAsDataURL(src_img);
}
function ProcessFile2(e) {
var tar_img = document.getElementById('style_image').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
};
}
reader.readAsDataURL(tar_img);
}
function contentLoaded0() {
document.getElementById('content_image').addEventListener('change',
ProcessFile1, false);
}
function contentLoaded1() {
document.getElementById('style_image').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>
</div>
</section>
<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">内容图片</a>
<a href="#" data-filter=".seo">风格图片</a>
<a href="#" data-filter=".works">结果图片</a>
<!-- <a href="#" data-filter=".brands">EUROPEN</a> -->
</li>
</ul>
</div>
<!-- Filter Button End -->
<div class="portfolio-items">
<!-- Portfolio Items -->
<div class="item portfolio-item web">
<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/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 End -->
</div>
</div>
<!-- Works End -->
</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">前端、测试：何雨菁、章可儿<br/>后端：刘冬煜</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>刘冬煜</p>
<p>学号：10185101162</p>
<p>邮箱：1124171308@qq.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/team3.jpg" alt="">
<p>章可儿</p>
<p>学号：10182100208</p>
<p>邮箱：19966422680@163.com</p>
</div>
<!-- Slides End -->
</div>
</div>
</div>
</div>
</section>
<!--
<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">
<div class="col-md-12 col-sm-12 col-xs-12 section-header wow fadeInDown">
<h2><span class="highlight-text">联系我们</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>
</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>风格迁移大师——智能的算法绘画专家</p>
</div>
<div class="col-md-4">
<h4>最新公告</h4>
<p>风格迁移大师上线啦！快来上传图片，完成绘画吧！</p>
</div>
<div class="col-md-4 contac-us">
<h4>联系我们</h4>
<ul>
<li><i class="fa fa-home"></i>上海市普陀区中山北路3663号华东师范大学</li>
<!--- <li><i class="fa fa-phone"></i>001 123 12345 99</li> --->
<li><i class="fa fa-envelope-o"></i>http://dase.ecnu.edu.cn/</li>
</ul>
</div>
</div>
</div>
</section>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/tether.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="js/custom.js"></script>
</body>
</html>

Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna