CodePen Embed - HTML RESUME

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="row main-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" 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>
        <a href="#" class="navbar-brand"><img src="https://image.ibb.co/mRk5Xy/dtech.png" alt="dtech" border="0"></a>
      </div>
      <div id="main-menu" class="collapse navbar-collapse navbar-right text-center">
        <ul class="nav navbar-nav">
          <li><a class="active" href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul> 
      </div>
    </div>  
  </nav> 
<a href="#" class="sf-back-to-top btn-lg"><span class="glyphicon glyphicon-menu-up"></span></a>
<div id="about" class="container-fluid bg-3 text-right">
     <div class="row" id="welcome-section">
       <div class="col-sm-12 col-lg-8 main-text">
       <p>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
       </p> 
      <hr class="first-one"> 
      <h1 id="bigger-main-text">Web Developer - User Experience Designer - Graphic Artist
        </h1>   
     </div> 
	<div class="col-sm-12 col-lg-4 text-right">
		<div id="author-image">
		<img id="profile-img"src="https://cdn-images-1.medium.com/max/1200/0*tBt56SnJDkO-l3FK."> 
		</div>
    </div>
   </div>  
</div>
 <div id="portfolio"  class="container-fluid bg-4 text-center">
     <h2>PORTFOLIO</h2>
     <hr class="other-one"> 
     <div class="row row-no-margin" id="projects">
        <div class="col-xs-12 col-sm-6 col-no-padding project-tile">
          <img class="thumbnail img-responsive" src="http://placehold.it/600x400">
        </div>
        <div class="col-xs-12 col-sm-6 col-no-padding project-tile">
          <img class="thumbnail img-responsive" src="http://placehold.it/600x400">
        </div>
    </div>
   <div class="row row-no-margin">
        <div class="col-xs-12 col-sm-6 col-no-padding project-tile">
          <img class="thumbnail img-responsive" src="http://placehold.it/600x400">
        </div>
        <div class="col-xs-12 col-sm-6 col-no-padding project-tile">
          <img class="thumbnail img-responsive" src="http://placehold.it/600x400">
        </div>
    </div> 
 </div>
   <div id="contact" class="container-fluid bg-4 text-center">
     <h2>CONTACT ME</h2>
     <hr class="other-one">
     <div class="row">
       <div class="col-sm-12 col-lg-6 contact-form">
         <form id="form" class="form" action="#" method="get">
           <ul>
            <li>
                <label for="name">Your Name:</label>
                <input type="text" placeholder="Your Name" id="name" name="name" tabindex="1"/>
            </li>
            <li>
                <label for="email">Your Email:</label>
                <input type="email" placeholder="Your Email" id="email" name="email" tabindex="2"/>
            </li>
              <li>
                <label for="phone">Your Phone:</label>
                <input type="tel" placeholder="Your phone" id="phone" name="phone" tabindex="2"/>
            </li>
            <li>
                <label for="message">Message:</label>
                <textarea placeholder="Message" id="message" name="message" tabindex="3"></textarea>
            </li>
        </ul>
        <input type="submit" value="Send Message" id="submit"/>
         </form>
</div>
        <div class="col-sm-12 col-lg-6 contact-text">
          <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Warsaw... just feel free to drop me a line anytime.</p>
          <br/>
          <p>I promise to reply A.S.A.P.</p>
        </div>  
     </div>  
  </div>  
 <footer>
   <div id="footer-above">
     <div class="row">
       <div class="col-sm-6 col-lg-6 col-xs-6 footer-text">
          <p id="about">About this page</p>
         <p id="text-footer">Made with HMTL, CSS, and JQuery by <a href="#">Duc Trung Bui</a></p>
       </div>
        <div class="col-sm-6 col-lg-6 col-xs-6 social-icons">
          <p>Around the web</p>
          <a class="facebookBtn smGlobalBtn" href="#" ></a>
          <a class="linkedinBtn smGlobalBtn" href="#" ></a>
          <a class="githubBtn smGlobalBtn" href="#" id="profile-link" target="_blank"></a>
       </div>
     </div>  
   </div>
   <div id="footer-below">
     Dtech © 2018. All rights reserved
   </div>  
  </footer>

body {
  background: #888;
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}
footer {
  flex-shrink: 0;
  color: #fff;
  background-color: #aaa;
  text-align: center;
}
nav {
  padding: 10px 0;
}

hr:after { 
  content: "</>"; 
  display: inline-block; 
  position: relative; 
  top: -0.7em; 
  font-size: 1.5em; 
  padding: 0 0.25em; 
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  font-size: 24px;
 }
.navbar-brand {
  padding: 0 0 0 10px;
}
.main-nav {
  max-width: 1050px;
  margin: 0 auto;
  padding-right: 15px;
}
.nav.navbar-nav li:hover {
  -webkit-box-shadow: 0px 5px 6px -3px rgba(66,66,66,1);
  -moz-box-shadow: 0px 5px 6px -3px rgba(66,66,66,1);
  box-shadow: 0px 5px 6px -3px rgba(66,66,66,1);
}
.nav.navbar-nav li a:hover, .nav.navbar-nav li a:visited, .nav.navbar-nav li a:active, .nav.navbar-nav li a:focus {
  color: grey;
}
a.active{
  background: white !important; 
 }
.container-fluid.bg-3 {
  border: 1px solid grey;
  width: 1050px;
  padding: 130px 50px 70px 10px;
  background: #aaa;
}
.container-fluid.bg-4 {
  border: 1px solid grey;
  width: 1050px;
  padding: 50px 50px;
  background: #eee;
}
.main-text {
  padding: 40px 0px 0 40px;
  color: white;
  font-size: 19px;
}
.container.text-left.next {
  margin: 2em 0;
}
.second{
  border-top: none;
  padding: 40px;
  background: #eee;
}
.third {
  background: #eee;
}
.navbar-inverse {
  background:#722872 !important;
}
.first-one {
  height: 4px;
  background-color:white;
  width: 525px;
  position: relative;
  overflow: visible;
}
.other-one {
  height: 4px;
  background-color:grey;
  width: 525px;
  overflow: visible;
}
.first-one:after { 
  top: -0.7em; 
  right: -2.5em;
  color: white;
  font-size: 30px;
}
.other-one:after { 
  background: #eee;
  font-size: 30px;
}
.brightness { 
  filter: brightness(3);
}
div.image-gallery {
  display: block;
  background-color: #cccccc;
}
div.image-gallery img {
  display: block;
  float: left;
  width: 45%;
  margin: 20px 30px;
}
.contact-text {
  padding: 25px 30px 0 50px;
  color: grey;
  font-weight: 600;
  font-size: 18px;
  text-align: justify
}
.contact-form {
  padding: 0 30px;
}
/*button*/
.sf-back-to-top {
    background-color: #722872; /* button color */
    color: white; /* text/arrow color */ 
    display: none;
    z-index: 999;
    /* float in bottom right corner */
    /* 20 pixels from edge */
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* size of button is 50 pixels*/
    width: 50px;
    height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    /* round button */
    -webkit-border-radius: 50%;
    border-radius: 50%;
    opacity: 0.8
}

a.sf-back-to-top {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 18px;
    padding-top: 14px;    
}

a.sf-back-to-top .arrow:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
/*End of button*/
#footer-above {
  padding: 10px 0 0 0;
  font-size: 24px;
}
#text-footer {
  width: 250px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  font-size: 16px;
}
#welcome-section {
  height: 100vh;
}
element.style {
}
.navbar-inverse .navbar-brand {
    color: #9d9d9d;
}

#text-footer a {
  color: #722872;
}
#profile-img {
  position: relative;
}
#footer-below {
  background: #722872;
  padding: 20px 0;
  font-size: 16px;
}
#author-image {
  margin-top: 20px;
  margin-right: 30px;
}
#bigger-main-text {
  font-size: 21px;
}
/*media queries*/
@media only screen and (min-width: 1200px) {
  .sf-back-to-top {
     display: none !important;
  }
}
@media only screen and (max-width: 1200px) {
  .container-fluid.bg-3 {
      text-align: center !important;
      padding: 140px 30px 50px 30px;
  }
  #profile-img {
     display: block;
     margin-left: auto;
     margin-right: auto;
  }
  .main-text {
     padding: 40px 0 0 0;
  }
  #author-image {
     margin-right: 0 !important;
  }
  .first-one:after {
     left: 0;
     background: #aaa;
  }
  .sf-back-to-top {
     display: none !important;
  }
}
@media only screen and (max-width: 1080px) {
  .container-fluid.bg-3 {
      width: 100%;
      text-align: center !important;
  }
  .container-fluid.bg-4 {
      width: 100%;
  }
  .main-nav {
      max-width: 1050px;
      padding: 0 20px;
  }
  .navbar-brand {
      padding: 0;
  }
  #profile-img {
     display: block;
     margin-left: auto;
     margin-right: auto;
  }
}
@media only screen and (max-width: 960px) {
  .container-fluid.bg-3 {
    width: 100%;
    text-align: center !important;
  }
  .container-fluid.bg-4 {
    width: 100%;
  }
  .main-nav {
  max-width: 100%;
  }
}
@media only screen and (max-width: 840px) {
  .container-fluid.bg-3 {
    width: 100%;
    text-align: center !important;
  }
  .container-fluid.bg-4 {
    width: 100%;
  }
  .main-nav {
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .container-fluid.bg-3 {
    width: 100%;
  }
  .container-fluid.bg-4 {
    width: 100%;
  }
  .main-nav {
    max-width: 100%;
  }
  .first-one {
  width: 320px;
}
  .other-one {
    width: 320px;
  }
   .sf-back-to-top {
     display: block !important;
  }
}

/* Form
==================================== */
.form input, .form textarea {
  background-color: transparent;
}
.form ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
}

.form li {
    border: 1px solid #ccc;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    margin-bottom: 0px; 
    position: relative; 
}
 
.form li:first-child {
    border-top: 0;
}
 
.form li:last-child {
    border-bottom: 1px solid #ccc;
}

label, input, textarea {
    display: block; 
    border: 0;
}
 
input, textarea { 
    width: 100%; 
    height: 100%; 
    padding: 2.25em 1em 1em; 
    outline: 0;
}
 
textarea {
    height: 16em;
    resize: none; 
}
label {
    font-size: .8125em; /* 13/16 */
    position: absolute; 
    top: 1.23em;
    left: 1.23em;
    color: #a93a96;
    opacity: 1;
}

input[type="submit"] {
    background: #aaa;
    margin-bottom: 1em;
    color: white;
    border-radius: 3px;
    padding: .75em;
    -webkit-appearance: none; /* remove default browser <button> styling */
    -webkit-transition: .333s ease -webkit-transform;
    transition: .333s ease transform;
}
input[type="submit"]:hover {
    -webkit-transform: scale(1.025);
    transform: scale(1.025);
    cursor: pointer;
}
input[type="submit"]:active {
    -webkit-transform: scale(.975);
    transform: scale(.975);
}
label {
    -webkit-transition: .333s ease top, .333s ease opacity;
    transition: .333s ease top, .333s ease opacity;
}
.js-hide-label label {
    opacity: 0; 
    top: 1.5em
}
.js-unhighlight-label label {
    color: #999
}
/*Social Icons*/
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

.social-icons {
  text-align: center;
}
.social-icons a {
  text-decoration: none;
}
.smGlobalBtn { /* global button class */
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border:2px solid white; /* add border to the buttons */
    box-shadow: 0 3px 3px #999;
    padding: 0px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.8em;
    border-radius: 27px;
    margin: 10px 0 50px 0;
    -moz-border-radius:27px;
    -webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
    background: #aaa;
}

.facebookBtn:before{ /* use :before to add the relevant icons */
    font-family: "FontAwesome";
    content: "\f09a"; /* add facebook icon */
}

.facebookBtn:hover{
    color: #722872;
    background: white;
    transition: 0.5s;
}

/* linkedin button class*/
.linkedinBtn{
    background: #aaa;
}

.linkedinBtn:before{
      font-family: "FontAwesome";
      content: "\f0e1"; /* add linkedin icon */
}

.linkedinBtn:hover{
      color: #722872;
      background: white;
      transition: 0.5s;
}
/* github button class*/
.githubBtn{
    background: #aaa;
}

.githubBtn:before{ /* use :before to add the relevant icons */
    font-family: "FontAwesome";
    content: "\f09b"; /* add facebook icon */
}

.githubBtn:hover{
    color: #722872;
    background: white;
    transition: 0.5s;
}

//scroll
$('a[href*="#"]')
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500, function() {
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { 
            return false;
          } else {
            $target.attr('tabindex','-1'); 
            $target.focus();
          };
        });
      }
    }
  });

//active elements on navbar

var sections = $('.container-fluid')
  , nav = $('nav')
  , nav_height = nav.outerHeight();
 
$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();
 
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
 
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');
 
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});
//form
//test for placeholder support
$(document).ready(function(){
    $.support.placeholder =(function() {
      var i = document.createElement('input');
      return 'placeholder' in i;
    })();

//Hide labels by default if placeholders are supported
    if($.support.placeholder) {
    $('.form li').each(function(){
    $(this).addClass('js-hide-label');
    });
  //code for adding/removing class here 
      $('.form li').find('input, textarea').on('keyup blur focus', function(e){
     
    // Cache our selectors
    var $this = $(this),
        $parent = $this.parent();
 
    // Add or remove classes
    if (e.type == 'keyup') {
        if( $this.val() == '' ) {
        $parent.addClass('js-hide-label'); 
        } else {
            $parent.removeClass('js-hide-label');   
        }                  
    } 
    else if (e.type == 'blur') {
        if( $this.val() == '' ) {
            $parent.addClass('js-hide-label');
        } 
        else {
            $parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
        }
    } 
    else if (e.type == 'focus') {
        if( $this.val() !== '' ) {
          $parent.removeClass('js-unhighlight-label');
      }
    }
    });
    }
});  

/* scroll top */
var amountScrolled = 300;

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('a.sf-back-to-top').fadeIn('slow');
    } else {
        $('a.sf-back-to-top').fadeOut('slow');
    }
});

$('a.sf-back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});

This Pen is owned by Trung on CodePen.

See more by @txkun on CodePen

External CSS

External JavaScript