Hey Kalvian,
This is a self-learning lesson where you will apply your HTML, CSS & JS knowledge to complete the challenges.
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?
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.
Save your lab project and submit your project link in this form.
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.
Use the background image and CricPro logo to recreate the atmosphere.
Now, using the data in the below-expected output, tabulate the scores of our players.
Once you have tabulated the scores, create a pop-up that opens up on clicking a player's name.
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
- [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 ❤️