Responsive Web Page
Design a web page that should contain Bootstrap’s the responsive navigation bar, a responsive circle image, and a responsive footer.
Topic Coverage: Bootstrap’s responsive navigation bar, circle image, footer and overriding Bootstrap classes.
The snapshot of the web page is given below:
Image 1: Web page in large devices
Image 2: web page in small devices:
Key Points:
1. Add responsive features to the navigation bar. The collapsing nature is tripped by a button with the id ‘btn-id’ belongs to Bootstrap’s navigation toggle and collapsed classes and then features two data- elements: data-toggle and data-target. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates various elements like navigation links, forms, and other contents to toggle. Set appropriate values for these attributes.
2. Set the navigation brand as ‘MyBrand’.
3. Create three icon bars (hamburger button) with an appropriate Bootstrap class. This will toggle the elements that are in the navigation collapsible div tag.
4. Set necessary Bootstrap classes to make the image rounded circle and responsive, so that, it can automatically adjust to fit the size of the screen.
The web page ‘responsive.html’ template is given. You have to write the code only in the specified part of the 'responsive.html' file and 'app.css' file.
SOLUTION:
<!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button id = "btn-id" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MyBrand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid container-sm-height">
<div class="row row-sm-height">
<section class="col-sm-5 col-lg-6 col-sm-height">
<article>
<!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE IMAGE -->
<img src="nature.jpg" class="img-circle img-responsive">
<div class="row">
<p class="col-sm-10">
I was a reader for two national screenplay competitions. I was an assistant to the president of
a talent management company, where I read screenplays that were submitted for consideration for Oscar
and Emmy-nominated actors as well as Oscar-nominated producers.
</p>
<div class="col-sm-2">
<input type="button" class="btn btn-primary" value="More..." />
</div>
</div>
</article>
</section>
</div>
</div>
<footer class="container-fluid">
<p class="col-sm-10">Story Board</p>
</footer>
</body>
</html>
