<html lang="en">
  <head>
    <title>Portfolio Using Bootstrap 4</title>
  </head>
  <body>
    <!--A black horizontal navbar that becomes vertical on small screens -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <!--Brand-->
      <a class="navbar-brand" href="#">Logo</a>
      <!--Toggler/collapsible Button-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenuContent">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navbar Links -->
      <div class="collapse navbar-collapse" id="navbarMenuContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        <!--Dropdown-->
        
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Link</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
          </div> 
        </li> <!--End Dropdown--> 
      </ul> 
      
      <form class="form-inline my-2 my-lg-0" action="/action_page.php">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
      </form> 
     </div> <!-- End Collapsed NavBar-->
    </nav>
    <!-- End Navbar-->
   
   <main class="main">
    <!--Jumbotron-->
    <div class="jumbotron jumbotron-fluid text-center">
      <div class="container">
        <h1 class="vertical-align-center">My Portfolio</h1>
        <p>Some of my personal work.</p>
      </div>
    </div>
   <!--End Jumbotron-->
    
   <!--Begin Gallery-->
    <div class="container-fluid text-center">
      <div class="row divider mb-2 border-bottom">
        <div class="col-sm-12">
        <h3>Some of my work</h3>
        <p>Here are some pictures of my work.</p>
        </div>
      </div>
      <!-- Gallery first row-->
      <div class="row mt-4">
        <div class="col-sm-3">
          <div class-"card">
            <img class="card-img-top" data-src="holder.js/100px225" alt="Thumbnail Image card cap">
            <div class="card-body">
              <h5 class="card-title">Project Title</h5>
              <p class="card-text">With supporting text below leading to additional content</p>
              <a href="#" class="btn btn-primary">Learn More!</a>
            </div>
          </div>
        </div> <!--End Picture 1-->
        
        <div class="col-sm-3">
          <div class-"card">
            <img class="card-img-top" data-src="holder.js/100px225" alt="Thumbnail Image card cap">
            <div class="card-body">
              <h5 class="card-title">Project Title</h5>
              <p class="card-text">With supporting text below leading to additional content</p>
              <a href="#" class="btn btn-primary">Learn More!</a>
            </div>
          </div>
        </div> <!--End Picture 2-->
        
        <div class="col-sm-3">
          <div class-"card">
            <img class="card-img-top" data-src="holder.js/100px225" alt="Thumbnail Image card cap">
            <div class="card-body">
              <h5 class="card-title">Project Title</h5>
              <p class="card-text">With supporting text below leading to additional content</p>
              <a href="#" class="btn btn-primary">Learn More!</a>
            </div>
          </div>
        </div> <!--End Picture 3-->
        
        <div class="col-sm-3">
          <div class-"card">
            <img class="card-img-top" data-src="holder.js/100px225" alt="Thumbnail Image card cap">
            <div class="card-body">
              <h5 class="card-title">Project Title</h5>
              <p class="card-text">With supporting text below leading to additional content</p>
              <a href="#" class="btn btn-primary">Learn More!</a>
            </div>
          </div>
        </div> <!--End Picture 4-->  
    </div>  
   <!--End Gallery first row-->
   </div> <!--End Gallery Container-->
   <div class="container-fluid personal">  
      <div class="row about mt-4">
        <div class="col-sm-6 px-4">
          <h3 class="mt-2 py-2 text-center">About T. Lanette Pollard</h3>
          <p class="text-justify px-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Facilisis magna etiam tempor orci eu lobortis. Faucibus purus in massa tempor nec. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. </p>
        </div>
        <div class="col-sm-6 px-4">
          <h3 class="my-2 py-2 text-center">Acquired Skills</h3>
          <div class="progress">
            <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
              HTML5 90%  
            </div>
          </div><br> <!--HTML5-->
          <div class="progress">
            <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
              CSS 85%  
            </div>
          </div> <br><!--CSS-->
          <div class="progress">
            <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              JavaScript 50%  
            </div>
          </div><br><!--JavaScript-->
          
        </div> <!-- End Progress section -->
      </div><!-- End About/Progress row-->
     </div> <!--End Personal Container-->
      
     <footer class="container-fluid footer bg-dark text-light mt-2">
       <div class="row">
         <div class="col-sm-4 pt-4 text-center">
           <p>Content</p>
         </div>
         <div class="col-sm-4 pt-4 text-center">
           <p>Content</p>
         </div>
         <div class="col-sm-4 pt-4 text-center">
           <p>Content</p>
         </div>
       </div>
     </footer>
    </main> 
 </body>
/*Colors f76262 216583 65c0ba cffdf8 */

/*Adds pink color to the navbar with a little bit of see-through/opague */

* {
  box-sizing: border-box;
}

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/1148131/holder.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/1148131/holder.min.js