I wanted to practice building a landing page from scratch without a template, so I made a dark-themed sports page with tilted cards, a responsive navigation bar, and simple hover animations. Here is how I put it together.
The goal
The page needed three sections, each with a title, a short description, and a call-to-action button. The main challenge was making the cards look dynamic on desktop without breaking the layout on phones.
Structure
I kept the HTML simple: a header with navigation, a main section with a grid of cards, and a footer. Each card is a div with a heading, a short paragraph, and a button.
html
<h2>Train in the gym</h2> <p>Strength, volume and definition routines for every level.</p> <a href="#">View routines</a> Responsive layout
I used CSS Grid for the cards, so they stack on small screens and sit side by side on larger ones:
css
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } Hover animation with JavaScript
For the interactive part, I used a small script that adds a class when the mouse enters a card. The CSS handles the actual movement, which keeps the JavaScript light:
javascript
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => card.classList.add('active'));
card.addEventListener('mouseleave', () => card.classList.remove('active'));
});
What I learned
Keeping the CSS and JavaScript separate made the page easier to debug. Animations feel better when they are subtle, and responsive design is easier to test if you check the layout at each breakpoint while you build, not at the end.
I also offer landing pages and simple interactive websites as a freelancer. If you need one for your business or community, you can see my services here: https://www.fiverr.com/s/2pQdqBq
