Fan Page of Virat Kohli

Inspiration

I’ve been a huge fan of Virat Kohli, not just for his incredible cricketing achievements but also for his dedication, discipline, and leadership both on and off the field. I wanted to create a pure HTML + CSS website to celebrate his career milestones and showcase his journey in a visually appealing way. The idea was to push the limits of CSS to create animations, hover effects, and a responsive layout without using any JavaScript.

What I Learned

Through this project, I learned:

How to structure a single-page website using semantic HTML.

Advanced CSS techniques, including:

CSS animations (@keyframes) for glowing text and background gradients.

Hover effects on cards and images.

CSS-only image slider/carousel using radio buttons.

How to make a responsive layout using CSS Grid and Flexbox.

The importance of overlay and contrast to make text readable over images.

How I Built the Project

Planning: Sketched the layout – Hero section, Career Stats, Gallery, Thank You note, Footer.

Hero Section:

Added Virat Kohli’s background image with a semi-transparent overlay.

Applied glowing text animation for his name.

Career Stats Section:

Used CSS Grid to layout cards for ODI, Test, T20I, IPL, and World Cup stats.

Added hover scaling effects for interactivity.

Gallery Section:

Created a CSS-only slider with radio buttons controlling image slides.

Added hover effects for images.

Thank You Note:

Styled with a handwritten font (Dancing Script) and subtle animation.

Footer: Simple, clean, and consistent with the color palette.

Challenges Faced

Background images: Some image URLs from Wikipedia or online sources did not load due to hotlinking restrictions. Solved by using a local image (kohli_bg.jpg) in the project folder.

CSS-only slider: Achieving smooth transitions without JavaScript required careful planning using radio buttons and CSS :checked selectors.

Responsive design: Making the grid and slider work on mobile devices while keeping animations and hover effects intact was tricky.

Text readability: Ensuring that glowing text and stats remained readable on a complex background image needed the use of semi-transparent overlays.

Outcome

The final website is a fully CSS-based tribute to Virat Kohli:

A visually striking Hero section with background image and glowing text.

Career stats cards showing his achievements in different formats.

CSS-only image gallery/slider highlighting iconic moments.

Thank you note to Anushka Sharma for her inspiration.

Fully responsive and interactive without a single line of JavaScript.

This project helped me strengthen my HTML/CSS skills, experiment with creative animations, and understand user experience in designing fan-centric websites.

Built With

• css
• html