Regina Gathoni | Web Developer in Training still learning,still grinding soon we rise <title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Hi, I'm Regina Gathoni 👋</h1> <nav class="navbar">  <a href="index.html" class="logo">Regina</a>  <input type="checkbox" id="nav-toggle" class="nav-toggle"> <label for="nav-toggle" class="nav-toggle-label"> <span>☰</span> </lable> <ul class="nav-links"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section class="hero" id="home"> <div class="hero-text"> <h1>Hi, I'm Regina</h1> <p>Frontend Developer in training. Building mobile-first. <section> <h2>Task 4.2: CSS Grid Layout</h2>  <h3>Exercise 1: Photo Gallery</h3> <div class="gallery"> <img src="https://picsum.photos/300?random=1" alt="Gallery image 1"> <img src="https://picsum.photos/300?random=2" alt="Gallery image 2"> <img src="https://picsum.photos/300?random=3" alt="Gallery image 3"> <img src="https://picsum.photos/300?random=4" alt="Gallery image 4"> <img src="https://picsum.photos/300?random=5" alt="Gallery image 5"> <img src="https://picsum.photos/300?random=6" alt="Gallery image 6"> </div>  <h3>Exercise 2: Magazine Layout</h3> <div class="magazine"> <header>Magazine Header</header> <aside>Sidebar</aside> <main>Main Content Area</main> <aside>Sidebar</aside> <main>Main Content Area</main> <footer>Magazine Footer</footer> </div>  <h3>Exercise 3: Project Cards Grid</h3> <div class="projects-grid"> <div class="card"><h4>Project 1</h4><p>Some text here so you can see height</p></div> <div class="card"><h4>Project 2</h4><p>More text here</p></div> <div class="card"><h4>Project 3</h4><p>Last card</p></div> </div> </section> <footer class="site-footer"> <p>© 2026 Regina's 4:1 Project. Built with GMB & spite 😎</p> </footer> </body> </html>