Haga lo que hicimos en el aula.

Comparto los avances de mi pequeño proyecto en el que he usada otra temática y otros colores y fuentes para no repetir el proyecto de Portafolio que vamos haciendo clase a clase. Link en Github:

https://lady-marianne.github.io/ada-lovelace-page/

A continuación comparto el CSS del proyecto:

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');

* {
    padding: 0;
    margin:0;
}

.header {
    padding: 20px;
}

.header__menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__menu__link {
    font-size: 25px;
    color: #a44a3f;
    text-decoration: none;
    margin: 0 10px;
    padding: 10px 15px;
}

.header__menu__link:hover {
    color: #52489c;
}

body{
    /*height: 100vh;*/
    box-sizing: border-box;
    background-color: #000000;
    color: #e2dad8;
}

.titulo-destaque {
    color: #92374d;
}

.parrafo-destaque {
    color: #92374d;
}

.presentacion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 5%;
}

.presentacion__contenido{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;

}

.presentacion__contenido__titulo{
    font-size: 40px;
    font-family: "Josefin Sans", sans-serif;
}

.presentacion__contenido__texto{
    font-size: 20px;
    font-family: "Roboto Slab", serif;
}

.presentacion__enlaces {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__subtitulo {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 25px;
    font-weight: 700px;
}

.presentacion__enlaces__link {
    width: 378;
    text-align: center;
    padding: 15px 90px;
    font-family: "Josefin Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-decoration: none;
    color: #A1869E;
    border: 5px solid #4A4A4A;
    border-radius: 8px;
}

.presentacion__enlaces__link:hover {
    background-color: #272727;
    border: 10px solid #4A4A4A;
}

img {
    border: 5px solid #4A4A4A;
    border-radius: 8px;
}

.footer {
    padding: 24px;
    color: #000000;
    background-color: #E5877A;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 700;
}