Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[Proyecto] Aplicando CSS

Hola, comparto los estilos aplicados con CSS a la página creada en el desafío anterior.

HTML

<!DOCTYPE html>
<html lang="es-co">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practicando lo Aprendido en Alura Latam</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="logo_Alura.jpeg" alt="Logotipo de Alura-Latam">
    </header>
    <main>
        <h1>Aprendiendo con Alura-Latam y Oracle</h1>
        <h2>¿Por qué estudiar con Alura?</h2>
        <p>
            Estudiar en Alura te brinda cursos de alta calidad, proyectos prácticos y una comunidad activa. 
            <strong>¡Aumenta tus perspectivas de empleabilidad con certificados y conocimientos sólidos!</strong>
        </p>
        <img src="desarrollador.png" alt="Imagen de un Desarrollador web">
        <button><a href="https://www.instagram.com/">Instagram</a></button>
        <button><a href="https://github.com/">Github</a></button>
    </main>
    <footer>
        <p>Autor: Jhon S. Ardila R.</p>
        <p>Email: jhonsardila679@hotmail.com</p>
    </footer>

</body>
</html>

CSS

body {
    background-color: #85929E;
    color: #1A237E;
}

header {
    background-color: #34495E;
}

h1 {
    font-family: Tahoma, sans-serif;
    font-size:larger;
    font-style: oblique;
    color: white;
}

h2 {
    font-family:Verdana;
    font-size: large;
    font-style: italic;
}

p {
    font-family: 'Arial Narrow';
    font-size: medium;
    font-style:normal;
    color: #FF6F00;
}

strong {
    color: #FF6F00;
}

img {
    border-radius: 2%;
    border-style: groove;
}

button {
    font-family: fantasy;
    font-size: medium;
    color: #4527A0;
    background-color: #9575CD;
    border-radius: 10%;
}

footer {
    background-color: #85C1E9;
}
1 respuesta
solución!

Hola, podrías aplicar variables a los colores que tengas en tu paginas mas que todo para agilizar la edición frente a un posible cambio.

:root { --font-primary: #FF6F00; }

p { font-family: 'Arial Narrow'; font-size: medium; font-style:normal; color: var (--font-primary); }

strong { color: var (--font-primary); }

Algo asi podes aplicar.