This is the progression of the “About the team” page that will be displayed on our website.  I used Bootstrap to help with the CSS. I have added a short paragraph about myself, and will add information about my group members shortly. We also will have a group picture that will be displayed on the page. 

Here is the code so far for this page:

<!doctype html>

<html>

   <head>
       <title> Meet the Team </title>
       <link rel=“stylesheet” href=“css/bootstrap.css”>
       <link rel=“stylesheet” href= “styles.css”>
   </head>

       <body>
           <nav class=“navbar navbar-default”>
 <div class=“container-fluid”>
   <!– Brand and toggle get grouped for better mobile display –>
   <div class=“navbar-header”>
     <button type=“button” class=“navbar-toggle collapsed” data-toggle=“collapse” data-target=“#bs-example-navbar-collapse-1”>
       <span class=“sr-only”>Toggle navigation</span>
       <span class=“icon-bar”></span>
       <span class=“icon-bar”></span>
       <span class=“icon-bar”></span>
     </button>
     <a class=“navbar-brand” href=“#”>SOBU</a>
   </div>

   <!– Collect the nav links, forms, and other content for toggling –>
   <div class=“collapse navbar-collapse” id=“bs-example-navbar-collapse-1”>
     <ul class=“nav navbar-nav”>
       <li class=“active”><a href=“#”>Link <span class=“sr-only”>(current)</span></a></li>
       <li><a href=“#”>Link</a></li>
       <li class=“dropdown”>
         <a href=“#” class=“dropdown-toggle” data-toggle=“dropdown” role=“button” aria-expanded=“false”>Dropdown <span class=“caret”></span></a>
         <ul class=“dropdown-menu” role=“menu”>
           <li><a href=“#”>Action</a></li>
           <li><a href=“#”>Another action</a></li>
           <li><a href=“#”>Something else here</a></li>
           <li class=“divider”></li>
           <li><a href=“#”>Separated link</a></li>
           <li class=“divider”></li>
           <li><a href=“#”>One more separated link</a></li>
         </ul>
       </li>
     </ul>
     <form class=“navbar-form navbar-left” role=“search”>
       <div class=“form-group”>
         <input type=“text” class=“form-control” placeholder=“Search”>
       </div>
       <button type=“submit” class=“btn btn-default”>Submit</button>
     </form>
     <ul class=“nav navbar-nav navbar-right”>
       <li><a href=“#”>Link</a></li>
       <li class=“dropdown”>
         <a href=“#” class=“dropdown-toggle” data-toggle=“dropdown” role=“button” aria-expanded=“false”>Dropdown <span class=“caret”></span></a>
         <ul class=“dropdown-menu” role=“menu”>
           <li><a href=“#”>Action</a></li>
           <li><a href=“#”>Another action</a></li>
           <li><a href=“#”>Something else here</a></li>
           <li class=“divider”></li>
           <li><a href=“#”>Separated link</a></li>
         </ul>
       </li>
     </ul>
   </div><!– /.navbar-collapse –>
 </div><!– /.container-fluid –>
</nav>
           <div class=“jumbotron text-center”>
           <h1>Meet the team. </h1>
              </div>
       <div class=“container”>
           <div class=“row”>
               <div class=“col-lg-4”>
       <h2> Adam Hale</h2>
           <img src= “https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10985274_10203779385430290_7669110639618425300_n.jpg?oh=aebec59d2ccadb5924b879633f4fd709&oe=555402A1&__gda__=1435135940_e164b5a28f90e31f7b6a47d562877705&rdquo;  class=“img-responsive”/>
       <p>Hi, my name is Adam Hale. I’m 18 and from Oxford. I am passionate about Social media, music and film. </p>  
               </div>
       <div class=“col-lg-4”>
           <h2> Hallam Ager</h2>
           <img src=“https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10574274_10203109790842816_6906926752620006251_n.jpg?oh=f35ff3c69409fd1f2a0ff37397f7e3a6&oe=5585F929 ”  class=“img-responsive”/>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
               </div>
               <div class=“col-lg-4”>
           <h2> Robin Osolinski</h2>
           <img src=“https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10615444_1067959073217975_1984160959799188718_n.jpg?oh=83b0d9a477cf7f9e7ee1446e9e1d4f33&oe=5595956D&__gda__=1431088722_f62546ca2f85f08ce57ccb7f8ff316ba&rdquo; class=“img-responsive”/>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
               </div>
       </div>
   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script&gt;
   </body>

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s