Css de portfolio (2/3)

Nous allons passer à la structure interne de portfolio.

Pour commencer pour la classe port-flex : comme son nom l'indique : display flex, avec une direction en ligne, et flex-wrap : wrap.

.port-flex {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Pour la classe port-card, celle-ci aura une largeur un peu particulière : il faut calculer 25% moins 60 pixels.
Elle aura une marge de 10 pixels, un padding de 20 pixels, border-radius de 7 pixels, et un box-shadow : rgba(100,100,111,0.2) 0 7px 29px 0; et la couleur de fond sera #fff.

.port-card {
    width: calc(25% - 60px);
    margin: 10px;
    padding: 20px;
    border-radius: 7px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    background-color: #fff;
}

Pour les liens de port-card, l'apparence par défaut sera none; il y aura un padding de 8 pixels par 25 pixels, aucune bordure, une couleur de fond de #1a73e8, une couleur blanche, font-weight d'une valeur 700, une transition de 0.2s, un box-shadow de 0 0 2px #262626, un border-radius de 5 pixels, aucune décoration pour le texte (pas de surlignement et de soulignement), display block et l'alignement du texte au centre.

.port-card a {
    appearance: none;
    padding: 8px 25px;
    border: none;
    background-color: #1a73e8;
    color: white;
    font-weight: 700;
    transition: 0.2s;
    box-shadow: 0 0 2px #262626;
    border-radius: 5px;
    text-decoration: none;
    display: block;
    text-align: center;
}