Build a World Cup 2019 Live Cricket Score Dashboard in HTML5 and CSS3 in Browser Full Project For Beginners

Build a World Cup 2019 Live Cricket Score Dashboard in HTML5 and CSS3 in Browser Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a world cup 2019 live cricket score dashboard in browser using html5 and css3.All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div class="wc-table-wrapper">
  <div class="table-section">
    <div>
      <div class="table-title"><img src="https://lipis.github.io/flag-icon-css/flags/4x3/in.svg" alt="Indian Flag" /> India</div>
      <table class="wc-table">
        <thead>
          <tr class="head">
            <th colspan="3">336-5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Rohit</td>
            <td>140</td>
            <td>113</td>
          </tr>
          <tr>
            <td>Kohli</td>
            <td>77</td>
            <td>65</td>
          </tr>
          <tr>
            <td>KL Rahul</td>
            <td>57</td>
            <td>78</td>
          </tr>
          <tr>
            <td>Hardik</td>
            <td>26</td>
            <td>19</td>
          </tr>
          <tr class="head">
            <td colspan="3">Over 50</td>
          </tr>
          <tr>
            <td>Amir</td>
            <td>3-47</td>
            <td>10</td>
          </tr>
          <tr>
            <td>Wahab</td>
            <td>1-71</td>
            <td>10</td>
          </tr>
          <tr>
            <td>Hassan</td>
            <td>1-84</td>
            <td>9</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <div class="table-title">Pakistan <img src="https://lipis.github.io/flag-icon-css/flags/4x3/pk.svg" alt="Pakistan Flag" /></div>
      <table class="wc-table">
        <thead>
          <tr class="head">
            <th colspan="3">166-6</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Fakhar</td>
            <td>62</td>
            <td>75</td>
          </tr>
          <tr>
            <td>Babar</td>
            <td>48</td>
            <td>57</td>
          </tr>
          <tr>
            <td>Imad</td>
            <td>22<sup>*</sup></td>
            <td>20</td>
          </tr>
          <tr>
            <td>Sarfaraz</td>
            <td>12</td>
            <td>30</td>
          </tr>
          <tr class="head">
            <td colspan="3">Over 35</td>
          </tr>
          <tr>
            <td>V Shankar</td>
            <td>2-22</td>
            <td>5.2</td>
          </tr>
          <tr>
            <td>Kuldeep</td>
            <td>2-32</td>
            <td>9</td>
          </tr>
          <tr>
            <td>Hardik</td>
            <td>2-40</td>
            <td>7</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="footer-section">
    <div class="wc-table-footer">
      To win, Pakistan require 171 runs with 90 balls remaining.
    </div>
  </div>
</div>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 * {
     box-sizing: border-box;
}
 html, body {
     width: 100%;
     height: 100%;
     padding: 0px;
     margin: 0px;
}
 body {
     font-family: Lato, sans-serif;
     background-image: url("https://images.unsplash.com/photo-1508098682722-e99c43a406b2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
}
 .wc-table-wrapper {
     display: flex;
     flex-direction: column;
     padding: 2.5% 5%;
     overflow: hidden;
     position: relative;
}
 .wc-table-wrapper sup {
     margin-right: -0.45vw;
}
 .wc-table-wrapper:after {
     content: "";
     position: absolute;
     width: 125%;
     height: 150%;
     background-image: linear-gradient(60deg, rgba(35, 40, 130, 0.5) 20%, rgba(255, 30, 80, 1));
     border-radius: 0% 5000px 5000px 0%;
     top: 50%;
     z-index: 1;
     transform: translate(-15%, -40%) rotate(-45deg);
}
 .wc-table-wrapper .table-section {
     display: flex;
     justify-content: space-around;
     z-index: 2;
}
 .wc-table-wrapper .table-section > div {
     width: 48%;
}
 .wc-table-wrapper .table-section > div .table-title {
     color: #232882;
     font-weight: bold;
     background-color: #fff;
     border-radius: 500px;
     margin-bottom: 15px;
     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 105%;
     padding: 15px 25px;
     font-size: 2.5vw;
}
 .wc-table-wrapper .table-section > div .table-title img {
     width: 60px;
     vertical-align: middle;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
 .wc-table-wrapper .table-section > div:first-child .table-title {
     margin-left: -30px;
     text-align: right;
}
 .wc-table-wrapper .table-section > div:last-child .table-title {
     margin-left: 0px;
}
 .wc-table-wrapper .table-section > div .wc-table {
     width: 100%;
     background-color: #fff;
     border-collapse: collapse;
     border-radius: 10px;
     overflow: hidden;
}
 .wc-table-wrapper .table-section > div .wc-table tr.head {
     background-image: linear-gradient(80deg, #ff1e50 20%, #232882);
}
 .wc-table-wrapper .table-section > div .wc-table tr.head th, .wc-table-wrapper .table-section > div .wc-table tr.head td {
     color: #fff;
     font-weight: bold;
     font-size: 2.5vw;
     padding: 10px 15px;
     text-align: center;
     background-color: transparent !important;
}
 .wc-table-wrapper .table-section > div .wc-table tbody td {
     color: #232882;
     font-weight: bold;
     font-size: 1.6vw;
     padding: 10px 15px;
     overflow: hidden;
     background-color: #fff;
}
 .wc-table-wrapper .table-section > div .wc-table tbody td:first-child {
     box-shadow: inset 0px 20px 35px -15px rgba(35, 40, 130, 0.15);
}
 .wc-table-wrapper .table-section > div .wc-table tbody td:last-child {
     font-weight: normal;
}
 .wc-table-wrapper .table-section > div .wc-table tbody td:not(:first-child) {
     min-width: 70px;
     max-width: 90px;
     box-shadow: inset 20px 20px 35px -15px rgba(35, 40, 130, 0.15);
     border-left: 2px solid #ff1e50;
     text-align: center;
}
 .wc-table-wrapper .table-section > div .wc-table tbody tr.head td {
     font-size: 2vw;
}
 .wc-table-wrapper .footer-section {
     z-index: 2;
}
 .wc-table-wrapper .footer-section .wc-table-footer {
     color: #232882;
     font-weight: bold;
     background-color: #fff;
     border-radius: 500px;
     margin-bottom: 15px;
     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
     width: 102% !important;
     font-size: 2vw;
     text-align: center;
     padding: 20px 25px;
     margin-top: 12px;
     margin-left: -15px;
     position: relative;
}
 @media (max-width: 767px) {
     .wc-table-wrapper .table-section {
         flex-wrap: wrap;
    }
     .wc-table-wrapper .table-section > div {
         width: 96%;
    }
     .wc-table-wrapper .table-section > div .table-title {
         font-size: 5.5vw;
    }
     .wc-table-wrapper .table-section > div:first-child .table-title {
         margin-left: -15px;
    }
     .wc-table-wrapper .table-section > div:last-child .table-title {
         margin-left: -15px;
         margin-top: 15px;
    }
     .wc-table-wrapper .table-section > div .wc-table tr.head th, .wc-table-wrapper .table-section > div .wc-table tr.head td {
         font-size: 5.5vw;
    }
     .wc-table-wrapper .table-section > div .wc-table tbody td {
         font-size: 3.2vw;
    }
     .wc-table-wrapper .table-section > div .wc-table tbody tr.head td {
         font-size: 4vw;
    }
     .wc-table-wrapper .footer-section .wc-table-footer {
         margin-left: -7.5px;
         font-size: 4vw;
    }
     .wc-table-wrapper:after {
         width: 95%;
         height: 120%;
         border-radius: 500px 500px 0% 0%;
         top: 50%;
         transform: translate(-5%, -50%) rotate(15deg);
    }
}

 

See also  Build a Random Sentence Generator Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

And now if you open index.html file you will see the below screenshot

 

 

Leave a Reply