Responsive Web Page bootstrap cognizant handson

Responsive Web Page Bootstrap Cognizant Handson Solutions

Bymadwithcode

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. 

responsive.html

<!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" role="navigation">
            <div class="container-fluid">

                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                   
<!-- FILL YOUR CODE FOR BRAND AND TOGGLE (ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
<button id="btn-id" class="navbar-toggle collapsed" type="button" 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 href="#" class="navbar-brand">MyBrand</a>
                </div>


                <!-- Collect the nav links, forms, and other contents for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#sports">Sports</a></li>
                        <li><a href="#activities">Activities</a></li>
                        <li><a href="#contact-us">Contact Us</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </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 class="img-circle img-responsive" src="nature.jpg" alt=""/>

       <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>

Similar Posts