hiamanagrawal / cricpro

Hey Kalvian,

This is a self-learning lesson where you will apply your HTML, CSS & JS knowledge to complete the challenges.

A Quick Introduction about the lab

Most Indians are madly in love with cricket. Remember? We all loved that moment when India lifted the world cup after 28 years. Even now, if you close your eyes and think of it, you can feel the adrenaline rushing through our veins.

Yes, that moment when MS Dhoni was on strike. Nuwan Kulasekara was the bowler. It was the second ball of the 49th over. India required four runs from 11. Kulasekara bowls a full-length ball and Dhoni winds up to deposit the ball into the stands at long-on. At that very moment, a billion Indian fans cheered and celebrated. History was made. After 28 years, on April 2, 2011, India had finally won the World Cup after defeating Sri Lanka by six wickets in the finals.

Woah! what an exciting finale! A cricket fan would cherish that moment.

As a tribute to the Indian Cricket team, we at Kalvium wanted to build a ScoreBoard for our CricPro website. And we thought, who can do it better than our Kalvian?

What should you do

Here is the boilerplate [link]((https://stackblitz.com/edit/web-platform-43bgdk?file=README.md) of the lab. Fork the project and get started with the lab.

How To Submit

Save your lab project and submit your project link in this form.

Instructions

The starter code contains all the files, image links (available in the readme file), and text content needed to create the scoreboard. The font to be used should be Nunito Sans. Remember to follow the best practices.

Progression 1: Set the mood

Use the background image and CricPro logo to recreate the atmosphere.

Progression 2: Tabulate the scores

Now, using the data in the below-expected output, tabulate the scores of our players.

Progression 3: Let the details Pop up

Once you have tabulated the scores, create a pop-up that opens up on clicking a player's name.

Expected Output

Here is a screenshot link of the expected output. https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro.png

Image links required for the project:

    - [Background image](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-bg.png)
    - [Logo image](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-logo.JPG)
    - [Dhoni](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-dhoni.png)
    - [Gambhir](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-gambhir.png)
    - [Harbhajan](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-harbhajan.jpg)
    - [Munaf Patel](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-munaf-patel.jpg)
    - [Sachin](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-sachin.png)
    - [Sehwag](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-sehwag.png)
    - [Sreeshanth](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-sreeshanth.jpg)
    - [Suresh Raina](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-suresh-raina.jpg)
    - [Virat Kohli](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-virat-kohli.png)
    - [Yuvraj](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-yuvraj.png)
    - [Zaheer Khan](https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/cricpro-zaheer-khan.jpg)

Happy Coding ❤️

CricPro