<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
#navigation{
background-color: #3e6c4a;color: #ffffff;
}
#navigation nav li a{color: #ffffff;}
#navigation nav li a:hover{background-color: orange}
#navigation nav{margin: 10px 20px;}
#navigation h3{margin: 20px 20px}
#jum1{
background-image: url("img/top-bg.jpg");
background-attachment:fixed ;
background-size:100% 600px;
height: 500px;
text-align: center;
color: #ffffff;
}
#jum1 h1{margin: 60px 0px}
#jum2 h2{margin: 50px 0px}
#jum2{
background-image: url("img/yellow.png");
height: 406px;
color: #ffffff;
text-align: center;
}
.news div img{width: 100%;height: auto}
.news div a{color: orange}
.news h1{text-align: center;margin: 30px 0px}
.fom{
background-color: #502004;color:#ffffff;
text-align: center;
}
.fom h1{padding: 50px 0px}
.fom p{margin: 30px 0px;line-height: 25px}
.form div .btn{
background-color: orange;
}
.form{width: 80%;margin: 0px auto;text-align: center;}
.form div input{background-color: #efefef;margin: 10px 0px}
.form div input:nth-child(1){margin-right: 20px}
.form div textarea{height: 300px;background-color: #efefef;margin-left: 10px}
@media all and (max-width: 1200px){
}
@media all and (max-width: 992px){
#jum1{
background-size:1000px 600px;
}
}
@media all and (max-width: 768px){
.form div input:nth-child(1){margin-right: 0px}
.form div textarea{;margin-left: 0px}
}
</style>
</head>
<body>
<div id="navigation" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse"
data-target="#navbar-list" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3>Legend!</h3>
</div>
<nav class="collapse navbar-collapse pull-right" id="navbar-list">
<ul class="nav navbar-nav">
<li><a href="#">Portfolio</a></li>
<li><a href="#" >Services</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="jumbotron" id="jum1">
<h1>Legend! We make web a beautiful place.</h1>
<h3>Signup for our Newsletter to be updated</h3>
</div>
<div class="jumbotron" id="jum2">
<h2> We work to make web a beautiful place.</h2>
<h2> We craft beautiful designs and convert them into</h2>
<h2>fully functional and user-friendy web app.</h2>
</div>
<div class="row news">
<h1>Portfolio...</h1>
<div class="col-md-4 col-sm-6 col-xs-12">
<div><img src="img/portfolio-01.jpg"></div>
<div>
<h2>Ethan Marcotte Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#">VIEW PROJECT</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div><img src="img/portfolio-02.jpg"></div>
<div>
<h2>A Book Apart</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#">VIEW PROJECT</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div><img src="img/portfolio-03.jpg"></div>
<div>
<h2>Four Rules For Designers</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#">VIEW PROJECT</a>
</div>
</div>
</div>
<div class="row news">
<h1>Portfolio...</h1>
<div class="col-md-4 col-sm-6 col-xs-12">
<div><img src="img/portfolio-01.jpg"></div>
<div>
<h2>Ethan Marcotte Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#">VIEW PROJECT</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div><img src="img/portfolio-02.jpg"></div>
<div>
<h2>A Book Apart</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#">VIEW PROJECT</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div><img src="img/portfolio-03.jpg"></div>
<div>
<h2>Four Rules For Designers</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#">VIEW PROJECT</a>
</div>
</div>
</div>
<div class="fom">
<h1>Meet the team</h1>
<ul class="list-inline">
<li><img src="img/portrait-1.jpg" class="img-circle"></li>
<li><img src="img/portrait-2.jpg" class="img-circle"></li>
<li><img src="img/portrait-3.jpg" class="img-circle"></li>
<li><img src="img/portrait-4.jpg" class="img-circle"></li>
</ul>
<p>Want to know more? | a little about us</p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
<p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
<p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
<form class="form">
<h1>Contact us now!</h1>
<div class="row">
<input type="text" class="input-lg col-xs-12 col-sm-5" placeholder="your name">
<input type="text" class="input-lg col-xs-12 col-sm-5" placeholder="your email">
</div>
<div class="row">
<input type="text" class="input-lg col-xs-12 col-sm-5" placeholder="your name">
<input type="text" class="input-lg col-xs-12 col-sm-5" placeholder="your email">
</div>
<div class="row">
<textarea class="input-lg col-xs-12 col-sm-10"></textarea>
</div>
<div class="row">
<button class="btn btn-lg">Send message</button>
</div>
</form>
</div>
</body>
</html>
效果截图所示：
7057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
