LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

FreeCodeCamp's Personal Portfolio
DRAISON
FreeCodeCamp's Personal Portfolio

WHY FREECODECAMP?



I joined Free Code Camp because they offers an intriguing new way to give students more hands-on experience. By building apps for non-profits, i can learn about planning a project and how to work with a team.

Portfolio

I will build several apps on the next few CodePen challenges

Coming Soon

Work in Progress

Copyright © DRAISON 2016. All Rights Reserved
CSS
html, body {
  height: 100%;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}
.h1, h1 {
    font-size: 50px;
}
header {
  background: url('http://oi64.tinypic.com/rr5vkm.jpg') top center no-repeat;
  height: 100%;
  width: 100%;
  padding: 0;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  padding: 80px;
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  font-weight: 900;
}
.navbar-default .navbar-nav li a {
    color: #fff;
}
.navbar-default .navbar-nav li a:hover {
    color: rgba(255, 255, 255, 0.5);
}
header .intro-wrapper {
    color: white;
    text-align: center;
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
header .intro-wrapper img {
  max-width: 180px;
  max-height: 180px;
}
.img-centered {
    margin: 0 auto;
}
header .brand-title {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 55px;
    line-height: 55px;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 15px;
}
header .brand-subtitle {
    font-size: 30px;
    line-height: 30px;
}
.about-box {
    position: relative;
    overflow: hidden;
    padding: 220px 0 200px 0;
    background-color: #ffc800;
    color: #fff;
}
.about-box-bg-right .about-box-img {
    right: -15px;
}
.about-box-img {
    position: absolute;
    z-index: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: no-repeat center left;
    -webkit-background-size: cover;
    background-size: cover;
}
section.portfolio-wrapper {
  padding: 100px 0;
}
.about-box-img img {
    display: none;
}
.about-box p {
    font-size: 24px;
}
.separator {
    position: relative;
    background: #ffffff;
    border: 0;
    border-bottom: 4px solid #E5E5E5;
    max-width: 540px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 55px;
}
.separator:after, .separator:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.separator:before {
    border-color: rgba(229, 229, 229, 0);
    border-top-color: #E5E5E5;
    border-width: 21px;
    margin-left: -21px;
}
.separator:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 15px;
    margin-left: -15px;
}
/* portfolio */
.myportfolio {
  margin-top: 50px;
}
.portfolio-item-preview {
    position: relative;
    margin-bottom: 50px;
}
.portfolio-item-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #ffc800;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.portfolio-item:hover .portfolio-item-overlay {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.portfolio-item-overlay .portfolio-item-description {
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  top: 50%;
}
.portfolio-item-overlay .portfolio-item-description h4 {
  font-size: 24px;
}
footer.footer {
  background: #191919;
  color: #fff;
  min-height: 60px;
  line-height: 60px;
}
@media (min-width: 768px) {
  h2 {
    font-size: 50px;
  }
  .navbar-default {
    background: transparent;
    border: none;
    padding: 30px 0;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
  }
  .navbar-default.nav-scrolled {
    background-color: rgba(255,255,255,.9);
    padding: 10px 0;
    box-shadow: 0 2px 2px -2px rgba(68,68,68,.5);
  }
  .navbar-default.nav-scrolled .navbar-nav li a, .navbar-default.nav-scrolled .navbar-brand, .navbar-default.nav-scrolled .navbar-brand:hover {
    color: #4b4b4b;
  }
  .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #fff;
    background-color: transparent;
}
  header .brand-title {
      font-size: 80px;
      line-height: 80px;
  }
}
JS
$(function() {
    var header = $(".navbar-default");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            header.addClass("nav-scrolled");
        } else {
            header.removeClass("nav-scrolled");
        }
    });
});

function scrollNav() {
  $('.navbar-default .navbar-nav li a').click(function(){  
    //Toggle Class
    $(".active").removeClass("active");      
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 80
    }, 400);
    return false;
  });
}
scrollNav();
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv