Finished layout with all basic navigations implemented.

This commit is contained in:
Harrison Deng 2016-03-28 00:41:03 -05:00
parent 077bd0b938
commit a67c362b76
11 changed files with 267 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 KiB

86
contactus.html Normal file
View File

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="shortcut icon" type="image/png" href="assets/logos/mttalogo64x64.png"/>
<title>MTTA Contact Info</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- CDN for fontawesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<!-- 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="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="index.html">MTTA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="news.html">News</a></li>
<li class="active"><a href="">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="jumbotron lined-paper-bg">
<h3>Ron Edwards</h3>
<p>Executive director<br>Tel. 925-5690 <br> Fax 925-5916 <br> table.tennis@sportmanitoba.ca</p>
</div>
</div>
<div class="container">
<div class="jumbotron lined-paper-bg">
<h3>Tomas Chromec</h3>
<p>Athlete Development Director<br>Tel. 925-5943 <br> Fax 925-5916 <br> mtta.coach@sportmanitoba.ca</p>
</div>
</div>
<div class="container">
<div class="jumbotron lined-paper-bg">
<h3>Jiayun Du</h3>
<p>Athlete Development Director<br>Tel. 925-5943 <br> Fax 925-5916 <br> mtta.asst@sportmanitoba.ca </p>
</div>
</div>
<div class="container">
<div class="jumbotron lined-paper-bg">
<h3>MTTA Office</h3>
<p> 145 Pacific Avenue, <br> Winnipeg, MB., R3B 2Z6</p>
</div>
</div>
<div class="container center">
<p style="font-size: 20px;">Follow us at: <a href="https://twitter.com/MbTableTennis"><i class="fa fa-twitter"></i></a> <a href="https://www.facebook.com/tabletennismanitoba"><i class="fa fa-facebook"></i></a> <a href="https://instagram.com/mbtabletennis/"><i class="fa fa-instagram"></i></a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -1,12 +1,12 @@
body { body {
background-image: url(../assets/patterns/cheap_diagonal_fabric.png); background-image: url(../assets/patterns/cheap_diagonal_fabric.png);
padding-top: 50px; padding-top: 55px;
} }
.jumbotron { .jumbotron {
padding: 25px; padding: 25px;
padding-top: 50px; padding-top: 100px;
padding-bottom: 50px; padding-bottom: 100px;
} }
.navbar { .navbar {
@ -29,3 +29,22 @@ ul.nav {
color: white; color: white;
background-image: url(../assets/patterns/dark_embroidery.png); background-image: url(../assets/patterns/dark_embroidery.png);
} }
.center {
text-align: center;
}
.lined-paper-bg {
color: black;
background-image: url(../assets/patterns/linedpaper.png);
}
.padding {
padding: 32px 32px 32px 32px;
}
.main {
background-image: url(../assets/Landscape-images/CWG%20Team%201_edited-1.jpg);
background-size: cover;
color: beige;
}

66
events.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="shortcut icon" type="image/png" href="assets/logos/mttalogo64x64.png"/>
<title>MTTA Events</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- CDN for fontawesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<!-- 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="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="index.html">MTTA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="">Events</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<iframe src="https://calendar.google.com/calendar/embed?src=63m7qv4e24q1td38fbb42emfos%40group.calendar.google.com&ctz=America/Winnipeg" width="100%" height="800"></iframe>
</div>
<div class="container center">
<p style="font-size: 20px;">Follow us at: <a href="https://twitter.com/MbTableTennis"><i class="fa fa-twitter"></i></a> <a href="https://www.facebook.com/tabletennismanitoba"><i class="fa fa-facebook"></i></a> <a href="https://instagram.com/mbtabletennis/"><i class="fa fa-instagram"></i></a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -8,7 +8,7 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" href="../../favicon.ico"> <link rel="icon" href="../../favicon.ico">
<link rel="shortcut icon" type="image/png" href="assets/logos/mttalogo64x64.jpg"/> <link rel="shortcut icon" type="image/png" href="assets/logos/mttalogo64x64.png"/>
<title>MTTA</title> <title>MTTA</title>
@ -38,26 +38,46 @@
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i> <i class="fa fa-bars fa-lg"></i>
</button> </button>
<a class="navbar-brand" href="#">MTTA</a> <a class="navbar-brand" href="index.html">MTTA</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1"> <div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Events</a></li> <li><a href="events.html">Events</a></li>
<li><a href="#">News</a></li> <li><a href="news.html">News</a></li>
<li><a href="#">Contact Us</a></li> <li><a href="contactus.html">Contact Us</a></li>
</ul> </ul>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</nav> </nav>
<div class="jumbotron dark-embroidery-bg"> <div class="jumbotron main">
<img src="assets/logos/mttalogo_inverted.png" alt="Smiley face" height="19%" width="19%" align="right">
<div class="container">
<h1>Manitoba Table Tennis Association</h1> <h1>Manitoba Table Tennis Association</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel pulvinar tellus. Integer at quam purus. Praesent imperdiet vulputate augue eget fringilla.</p>
<p style="font-size: 100%">The M.T.T.A. is incorporated as a volunteer non-profit organization with the objectives of promoting and developing all aspects of table tennis throughout Manitoba. The M.T.T.A. offers numerous programs which adhere to the Canadian Sport 4 Life principles guiding Long Term Athlete Development.</p>
<a href="news.html" style="color: black;"><button type="button" class="btn btn default">News</button></a>
</div>
</div> </div>
<div class="row">
<div class="col-md-6 padding">
<h3>The Sport and The M.T.T.A.</h3>
<p style="font-size: 90%">Table Tennis, besides being in the Summer Olympics, is also one of the worlds largest participation sports and is the hardest racquet sport to play. Like badminton, squash, tennis and racquetball, table tennis has the parameters of speed, power and placement but add in spin and extreme sudden variations of spin and you have the basis for a most demanding sport. SO GET OUT OF THE BASEMENT AND PLAY TABLE TENNIS WITH THE MANITOBA TABLE TENNIS ASSOCIATION!</p>
</div>
<div class="col-md-6 padding">
<h3>Membership</h3>
<p style="font-size: 90%">Members of the MTTA are automatically granted membership in Table Tennis Canada (TTC) and are entitled to a variety of programs and services offered through the National Office. They are automatically enrolled in Table Tennis Canadas National Rating and Rankings Program. Results of all sanctioned league and tournament matches are automatically submitted to TTC and provincial and national ranking lists are published 12 times fcv throughout the season</p>
</div>
</div>
<div class="container center">
<p style="font-size: 20px;">Follow us at: <a href="https://twitter.com/MbTableTennis"><i class="fa fa-twitter"></i></a> <a href="https://www.facebook.com/tabletennismanitoba"><i class="fa fa-facebook"></i></a> <a href="https://instagram.com/mbtabletennis/"><i class="fa fa-instagram"></i></a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
</body> </body>

65
news.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="shortcut icon" type="image/png" href="assets/logos/mttalogo64x64.png"/>
<title>MTTA news</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- CDN for fontawesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<!-- 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="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="index.html">MTTA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="events.html">Events</a></li>
<li class="active"><a href="">News</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<iframe src="https://docs.google.com/document/d/157Q-Ud6NWUnolsglhtoi4n6_piS3F_bAabsXupXwqnU/pub?embedded=true" width="100%" height="800"></iframe>
</div>
<div class="container center">
<p style="font-size: 20px;">Follow us at: <a href="https://twitter.com/MbTableTennis"><i class="fa fa-twitter"></i></a> <a href="https://www.facebook.com/tabletennismanitoba"><i class="fa fa-facebook"></i></a> <a href="https://instagram.com/mbtabletennis/"><i class="fa fa-instagram"></i></a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>