<!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, shrink-to-fit=no">
<link rel="stylesheet" text="text/css" href="w3.css">
<title> BALLGAME SITE </title>
</head>
<body class="w3-content" style="max-width:500px">
<div class="w3-container w3-teal">
<h1> The Ballgame </h1>
</div>
<div class="w3-container">
<h3> Overview </h3>
<p> <strong> Ballgame - The Streak- ?? </strong> is a realtime -sports application that allows spectators to interact with the Cubs/MLB (their favorite team) during live game play.</p>
Users will create an account where their statistics (sports knowledge) will be tracked and compared against other users/ personal friend groups</p>
<strong> Reward: </strong> end of game total points reached ( reach set goal)</p>
</div>
<p>
<div class="w3-container w3-teal">
<p>
Footer. </p>
</div>
<div class="w3-panel w3-red">
<h3> DANGER! </h3 >
<p> Panels can be used as warnings </p>
</div>
<div class="w3-panel w3-yellow">
<h3> Warning </h3 >
</div >
<div class="w3-panel w3-blue">
<h3> Info </h3 >
</div >
<div class="w3-panel w3-green">
<h3> Positive. </h3 >
</div >
<br>
<hr>
<h3> Card Class </h3>
<p> Can be used for images and notes</p>
<hr>
<h3> Tables! </h3>
<hr>
<div class="w3-container">
<h2> Border around table </h2>
<p> use the w3-border class to add a border </p>
<table class="w3-table w3-striped w3-border">
<tr>
<th> City </th>
<th> Team </th>
<th> Division </th>
<th> World Series Titles </th>
<th> Penants </th>
<th> Hall of Famers </th>
</tr>
<tr>
<td>New York</td>
<td> Yankees</td>
<td> AL Central </td>
<td> 100-62 </td>
<td> 27 </td>
<td> a lot </td>
</tr>
<tr>
<td>Boston</td>
<td> Red Sox </td>
<td> AL Central </td>
<td> 100-62 </td>
<td> 5 </td>
<td> a lot </td>
</tr>
<tr>
<td> Miami </td>
<td> Marlins </td>
<td> AL Central </td>
<td> 62 - 100 </td>
<td> 27 </td>
<td> a little </td>
</tr>
</table>
</div>
<div class="w3-container">
<h2>List Header</h2>
<p>An example of how to add a heading element inside the list item.</p>
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
<div class="w3-container">
<h2>W3.CSS Tags</h2>
<p>You can use a color class to change the color of a tag.</p>
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>
</div>
<h1> Tags (large signs) <h1>
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
<div class="w3-row">
<div class="w3-col" style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div class="w3-col" style="width:20%"><p>20%</p></div>
</div>
<div class="w3-container w3-card w3-indigo">
<h1>Card with Container </h1>
</div>
<ul class="w3-ul">
<li>
<h3>w3-content goes here.</h3>
</li>
</ul>
<!------
<p>The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).</p>
</li>
<li>
<h3>The Fault in Our Stars</h3>
<p>Touching, gripping and genuinely well made.</p>
</li>
<li>
<h3>The Avengers</h3>
<p>A huge success for Marvel and Disney.</p>
</li>
</ul>
<div class="w3-container w3-indigo w3-xlarge">
<h5>Movies 2014</h5>
</div>
-->
<div class="w3-cell-row" style="width:75%">
<div class="w3-container w3-red w3-cell">
<p> Cell 1.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p> Cell 2 </p>
</div>
</div>
<h2>Bar Links</h2>
<p>Providing navigation is a typical use for bars:</p>
<div class="w3-bar w3-blue">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
<br>
<div class="w3-bar-block w3-black" style="width:120px">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
</div>
<h1> Hover/Dropdowns </h1>
<p> Three main Classes are 1) w3-dropdown-hover 2) w3-dropdown-content (whats displayed) and 3) w3-dropwndown-click.
The third one actually uses Javascript.</p>
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button"> Home </a>
<a href="#" class="w3-bar-item w3-button"> Link1 </a>
<div class="w3-dropdown-hover">
<button class="w3-dropdown-hover">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
<br>
<h2> Accordion</h2>
<p> used to show and hide html content. </p>
<button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Open Section 1</button>
<div id="Demo1" class="w3-container w3-hide">
<h4>Section 1</h4>
<p>Some text..</p>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
Comments