Build a Live Cricket Scoreboard Animation Design Template With Country Logo in HTML5 and CSS3 Full Project For Beginners

Build a Live Cricket Scoreboard Animation Design Template With Country Logo in HTML5 and CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be building a live cricket scoreboard animation design template with country logo in browser using html5 and css3.All the full source code of the application is shown below.

 

 

Get Started

 

 

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

 

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Cricket Score Board</title>
</head>
<body>
  <div class="header">
    <h1>Cricket Score Board <br> Full CSS Design</h1>
  </div>
  <div id="container">
    <div class="left-board">
      <div class="batsman">
        <p>Dhoni  *14 <span>5</span><br> Jadavh  *70 <span>90</span></p>
      </div>
    </div>
    <div class="middle-board">
      <h1><span class="BD">BAN</span> v IND 150-4</h1>
      <p>Needs 50 of 65 to win</p>
    </div>
    <div class="right-board">
      <div class="baller">
        <p>Mustafizur  23-2 <br> Timeline 0 0 0 1 lb W</p>
      </div>
    </div>
  </div>
  
</body>
</html>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

body{
  margin: 0;
  padding: 0;
}
#container{
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #16AAFF;
  margin-top: 40px;
}
.left-board{
  float: left;
  width: 30%;
  height: 96px;
  background-color: #0559AD;
  border-top-right-radius: 100%;
  border-top: 4px solid #FF9816;
}
.middle-board{
  float: left;
  width: 25%;
  height: 96px;
  background-color: #0559AD;
  margin-left: 7.5%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-top: 4px solid #FF9816;
  overflow: hidden;
}
.right-board{
  float: right;
  width: 30%;
  height: 96px;
  background-color: #0559AD;
  border-top-left-radius: 100%;
  border-top: 4px solid #FF9816;
}
.middle-board h1{
  font-size: 20px;
  text-align: center;
  font-family: 'Roboto',sans-serif;
  margin-top: 50px;
  line-height: 0.1 ;
}
.middle-board p{
  font-family: 'Anton',sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.batsman{
  font-family: 'Anton',sans-serif;
  font-weight: 700;
  line-height: 2;
  margin-left: 20px;
}
span{
  font-size: 13px;
}.baller{
  font-family: 'Anton',sans-serif;
  font-weight: 700;
  font-size: 17px;
  float: right;
  margin-right: 20px;
  line-height: 2;
}
.header h1{
  font-family: 'Oswald', sans-serif;
  animation: slide 9s ease-in-out infinite;
  margin-left: 0px;
}
@keyframes slide{
  0%{margin-left: 0%;}
  50%{margin-left:70%;}
}

 

See also  How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS Full Project For Beginners

 

Now if you open the index.html file inside the browser you will see the below output

 

Leave a Reply