//HTML

Eleva tu negocio digital a otro nivel con un Front-end de calidad!

¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?

Foto de Ana García desarrollando un proyecto

    <section id="proyectos" class="section proyectos">
        <h2>Mis Proyectos</h2>
        <div class="proyecto">
            <h3>Proyecto 1</h3>
            <p>Descripción del proyecto</p>
        </div>
        <div class="proyecto">
            <h3>Proyecto 2</h3>
            <p>Descripción del proyecto</p>
        </div>
    </section>

    <section id="contacto" class="section contacto">
        <h2>Contacto</h2>
        <p>Puedes contactarme a través de mis redes sociales o por correo electrónico.</p>
    </section>
</main>
<footer class="footer">
    <p>&copy; 2025 Ana García - Todos los derechos reservados</p>
</footer>

//CSS /* Estilos generales */ body { font-family: 'Arial', sans-serif; background-color: #121212; color: #F6F6F6; margin: 0; padding: 0; }

h1, h2, h3 { color: #FFFFFF; text-align: center; }

/* Header */ .header { background-color: #1E1E1E; padding: 20px 0; }

.navbar { display: flex; justify-content: center; }

.nav-list { list-style-type: none; display: flex; gap: 20px; }

.nav-item { color: #22D4FD; text-decoration: none; font-weight: bold; font-size: 18px; }

.nav-item:hover { text-decoration: underline; }

/* Main */ .main-content { padding: 50px 20px; }

.section { margin-bottom: 50px; }

.sobre-mi { text-align: center; }

.sobre-mi h1 { font-size: 2.5rem; margin-bottom: 20px; }

.sobre-mi p { font-size: 1.1rem; margin: 0 0 30px; }

.redes-sociales { display: flex; justify-content: center; gap: 20px; }

.social-link { color: #22D4FD; font-size: 1.2rem; text-decoration: none; }

.social-link:hover { text-decoration: underline; }

.foto-perfil { width: 150px; border-radius: 50%; margin-top: 20px; }

/* Flexbox para los proyectos */ .proyectos { background-color: #1E1E1E; padding: 40px 20px; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }

.proyecto { background-color: #2A2A2A; padding: 20px; width: 300px; border-radius: 8px; text-align: center; transition: all 0.3s ease; }

.proyecto:hover { background-color: #22D4FD; transform: translateY(-10px); }

.proyecto h3 { color: #FFFFFF; font-size: 1.5rem; }

.proyecto p { color: #F6F6F6; }

/* Footer */ .footer { background-color: #1E1E1E; padding: 20px 0; text-align: center; color: #F6F6F6; position: fixed; width: 100%; bottom: 0; }

/* Media Query para dispositivos móviles */ @media (max-width: 768px) { .nav-list { flex-direction: column; gap: 10px; }

.proyectos {
    flex-direction: column;
    align-items: center;
}

.proyecto {
    width: 80%;
}

}