inside out project STEP-501 to STEP-502 index.html Code Changes
70 removals
133 lines
74 additions
137 lines
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="author" content="">
<title>welcome to me | Brian Savage</title>
<title>welcome to me | Brian Savage</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="assets/css/scrolling-nav.css" rel="stylesheet">
</head>
</head>
<body id="page-top">
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">welcome to me | Brian Savage</a>
<div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">welcome to me | Brian Savage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
</li>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
</li>
</li>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#education">Education</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#education">Education</a>
</li>
</li>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
</li>
</li>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
</li>
</li>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
</li>
</li>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
<li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</nav>
</nav>
<header class="bg-secondary text-white">
<header class="bg-secondary text-white">
<div class="container text-center">
<div class="container text-center">
<img class="rounded-circle img-fluid" src="http://via.placeholder.com/150x150" alt="Brian Savage">
<img class="rounded-circle img-fluid" src="http://via.placeholder.com/150x150" alt="Brian Savage">
<h1>Brian Savage</h1>
<h1>Brian Savage</h1>
<p class="lead">...inspired innovative technology leader & follower.</p>
<p class="lead">...inspired innovative technology leader & follower.</p>
</div>
</div>
</header>
</header>
<section id="about">
<main>
<div class="container">
<section id="about">
<div class="row">
<div class="container">
<div class="col-lg-8 mx-auto">
<div class="row">
<h2>Who I am...</h2>
<div class="col-lg-8 mx-auto">
<p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
<h2>Who I am...</h2>
<ul>
<p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
<li>Clickable nav links that smooth scroll to page sections</li>
<ul>
<li>Responsive behavior when clicking nav links perfect for a one page website</li>
<li>Clickable nav links that smooth scroll to page sections</li>
<li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
<li>Responsive behavior when clicking nav links perfect for a one page website</li>
<li>Minimal custom CSS so you are free to explore your own unique design options</li>
<li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
</ul>
<li>Minimal custom CSS so you are free to explore your own unique design options</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="experience" class="bg-light">
<section id="experience" class="bg-light">
<div class="container">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="col-lg-8 mx-auto">
<h2>What I have done...</h2>
<h2>What I have done...</h2>
<p class="lead"><strong>Experience:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<p class="lead"><strong>Experience:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="education">
<section id="education">
<div class="container">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="col-lg-8 mx-auto">
<h2>What I have learned...</h2>
<h2>What I have learned...</h2>
<p class="lead"><strong>Education: </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<p class="lead"><strong>Education: </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="skills" class="bg-light">
<section id="skills" class="bg-light">
<div class="container">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="col-lg-8 mx-auto">
<h2>What I can do...</h2>
<h2>What I can do...</h2>
<p class="lead"><strong>Skills: </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<p class="lead"><strong>Skills: </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="interests">
<section id="interests">
<div class="container">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="col-lg-8 mx-auto">
<h2>What inspiers me...</h2>
<h2>What inspiers me...</h2>
<p class="lead"><strong>Interests:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
<p class="lead"><strong>Interests:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="awards" class="bg-light">
<section id="awards" class="bg-light">
<div class="container">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="col-lg-8 mx-auto">
<h2>What makes me proud...</h2>
<h2>What makes me proud...</h2>
<p class="lead"><strong>Awards:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
<p class="lead"><strong>Awards:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<section id="contact">
<section id="contact">
<div class="container">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="col-lg-8 mx-auto">
<h2>Contact us</h2>
<h2>Contact us</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</main>
<footer class="py-5 bg-dark">
<footer class="py-5 bg-dark">
<div class="container">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2017</p>
<p class="m-0 text-center text-white">Copyright © Your Website 2017</p>
</div>
</div>
</footer>
</footer>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<script src="vendor/fontawesome/fontawesome-v509-all.js"></script>
<script src="assets/js/app.js"></script>
</body>
</body>
</html>
</html>