css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>

  <!-- Home -->

  <div id="home"></div>
  <div class="container-fluid homesection">
    <nav class="navbar  navbar-inverse navbar-fixed-top custom1">
      <div class="container-fluid">


        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

          <a class="navbar-brand" href="#">Felipe Demaria Portfolio</a>
        </div>


        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">Home</a></li>
            <li><a href="#aboutme">About Me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>


    <div class="row">
      <div class="col-xs-12">
        <h1>  Front End Development </h1>
      </div>
    </div>
  </div>


  <!-- About me  -->

  <div id="aboutme"></div>
  <div class="container-fluid infoaboutme">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h3> About me</h3>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-7 col-md-7">
        <p>My name is Felipe Demaria, I´m just a regular guy from Southamerica, Argentina. I have 23 years old, and discover a new passion: building webs. </p>
        <p>I was always interested in computers, and when i find out the process of creating something from scratch, using news skills, like coding, it was fascinating!</p>
        <p>I have to learn syntax and semantics,and then complement this process with an open mind, to give each web page a creative layout and design! Once this process is finished, and I look this whole web I create, is a rewarding feeling!! </p>
        <p>I´m learning for my good friend google, reading every piece of information i can from web developers sites, and also using a great page:Freecodecamp.Right now my aim is to become a Front end developer, and maybe in the future gain experience with
          back-end development too!</p>
        <p>When I´m not coding, i really like outdoors activities, i will be on the beach chilling or surfing some good waves!</p>
      </div>
      <div class="col-sm-5 col-md-5">
        <img class="img-responsive center-block  myphoto" src="https://s6.postimg.org/z3nados81/P1060884.png">
      </div>
    </div>
  </div>


  <!-- SKILLSET-->


  <div class="container skillsetbox">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <h3>Skills</h3>
      </div>
    </div>

    <div class="row">

      <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img class="skillimage img-responsive center-block" src="https://cdn0.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png">
        <p>I used the last version of HTML! It is the standard markup language for creating web pages and web applications!</p>
      </div>


      <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img class="skillimage img-responsive center-block" src="http://www.myiconfinder.com/uploads/iconsets/8b61de4c84033266e15317a6eb9fda2d-css3.png">
        <p>CCC (Cascading Style Sheets) is another important tool to describe the presentation of the document, manage the layout and the visual style of the webpage. </p>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <img class="skillimage img-responsive center-block" src="http://marketplace.intelledox.com/wp-content/uploads/edd/2017/01/Bootstrap.png">
        <p> The best framework for front end developers like me! </p>
      </div>

      <!--</div>-->


      <!--<div class="row">-->

      <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 col-sm-offset-1 col-md-offset-1">
        <img class="skillimage img-responsive center-block" src="http://simpleicon.com/wp-content/uploads/responsive-design.svg">
        <p>All my web pages are made with responsive design. No matter the device: desktop, cell phone, tablet, they will function properly.</p>
      </div>


      <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 col-xs-offset-3 col-sm-offset-1 col-md-offset-1  columna ">
        <img class="skillimage img-responsive center-block" src="http://www.myiconfinder.com/uploads/iconsets/8b3b58e4c5c268c29516bd9e64f41804.png">
        <p>Javascript is the programming language for the web, so i'm continuously studying its libraries and his frameworks also.</p>
      </div>
    </div>

  </div>

  <!-- PROJECTS -->
  <div id="projects"></div>
  <div class="container-fluid projects">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <h3>Projects</h3>
      </div>
    </div>


    <div class="row customrows">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <a href="https://codepen.io/fdemaa/full/gWzJgE/" target="_blank"><img class="img-thumbnail img-responsive projectsimages" src="https://box.everhelper.me/attachment/945628/b7d056a0-3a3f-46f9-b277-acfc2470a67d/817646-gtBGYHXVKLD2WZKo/screen.png"></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 customcol">
        <p>This whats a tribute page i make for the basics front end projects from freecodecamp. It was really fun because it was the frist thing i create with html and css. A static single page that i make it responsive using mediaqueries.
        </p>
      </div>
    </div>

    <div class="row customrows">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-push-6  ">
        <a href="https://codepen.io/fdemaa/full/NgmWvm/om" target="_blank"><img class="img-thumbnail img-responsive projectsimages" src="https://s6.postimg.org/ddqq6uo2p/screen.png"></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-pull-6 customcol">
        <p>Mi first project using a programming language (Javascript).I create a random quote generator based on the popular tv show of  Game of thrones. I also use an ajax call to an api with the XMLHttp object.</p>
        <p>For the syle of the web I use bootstrap, css and html.</p>
      </div>
     </div>


    <div class="row customrows">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <a href="https://codepen.io/fdemaa/full/WEjNVR/" target="_blank"><img class="img-thumbnail img-responsive projectsimages" src="https://s.nimbus.everhelper.me/attachment/1065121/8iezpfhf1pro9m0wudul/817646-TmEJFBhFXu6MxqAm/screen.png"></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 customcol">
        <p>I used the FCC weather api to make a simple weather page. I use geolocation of the user browser to calculate the latitude and longitude of his position. Then I use it on the API to get the current weather data. I also add two functionalities: A temperature converter and an icon of the current weather.I use plain javascript and for the design bootstrap.</p>
      </div>
    </div>

    <div class="row customrows">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-push-6">
        <a href="http://placeholder.com" target="_blank"><img class="img-thumbnail img-responsive projectsimages" src="https://egyptianstreets.com/wp-content/uploads/2015/11/freelance-work-ftr.jpg"></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-pull-6 customcol">
        <p>This project is not finish yet!</p>
      </div>
    </div>
  </div>


  <!--Contact  -->

  <div id="contact"></div>
  <div class="container-fluid contact">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <h3>Contact</h3>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-10 col-sm-8 col-xs-offset-1 col-sm-offset-2">

        <form>
 
          <div class="form-group">
            <label for="form_name">Name (optional)</label>
            <input type="Name" class="form-control" id="#" placeholder="Name">
          </div>


          <div class="form-group">
            <label for="exampleInputEmail1">Email addres</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>

<!--
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>


-->
          <div class="form-gruop">
            <label for="form_message">Message</label>
            <textarea id="form-message" name="message" class="form-control" placeholder="Message for me" rows="6"></textarea>
          </div>


          <input type="submit" class="btn btn-success btn-send" value="Send Message">

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


  <div class="container-fluid socialmedia">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <a href="https://www.facebook.com/felipe.demaria.1" target="_blank"><i class="fa fa-facebook-official face"></i></a>
        <a href="https://github.com/fdemaa" target="_blank" <i class="fa fa-github git"></i>
        </a>
        <a href="https://www.freecodecamp.com/fdemaa" target="_blank"><i class="fa fa-free-code-camp freecodecamp"></i></a>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-md-12 mydata">
        <p>Email: felipedemaria@hotmail.com</p>
        <p>Gmail: felibss@gmail.com</p>
        <p>Cellphone:+54 223-521-0762</p>
      </div>
    </div>

  </div>

  <footer>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <p>Copyright © 2017 Felipe Demaria. All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>


</body>
            
          
!
            
              /*Add the  font syles for p and h3*/

h3 {
  text-align: center;
  font-size: 5rem;
  font-family: 'Indie Flower', cursive;
  margin-top: 5%;
  margin-bottom: 5%;
}

p {
  font-family: 'Cabin', sans-serif;
}

/*Home section */

.custom1 {
  padding: 10px;
}

li, .navbar-brand {
  font-size: 2rem;
}

li {
  margin-left: 20px;
}

.homesection {
  margin-top: 70px;
  height: 900px;
  background-image: url("https://s6.postimg.org/sl90g2sm9/portfoliobg1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.homesection h1 {
  position: relative;
  top: 300px;
  text-align: center;
  font-family: 'Indie Flower', cursive;
  font-size: 7rem;
  color: beige;
}

/*About me */

.infoaboutme {
  background-color: rgb(245, 245, 220);
  padding-left: 4%;
  padding-bottom: 10%;
}

.infoaboutme p {
  font-size: 2rem;
  text-aling: left;
}

.myphoto {
  height: 70%;
  width: 70%;
}

/* SKILLSET */

.skillsetbox {
  /*background-color: rgb(245, 245, 220);*/
  padding-bottom: 10%;
}

.skillsetbox p {
  font-size: 2rem;
  text-align: center;
}

.skillimage {
  height: 50%;
  width: 50%;
  margin-bottom: 10%;
  margin-top: 10%;
}

/* Projects*/

.customrows {
  margin-bottom: 5%;
}

.projects {
  background-color: rgb(233, 244, 255);
  padding-bottom: 5%;
  padding-left: 4%;
  padding-right: 4%;
}

.projectsimages {
  height: 100%;
  width: 100%;
}

.projects p {
  margin-top: 10%;
  text-align: center;
  font-size: 2rem;
}

.thumbnail {
  box-shadow:black;
}

/*Contact*/

.contact {
  background-color: beige;
  padding-bottom: 5%;
}

/* Social Media */

.socialmedia {
  text-align: center;
  padding: 5%;
}

.fa {
  font-size: 70px;
}

.face {
  color: rgb (59, 89, 152);
}

.git {
  margin-left: 5%;
  margin-right: 5%;
  color: black;
}

.freecodecamp {
  color: green;
}

.mydata p {
  margin-top: 2%;
  font-size: 2rem;
  text-align: center;
}

/*Footer*/

footer {
  background-color: black;
  padding: 2%;
}

footer p {
  color: white;
  font-size: 1.4rem;
  text-align: center;
}

/* Media Queries */

/* I change the height of the homesection div, to scale my background image, and also change the position of my h1 headers */

@media screen and (min-width: 1000px) and (max-width: 1300px) {
  .homesection {
    height: 700px;
  }

  .homesection h1 {
    top: 300px;
    font-size: 4rem;
  }
}

@media screen and (min-width: 800px) and (max-width: 999px) {
  .homesection {
    height: 600px;
  }

  .homesection h1 {
    top: 200px;
    font-size: 4rem;
  }
}

@media screen and (min-width: 600px) and (max-width: 799px) {
  .homesection {
    height: 450px;
  }

  .homesection h1 {
    top: 150px;
    font-size: 4rem;
  }
}

@media screen and (min-width: 492px) and (max-width: 599px) {
  .homesection {
    height: 350px;
  }

  .homesection h1 {
    top: 100px;
    font-size: 3rem;
  }
}

@media screen and (min-width: 291px) and (max-width: 491px) {
  .homesection {
    height: 250px;
  }

  .homesection h1 {
    top: 80px;
    font-size: 2rem;
  }
}

/* The brand of my navbar is set to a smaller font-size */

@media screen and (min-width:291px) and (max-width: 345px) {
  .navbar-brand {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 300px) and (max-width: 768px) {
  .myphoto {
    height: 40%;
    width: 40%;
  }
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console