Biomod/2013/UT-Austin: Difference between revisions
No edit summary |
No edit summary |
||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
font-size: 14px; | |||
color: #666666; | |||
} | |||
a{ | |||
color: #f58220; | |||
text-decoration: none; | |||
} | } | ||
a:hover, a:focus{ | |||
color: #d7721c; | |||
text-decoration: underline; | |||
} | } | ||
#main-wrapper{ | |||
width: 960px; | |||
margin: 0 auto; | |||
} | } | ||
header{ | |||
background: #333333; | |||
padding: 30px 0 0 0; | |||
# | |||
} | } | ||
.logo a{ | |||
display: block; | |||
width: 133px; | |||
height: 46px; | |||
background: url(images/logo.png); | |||
background-repeat: no-repeat; | |||
text-indent: -9999px; | |||
margin: 0 0 25px 20px; | |||
} | } | ||
.primary ul{ | |||
background: #666666; | |||
} | } | ||
.primary ul li{ | |||
float: left; | |||
border-right: 1px solid #333333; | |||
} | } | ||
. | .primary ul li a{ | ||
display: block; | |||
padding: 15px 20px; | |||
color: #fff; | |||
text-decoration: none; | |||
} | |||
.primary ul li a:hover{ | |||
background: #777777; | |||
} | } | ||
.content-wrap{ | |||
background: #e5e5e5; | |||
. | } | ||
. | |||
#main-content{ | |||
. | background: #ffffff; | ||
float: left; | |||
width: 660px; | |||
padding: 40px 20px; | |||
} | |||
.thumbnail{ | |||
float: left; | |||
margin-right: 20px; | |||
} | |||
.posts{ | |||
clear: both; | |||
padding-bottom: 40px; | |||
margin-bottom: 40px; | |||
border-bottom: 1px solid #bbbbbb; | |||
} | |||
.posts div{ | |||
overflow: hidden; | |||
} | |||
.posts h1 a{ | |||
font-size: 24px; | |||
color: #333333; | |||
font-weight: bold; | |||
text-decoration: none; | |||
} | |||
.posts h1 a:hover{ | |||
color: #f58220; | |||
} | |||
.posts p{ | |||
padding: 10px 0 20px 0; | |||
} | |||
.posts .more{ | |||
text-decoration: none; | |||
font-weight: bold; | |||
} | |||
aside{ | |||
width: 300px; | |||
background: #e5e5e5; | |||
float: right; | |||
padding: 40px 20px; | |||
} | |||
.side-box{ | |||
margin-bottom: 40px; | |||
} | |||
.side-box ul{ | |||
margin-left: 10px; | |||
} | |||
.side-box ul li{ | |||
margin-bottom: 10px; | |||
} | |||
.sidebar-heading{ | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #333333; | |||
padding-bottom: 20px; | |||
margin-bottom: 20px; | |||
border-bottom: 1px solid #bbbbbb; | |||
} | |||
footer{ | |||
clear: both; | |||
background: #333333; | |||
padding: 20px 0; | |||
text-align: center; | |||
} | |||
footer small{ | |||
color: #cccccc; | |||
font-size: 12px; | |||
} | |||
</style> | </style> | ||
<title>HTML5</title> | <title>HTML5</title> |
Revision as of 13:40, 26 October 2013
<html> <head> <style type="text/css"> font-size: 14px; color: #666666; }
a{ color: #f58220; text-decoration: none; } a:hover, a:focus{ color: #d7721c; text-decoration: underline; }
- main-wrapper{
width: 960px; margin: 0 auto; } header{ background: #333333; padding: 30px 0 0 0; }
.logo a{ display: block; width: 133px; height: 46px; background: url(images/logo.png); background-repeat: no-repeat; text-indent: -9999px; margin: 0 0 25px 20px; } .primary ul{ background: #666666; } .primary ul li{ float: left; border-right: 1px solid #333333; }
.primary ul li a{ display: block; padding: 15px 20px; color: #fff; text-decoration: none; } .primary ul li a:hover{ background: #777777; }
.content-wrap{ background: #e5e5e5; }
- main-content{
background: #ffffff; float: left; width: 660px; padding: 40px 20px; } .thumbnail{ float: left; margin-right: 20px; }
.posts{ clear: both; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #bbbbbb; }
.posts div{ overflow: hidden; }
.posts h1 a{ font-size: 24px; color: #333333; font-weight: bold; text-decoration: none; } .posts h1 a:hover{ color: #f58220; } .posts p{ padding: 10px 0 20px 0; } .posts .more{ text-decoration: none; font-weight: bold; } aside{ width: 300px; background: #e5e5e5; float: right; padding: 40px 20px; }
.side-box{ margin-bottom: 40px; } .side-box ul{ margin-left: 10px; } .side-box ul li{ margin-bottom: 10px; } .sidebar-heading{ font-size: 18px; font-weight: bold; color: #333333; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #bbbbbb; } footer{ clear: both; background: #333333; padding: 20px 0; text-align: center; }
footer small{ color: #cccccc; font-size: 12px; }
</style> <title>HTML5</title> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body> <div id="main-wrapper"> <header> <h1 class="logo"><a href="index.html" title="HTML5">HTML 5</a></h1>
<nav class="primary"> <ul class="group"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </nav>
</header><!-- end header -->
<div class="content-wrap group">
<section id="main-content">
<article class="posts group">
<img class="thumbnail" src="images/thumbnail.jpg" alt="thumnbnail" />
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p>
<a class="more" href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts group"> <img class="thumbnail" src="images/thumbnail.jpg" alt="thumnbnail" /> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p> <a class="more" href="#" title="readmore">Read More</a> </div> </article>
<article class="posts group"> <img class="thumbnail" src="images/thumbnail.jpg" alt="thumnbnail" /> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p> <a class="more" href="#" title="readmore">Read More</a> </div> </article>
<article class="posts group"> <img class="thumbnail" src="images/thumbnail.jpg" alt="thumnbnail" /> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p> <a class="more" href="#" title="readmore">Read More</a> </div> </article>
</section><!-- end main-content -->
<aside> <div class="side-box"> <h2 class="sidebar-heading">Sidbar Links</h2> <ul> <li><a href="#" title="">Link 1</a></li> <li><a href="#" title="">Link 2</a></li> <li><a href="#" title="">Link 3</a></li> <li><a href="#" title="">Link 4</a></li> </ul> </div><!-- end side-box -->
<div class="side-box"> <h2 class="sidebar-heading">Text Widget</h2> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. <br /><br /> Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. </p> </div><!-- end side-box --> </aside><!-- end sidebar --> </div><!-- end wrap content -->
<footer> <small>Copyright <a href="#" title="HTML5">HTML 5</a>. All rights reserved.</small> </footer> </div> </body> </html>
Biomod/2013/UT-Austin/Introduction