xGVyJM ('-' * 6)
Created
May 14, 2015 18:59
-
-
Save anonymous/2fda1c431a7ad24f2c96 to your computer and use it in GitHub Desktop.
xGVyJM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Tom Raitt | Website Design</title> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'> | |
<link rel="stylesheet" href="css/main.css"> | |
<link rel="stylesheet" href="css/responsive.css"> | |
</head> | |
<body> | |
<header> | |
<a href="index.html" id="logo"> | |
<h1>Tom Raitt</h1> | |
<h2>Web Developer</h2> | |
</a> | |
<nav> | |
<ul> | |
<li><a href="index.html" class="selected">Portfolio</a></li> | |
<li><a href="about.html">About</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>Experimentation with colour and texture.</p> | |
</a> | |
</li> | |
<li> | |
<a href="img/numbers-02.jpg"> | |
<img src="img/numbers-02.jpg" alt=""> | |
<p>Playing with blend in Photoshop.</p> | |
</a> | |
</li> | |
<li> | |
<a href="img/numbers-06.jpg"> | |
<img src="img/numbers-06.jpg" alt=""> | |
<p>Trying to create 80 style of glows.</p> | |
</a> | |
</li> | |
<li> | |
<a href="img/numbers-09.jpg"> | |
<img src="img/numbers-09.jpg" alt=""> | |
<p>Drips using Photoshop brushes.</p> | |
</a> | |
</li> | |
<li> | |
<a href="img/numbers-12.jpg"> | |
<img src="img/numbers-12.jpg" alt=""> | |
<p>Creating shapes using repetition.</p> | |
</a> | |
</li> | |
</ul> | |
</section> | |
<footer> | |
<a href="https://twitter.com/tomraitt"><img src="img/twitter-wrap.png" alt "Twitter Logo" class="social-icon"></a> | |
<a href="https://www.facebook.com/tom.raitt.31"><img src="img/facebook-wrap.png" alt "Facebook Logo" class="social-icon"></a> | |
<p>© 2015 Tom Raitt.</p> | |
</footer> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media screen and (min-width: 480px) { | |
/********************************************* | |
TWO COLUMN LAYOUT | |
*********************************************/ | |
#primary { | |
width: 50%; | |
float: left; | |
} | |
#secondary { | |
width: 40%; | |
float: right; | |
} | |
/********************************************* | |
PAGE: PORTFOLIO | |
*********************************************/ | |
#gallery li { | |
width: 28.3333%; | |
} | |
#gallery li:nth-child(4n) { | |
clear: left; | |
} | |
/********************************************* | |
PAGE: ABOUT | |
*********************************************/ | |
.profile-photo { | |
float: left; | |
margin: 50px 5% 80px 0; | |
} | |
@media screen and (min-width: 660px) { | |
/********************************************* | |
HEADER | |
*********************************************/ | |
nav { | |
background: none; | |
float: right; | |
font-size: 1.125em; | |
margin-right: 5%; | |
text-align: right; | |
width: 45%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment