Skip to content

Instantly share code, notes, and snippets.

@emygeek

emygeek/index.html

Last active February 7, 2017 11:40
Show Gist options
  • Save emygeek/d1ad56f8f121c2ec801cd0ba272b0dcf to your computer and use it in GitHub Desktop.
Save emygeek/d1ad56f8f121c2ec801cd0ba272b0dcf to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio (FreeCodeCamp)
Raw
index.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ><a href="#home">Home </a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#work">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div class="tagline text-center">
<img src="http://res.cloudinary.com/emygeek/image/upload/v1485070229/wonderwoman.png" class="img-responsive" >
<h1 class="title">Call me Marie</h1>
<h3> Part time superwoman, full time geek.
</div>
</section>
<section id="about" class="page">
<div class="container">
<div class="row">
<h2 class="title">About</h2>
</div>
<div class="row">
<div class="col-xs-6 about-img">
<img src="http://res.cloudinary.com/emygeek/image/upload/v1485351726/marie-01_1_fdhfud.png" class="img-responsive">
</div>
<div class="col-xs-6 about-desc">
<p> I am a Mobile, Web and Virtual Reality Designer / Developer. </p>
<ul>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485348815/mortarboard_14_urf7hl.png" >Holder of a bachelor in Computer Science</li>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485338031/trophy_2_ka8zhz.png" >Chancellor Medal for outstanding academic achievement</li>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485335664/placeholder_8_avfc5e.png"> Based in Pretoria, South Africa</li>
</ul>
</div>
</div>
</div>
</section>
<section id = "hobbies" class="page">
<h2 class="title" > Passionate about </h2>
<ul>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485335667/acoustic-guitar_2_lxioa7.png"></li>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485335667/coding_3_qpgnjp.png" ></li>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485335666/chef-hat_2_soft8o.png" ></li>
<li><img src="http://res.cloudinary.com/emygeek/image/upload/v1485337273/tennis_u9adbe.png" ></li>
</ul>
</section>
<section id="work" class="page">
<div class="container">
<div class="row">
<h2 class="title">Projects</h2>
</div>
<div class="row work-items">
<div class="col-sm-12 col-md-4 item">
<a href="http://www.helpoutapp.co.za/" target="_blank"><img src="http://res.cloudinary.com/emygeek/image/upload/v1485598582/iPhone6plus_Screenshot_1_rlmgsl.png" class="img-responsive" ></a>
</div>
<div class="col-sm-12 col-md-4 item">
<a href="http://nunnafricafoundation.org/" target="_blank"><img src="http://res.cloudinary.com/emygeek/image/upload/v1485598606/iPhone6plus_Screenshot_3_hovifw.png" class="img-responsive" ></a>
</div>
<div class="col-sm-12 col-md-4 item">
<a href="http://www.chrisnelgroup.com/" target="_blank"><img src="http://res.cloudinary.com/emygeek/image/upload/v1485598582/iPhone6plus_Screenshot_2_fg4zog.png" class="img-responsive" ></a>
</div>
</div>
</div>
</section>
<section id="contact" class="page">
<div class="container">
<div class="row">
<h2 class="title">Let's get in touch</h2>
</div>
<ul>
<li><a href="https://twitter.com/marieinnov?lang=en" target="_blank"><img src="http://res.cloudinary.com/emygeek/image/upload/v1485355847/twitter_4_ejusnl.png" ></a></li>
<li><a href="https://za.linkedin.com/in/mariembenoun" target="_blank"><img src="http://res.cloudinary.com/emygeek/image/upload/v1485355848/linkedin_4_c5ecto.png" ></a></li>
</ul>
</div>
</section>
Raw
portfolio-freecodecamp.markdown

Portfolio (FreeCodeCamp)

Portfolio site designed as part of FreeCodeCamp challenges. App screenshots made using Applaunchpad and Google chrome Full Page Screen Capture extension. Flat icons taken from www.flaticon.com;

A Pen by Marie on CodePen.

License.

Raw
script.js
$(document).ready(function(){
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
font-size: 20px;
background: #f0f7f9;
font-family: 'Raleway', sans-serif;
line-height: 2;
}
h1{
font-size: 60px;
}
h2{
font-size: 50px;
}
ul{
list-style-type: none;
padding:0;
}
.page{
padding-top: 100px;
padding-bottom: 100px;
}
.title{
font-family: 'Poiret One', cursive;
font-weight: 700;
text-align: center;
}
h2.title{
margin-bottom: 60px;
}
/* Navbar styling */
.navbar-default{
background: rgba(29, 27, 27, 0.6);
}
.navbar ul{
padding-top:10px;
padding-bottom:10px;
text-transform:uppercase;
font-family: 'Poiret One', cursive;
}
.navbar-default .navbar-nav>li>a{
color: #fff;
}
.navbar-default .navbar-nav>li>a:hover{
color: #2be8fc;
}
/* Main content styling */
#home{
height: 100vh;
width:100%;
position:relative;
background: #f0f7f9 url(http://res.cloudinary.com/emygeek/image/upload/v1485338069/Simple_balloon_Wallpapers_HD_1280x720_nb7qla.jpg) repeat-y ;
background-size:cover;
animation: moving-bg 10s infinite linear;
-webkit-animation: moving-bg 10s infinite linear;
}
@keyframes moving-bg{
from{
background-position: 0 0;
}
to{
background-position: 0 100%;
}
}
@-webkit-keyframes moving-bg{
from{
background-position: 0 0;
}
to{
background-position: 0 100%;
}
}
#home .tagline{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
#home .tagline img{
width: 250px;
margin-left: auto;
margin-right:auto;
}
#about .about-img img{
width:300px;
margin-left: auto;
margin-right: auto;
}
#about .about-desc ul{
padding-left:0px;
}
#about .about-desc ul li{
margin-bottom:10px;
}
#about .about-desc ul li img{
margin-right:10px;
}
#hobbies{
text-align:center;
background: #b5b1b1;
color: #fff;
}
#hobbies ul{
margin-top:30px;
margin-bottom: 30px;
}
#hobbies ul li{
display: inline-block;
margin:20px;
}
#work{
text-align:center;
}
#work .work-items{
margin-top:50px;
margin-bottom: 50px;
}
#work .work-items img{
width: 300px;
margin: 20px auto;
}
#contact{
text-align:center;
background: #bee0e0;
}
#contact ul li{
display:inline-block;
margin:20px;
}
/* Responsive Styles */
/* MIN 1920px */
@media only screen and (min-width: 1920px){
}
/* MAX 1170px */
@media only screen and (max-width: 1170px){
}
/* MAX 1024px */
@media only screen and (max-width: 1024px){
}
/* MIN 970px */
@media only screen and (min-width: 970px){
}
/* MAX 970px */
@media only screen and (max-width: 970px){
}
/* MAX 800px */
@media only screen and (max-width: 800px){
.work-items img{
height:400px;
margin-left: auto;
margin-right:auto;
}
}
/* MAX 768px */
@media only screen and (max-width: 768px){
.work-items img{
height:400px;
}
}
/* MAX 640px */
@media only screen and (max-width: 640px){
.work-items img{
height:400px;
}
}
/* MAX 480px */
@media only screen and (max-width: 480px){
.work-items img{
height:400px;
}
}
/* MAX 360px */
@media only screen and (max-width: 360px){
.work-items img{
height:400px;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment