Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 28, 2014 20:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/11383316 to your computer and use it in GitHub Desktop.
Save anonymous/11383316 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by federico enrico.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fedenrico | Illustration</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,800italic,400,800|Roboto+Condensed:300italic,700italic,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/fede.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Fedenrico</h1>
<h2>Illustration and more</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Immagine cazzuta data dal sito.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Immagine cazzuta data dal sitarello.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Immagine cazzuta data dal sitobla.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Roba data dal sito.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Immagine cazzuta disegnata dal sito.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://facebook.com/fednrico"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>&copy; 2014 Federico Schiro</p>
</footer>
</div>
</body>
</html>
Raw
style.css
/******************
GENERAL
*******************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a
{text-decoration: none;
}
img {
max-width: 100%;
}
/******************
HEADING
*******************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family:'Roboto Condensed', sans-serif;
margin: 15px 0;
font-size: 1.5em;
font-weight: normal;
line-height: 0;
padding-top: 15px;
}
h2 {
font-size: 0,75em;
margin: -5px 0 0;
font-weight: normal;
}
/******************
NAVI
*******************/
nav {text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
/******************
FOOTER
*******************/
footer {
text-align: center;
font-size: 0.75em;
padding-top: 50px;
color: #bbb;
}
/******************
PAGE PORTFOLIO
*******************/
#gallery {
margin: 0;
padding:0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
/******************
COLORS
*******************/
/* website body styles */
body {
background-color: #fff;
color: #666;
}
/* header */
header {
background: #53ab12;
border-color: #599a68;
}
nav {
background: #599a68;
}
h1, h2 {
color: #fff
}
/*links*/
a {
color: #6ba411;
}
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment