Skip to content

Instantly share code, notes, and snippets.

@puentejose

puentejose/index.html

Created February 13, 2017 22:37
Show Gist options
  • Save puentejose/10b993f2e1a5fa7905e6841cdc4d4f95 to your computer and use it in GitHub Desktop.
Save puentejose/10b993f2e1a5fa7905e6841cdc4d4f95 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio
Raw
index.html
<head>
</head>
<body>
<nav class="fixed-nav-bar">
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#aboutme">About me</a></li>
<li><a href="#contact">Contact</a></li>
<li>JLu</li>
</ul>
</nav>
<div id="top">
<p>Hola</p>
</div>
<div class="portfolio">
<h1><a id="portfolio" class="container-fluid row-fluid">Portfolio</a></h1>
<a href="http://imgur.com/3GEhWK4"><img class="img-responsive center-block screenshot" src="http://i.imgur.com/3GEhWK4.png?2" title="source: imgur.com" /></a>
<a href="http://perdidohiperespacio.blogspot.mx/" target="_blank">Perdido en el hiperespacio</a><br>
<a href="http://imgur.com/3GEhWK4"><img class="img-responsive center-block screenshot" src="http://i.imgur.com/G1D8cip.png?1" title="source: imgur.com" /></a>
<a href="https://codepen.io/joselios/full/dMrwBz/" target="_blank">Tribute page</a>
</div>
<div class="aboutme">
<h1><a id="aboutme">About me</a></h1>
<p>The name is José Luis, I'm a civil engineer with an interest in web development, design, astronomy and all things nerd. I also love dogs and long walks with dogs.</p>
</div>
<div class="contact">
<h1><a id="contact">Contact</a></h1>
<p>You can find me at facebook or Twitter</p>
</div>
</body>
Raw
style.css
body {
background-color: #26373E;
}
a {
color: inherit;
}
a:hover {
color: inherit;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #16272E;
overflow: hidden;
}
li {
display: block;
color: #BFA76F;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li:hover {
background-color: #06171E;
}
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
}
.portfolio {
background-color: #94C5D5;
color: #26373E;
}
.aboutme {
background-color: #14627C;
color: #D6C694;
}
.contact {
background-color: #94C5D5;
color: #26373E;
}
.screenshot {
width: 33%;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment