A Pen by Mori

Thumbnail
This awesome code was written by fmorisan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fmorisan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mori</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="darker-bg">
  <div class='container-fluid text-center'>
    <section class='portfolio-section dark-bg' id='intro'>
      <h1>Hola, soy <strong class="dark-bg-hl">Felipe Buiras</strong></h1>
      <hr class="divisor" />
      <h3>
        y <span id='things-i-do'></span><br />
        <small>por ahora</small>
      </h3>
    </section>
    <section class='portfolio-section medium-bg' id='projects'>
      <h1>Proyectos</h1>
      <hr class="divisor" />
      <ul>
        <div class="row">
          <li class="col-md-3 project">
            <img class="img-responsive center-block" src="http://placehold.it/200x200" alt="" />
            <p>
              Esta página
            </p>
          </li>
          <li class="col-md-3 project">
            <img class="img-responsive center-block" src="http://placehold.it/200x200" alt="" />
            <p>
              Otras cosas
            </p>
          </li>
          <li class="col-md-3 project">
            <img class="img-responsive center-block" src="http://placehold.it/200x200" alt="" />
            <p>
              Y demás
            </p>
          </li>
        </div>
      </ul>
    </section>
    <section class="portfolio-section dark-bg">
      <h1>Contacto</h1>
      <hr class="divisor" />
      <div class="row contact-row">
        <p class="col-md-offset-2 col-md-3 contact-text">
          e-mail: fmorisan[at]gmail[dot]com <br />
        </p>
        <div class="col-md-offset-2 col-md-3 contact-links">
          <a href="https://github.com/fmorisan"><i class="icon ion-social-github"></i></a>
          <a href="https://www.linkedin.com/in/felipe-buiras-09522ba6"><i class="icon ion-social-linkedin"></i></a>
          <a href="#"><i class="icon ion-social-whatsapp"></i></a>
          <a href="#"><i class="icon ion-paper-airplane"></i></a>
        </div>
      </div>
    </section>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/fmorisan/a-pen-by-mori-ZpGpAv */
.portfolio-section {
  padding: 100px 0px;
  margin: 0px;
}
.darker-bg {
  background-color: #111;
}
.dark-bg {
  color: #ccc;
  background-color: #333;
}

.medium-bg {
  background-color: #555;
  color: #eee;
}

.dark-bg-hl {
  color: #aae;
}

.container-fluid {
  width: 90%;
  /*
  padding: 0 !important;
  margin: 0 !important;
  */
}
ul .row {
  text-align: center;
}

.row li {
  display: inline-block;
  float: none;
}

ul {
  padding: 0;
  text-align: center;
}

.project {
  background-color: #555;
  padding-top: 20px;
}

.project p {
  margin-top: 20px;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
}

hr.divisor {
  width: 70%;
  border-width: 3px;
}

hr.divisor:after{
  content: " < / > ";
  display: inline-block;
  position: relative;
  top: -0.9em;
  color: #fff;
  font-size: 1.5em;
  padding: 0 1em;
}

.dark-bg hr.divisor:after {
  background-color: #333;
}

.medium-bg hr.divisor:after {
  background-color: #555;
}

.light-bg hr.divisor:after {
  background-color: #777;
}

i.icon {
  font-size: 2em;
  margin: 0.5em;
  color: #ccc;
}

.contact-row {
  margin-top: 50px;
}

.contact-text {
  text-align: left;
  font-family: Monospace;
}

.contact-links {
  text-align: right;
}

/*Downloaded from https://www.codeseek.co/fmorisan/a-pen-by-mori-ZpGpAv */
var main = function(){
  var stuff = [
    "diseño páginas web",
    "estudio Ingeniería en Computación",
    "me gustan los gatos",
    "tomo mucho mate",
    "trabajo muy duro, como un esclavo"
    ];
  var setThingsIDoSpanText = function(){
    var randomIndex = Math.floor(Math.random() * stuff.length);
    $("#things-i-do").text(stuff[randomIndex]);
  };
  setThingsIDoSpanText();
  setInterval(
    setThingsIDoSpanText,
    3000
  );
}

main();

Comments