Using Bootstrap, modify the code below to include a navbar, responsive layout an
ID: 3742306 • Letter: U
Question
Using Bootstrap, modify the code below to include a navbar, responsive layout and responsive images:
<head>
<meta charset="UTF-8">
<title>About | xxxxx xxxxxxx</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<header id="masthead">
<div class="container">
<a href="index.html" id="logo">xxxxx xxxxxxx</a>
<nav class= navbar navbar-default>
<a href="index.html">About</a>
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</header>
<div id="main-container" class="container">
<section class="main-section">
<h1>About Me</h1>
<img src="assets/images/sample.jpg" class="auth-image" alt="xxxxx xxxxxxx">
<p>An old-school techie making the move into web development, coding is but one of my varied interests: personal trainer, applications and systems programming, property management, radio announcer and TV/movie actor, and also technical writer.</p>
<p>One of my short-term goals is to run the 2019 LA Marathon, it will be my 4th! The training has begun and I'm very motivated to improve upon my personal best time. The training is grueling but the feeling of conquering that stadium to the sea course cannot be put into words. I plan to blog my training exploits with the LA RoadRunners Club! </p>
</section>
</div>
<footer>
<div class="container">
Copyright ©
</div>
</footer>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>About | xxxxx xxxxxxx</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<header id="masthead">
<div class="container">
<nav class= "navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" id="logo">xxxxx xxxxxxx</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div id="main-container" class="container">
<section class="main-section">
<img src="assets/images/sample.jpg" class="img-responsive" alt="xxxxx xxxxxxx" width="10%" height="10%">
<h1>About Me</h1>
<div class="jumbotron">
<p>An old-school techie making the move into web development, coding is but one of my varied interests: personal trainer, applications and systems programming, property management, radio announcer and TV/movie actor, and also technical writer.</p>
<p>One of my short-term goals is to run the 2019 LA Marathon, it will be my 4th! The training has begun and I'm very motivated to improve upon my personal best time. The training is grueling but the feeling of conquering that stadium to the sea course cannot be put into words. I plan to blog my training exploits with the LA RoadRunners Club! </p>
</div>
</section>
</div>
<footer>
<div class="container">
Copyright ©
</div>
</footer>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.