nvidia.css

/*ENSEMBLE DU SITE */

*{
    box-sizing: border-box;
    margin: 0;
    list-style-type: none;
}

.wrapper {
    max-width: 1200px;
    margin:  auto;
    font-size: 16px;
    font-family: arial;
}


/* SEPARATON DES COMPARTIMENTS */

main, footer{
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}


/* NAV du HEAD */

nav {            
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

nav img{
    width: 112px;
}

ul{
    display: flex;
    list-style: none;
    align-items: flex-end;
    padding: 0;
    margin: 0 auto;
}
ul li {
    padding: 0 30px; /* première valeur s'applique au top et bottom, la deuxième à left et right */
}

ul li a {
    text-decoration: none;
    color: black;
    font-weight:  bold;     /* met en GRAS */
}

figure {
    margin: 0;
    position: relative;   /*   position normal par rapport au document puis décalé par rapport à lui même */
}


/* Image RTX */

.rtx {
    width: 100%;
    height: 400px;
    bottom: 0; 
    vertical-align: bottom;     /* s'aligne verticalement en fonction du parent */
    object-fit: cover;          /* définit la façon dont le contenu (img/video) doit s'adapter à son block */
}


/* FIGCAPTION SOUS IMAGE */

figcaption {
    display: flex;
    justify-content: space-between;
    background-color: #557e0f80; /* rajouter 80 à la fin pour rendre transparant */
    color: white;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

figcaption a {
    background-color: #76b90080;
    text-decoration: none;
    color: white;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 5px;
}

figcaption p {
    margin: auto 10px;
}

.decouvrir {
    background-color: #76b900;
}


/* main title */

.puissance {
    display: flex;  /*aligner l'un à côté de l'autre */
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

#title {
    height: 100%;
    border: 1px solid black;    /* bords de l'image */
    margin-right: 1em;            /* espace entre le titre et l'image */
    width: 2em;
    object-fit: cover;            /* s'adapte à l'espace du block */
}


#article {
    flex: 840px;
    border-bottom: solid #76b900;
}


/* A PROPOS */

aside {                        
    background-color: #76b900;
    flex: 360px;
    padding: 1em;
    color: white;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;    /* permet de s'adapter à l'ecran mobile */
    align-items: flex-start;    /* si débordement, se placera en dessous */
}


.logoblack {        /*nvidia aside */
    max-width: 40%;
    height: auto;
    margin: 20px;
}

.account {          /* logo twitter etc */
    display: flex;
    margin-top: 30px;
    margin-bottom: 20px;
    justify-content: space-around;  /* espacement entre les logo */
}

.text {
    text-align: left;
}

.proposblock, .propos {
    text-align: center;
}


/* POTI TRIANGLE */

#blocktriangle{
    text-align: center;
    
}

#triangle {
    transform: rotate(180deg);
    width: 30px;
}


/* NEWSLETTER */

.section-footer{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2em 0;
}

.logo {
    display: flex;
    gap : 1em;  /* necessaire de mettre un display flex pour valider la demande/ pose un espace entre deux entités */
}

.submit {
    background-color: #76b900;
    width: 80px; 
    height: 30px; 
    border: none; 
    color: white;
}

.formulaire {
    display:flex;   
    flex-direction: column;
    gap:5px;
}


/* LOGO GALLERIE */

.logo img{
    height: 70px;   /* changer la taille de l'image */
}


/* Display flex permet de préparer les modification du parents
necessaire pour débloquer les configurations en flex */

/* MEDIA QUERIES */

@media (max-width : 576px){    /*règle qui s'applique en dessous de 576px */
 
    main {
    flex-wrap: wrap;
    }

    nav,ul, footer {
        display :flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .nvid, .logo{
        margin: auto;
    }

    figcaption {
        display : flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    nav {
        gap: 1em;
    }

    #article {
        margin: 1em;
        border: none;
    }

    ul {
        gap: 1em;
    }

    .puissance {
        flex-direction: column;
        text-align: center;
    }

    .logo {
        display: flex;
        flex-wrap: wrap; 
        gap: 1em;
    }

    .rtx {
        height: auto;
        object-fit: contain;
    }
}