<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Martian Pizza Site</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="topbar">
<ul>
<a href="#"><li>Our Mission</li></a>
<a href="#"><li>Our Ingredients</li></a>
<a href="#"><li>The Head Chef</li></a>
<a href="#"><li>Satisfied Customers!</li></a>
</ul>
</nav>
<div class="rest_page">
<div class="picture_panel">
<h1>We get things done. The right way.</h1>
<div class="home_icons">
<div class="icon_column">
<img src="http://imgur.com/F6CmD.jpg" width="140" height="120" alt=""/>
<div class="headlines">
<h3>We have Pizza!<br>☆</h3>
<p>Interstellar scallions, or transgalactic anchovies, we have what you need.</p>
<a href="#" class="learn_more">Learn More</a>
</div><!-- END headlines 1 -->
</div><!-- END icon_column 1 -->
<div class="icon_column">
<img src="http://imgur.com/z2fdY.jpg" width="140" height="120" alt=""/>
<div class="headlines center-column">
<h3>We make olive oil too!</h3>
<p>Ever wanted delicious olive oil? We do that, too!</p>
<a href="#" class="learn_more">Learn More</a>
</div><!-- END headlines 2 -->
</div><!-- END icon_column 2 -->
<div class="icon_column">
<img src="http://imgur.com/etYJs.jpg" width="140" height="120" alt=""/>
<div class="headlines">
<h3>Pasta, anyone?<br>☆</h3>
<p>We make things delicious with pasta.<br>☆</p>
<a href="#" class="learn_more">Learn More</a>
</div><!-- END headlines 3 -->
</div><!-- END icon_column 3 -->
</div><!-- END home_icons -->
</div><!-- END picture_panel -->
<aside class="left-panel-float">
<h2>Find Us on the Web</h2>
<ul>
<li><a href="#" >We're on Twitter</a></li>
<li><a href="#">We're on Facebook</a></li>
<li><a href="#">Check out our Blog!</a></li>
</ul>
</aside>
<section class="right-panel-content">
<h1>Some lorem ipsum for your pleasure...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet augue sed nisl consectetur posuere. Praesent interdum quam id lectus consectetur vel aliquam odio dictum. Nunc quis molestie nunc. Curabitur vel justo vitae tortor sodales vestibulum. Fusce eu sapien mauris, eget lacinia nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
<p>Cras aliquam blandit diam, in facilisis sapien commodo nec. Integer non felis non sem dapibus congue a nec enim. Mauris risus purus, sagittis vel imperdiet posuere, egestas quis massa. Nulla nec neque nisi, sit amet eleifend enim. Nam nec rhoncus metus. Phasellus convallis augue in mauris eleifend non volutpat felis feugiat. Morbi a tellus sed metus tincidunt adipiscing et ut nisi. Suspendisse sollicitudin orci a velit ornare sed interdum ante laoreet. Vestibulum tincidunt, tellus suscipit tincidunt consequat, mi lectus placerat tortor, et suscipit sapien elit malesuada purus. Vestibulum convallis scelerisque neque, non vehicula lorem interdum vel. Curabitur a purus vel est tincidunt dictum a cursus lectus. Suspendisse potenti. Quisque porta molestie convallis. Aenean a eros in odio pulvinar pellentesque.</p>
<p>Cras aliquam blandit diam, in facilisis sapien commodo nec. Integer non felis non sem dapibus congue a nec enim. Mauris risus purus, sagittis vel imperdiet posuere, egestas quis massa. Nulla nec neque nisi, sit amet eleifend enim. Nam nec rhoncus metus. Phasellus convallis augue in mauris eleifend non volutpat felis feugiat. Morbi a tellus sed metus tincidunt adipiscing et ut nisi. Suspendisse sollicitudin orci a velit ornare sed interdum ante laoreet. Vestibulum tincidunt, tellus suscipit tincidunt consequat, mi lectus placerat tortor, et suscipit sapien elit malesuada purus. Vestibulum convallis scelerisque neque, non vehicula lorem interdum vel. Curabitur a purus vel est tincidunt dictum a cursus lectus. Suspendisse potenti. Quisque porta molestie convallis. Aenean a eros in odio pulvinar pellentesque.</p>
<p>Pizzum pizzum pizzum pizzum.</p>
</section>
</div><!-- END rest_of_page -->
<footer>
<nav>
<ul>
<a href="#"><li>Company</li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li>Careers</li></a>
<a href="#"><li>Contact Us</li></a>
</ul>
</nav>
</footer>
</body>
</html>
body{
font-family: Georgia, Helvetica, san-serif;
width: 100%;
margin:0;
padding:0;
}
.topbar {
position:fixed;
top:-15px;
width:100%;
height:40px;
z-index:999;
clear:both;
}
.topbar ul {
background: #999;
padding:0;
font-size:15px;
color:#3366cc;
list-style-type: none;
overflow:hidden;
}
nav a:link {
text-decoration:none;
}
nav ul li {
text-align: center;
width: 24.8%;
float:left;
padding:7px 0;
border-top:solid 2px #bad3ea;
border-left:solid 1px #bad3ea;
}
nav ul li:active{
border-top: solid 3px #1a54e1;
color:#363636;
font-weight:bold;
}
nav ul li:hover {
background:#e4ebf8;
cursor:pointer;
}
a {
color:#003;
}
.rest_page{
position:absolute;
top:29px;
width:100%;
padding:0 10px 50px 10px;
/*for non-CSS3 browsers*/
background: #EECBAD;
/*for webkit based browsers, e.g. Chrome, Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#FFEC8B), to(#EECBAD));
/*for Firefox*/
background: -moz-linear-gradient(top, #FFEC8B, #EECBAD);
/*For Internet Explorer*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEC8B', endColorstr='#EECBAD)');
}
footer {
position:fixed;
bottom: 0;
width:100%;
height:40px;
clear:both;
background:#d3d3d3;
}
footer nav {
margin-top:-15px;
margin-left:-40px;
}
footer ul{
list-style-type: none;
}
.picture_panel {
text-align:center;
}
.picture_panel h2{
font-size:2em;
}
.icon_column{
width:30%;
float:left;
text-align:center;
margin: 0 5px;
}
.headlines{
text-align:center;
}
.center-column {
border-left: solid 2px #bad3ea;
border-right: solid 2px #bad3ea;
padding: 0 5px;
}
.left-panel-float {
float: left;
clear:left;
width: 30%;
}
.right-panel-content {
padding: 0 20px 0 0;
float: right;
clear:right;
width: 65%;
}
_____________________________________________________________________________________
HTML+CSS+JAVASCRIPT
Дата добавления: 2015-08-17; просмотров: 53 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| First-of-type | | | Яваскрипт ХТМЛ |