Haga lo que hicimos en aula estilizando proyectos en css

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<title>Portafolio de practica</title>
<link rel="stylesheet" href="style4.css">

<!-- Header Section -->
<header>
    
    <nav>
        <a href="#">Inicio</a>
        <a href="#">Proyectos</a>
        <a href="#">Contacto</a>
    </nav>
</header>

<!-- Main Section -->
<main>
    
    <h1><strong>Alura Latam</strong> - ¡Sumérgete en Tecnología!</h1>
    <p>Vas a estudiar, practicar, discutir y profundizar en una plataforma que respira tecnología. Sumérgete con profundidad y navega en otras áreas de Tecnología. Profesional en T.</p>
    <div class="main-buttons">
        <a href="https://www.instagram.com/tu_usuario" target="_blank">Instagram</a>
        <a href="https://github.com/tu_usuario" target="_blank">Github</a>
    </div>
    <img src="/img/html-5.png" alt="Foto de la desarrolladora">
</main>

<!-- Footer Section -->
<footer>
    
    <p>Contacto: tu.email@gmail.com</p>
    <p>© 2024 lagabyok. Todos los derechos reservados.</p>
    
</footer>

css original : body { background-color: indigo; color: white; font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }

header { background-color: #4B0082; width: 100%; padding: 20px; }

header nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; }

header nav a:hover { text-decoration: underline; }

main { background-color: #ffffff; color: #000000; width: 100%; padding: 20px; }

.main-buttons a { margin: 10px; padding: 10px 20px; text-decoration: none; color: #ffffff; background-color: #007bff; border-radius: 5px; display: inline-block; }

.main-buttons a:hover { background-color: #0056b3; }

footer { background-color: #4B0082; width: 100%; padding: 20px; }

footer p { color: white; }

css2: body { background-color: #f0f0f0; color: #333; font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }

header, footer { background-color: #333; color: #f0f0f0; width: 100%; padding: 20px; text-align: center; }

header nav a, footer p { color: #f0f0f0; margin: 0 15px; text-decoration: none; font-weight: bold; }

header nav a:hover, footer p:hover { text-decoration: underline; }

main { background-color: #ffffff; color: #000000; width: 100%; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

.main-buttons a { margin: 10px; padding: 10px 20px; text-decoration: none; color: #ffffff; background-color: #555; border-radius: 5px; display: inline-block; }

.main-buttons a:hover { background-color: #333; }