Skip to content

Instantly share code, notes, and snippets.

@peterentwistle

peterentwistle/index.html

Last active December 16, 2015 02:08
Show Gist options
  • Save peterentwistle/5359714 to your computer and use it in GitHub Desktop.
Save peterentwistle/5359714 to your computer and use it in GitHub Desktop.
Download ZIP
The source for the fourth tutorial index.html and style.css
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube Tutorial - Peter</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="pageWrapper">
<div id="header">
<header>
<h1>MySite</h1>
</header>
</div>
<div id="main">
<div id="profileInfo">
<div id="profilePic">
<img src="http://peterentwistle.co.uk/images/thumb_peter.jpg" width="154" height="154" />
</div>
<div id="about">
<h1>Peter Entwistle</h1>
<p>Hello my name is Peter and I make websites!</p>
<h2>Where to find me:</h2>
<div id="social">
<span class="socialPic">
<a href="http://youtube.com/peterentwistletv" target="_blank">
<img src="style/social_icons/youtube.png" width="25" height="25" /></a>
</span>
<span class="socialPic">
<a href="http://twitter.com/peterentwistle" target="_blank">
<img src="style/social_icons/twitter.png" width="25" height="25" /></a>
</span>
<span class="socialPic">
<a href="http://facebook.com/peterentwistletv" target="_blank">
<img src="style/social_icons/facebook.png" width="25" height="25" /></a>
</span>
</div>
</div>
<div id="followInfo">
<div class="count">45
<br />
<span class="countName">Followers</span>
</div>
<br />
<div class="count">30
<br />
<span class="countName">Following</span>
</div>
<br />
<div class="count">4
<br />
<span class="countName">Blog posts</span>
</div>
<br />
</div>
</div>
<div class="posts">
<article>
<h2>Page Content</h2>
<p>Fusce ultricies, nisi in malesuada viverra, tellus erat tincidunt felis, vel vehicula dui metus non ipsum. Proin imperdiet, arcu ultricies dictum vehicula, lacus ipsum aliquet turpis, quis sodales augue ligula nec tellus. Aliquam blandit ullamcorper pellentesque. Duis vehicula viverra mi, a ornare sapien porttitor quis. Aliquam facilisis pulvinar gravida. Vivamus mollis consequat feugiat. Donec mollis est a ipsum consectetur tincidunt mattis turpis accumsan. Curabitur condimentum neque sagittis mi dignissim cursus. Mauris volutpat faucibus nunc vel bibendum. Curabitur quam nulla, tempor ut cursus nec, hendrerit sed nisl.</p>
</article>
</div>
</div>
<div id="footer">
<footer>
<p>&copy;2013 MySite</p>
</footer>
</div>
</div>
</body>
</html>
Raw
style.css
html {
position: relative;
min-height: 100%;
}
body {
margin:0;
color: #444;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color:#eeeeee;
margin: 0 0 100px;
}
#profilePic {
float:left;
margin:15px;
}
#about {
float:left;
}
#about a {
text-decoration:none;
}
#header {
width:100%;
height:40px;
background: #6a6f75; /* Old browsers */
background: -moz-linear-gradient(top, #6a6f75 3%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#6a6f75), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6a6f75 3%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6a6f75 3%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6a6f75 3%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #6a6f75 3%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6f75', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#header h1 {
color:#FFF;
margin-top:0px;
position:relative;
margin-left:30%;
}
#main {
width:40%;
min-width:650px;
margin:15px auto 0 auto;
}
footer {
text-align:center;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
#followInfo {
margin-top:15px;
float:right;
margin-right:5%;
}
#profileInfo {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow:hidden;
background-color:#FFF;
}
.count {
text-align:center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:solid #999 1px;
background-color:#CCC;
padding:3px;
}
.countName {
font-size:12px;
font-style:italic;
}
.posts {
margin-top:20px;
height:500px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow:hidden;
background-color:#FFF;
}
article {
margin:15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment