Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://www.google.com/fonts/specimen/Gentium+Book+Basic" rel="stylesheet" type="text/css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<html lang="en">
  
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300,100' rel='stylesheet' type='text/css'>

<body>
  <!-- =========================================
      NAVIGATION
    ========================================== -->

  <!--This div is needed for the "navbar disappearing"-->
  <div class="navbar-header">
    <!--Navigation links section -"<nav> tag"-->
    <!--For the role ... of the "role" attribute, see this :
    http://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
-->
    <!--Navbar style chosen as default-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <!-- This is the button that would link to my website... It's "navigation brand"-->
        <a class="navbar-brand" href="#">
          <button class="btn">
            Natalia
          </button>
        </a>
        <!-- This is the beginning of the navigation bar div section-->
        <div id="navbar">
          <!--Unordered list which actually represents our navbar-->
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#home">
                <button class='btn navbar-btn'>Home</button>
              </a>
            </li>
            <li>
              <a href="#about">
                <button class='btn'>About</button>
              </a>
            </li>
            <li>
              <a href="#projects">
                <button class='btn'>Projects</button>
              </a>
            </li>
            <li>
              <a href="#information">
                <button class='btn'>Information</button>
              </a>
            </li>
            <li>
              <a href="#contact">
                <button class='btn'>Contact</button>
              </a>
            </li>
            <!--End of unordered list which is our navbar-->
          </ul>
          <!--End of the navbar div section-->
        </div>
        <!--End of the set of navigation links-->
    </nav>
    <!--End of header for scrolling-->
    </div>
  </div>

  <!-- =========================================
      SECTIONS
    ========================================== -->

  <!--Section 1 : Homepage which is like... only a heading or two-->
  <!--Class "home" means-->
  <div id="home" class="section home">
    <!--div section which is centered : everything inside it will be center-aligned-->
    <div class="text-vcenter">
      <!--Content section, as opposed to the section which contains background image -->
      <div class="content">
        <h1>Fascinated by words</h1>
        <h3>Half-linguist, half-engineer</h3>
        <img src="https://perezparedes.files.wordpress.com/2010/11/wordcloud.png">
        <!--End of content section-->
      </div>
      <!--End of centered div section-->
    </div>
  </div>

  <!--Section 2 : About me. A short passage that gives some info and my photo-->
  <!--Class "pad-section" means-->
  <div id="about" class="section pad-section">
    <!--For information about why to use cotainer-row system,see http://stackoverflow.com/questions/19983857/when-should-i-use-class-container-and-row-->
    <!-- container DIV with picture and text-->
    <div class="container">
      <!--div with text-->
      <div class="col-sm-7 text-vcenter">
        <h2>Natalia</h2>
        <!--div with flexslider ABOUT ME-->
        <div class="cd-testimonials-wrapper cd-container">
          <ul class="cd-testimonials">
            <li>
              <p class="lead">Hello, welcome to my first webpage. My name is Natalia and I am an electical engineering student, currently pursuing bachelor's degree in theoretical computer science at CTU Prague. I love words in all their aspects and therefore take interest
                in language technology & data mining.</p>
            </li>
            <li>
              <p class="lead">This portfolio page is dedicated to my web design skills which I am actively enchancing. My long-term ambition is to create a social network which would on a back-end layer hold a purpose of analyzing the semantics of human memories. For
                this, I need to gather lots of real-life coding experience.</p>
            </li>
            <li>
              <p class="lead">More about me : I am easily surprised, I love the joy of discovering new knowledge that is hidden literally everywhere, I like hiking and socializing, play the guitar and sing, and struggle in finding my life passion. In genral I am more
                of a Renaissance person and it is an obstacle in focusing on only one thing.</p>
            </li>
          </ul>
          <!--END of div with flexslider ABOUT ME-->
        </div>
        <!--END of div with text-->
      </div>
      <div class="col-sm-4">
        <img id=" my-face-image " src="https://res.cloudinary.com/dstgchdzc/image/upload/v1452038901/12249967_1003300293070826_6286669534490984200_n_u228oe.jpg " alt="This is my face " />
        <!--END of container DIV with picture and text-->
      </div>
    </div>
  </div>
  </div>

  <!-- Section 3 -->
  <div id="projects" class="section pad-section">
    <p>Here are some of my projects. Please notice that this portfolio page is mainly intended to show my web design skills and the projects that I completed on <a href="https://freecodecamp.com" target="_blank"> Free Code Camp</a>.</p>

  </div>
  <!--END OF SECTION PROJECTS-->
  <!-- section 4-->
  <div id="information" class="section content">
        </div>

  <!-- Contact section-->
  <div id="contact" class="section pad-section content">
</body>

</html>
              
            
!

CSS

              
                /* Colors description

   Main color hue 1: #003440; 
   Main color hue 2: black;
   Text on dark areas : white;
   Text on light areas: black;
   Highlights : violet;

*/
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
/**
Unintended body overflow;
parallax scrolling;
fading in/out;
**/

html {
  height: 100%;
  position: relative;
}

body {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
}

.row {
  width:100%;
}

/**
Solution for the "firefox dots" found here :
  http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links
**/
a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

.section {
  display: table;
  min-height: 100%;
  height: 100%;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
/** chrome outlines are ugly!**/
.btn:focus {
  outline: none;
  color: #fcf9f3;
  color: #e8d1a1;
}
.btn,
.button{
  color: #fcf9f3;
  background-color: #003440;
  border-radius: 0;
  font-family: 'Gentium Book Basi';
  font-size: 20px;
  margin: 0px;
  padding : 10px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  -o-transition: color .2s ease-out, background 1s ease-in;
  -ms-transition: color .2s ease-out, background 1s ease-in;
  -moz-transition: color .2s ease-out, background 1s ease-in;
  -webkit-transition: color .2s ease-out, background 1s ease-in;
  transition: color .2s ease-out, background 1s ease-in;
}

.btn:hover{
  color: #e8d1a1;
}

.lead {
  color: #fcf9f3;
  font-size: 10;
}

.navbar {
  height: 60px;
  padding: 0px;
  margin: 0px;
  padding-top: 0px;
  min-height: 0px;
  -webkit-font-smoothing: antialiased;
}


.navbar-nav{
  display: flex-item;
}
.container-fluid
{
  background-color: #fcf9f0;
  -webkit-box-shadow: 0 8px 6px -6px grey;
    -moz-box-shadow: 0 8px 6px -6px grey;
    box-shadow: 0 8px 6px -6px grey;
}

.navbar-nav > li {
  height: 60px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar-nav > li > a {
  margin-top: 5px;
  margin-bottom:0px;
  padding-top : 0;
  padding-bottom:0;
}

.container-fluid > a {
  margin-top: 5px;
  padding-top : 0;
  padding-bottom:0;
}

.col-sm-7{
  margin-right: 5%;
  margin-top:0.5%;
}
/* padded section */

.pad-section {
  padding: 50px 0;
}

.pad-section img {
  width: 110%;
}

#projects p{
  font-size : 30px;
  margin-top: 50px;
  margin-right: 50px;
  margin-left: 50px;
}
/* vertical-centered text */

.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: black;
}

.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  color: black;
  font-family: 'Gentium Book Basic';
  margin: 0;
  padding: 0;
}

.text-vcenter h2 {
  color: #fcf9f3;
  font-family: 'Gentium Book Basic';
  font-size:20mm;
}

/* additional sections */

#home {
  display: table;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #fcf9f3;
}

#about {
  background: #003440;
  background-size: cover;
}

#projects {
  box-sizing: border-box;
  background-color: #fcf9f3;
  opacity: 100%;
  color: #000000;
}

#information {
  background: url(http://www.plantifulhealth.com/wp-content/uploads/2014/10/mac-glasses.jpeg) no-repeat center center fixed;
  display: table;
  position: relative;
  width: 100%;
  background-size: cover;
}

#information .panel {
  opacity: 0.85;
}

footer {
  padding: 20px 0;
}

#my-face-image {
  width: 300px;
  opacity:1.;
}

#contact {
  box-sizing: border-box;
  background-color: #003440;
}

.content img {
  position: fixed;
  pointer-events:none;
  left: 0;
  top: 0;
  down: 10;
  width: 100%;
  height: auto;
  opacity: 0.04;
}

.content {
  position: relative;
  overflow-x: hidden;
}


.content h1 {
  z-index: 2;
}

.content h3 {
  z-index: 2;
}

.container
{
	margin-left: 8%;
	margin-right: 8%;
  margin-top: 10%;
  margin-bottom: 10%;
  width : 80%;
  padding: 12px;
 }

.panel-title
{
  font-size: 200;
}

/**
The following has been borrowed from
https://codepen.io/littlesnippets/pen/adLELd
**/

figure.snip1321 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 20px 1%;
  margin-right: 20px;
  min-width: 220px;
  max-width: 220px;
  width: 100%;
  color: #000000;
  text-align: center;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure.snip1321 * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
figure.snip1321 img {
  max-width: 100%;
  vertical-align: top;
}
figure.snip1321 figcaption {
  top: 50%;
  left: 20px;
  right: 20px;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
figure.snip1321 h2,
figure.snip1321 h4 {
  margin: 0;
}
figure.snip1321 h2 {
  font-weight: 600;
}
figure.snip1321 h4 {
  font-weight: 400;
  text-transform: uppercase;
}
figure.snip1321 i {
  font-size: 32px;
}
figure.snip1321:after {
  background-color: #ffffff;
  position: absolute;
  content: "";
  display: block;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0;
}
figure.snip1321 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1321:hover figcaption,
figure.snip1321.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1321:hover:after,
figure.snip1321.hover:after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 0.9;
}

.about-paragraph{
  font-family: "Georgia", serif;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 1em;
  padding: 0 14px;
}

/* slider */

.cd-testimonials-wrapper, .cd-testimonials-wrapper * {
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}
.cd-testimonials-wrapper ul {
  list-style: none;
}

.cd-testimonials-wrapper {
  position: relative;
   -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 768px;
  /*background: rgba(57, 57, 60, 0.8);*/
  margin: 0.3em auto;
  padding: 0px 40px 0px;
}
.cd-testimonials {
  color: white;
  text-align: center;
}
.cd-testimonials:after {
  content: "";
  display: table;
  clear: both;
}
.cd-testimonials > li {
  position: absolute;
  opacity: 0;
}
.cd-testimonials > li:first-child {
  position: relative;
  opacity: 1;
}
.cd-testimonials p {
  font-family: "Georgia", serif;
  vertical-align: middle;
  text-align: center;
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 1em;
  padding: 0 14px;
}

.flex-direction-nav li {
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
}
.flex-direction-nav li:first-child {
  left: 0;
}
.flex-direction-nav li:last-child {
  right: 0;
}
.flex-direction-nav li a {
  display: block;
  height: 100%;
  width: 100%;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.flex-direction-nav li:hover {
  background: #e8d1a1;
}
.no-touch .flex-direction-nav li a:hover {
  background-color: #323234;
}
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
  /* left and right arrows in css only */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  background-color: white;
}
.flex-direction-nav li a::before {
  -webkit-transform: translateY(-35px) rotate(45deg);
  -moz-transform: translateY(-35px) rotate(45deg);
  -ms-transform: translateY(-35px) rotate(45deg);
  -o-transform: translateY(-35px) rotate(45deg);
  transform: translateY(-35px) rotate(45deg);
}
.flex-direction-nav li a::after {
  -webkit-transform: translateY(-27px) rotate(-45deg);
  -moz-transform: translateY(-27px) rotate(-45deg);
  -ms-transform: translateY(-27px) rotate(-45deg);
  -o-transform: translateY(-27px) rotate(-45deg);
  transform: translateY(-27px) rotate(-45deg);
}
.flex-direction-nav li:last-child a::before {
  -webkit-transform: translateY(-35px) rotate(-45deg);
  -moz-transform: translateY(-35px) rotate(-45deg);
  -ms-transform: translateY(-35px) rotate(-45deg);
  -o-transform: translateY(-35px) rotate(-45deg);
  transform: translateY(-35px) rotate(-45deg);
}
.flex-direction-nav li:last-child a::after {
  -webkit-transform: translateY(-27px) rotate(45deg);
  -moz-transform: translateY(-27px) rotate(45deg);
  -ms-transform: translateY(-27px) rotate(45deg);
  -o-transform: translateY(-27px) rotate(45deg);
  transform: translateY(-27px) rotate(45deg);
}

.flex-direction-nav li a:hover::before, .flex-direction-nav li a:hover::after {
    background-color: #003440;
  }

/*map*/
map-n-social {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.gmap {
  width:40%;
  float:left;
  margin-left: 5%;
}

/* DEBUGGING DIVS*/
/*div{ border: 1px solid red;}*/

/**/

.flex-container{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}
              
            
!

JS

              
                /**
$(window).scroll({
    previousTop: 0
  },
  function() {
    var currentTop = $(window).scrollTop();
    if (currentTop -50 < this.previousTop) {
      $(".navbar-header").fadeOut("slow");
    } else {
      $(".navbar-header").fadeIn("slow");
    }
    this.previousTop = currentTop;
  });
  **/
// found in this example:
// http://jsfiddle.net/Koedood/hx7cuh96/1/
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);

jQuery(document).ready(function($){
  //create the slider
  $('.cd-testimonials-wrapper').flexslider({
    selector: ".cd-testimonials > li",
    animation: "slide",
    controlNav: false,
    slideshow: true,
    slideshowSpeed: 8000,
    smoothHeight: true,
    start: function(){
      $('.cd-testimonials').children('li').css({
        'opacity': 1,
        'position': 'relative'
      });
    }
  });});
              
            
!
999px

Console