CSS Project: Complete Responsive Website

Building a Professional Landing Page

Let's build a complete responsive landing page using everything you've learned!

This project includes: flexbox layout, grid, animations, responsive design, and modern CSS techniques.

/* Complete Landing Page Structure */
:root {
  --primary: #d1039e;
  --dark: #5b026b;
  --light: #f9f9f9;
  --spacing: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.header {
  background: linear-gradient(135deg, var(--primary), var(--dark));
  color: white;
  padding: calc(var(--spacing) * 4) var(--spacing);
  text-align: center;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing);
  padding: calc(var(--spacing) * 3);
}

.feature-card {
  background: white;
  padding: calc(var(--spacing) * 2);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

Build Complete Landing Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Landing Page</title>
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <div class="logo">MyBrand</div>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="hero-content">
      <h1>Welcome to MyBrand</h1>
      <p>Building amazing things with CSS</p>
      <button class="cta-btn">Get Started</button>
    </div>
  </header>

  <section class="features">
    <div class="feature">
      <h3>Feature One</h3>
      <p>Amazing functionality</p>
    </div>
    <div class="feature">
      <h3>Feature Two</h3>
      <p>Great performance</p>
    </div>
    <div class="feature">
      <h3>Feature Three</h3>
      <p>Easy to use</p>
    </div>
  </section>

  <footer class="footer">
    <p>&copy; 2024 MyBrand. All rights reserved.</p>
  </footer>
</body>
</html>

Note: Congratulations! You've completed the CSS course!

Note: You now know: Selectors, Box Model, Flexbox, Grid, Animations, Responsive Design, and more!

Note: Next step: Master JavaScript to add interactivity to your designs!

Note: Keep practicing by building real projects!