Skip to content

Instantly share code, notes, and snippets.

@Kaiserhaynes

Kaiserhaynes/aboutmenavibar.html

Created August 24, 2015 23:11
Show Gist options
  • Save Kaiserhaynes/4da471778a1e4c15d284 to your computer and use it in GitHub Desktop.
Save Kaiserhaynes/4da471778a1e4c15d284 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aboutmenavibar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Me</title>
<!--/Link/-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/aboutmestyles.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--/Navigation Bar/-->
<nav>
<ul>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="index.html">David Haynes-Guenther</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<!--/intro,Skills,Main text/-->
<div class="container">
<div class="header">
<h1>ABOUT ME</h1>
</div>
<div class="image">
<img src="img/suit.gif" alt="suit">
</div>
<div class="Intro">
<h2>Introduction</h2>
<p>Life in a New York alley was never as much fun as in this 1961 </p>
<p>Top Cat!
The most effectual Top Cat!
Whose intellectual close friends get to call him T.C.Providing it's with dignity. </p>
</div>
<div class="Skills">
<h3> My skills</h3>
<ul id="skill_list">
<li> An item in a list</li>
<li> Another item </li>
<li> Item Three</li>
</ul>
</div>
<div class="maintext">
<h4> My Story</h4>
<p> Top Cat, a clever hustler whose close friends get to call him TC, leads his faithful followers Benny the Ball, Choo Choo, Brain, Fancy-Fancy and Spook in assorted scams, gambling activities and harebrained stunts, all in the pursuit of a fast dollar. Keeping an eye on things is Officer Dibble, a beat cop who has his hands full trying to break up TC's shenanigans.</p>
</div>
</div>
</body>
</html>
Raw
contactnavibar.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body class="contact">
<!--/Navigation Bar/-->
<nav>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="index.html">David Haynes-Guenther</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<div class="container">
<div class="big-paragraph">
<p>Neutra direct trade Portland master cleanse, narwhal keffiyeh
wolf American Apparel YOLO. American Apparel Intelligentsia
tattooed, 90's plaid Portland roof party cliche sriracha master
cleanse. </p>
</div>
<div>
<h1 class="email-address">[email protected]</h1>
</div>
<p class="small-paragraph">Readymade squid Pitchfork mlkshk. High Life
Neutra listicle twee Portland. Street art Austin PBR, Carles Odd Future
kogi readymade. Tattooed occupy slow-carb, PBRB freegan tilde Portland
letterpress.</p>
<div class="address">
<h1>Niemetzstrasse 7</h1>
<h1>Neukolln,Berlin 12055</h1>
<h1>+49 17680709458</h1>
</div>
<p class="small-paragraph">Thank You! Come Again.</p>
<div class="social">
<button>
<a href="http://facebook.com" target="_blank">Facebook</a>
</button>
<button>
<a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
</button>
</div>
</div>
</body>
</html>
Raw
davidhaynesnavibar.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> David Haynes-Guenther</title>
<!-- /link section/ -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/normalize.css" type="text/css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--/Navigation Bar/-->
<nav>
<ul>
<li><a href="index.html">David Haynes-Guenther</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
</body>
</html>
Raw
stylesnavibar.css
body{
margin:0;
padding:0;
font/size:30px;
}
nav{
background-color: #008b8b;
margin: 0;
overflow: hidden;
}
nav ul{
margin:0;
padding:0;
}
nav ul li{
display: inline-block;
list-style-type: none;
}
nav >ul >li >a {
color: #fffff0;
background-color:#008B8B;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
.nav:hover {
color: #ff0;
transition: color 500ms;
-webkit-transition: color 500ms;
}
body{
background-image: url('../img/sea.jpg');
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}
./* Background and Colors */
body {
background-color:#008b8b;;
color: #000000;
}
.skills {
background-color: #5ad4c2;
color: #FFF;
}
.contact {
background-image: url('../img/FOX2.jpg');
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}
.social > button {
background-color: #000;
border: 2px #fff solid;
height: 2rem;
width: 6rem;
}
.social > button > a{
text-decoration: none;
color: #fff;
}
/* Positioning */
* {
box-sizing: border-box;
}
.container {
width: 80%;
margin: 0 auto;
}
p {
-webkit-margin-before: 0;
}
#skill_list {
margin-left: 50px;
}
.main_text {
clear: both;
padding-top: 4rem;
}
.header {
margin-bottom: 40px;
}
.header h1 {
text-align: center;
}
.image {
display: inline-block;
float: left;
margin-right: 0.5rem;
}
.column {
display: inline-block;
float: left;
width: 30%;
position: relative;
margin: 0 0.75rem;
}
.big-paragraph {
margin: 10% 20% 0 20%;
text-align: center;
}
.email-address {
text-transform: uppercase;
text-align: center;
}
.small-paragraph {
margin: 2.5% 20% 0 20%;
text-align: center;
font-style: italic;
font-weight: 300;
}
.address {
margin-top: 2.5%;
}
.address > h1 {
margin: auto;
text-align: center;
}
.social {
text-align: center;
margin-top: 2.5%;
}
.social > button {
margin: 0 0.25em;
}
/* Typography */
h1,h2,h3 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.intro p {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 3em;
font-weight: 100;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
.maintext {
clear: both;
padding-top: 4rem;
}
.header {
margin-bottom: 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment