Free Code Camp Project: Portfolio

Tutorials of (Free code camp project: portfolio) by Kelli roncancio

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Free Code Camp Project: Portfolio</title>
  <script src="https://use.fontawesome.com/d9d2e41d17.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Open+Sans" rel="stylesheet">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>
  <!--nav bar begins-->
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <!--Brand and toggle get grouped for better mobile display-->
  <div class:"navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <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" id="small-initials"><span class="firstlast">K</span><span class="second-initial">M</span><span class="firstlast">R</span></a>
  </div>
  <!--nav links-->
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="nav navbar-nav navbar-right nudge">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#social">Social</a></li>
    </ul>
  </div>
</nav>
<!--navbar ends-->
<!--header begins-->
<br>
<br>
<div class="container-fluid" id="topName">
  <h1 class="initials-header" id="home">K<span class="second-initial">M</span>R</h1>
  <h3 class="name-header">Kelli Marie Roncancio</h3>
</div>
<br>
<!--header ends-->
<!--background picture begins-->
<div class="picOne">
</div>
<!--background picture ends-->
<!--about section begins-->
<div class="container sect" id="about">
  <h1 id="sectTitle">About</h1>
   <div class="row">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading skillTitles">HTML</div>
        <div class="panel-body skillBody">placeholder text goes here for now</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading skillTitles">CSS</div>
        <div class="panel-body skillBody">placeholder text goes here for now</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading skillTitles">jQuery</div>
        <div class="panel-body skillBody">placeholder text goes here for now</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading skillTitles">JavaScript</div>
        <div class="panel-body skillBody">placeholder text goes here for now</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading skillTitles">Ruby</div>
        <div class="panel-body skillBody">placeholder text goes here for now</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading skillTitles">Bootstrap</div>
        <div class="panel-body skillBody">placeholder text goes here for now</div>
      </div>
    </div>
  </div>
  <p id="aboutQuote">&#8220 Talk is cheap. Show me the code. &#8221 Linus Torvalds</p>
</div>
<!--about section ends-->
<!--background image begins again-->
<div class="picOne">
</div>
<!--background images ends again-->
<!--portfolio section begins-->
<div class="container sect" id="portfolio">
   <h1 id="sectTitle">Portfolio</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <figure>
          <img src="https://i.imgsafe.org/8f0a98d363.png" class="img-responsive" alt="picture of a computer monitor with colored squares on the screen"></img>
           <figcaption class="figure-caption">Coming Soon</figcaption>
        </figure>
      </div>
    <div class="col-md-4">
        <figure>
          <img src="https://i.imgsafe.org/8f0a98d363.png" class="img-responsive" alt="picture of a computer monitor with colored squares on the screen"></img>
           <figcaption class="figure-caption">Coming Soon</figcaption>
        </figure>
      </div>
  <div class="col-md-4">
        <figure>
          <img src="https://i.imgsafe.org/8f0a98d363.png" class="img-responsive" alt="picture of a computer monitor with colored squares on the screen"></img>
           <figcaption class="figure-caption">Coming Soon</figcaption>
        </figure>
      </div>
    </div>
<div class="row">
      <div class="col-md-4">
        <figure>
          <img src="https://i.imgsafe.org/8f0a98d363.png" class="img-responsive" alt="picture of a computer monitor with colored squares on the screen"></img>
           <figcaption class="figure-caption">Coming Soon</figcaption>
        </figure>
      </div>
    <div class="col-md-4">
        <figure>
          <img src="https://i.imgsafe.org/8f0a98d363.png" class="img-responsive" alt="picture of a computer monitor with colored squares on the screen"></img>
           <figcaption class="figure-caption">Coming Soon</figcaption>
        </figure>
      </div>
  <div class="col-md-4">
        <figure>
          <img src="https://i.imgsafe.org/8f0a98d363.png" class="img-responsive" alt="picture of a computer monitor with colored squares on the screen"></img>
           <figcaption class="figure-caption">Coming Soon</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<!--portfolio section ends-->
<!--background image begins again-->
<div class="picOne">
</div>
<!--background image ends again-->
<!--contact section begins-->
<div class="container sect" id="contact">
   <div class="row">
     <div class="col-md-12">
       <form class="form-horizontal" method="post">
         <fieldset>
           <legend class="text-center header">Contact Me</legend>
           <div class="form-group">
             <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
             <div class="col-md-8">
               <input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
             </div>
           </div>
           <div class="form-group">
             <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
             <div class="col-md-8">
               <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
             </div>
           </div>
           <div class="form-group">
             <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
             <div class="col-md-8">
               <input id="email" name="email" type="email" placeholder="Email Address" class="form-control">
             </div>
           </div>
           <div class="form-group">
             <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
             <div class="col-md-8">
               <input id="phone" name="phone" type="phone" placeholder="555-555-0124" class="form-control">
             </div>
           </div>
           <div class="form-group">
             <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
             <div class="col-md-8">
               <textarea class="form-control" id="message" name="message" placeholder="Type your message here. This is not currently a working form so I will not get your message right now." rows="6"></textarea>
             </div>
           </div>
           <div class="form-group">
             <div class="col-md-12 text-center">
               <button type="submit" class="btn btn-default btn-lg">Send</button>
             </div>
           </div>
         </fieldset>
       </form>
     </div>
  </div>
</div>
<!--contact section ends-->
<!--social section begins-->
<div class="container sect" id="social">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="row">
    <div class="social-icons" id="iconcolor">
      <a href="https://www.github.com/kmroncancio" target="_blank"><i class="fa fa-github fa-4x fa-fw" id="iconcolor"></i></a>
      <a href="#" target="_blank"><i class="fa fa-facebook-square fa-4x fa-fw" id="iconcolor"></i></a>
      <a href="https://www.codepen.io/kmroncancio" target="_blank"><i class="fa fa-codepen fa-4x fa-fw" id="iconcolor"></i></a>
      <a href="https://www.freecodecamp.com/kmroncancio" target="_blank"><i class="fa fa-free-code-camp fa-4x fa-fw" id="iconcolor"></i></a>
    </div>
  </div>
</div>
<!--social section ends-->
<!--footer begins-->
<div class="container" id="footerName">
  <p>&#169 <a href="https://www.freecodecamp.com/kmroncancio" target="_blank"> <span class="myName">Kelli Roncancio 2016</span></a></p>
</div>
<!--footer ends-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.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/ */
/*adding this to see if it changes the height of the divs - either it did or I did something different from the last try*/
html{
  height: 100%;
}
body{
  min-height: 100%;
  padding-top: 40px;
}
/*navbar styling*/
#small-initials{
  font-size: 20px;
}
.nudge{
  margin: 0px 10px 0px 0px;
}
.firstlast{
  color: rgb(0, 0, 0);
}
.second-initial{
  color: rgb(153, 152, 150);
}/*color of middle initial for navbar and initials in the header*/
/*header styling*/
.initials-header{
  text-align: center;
  font-size: 60px;
  font-weight: bold;
}
.name-header{
  font-family: Dancing Script, cursive;
  text-align: center;
  margin-top: 8px;
}/*full name styling*/
/*background picture for scrolling over*/
.picOne{
  height: 100vh;
  background-image: url("https://i.imgsafe.org/ee3d8e3e5a.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: auto;
  position: relative;
}
/*sets the height for each section in between the images - want to try and make the image height shorter, there is too much between the sections - try reducing the vh*/
.sect{
  height: 120%;
  background-color: white;
}
/*sets the font for all the section titles*/
#sectTitle{
  font-family: Open Sans, serif;
}
/*sets the styling for the quote in the about section*/
#aboutQuote{
  font-family: Open Sans, serif;
  text-align: right;
  margin: 20px;
  font-size: 15px;
  padding: 20px;
}
/*style for the figure caption of coming soon*/
.figure-caption{
  text-align: center;
  font-family: Monotype;
  font-weight: bold;
}
/*style for contact me header*/
.header{
  font-size: 25px;
  font-family: Open Sans, serif;
  padding: 35px 0px 10px 0px;
}
/*style for icons in the contact me form*/
.bigicon{
  font-size: 30px;
}
/*style for social icons at bottom of page*/
#iconcolor{
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 30px;
}
/*styles the footer copyright*/
#footerName{
  text-align: center;
}
.myName{
  color: rgb(0, 0, 0);
}
/* Downloaded from https://www.codeseek.co/ */
    var shiftWindow = function() { scrollBy(0, -50) };
    window.addEventListener("hashchange", shiftWindow);
    function load() { if (window.location.hash) shiftWindow(); }

This awesome code ( Free Code Camp Project: Portfolio ) is write by Kelli Roncancio, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Kelli Roncancio