Skip to content

Instantly share code, notes, and snippets.

@ahrobinson

ahrobinson/FreeCodeCamp Portfolio Page.markdown

Created September 1, 2015 06:08
Show Gist options
  • Save ahrobinson/0db5b81c7b31d7906daf to your computer and use it in GitHub Desktop.
Save ahrobinson/0db5b81c7b31d7906daf to your computer and use it in GitHub Desktop.
Download ZIP
FreeCodeCamp Portfolio Page
Raw
FreeCodeCamp Portfolio Page.markdown
Raw
index.html
<html>
<head>
<title>Portfolio</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ahrobinson/Hover/master/css/hover.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<body>
<div class="nav">
<nav id="nav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav nav-pills">
<li role="presentation"><a href="#home">Home</a></li>
<li role="presentation"><a href="#about">About</a></li>
<li role="presentation"><a href="#portfolio">Portfolio</a></li>
<li role="presentation"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<section id="home" class="cd-fixed-bg cd-bg-1">
<div class="container center">
<div class="cent">
<h1 class="noTop">Alon's Portfolio</h1>
<h3 class="noTop" style="font-size: 40px">Only The Best.</h3>
</div>
<hr>
<div class="cent">
<a class="btn btn-default btn-lg hvr-grow spacer"><i class="fa fa-twitter"></i> Twitter</a>
<a class="btn btn-default btn-lg hvr-grow spacer"><i class="fa fa-github"></i> Github</a>
<a class="btn btn-default btn-lg hvr-grow spacer"><i class="fa fa-fire"></i> FreeCodeCamp</a>
</div>
</div>
</section>
<section id="about" class="container-fluid cd-scrolling-bg cd-color-2">
<div class="row">
<div id="aboutMe" class="col-md-4 col-md-offset-1">
<h1 class="noTop bottomMarg" style="font-size: 60px">About Me</h1>
<div>
<p>I am an aspiring software engineer living in New Orleans, LA by way of St. Louis, MO.</p>
<p>Currently a student at Operation Spark, I will be attending Hack Reactor Remote Beta starting October 5th!</p>
<p>Then, again, in mountainous countries where the traveller is continually girdled by amphitheatrical heights; here and there from some lucky point of view you will catch passing glimpses of the profiles of whales defined along the undulating
ridges.
</p>
<p>But you must be a thorough whaleman, to see these sights; and not only that, but if you wish to return to such a sight again, you must be sure and take the exact intersecting latitude and longitude of your first stand-point, else so chance-like
are such observations of the hills, that your precise, previous stand-point would require a laborious re-discovery; like the Soloma Islands, which still remain incognita, though once high-ruffed Mendanna trod them and old Figuera chronicled
them.
</p>
</div>
</div>
<div class="col-md-4 col-md-offset-2">
<img id="thumbs" src="http://res.cloudinary.com/ahrobins/image/upload/v1441086978/thumbs_rixlyo.jpg">
</div>
</div>
</section>
<section id="portfolio" class="cd-fixed-bg cd-bg-2">
<div id="portText" class="cent">
<h1 class="noTop" style="margin-top: 0px">Awesomeness Portfolio</h1>
<h3 class="noTop" style="font-size: 40px">This is what awesome looks like.*</h3>
</div>
<div id="portfolioContents" class="container">
<div class="row">
<div class="col-md-4 border hover media__image">
<img src="http://res.cloudinary.com/ahrobins/image/upload/v1441086977/fb_ojfuvu.jpg" class="stretch media" />
<a href="http://www.facebook.com">
<div class="media__body">
<i class="fa fa-fire fa-5x"></i>
</div>
</a>
<div class="oneHun"></div>
</div>
<div class="col-md-4 border hover media__image">
<img src="http://res.cloudinary.com/ahrobins/image/upload/v1441086977/ig_xmnzdr.jpg" class="stretch media" />
<a href="http://www.instagram.com">
<div class="media__body">
<i class="fa fa-fire fa-5x"></i>
</div>
</a>
<div class="oneHun"></div>
</div>
<div class="col-md-4 border hover media__image">
<img src="http://res.cloudinary.com/ahrobins/image/upload/v1441086978/twit_iexgzn.jpg" class="stretch media" />
<a href="http://www.twitter.com">
<div class="media__body">
<i class="fa fa-fire fa-5x"></i>
</div>
</a>
<div class="oneHun"></div>
</div>
</div>
<br>
<p class="cent">* I did not make these websites.</p>
</div>
</section>
<section id="contact" class="cd-scrolling-bg cd-color-3">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<label for="exampleInputMessage">Message</label>
<textarea class="form-control" rows="5"></textarea>
<br>
<button type="submit" class="btn btn-default"><i class="fa fa-send"> Submit</i></button>
</form>
</section>
</div>
<footer id="footer" class="footer">
<div class="nav">
<nav id="nav" class="navbar">
<div class="container">
<div class="row">
<ul class="nav nav-pills">
<li role="presentation"><a href="#home">Home</a></li>
<li role="presentation"><a href="#about">About</a></li>
<li role="presentation"><a href="#portfolio">Portfolio</a></li>
<li role="presentation"><a href="#contact">Contact</a></li>
</ul>
</div>
<p style="color:black">Copyright &copy; Robinson, Inc. 2015. All Rights Reserved</p>
</div>
</nav>
</footer>
</body>
</html>
Raw
script.js
$(document).ready(function() {
$('.hover').hover(function() {
$(this).toggleClass('shadow');
})
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
h1,
h3,
p,
label {
color: white;
margin-top: 0px;
font-family: Ubuntu, fantasy, sans-serif;
font-weight: bold;
}
.spacer {
margin-left: 15px;
border: 3px solid black;
box-shadow: 5px 5px 5px #000;
background-color: grey;
color: black;
}
.spacer:hover {
background-color: rgba(0, 0, 0, 0.7);
border-color: rgba(0, 0, 0, 0.7);
color: white;
}
.bottomMarg {
margin-bottom: 30px;
}
form {
width: 50%;
margin: auto;
}
hr {
width: 90%;
}
#nav {
margin-bottom: 0px;
}
.noTop {
margin-top: 50px;
font-size: 100px;
font-family: Ubuntu, fantasy, sans-serif;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
line-height: 50px;
text-shadow: 3px 3px #000;
}
.navbar {
min-height: 50px;
padding-top: 5px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cent {
position: relative;
text-align: center;
}
#portText,
form {
transform: translateY(50px);
}
form {
transform: translateY(100px);
}
#thumbs {
border-radius: 50%;
width: 350px;
margin-top: 100px;
transform: translateY(-45px);
}
#footer {
padding: 50px;
}
#portfolioContents {
transform: translateY(75px);
}
.border {
border: 1px solid white;
position: relative;
}
.stretch {
width: 100%;
height: 200px;
}
.oneHun {
width: 100%;
height: 100px;
padding-right: 10px;
background-color: rgba(0, 0, 0, 0.8);
}
.shadow {
box-shadow: 7px 7px 8px #000;
}
/*-----------------------------------------------------------------------------------
source: http://www.cssscript.com/transparent-image-hover-overlay-with-pure-css-css3/
*/
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
height: 200px;
background: rgba(0, 0, 0, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 1s;
transition: 1s;
margin-left: 15px;
width: 92.3%
}
.media__body:hover {
opacity: 1;
}
.media__body i {
transform: translateY(20px);
}
/*-----------------------------------------------------------------------------------*/
/*adapted from: http://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
This code is used for the scrolling background effect.
*/
body,
html,
main {
/* important */
height: 100%;
}
.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url(http://res.cloudinary.com/ahrobins/image/upload/v1441086978/Matrix_n1lrhm.jpg);
}
.cd-fixed-bg.cd-bg-2 {
background-image: url(http://res.cloudinary.com/ahrobins/image/upload/v1441086977/blur_p8imnx.jpg);
}
/*.cd-fixed-bg.cd-bg-3 {
background-image: url(pics/blur.jpg);
}
.cd-fixed-bg.cd-bg-4 {
background-image: url(pics/sl.jpg);
}*/
.cd-scrolling-bg.cd-color-2 {
/*min-height: 100%;*/
width: 100%;
height: 800px;
background-image: url(http://res.cloudinary.com/ahrobins/image/upload/v1441086977/stl_ry9ykr.jpg);
}
.cd-scrolling-bg.cd-color-3 {
width: 100%;
height: 800px;
background-image: url(http://res.cloudinary.com/ahrobins/image/upload/v1441086978/rsz_1sl_bvfdf2.jpg);
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment