HTML Schedule Container

In this lesson, I will show you how I made "schedule" class containers. In the Twitch Website Template, these containers are used for Twitch Schedule and Stream Team Members.

Example Elements

The Linux Gaming King Streams! Hatnix plays the best adventure and puzzle games.

sir_diealotalot is a Linux gamer and Linux game dev who often competes in game jams.

jookia2 does DOS programming and gaming. Catch him with cutting edge retro technology.

CSS

.schedule {
  border-radius: 9px;
  box-shadow: 4px 4px 3.5px rgba(100,0,0,.5);
  background-color: #111;
  padding: 20px;
  margin: 10px;
  font-style: helvetica, arial, monospace;
}

.schedule p {
  color: white;
  line-height: 2;
  font-size: 20px;
}

To create the elements above, we defined a class called "schedule" and defined paragraph elements located within "schedule" elements.

Border-radius Tutorial

Box-shadow Tutorial

Colors Tutorial

Background Tutorial

Padding Tutorial

Margin Tutorial

Fonts Tutorial

HTML

HTML for My Stream Schedule

<!-- Section Heading-->
<h2>Stream Schedule</h2>
<div class="row" align="center">
  <div class="col-6">
    <!-- Stream Schedule-->
    <div class="schedule">
      <p>
        Tuesdays <br>
        12:00 - 4:00 PM EST <br>
         17:00 - 21:00 UTC
      </p>
    </div>
  </div>
  <div class="col-6">
      <div class="schedule">
        <p>
          Thursdays<br>
           12:00 - 4:00 PM EST <br>
           17:00 - 21:00 UTC
        </p>
      </div>
  </div>
</div>

My stream schedule is placed in a row that is aligned center. Each schedule container is placed in a column ("col-6") that is half the width of the entire row. These rows and columns are based on the responsive CSS.

HTML for My Stream Team

<!-- Fellow Stream Team Streamers-->
<h2>My Stream Team</h2>
<p>Check out my streamer friends!  They stream on Linux and DOS.  Streams includes
Linux gaming, technology, retro gaming, and game development!</p>
<div class="row" align="center">
  <!-- Hatnix-->
  <div class="col-4">
    <div class="schedule">
      <a href="https://www.twitch.tv/hatnix" target="blank">
        <p>The Linux Gaming King Streams!  Hatnix plays the best adventure and puzzle games.</p>
        <img src="media/hatnix-logo.png" alt="Hatnix Logo"/>
      </a>
    </div>
  </div>
  <!-- Sir Diealot-->
  <div class="col-4">
    <div class="schedule">
      <a href="https://www.twitch.tv/sir_diealotalot" target="blank">
        <p>sir_diealotalot is a Linux gamer and Linux game dev who often competes in game jams.</p>
        <img src="media/murks-logo.png" alt="sir_diealotalot logo"/>
      </a>
    </div>
  </div>
  <!-- Joo Joo-->
  <div class="col-4">
    <div class="schedule">
      <a href="https://www.twitch.tv/jookia2" target="blank">
        <p>jookia2 does DOS programming and gaming.  Catch him with cutting edge retro technology.</p>
        <img src="media/joo-joo-logo.png" alt="Joo Joo's DOS Bots"/>
      </a>
    </div>
  </div>
</div>

My stream team information is placed in its own centered row. Each stream team member is placed in its own "schedule" container. Each "schedule" container is placed in a column ("col-4") that is one-third the width of its row.