Progress so far on the welcome page

To create the meet the team page I have been using W3schools and in particular bootstrap to get some different style ideas. Although I haven’t finished yet I feel the meet the team page now has all the main elements such as :

  • Navigation bar
  • search engine
  • photographs of the team
  • Header
  • Footer
  • Columns with basic text

I still need to adjust the photographs of the team so they are all the same size as some appear stretched or squashed at the moment and then need to work on the actual design but will need input from the rest of the group before deciding on a final design. So far I have just tried to keep it very simplistic text wise and have been using neutral colours so it can appeal to our chosen target audience of University students of both genders.

website

Above:Website so far


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">



<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="container">
<div class="jumbotron" background-color: #FOF8FF>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Anonymous Posting</a>
</div>
<div>


<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Meet the team</a></li>
<li><a href="#">Anonymous posts</a></li>
<ul class="nav navbar-nav">


<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
About <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">History</a></li>
<li><a href="#">University</a></li>
<li><a href="#">In the Press</a></li>
</ul>
</li>
</ul>



<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>


</ul>
</div>
</div>
</nav>
<h2><b>Anonymous Posting</b></h2>



</div>

<div class="container">
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>


<div class="container">
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>

</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
<div class="container">



<h2>Meet the team</h2>

<p>A quick introduction to the team who are making this website, and a bit about what they are interested in</p>
<div class="row">
<div class="col-md-4">
<img src="Darlene.jpg" class="img-rounded" alt="Cinque Terre" width="150" height="236">
<p>Darlene, interested in.....</p>


</div>
<div class="col-md-4">
<img src="rafiel.jpg" class="img-rounded" alt="Cinque Terre" width="150" height="236">
<p>Rafiel, interested in.....</p>


</div>
<div class="col-md-4">
<img src="becky.jpeg" class="img-rounded" alt="Cinque Terre" width="150" height="236">
<p>Becky, interested in.....</p>
</div>
</div>
</div>


<div id="footer">
Copyright © Anonymous.com
</div>

Above:my code so far

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