A Pen by Tomislav

Thumbnail
This awesome code was written by tomasonn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tomasonn ©
  • HTML
  • CSS
  • JavaScript
    <div class="box">
 
  <div class="last_match">
    <article class="match_item">
      <div class="match_header">
        <h4 class="match_date">Last Match</h4>
        <span>Sunday</span>
        <span class="match_time">17:00</span>
      </div>
      <div class="match_location">
        <span>City Stadium</span>
      </div>
      <span class="competition">League Competition</span>
      <a class="last_match_report" href="#" onclick="lastMatch()">
        <div class="match_details">
          <div class="club_one">
            <img class="club_logo" alt="team one logo" width="90px" height="90px" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2F3%2F3e%2FOxford_United_FC_logo.svg%2F150px-Oxford_United_FC_logo.svg.png&f=1">
          </div>
          <div class="match_result">
            <div class="result">
              <span>2</span>
              <span>:</span>
              <span>1</span>
            </div>
          </div>
          <div class="club_two">
            <img class="club_logo" alt="team two logo" width="90px" height="90px" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.1myhA7Sr1vGcTW4sRTGz2AAAAA%26pid%3D15.1&f=1">
          </div>
        </div>
      </a>
    </article>
  </div>

  <div class="match_report">
    <article>
      <h4 class="report_heading">Report</h4>
      <div class="report_text">
        <div id="Report">Lorem Ipsum ... match report</div>
        <div id="Report" style="display: none;">
          first game report
        </div>
        <div id="Report" style="display: none;">second match report</div>
        <div id="Report" style="display: none;">This is a third match report.</div>
      </div>
    </article>
  </div>

  <div class="other_matches">
    <div class="heading">
      <h5>previous results</h5>
    </div>
    <div id="wrapper" class="past_results">
      <div class="fixture1">
        <a class="fixture1_report" href="#" onclick="reportOne()">
          <div>
            <img class="team_one" height="49px" width="49px" src="https://upload.wikimedia.org/wikipedia/en/thumb/6/68/Wedeler_TSV.png/135px-Wedeler_TSV.png" alt="one logo">
            <span>2</span>
            <span>:</span>
            <span>2</span>
            <img class="team_two" height="49px" width="49px" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2F3%2F3e%2FOxford_United_FC_logo.svg%2F150px-Oxford_United_FC_logo.svg.png&f=1" alt="two logo">
          </div>
        </a>
      </div>
      <div class="fixture2">
        <a class="fixture2_report" href="#" onclick="reportTwo()">
          <div>
            <img class="team_one" height="49px" width="49px" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F1%2F17%2FWarminster_Town_F.C._logo.png&f=1" alt="five logo">
            <span>1</span>
            <span>:</span>
            <span>3</span>
            <img class="team_two" height="49px" width="49px" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2F3%2F3e%2FOxford_United_FC_logo.svg%2F150px-Oxford_United_FC_logo.svg.png&f=1" alt="two logo">
          </div>
        </a>
      </div>
      <div class="fixture3">
        <a class="fixture3_report" href="#" onclick="reportThree()">
          <div>
            <img class="team_one " height="49px " width="49px " src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2F3%2F3e%2FOxford_United_FC_logo.svg%2F150px-Oxford_United_FC_logo.svg.png&f=1
          " alt="two logo ">
            <span>0</span>
            <span>:</span>
            <span>2</span>
            <img class="team_two " height="49px " width="49px " src="https://proxy.duckduckgo.com/iur/?f=1&image_host=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2F4%2F47%2FSan_Diego_Toros_logo.png%2F180px-San_Diego_Toros_logo.png&u=https://upload.wikimedia.org/wikipedia/en/thumb/4/47/San_Diego_Toros_logo.png/180px-San_Diego_Toros_logo.png "
              alt="seven logo ">
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/tomasonn/a-pen-by-tomislav-EEWgQr */
    
.box {
  display: grid;
  grid-template-columns: 0.3fr 0.3fr 0.4fr 0.4fr;
  grid-column-gap: 15px;
  justify-items: center;
  background-color: #4b86b4;
}

.last_match {
  grid-column-start: 1;
  grid-column-end: 3;
  overflow-wrap: break-word;
  color: #000;
  background-color: #FFF;
}

a {
  text-decoration: none;
}

.last_match .match_item {
  display: grid;
}

.match_item {
  grid-template-rows: 0.5fr 0.3fr 0.3fr 0.5fr;
  grid-row-gap: 5px;
  text-align: center;
}

.match_header {
  padding-bottom: 5px;
  display: grid;
  grid-template-rows: 1fr 0.5fr;
  text-transform: uppercase;
}

.match_location {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.competition {
  padding-top: 5px;
  padding-bottom: 5px;
}

.match_details {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  padding: 5px;
  align-self: center;
}

.match_result {
  align-self: center;
  /* justify-self: center; */
  margin: 10px;
  color: #000;
  font-size: 32px;
}

.match_report {
  display: grid;
  grid-template-rows: 40px 150px;
  grid-template-areas: 
    "heading"
    "report";
  /* background-color: #FFF; */
  color: #FFF;
}

.report_heading {
  text-align: center;
}

.report_text {
  grid-area: report;
  font-size: 18px;
}

.other_matches {
  background-color: #969694;
  padding: 0 15px;
}
.other_matches .heading {
  text-transform: uppercase;
  text-align: center;
  color: #FFF;
}

.past_results {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
    "fixture1"
    "fixture2"
    "fixture3";
  align-self: center;
  justify-self: center;
}

.past_results a {
  text-decoration: none;
}

.past_results span {
  line-height: 49px;
  font-size: 40px;
  margin: 5px;
  color: #FFF;
}

.fixture1 {
  grid-area: fixture1;
}
.fixture2 {
  grid-area: fixture2;
}
.fixture3 {
  grid-area: fixture3;
}

.report_show {
  display: block;
}

.report_hide {
  display: none;
}


/*Downloaded from https://www.codeseek.co/tomasonn/a-pen-by-tomislav-EEWgQr */
    /*
function showReport() {
  var el = document.getElementById('Report');
  if (el.style.display === "none") {
    el.style.display = "block";
  } else {
    el.style.display = "none";
  }
}
*/
/*
function getReport() {
  var el = document.getElementById('Report');
  el.classList.toggle('report_show');
}
*/

function lastMatch() {
  document.getElementById('Report').innerHTML = "Lorem Ipsum ... match report";
}

function reportOne() {
  document.getElementById('Report').innerHTML = "first game report";
}

function reportTwo() {
  document.getElementById('Report').innerHTML = "second match report";
}

function reportThree() {
  document.getElementById('Report').innerHTML = "This is a third match report.";
}


Comments