Skip to content

Instantly share code, notes, and snippets.

@jonesfish
Created March 14, 2013 19:08
Show Gist options
  • Save jonesfish/5164240 to your computer and use it in GitHub Desktop.
Save jonesfish/5164240 to your computer and use it in GitHub Desktop.
Untitled
@import url(http://cs.nccu.edu.tw/~jonesyu/960gs/code/css/reset.css);
@import url(http://cs.nccu.edu.tw/~jonesyu/960gs/code/css/960.css);
@import url(http://cs.nccu.edu.tw/~jonesyu/960gs/code/css/text.css);
@import url(http://fonts.googleapis.com/css?family=Oswald);
a {
text-decoration: underline;
color: #CF1302;
}
a:hover {
text-decoration: none;
}
body {
background: #E0E0E0;
font:1em/1.75 Tahoma, sans-serif;
color: #808080;
}
h1,h2,h3,h4 {
font-family: Oswald, sans-serif;
}
h1{
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
p {
margin-bottom: 1.5em;
}
header{
margin-top:35px;
color: #FFFFFF;
border-top: solid 1px #F7F1E8;
background: #8A7B65 url(http://cs.nccu.edu.tw/~jonesyu/960gs/code/images/img02.gif) repeat-x top left;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
header h1{
margin-top:30px;
margin-left: 35px;
text-shadow: 0px 2px 1px #3F372B;
}
#search {
margin-top:60px;
}
footer div{
width:600px;
margin:30px auto 10px auto;
}
nav {
border-top: solid 1px #FC403C;
border-bottom: solid 1px #B60000;
height: 55px;
background: #DE2211 url(http://cs.nccu.edu.tw/~jonesyu/960gs/code/images/img04.gif) repeat-x top left;
}
nav ul {
margin-top:10px;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav a {
padding: 10px;
color: #FFFFFF;
text-transform: lowercase;
font-size: 1.2em;
text-decoration: none;
text-shadow: 0px 1px 1px #590200;
}
nav a:hover {
background-color:rgba(255,255,255,.5);
}
#page{
color: #5B5B5B;
border-top: solid 1px #FFFFFF;
background: #FFFFFF url(http://cs.nccu.edu.tw/~jonesyu/960gs/code/images/img03.gif) repeat-x top left;
border-bottom: solid 5px #D0D0D0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
article{
padding: 45px 35px 80px 35px;
box-sizing: border-box;
}
aside{
padding: 45px 35px 15px 10px;
box-sizing: border-box;
line-height: 2.2em;
}
#search input.form-submit {
border: 0;
border-top: solid 1px #FC403C;
border-bottom: solid 1px #B60000;
font-family: Oswald, sans-serif;
margin-left: 1em;
color: #FFFFFF;
padding: 2px 8px 3px 8px;
background: #CF1302;
text-shadow: 0px 1px 1px #590200;
text-transform: lowercase;
border-radius: 5px;
}
#search input.form-text {
background: #5C4D37;
border: 0;
border-bottom: solid 1px #A89983;
padding: 5px 8px 5px 8px;
color: #C4B8A8;
border-radius: 5px;
}
*/
<section>
<header>
<div><h1>Lower Priority</h1></div>
<div>
<div id="search">
<form action="" method="post">
<input class="form-text" name="search" size="32" maxlength="64">
<input class="form-submit" type="submit" value="Search">
</form>
</div>
</div>
</header>
<nav>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="page">
<article id="content">
<div class="post">
<h2>Welcome to Lower Priority</h2>
<p>
This is <strong>Lower Priority</strong>, a free, standards-compliant CSS template by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
</p>
</div>
<div class="post">
<h2>Sollicitudin luctus tristique lacus volutpat</h2>
<p>
Nullam erat aliquam mattis curabitur. Euismod dolor ornare laoreet rutrum commodo integer venenatis. Parturient luctus tortor massa. Ultrices sed aliquet sociis. Volutpat luctus felis fringilla primis urna nisi. Laoreet purus nisi pretium ut eget cras. Fermentum metus placerat fusce curae cum egestas.
</p>
</div>
</article >
<aside id="sidebar">
<h3>Porta suscipit</h3>
<ul class="list">
<li class="first"><a href="#">Nibh porta et hendrerit</a></li>
<li><a href="#">Auctor egestas odio viverra</a></li>
<li><a href="#">Dignissim est eget lorem</a></li>
<li><a href="#">Nascetur cras suspendisse</a></li>
<li><a href="#">Pharetra lacus nunc suscipit</a></li>
<li class="last"><a href="#">Volutpat amet interdum</a></li>
</ul>
<h3>Nunc aliquam</h3>
<p>
Iaculis mauris gravida et suscipit congue praesent. Pulvinar porta dui ullamcorper. Integer tincidunt viverra metus purus sed viverra aenean justo ipsum tempus.
</p>
</aside>
</div>
<footer><div>
Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">CSS Templates</a>.
</div></footer>
</section>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment