w3 Schools CSS Kitchen Sink

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