final-project-css.html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-D0ENCWPZL9');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Professional Portfolio | Final Project</title>
  <meta name="description" content="Responsive portfolio website built with HTML, CSS, Flexbox, Grid, Animations, and SEO best practices.">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f5f8fa;
      color: #333;
      line-height: 1.6;
      scroll-behavior: smooth;
    }
    header {
      position: sticky;
      top: 0;
      z-index: 999;
      background: #004d99;
      color: white;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      animation: slideDown 1s ease;
    }
    header h1 {
      font-size: 24px;
      letter-spacing: 1px;
    }
    nav a {
      color: white;
      margin: 0 12px;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }
    nav a:hover {
      color: #ffdd57;
    }

    .hero {
      background: linear-gradient(120deg, #d4f1ff, #ffffff);
      text-align: center;
      padding: 80px 20px;
      animation: fadeIn 1.5s ease;
    }
    .hero h2 {
      font-size: 36px;
      margin-bottom: 10px;
      color: #007bff;
    }
    .hero p {
      font-size: 18px;
      max-width: 700px;
      margin: auto;
    }

    .services {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 50px 30px;
      justify-content: center;
      background: #ffffff;
    }
    .service-box {
      flex: 1 1 280px;
      padding: 20px;
      background: #f0f8ff;
      border-radius: 10px;
      transition: all 0.4s ease;
      transform: scale(1);
      text-align: center;
    }
    .service-box:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .service-box h3 {
      color: #005fa3;
      margin-bottom: 10px;
    }

    .projects {
      background: #e6f2ff;
      padding: 50px 20px;
    }
    .projects h2 {
      text-align: center;
      color: #004080;
      margin-bottom: 30px;
    }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    .project {
      background: white;
      padding: 20px;
      border-radius: 10px;
      transition: transform 0.4s ease;
    }
    .project:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    }

    footer {
      background: #003366;
      color: white;
      text-align: center;
      padding: 20px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideDown {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @media (max-width: 600px) {
      header { flex-direction: column; align-items: flex-start; }
      nav { margin-top: 10px; }
      .hero h2 { font-size: 26px; }
    }
  </style>
</head>
<body>

  <header role="banner">
    <h1>MyPortfolio</h1>
    <nav role="navigation" aria-label="Main navigation">
      <a href="#services">Services</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section class="hero" aria-label="Hero Section">
    <h2>Hello, I'm a Web Developer</h2>
    <p>I create modern, accessible, SEO-friendly and responsive websites using HTML, CSS, Flexbox, Grid, and animations.</p>
  </section>

  <section id="services" class="services" role="region" aria-label="Services Section">
    <div class="service-box">
      <h3>Responsive Design</h3>
      <p>Flexible layouts that adapt to all screen sizes using Flexbox & Grid.</p>
    </div>
    <div class="service-box">
      <h3>SEO Optimization</h3>
      <p>Use of semantic tags, meta info and fast loading designs for ranking.</p>
    </div>
    <div class="service-box">
      <h3>Accessibility</h3>
      <p>High contrast, focus indicators & ARIA roles for inclusive design.</p>
    </div>
  </section>

  <section id="projects" class="projects" role="region" aria-label="Projects Section">
    <h2>My Projects</h2>
    <div class="project-grid">
      <div class="project">
        <h3>Portfolio Website</h3>
        <p>A sleek and modern personal portfolio using Flexbox and transitions.</p>
      </div>
      <div class="project">
        <h3>Startup Landing Page</h3>
        <p>Built with semantic HTML5 and SEO optimization.</p>
      </div>
      <div class="project">
        <h3>Responsive Blog UI</h3>
        <p>Grid layout, dynamic content cards and mobile-ready design.</p>
      </div>
    </div>
  </section>

  <footer role="contentinfo" id="contact">
    &copy; 2025 MyPortfolio. All rights reserved.
  </footer>

</body>
</html>