Haga lo que hicimos en aula - Aplicando CSS | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

Para este proyecto he creado 3 archivos CSS que he llamado style1.css para un estilo formal, style2.css para un estilo colorido y style3.css para un estilo minimalista. Me he apoyado con https://www.w3schools.com/css/ y ChatGPT.

El codigo de html es el siguiente

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Randy</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <header>
        <nav>
            <h2>Randy Dev</h2>
            <ul>
                <li><a href="#proyectos">Proyectos</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="presentacion">
            <h1>Hola, soy <strong>Randy</strong></h1>
            <h3>Desarrollador & Geomático</h3>

            <p>
                Me dedico a crear soluciones digitales y proyectos geoespaciales
                que combinan precisión técnica con creatividad. 
                Este es mi portafolio, donde encontrarás mis trabajos más recientes.
            </p>

            <a class="btn" href="https://instagram.com/" target="_blank">Instagram</a>
            <a class="btn" href="https://github.com/" target="_blank">GitHub</a>

            <img src="Randy_Roco.jpeg" alt="Foto de Randy trabajando en un proyecto" width="300">
        </section>
    </main>

    <footer>
        <p>© 2025 Randy. Todos los derechos reservados.</p>
        <p id="contacto">Contacto: <a href="mailto:randy.roco.m@gmail.com">randy.roco.m@gmail.com</a></p>
    </footer>
</body>
</html>

CSS style1.css
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

body {
    background-color: #2c2c2c; /* gris oscuro */
    color: white;
    font-family: 'Georgia', serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #1a1a1a;
    padding: 15px;
    text-align: center;
}

header h2 {
    margin: 0;
    font-size: 1.8rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

a {
    color: #c9a646;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

main {
    text-align: center;
    padding: 30px;
}

.btn {
    display: inline-block;
    background-color: #c9a646;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
}

.btn:hover {
    background-color: #b38c3a;
}

footer {
    background-color: #1a1a1a;
    padding: 10px;
    text-align: center;
    font-size: 0.9rem;
}

style2.css

body {
    background: linear-gradient(135deg, #ff7eb3, #65d6ce);
    color: white;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    margin: 0;
}

header {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 20px;
    text-align: center;
}

header h2 {
    font-size: 2rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

a {
    color: yellow;
    font-weight: bold;
}

a:hover {
    color: #fff200;
}

main {
    text-align: center;
    padding: 30px;
}

.btn {
    display: inline-block;
    background-color: yellow;
    color: #333;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 25px;
    font-weight: bold;
}

.btn:hover {
    background-color: #ffd700;
}

footer {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 15px;
    text-align: center;
}

style3.css

body {
    background-color: white;
    color: #333;
    font-family: Arial, sans-serif;
    margin: 0;
}

header {
    background-color: #f0f0f0;
    padding: 15px;
    text-align: center;
}

header h2 {
    margin: 0;
    font-size: 1.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

main {
    text-align: center;
    padding: 20px;
}

.btn {
    display: inline-block;
    background-color: #007BFF;
    color: white;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 3px;
    font-size: 0.9rem;
}

.btn:hover {
    background-color: #0056b3;
}

footer {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
}

Hola Randy, espero que estés muy bien.

¡Felicitaciones por tus avances en el aprendizaje!

Queremos comentarte que actualmente estamos priorizando el uso del foro para publicar dudas. De esa manera, podemos optimizar el tiempo de respuesta y asegurar que todos los estudiantes reciban apoyo efectivo.

Para compartir comentarios, experiencias, recomendaciones, desafíos u opiniones, te invitamos a participar activamente en nuestro canal de Discord.
Allí la interacción es inmediata, llega a más compañeros y favorece el intercambio constante entre la comunidad.

¡Tu participación hace la diferencia!

Un saludo.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios