CodePen Embed - Freecodecamp: Personal Portfolio

<head>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>
<!--Menu-->


<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-brand visible-xs">
        Paula Guijarro - Portfolio
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="nav navbar-nav">
        <li><a href="#home" class="scroll">Home</a></li>
        <li><a href="#about" class="scroll">About</a></li>
        <li><a href="#portfolio" class="scroll">Portfolio</a></li>
        <li><a href="#contact" class="scroll">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!--Fin Menu-->


<!--Home-->

<div class="home" id="home">
  <div class="container">

    <blockquote class="blockquote blockquote-reverse hidden-xs">
      <h1><strong>Paula Guijarro</strong></h1>
      <h1>PERSONAL PORTFOLIO</h1>
    </blockquote>
  </div>
</div>

<!--Fin Home-->

<!--About-->

<div class="about" id="about">
  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center">About me</h1>
        <br>
      </div>
    </div>

    <div class="row">

      <div class="col-md-6">
        <div class="well extra">

          <p>
            En desarrollo
            <br> Y más desarrollo
           </p>

          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
               <div class="panel-heading" role="tab" id="heading1">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"><strong>HTML y CSS</strong></a>
                </h4>
              </div>
              <div id="collapse1" class="panel-collapse collapse in" role="tabPanel" aria-labelledby="heading1">
                <div class="panel-body">
                  Más desarrollo
                  <br> Desarrollo
                </div>
              </div>
            </div>

           
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading1">
                   <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2"><strong>EDICIÓN DE VÍDEOS</strong></a>
                  </h4>
                  </div>
                <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                  <div class="panel-body">
                    Desarrollo de vídeos
                    <br>
                    desarrollo                    
                  </div>                             
              </div>
            </div>

            
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading3">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapse3"><strong>OTROS</strong></a>
                  </h4>
                </div>
                <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                  <div class="panel-body">
                    En desarrollo
                    <br>
                    desarrollo
                  </div>
                </div>
              </div>
            
            </div>

          </div>
        </div>


        <div class="col-md-6 hidden-xs hidden-sm">
          <img class="img-responsive img-rounded" src="https://lh3.googleusercontent.com/-qSErZhXOn6I/Vz7-7hoQWmI/AAAAAAAAOv8/wFqQOj-A1mAhgpg6PCol6_3l4MCG1GcqQCCo/s2048/Fondo%2BPau-06-recortado.jpg" width="500px">
        </div>

      </div>

    </div>
  </div>


  <!--Fin About-->

  <!--Portfolio-->

  <div class="portfolio" id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <h1 class="text-center">Portfolio</h1>
          <p class="text-center">Aquí puedes ver fotogramas de algunos de mis vídeos editados</p>
        </div>
       </div>
      <div class="row">
        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="https://lh3.googleusercontent.com/-4M9fQ5fWOx0/VzoqDrp-mZI/AAAAAAAAOug/fpAv3wYyonYhy4--P8Y9N9zl1Bi2J6C_wCCo/s2048/Complutense.jpg" alt="En la Complutense">
            <div class="caption">
              <h4>Patines en la Complutense</h4>
              <p>Fotograma del vídeo del atardecer haciendo conos en la Universidad Complutense</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="https://lh3.googleusercontent.com/-4_P7YOlfXvU/VzoqDrYAolI/AAAAAAAAOug/WzC93D1rhvAx1XJDDb-G2sctPQoTPxPdACCo/s2048/Nochevieja.jpg" alt="Patines Nochevieja">
            <div class="caption">
              <h4>Nochevieja en patines</h4>
              <p>Fotograma de la intro del vídeo de la ruta en patines por Madrid el último día del año </p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="https://lh3.googleusercontent.com/-UkTQTbKevBw/VzoqD-HSUVI/AAAAAAAAOug/BltUR_AHi2IAAngMW_gZFLnAJu2Spwn5ACCo/s2048/Cerler.jpg" alt="Cerler">
            <div class="caption">
              <h4>Snow en Cerler</h4>
              <p>Fotograma de la intro del vídeo practicando snow en Cerler en enero de 2015 </p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="https://lh3.googleusercontent.com/-WtK40-Ylfpc/VzoqD9rpraI/AAAAAAAAOug/pb4ESkf2VjwkTr1hg5JCBf7aOJ6aWmjowCCo/s2048/Palamos.jpg" alt="Palamos">
            <div class="caption">
              <h4>Piscina de La Fosca</h4>
              <p>Fotograma del vídeo grabado en la piscina de Palamós</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="https://lh3.googleusercontent.com/-jgPT2MoITdg/VzoqDivloBI/AAAAAAAAOug/d6cMhJKelF0ErMuw5-TPhxPWDXa0PnoPgCCo/s2048/ElsPobletsNoviembre.jpg" alt="Intro Els Poblets">
            <div class="caption">
              <h4>Intro vídeo grabado en Els Poblets</h4>
              <p>Fotograma de la intro del vídeo grabado en Els Poblets en noviembre de 2015</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-xs-12">
          <div class="thumbnail">
            <img src="https://lh3.googleusercontent.com/-922kAT024SQ/VzoqDSCN0iI/AAAAAAAAOug/nKPN2ztzXP8qkPOzYNK0aUYtrNbRxtG8QCCo/s2048/ElsPobletsFebrero.jpg" alt="Conos Playa">
            <div class="caption">
              <h4>Slalom con piedras en la playa</h4>
              <p>Fotograma del vídeo grabado en la playa de Els Poblets haciendo slalom con piedras</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>


  <!--Fin Portfolio-->

  <!--Contact-->

  <div class="contact" id="contact">
    <div class="container">
      <h1 align=center>Contact me</h1>
      <br>
      <center>
        <img src="https://lh3.googleusercontent.com/-f9I0HQFVMr8/Vz7iQAlMfTI/AAAAAAAAOvE/5CYQNl1b-9cl5bblU6mluqc8SGEzLsDoACCo/s2048/Espiral1.gif" width="200" height="200">
        <br>
        <br>
        <a href="mailto:paulaguijarro@gmail.com" target="_blank" role="button" class="btn btn-primary"><span class="fa fa-envelope"></span> E-mail</a>
        <a href="https://github.com/PaulaGuijarro" target="_blank" role="button" class="btn btn-warning"><span class="fa fa-github"></span> Github</a>
        <a href="https://www.freecodecamp.com/PaulaGuijarro" target="_blank" role="button" class="btn btn-success fccbutton"><span class="fa fa-fire"></span> Free Code Camp</a>
      </center>
      <br>
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-md-8 col-md-offset-2 control-label" for="inputName">Nombre</label>
              <div class="col-md-8 col-md-offset-2">
                <input class="form-control" id="inputName" placeholder="Nombre" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-8 col-md-offset-2 control-label" for="inputEmail">Email</label>
              <div class="col-md-8 col-md-offset-2">
                <input class="form-control" id="inputEmail" placeholder="Email" type="email">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-8 col-md-offset-2 control-label" for="inputMessage">Mensaje</label>
              <div class="col-md-8 col-md-offset-2">
                <textarea class="form-control" id="inputMessage" placeholder="Mensaje" rows="5"></textarea>
                <br>
                <button class="btn btn-primary pull-right pop" type="submit" data-toggle="popover" title="Vaya..." data-content="Esto todavía no funciona">Enviar</button>
              </div>
            </div>
          </form>
        </div>
      </div>
     </div>
  </div>
<!--Fin Contact-->



/*Navbar*/

.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

.navbar .navbar-collapse {
  text-align: center;
}

body{
  font-size: 16px;
}
h1{
    font-size: 2em;
}

.navbar-brand{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}

/*Fin de Navbar*/

  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Pacifico;
    width: 100%;
    }

.extra{
  height : 480px;
}

/*BG*/

.home {
  background: url('https://lh3.googleusercontent.com/-N972KISC-6U/VzfJCFuU_YI/AAAAAAAAOsc/hWSMUzacdmQvCr_H4Zy2mYYcUtkkvZRsACCo/s2048/DSC_0297-blancoynegro.jpg') no-repeat center center fixed;
 background-size: cover;
  height:100%;
  width:100%;
  padding-top: 60px;
}


.about {
  background: url('https://lh3.googleusercontent.com/-AcWr5_cFuKM/Vzhh0t3QCJI/AAAAAAAAOtE/BYyyhvdCgP0YEIScNmoVewX-O1QmxiHuQCCo/s2048/LOGO5.jpg') no-repeat center center fixed;
  background-size: cover;
  height:100%;
 /* width:100%; */
  padding-top: 60px;
}

.portfolio {
  background-color: #ebebeb;
  background-size: cover;
  /*height:100%;
  width:100%;*/
  padding-top: 60px;
}

.contact {
  background-color: #ebebeb;
  background-size: cover;
  /*height:100%; */
  width:100%; 
  padding-top: 70px;
  padding-bottom : 80px;
}

/*Fin de BG*/

.home .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

$(document).ready(function() {
  $(".scroll").click(function(event) {
    event.preventDefault();
    $("html,body").animate({
      scrollTop: $(this.hash).offset().top
    }, 500);
    $('.navbar-default a').removeClass('selected');
    $(this).addClass('selected');
  });
});

$(function() {

  $('button.pop').click(function(e) {

    e.preventDefault();

  });

  $('button.pop').popover();

});

This Pen is owned by Paula on CodePen.

See more by @PauJam on CodePen

External CSS

External JavaScript