Projet : Style Working Girl

Bonjour à tous !

J’ai commencé en Janvier 2018 une formation gratuite sur YouTube en HTML et CSS, ayant pour fil rouge la réalisation d’un site : Style Working Girl.

L’intérêt de ce projet, est qu’il permet d’apprendre à construire un site dans lequel on est en mesure de partager ses idées visuelles, partager sa passion d’un domaine, avoir des inspirations vestimentaires, …

Parce qu’il est important d’avoir une base écrite du projet, j’ai décidé de déposer le code source du projet sur cet article.

Tout d’abord constituez un dossier images à la racine de votre projet.

Voici, ci-dessous, les images que j’utilise pour construire le projet. Si vous voulez reproduire mon projet, vous pouvez télécharger les images :

Jessica Chastain :

Céline Salette :

Anna Kendrick :

Voici le code HTML (index.html) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="style.css"/>
        <title>Working Girl</title>
    </head>
    <body>
        <header>
            <h1>Style Working Girl</h1>
        </header>

        <div class="corps">
            <div id="jess">
                <h1>Jessica Chastain</h1>
                <div class="box">
                    <img src="images/jessica-chastain-1.jpg" class="image" alt="jessica-chastain-1" title="Jessica Chastain"/>
                    <img src="images/jessica-chastain-2.jpg" class="image" alt="jessica-chastain-2" title="Jessica Chastain"/>
                    <img src="images/jessica-chastain-3.jpg" class="image" alt="jessica-chastain-3" title="Jessica Chastain"/>
                </div>
            </div>
    
            <div id="celine">
                <h1>Céline Salette</h1>
                <div class="box">
                    <img src="images/celine-salette-1.jpg" class="image" alt="celine-salette-1" title="Celine Salette"/>
                    <img src="images/celine-salette-2.jpg" class="image" alt="celine-salette-2" title="Celine Salette"/>
                </div>
            </div>
    
            <div id="anna">
                <h1>Anna Kendrick</h1>
                <div class="box">
                    <img src="images/Anna-Kendrick-1.jpg" class="image" alt="Anna-Kendrick-1" title="Anna Kendrick"/>
                    <img src="images/Anna-Kendrick-2.jpg" class="image" alt="Anna-Kendrick-2" title="Anna Kendrick"/>
                </div>
            </div>
        </div>
        
        <footer>
            Site réalisé par SMARTFUL
        </footer>
    </body>
</html>

Et voici le code CSS (style.css) :

body {
    /* background-image: url(spiration_dark.png); */
    background-color: #333333;
    color: #FFFFFF;
}

header {
    text-align: center;
    border: 4px grey groove;
    padding: 10px;
}

footer {
    text-align: center;
    border: 2px grey solid;
    padding: 10px;
}

header h1 {
    font-size: 2.5em;
}

.corps {
    margin: 10px;
}

.corps h1 {
    text-decoration: underline;
}

.box {
    margin: 5px;
    border: 3px grey groove;
}

.image {
    margin: 5px;
    border: 3px #CC7777 groove;
}

#jess:hover {
    background-color: purple;
}

#celine:hover {
    background-color: blue;
}

#anna:hover {
    background-color: green;
}

Je vous souhaite de prendre du plaisir dans la construction de vos futurs projets.

SMARTFUL

 

Centrer du texte verticalement

En faisant un peu de HTML pour m’amuser, je me suis rendu compte que je butais fasse à quelque chose qui me semblait évident.

Comment centrer verticalement un élément dans une box ?

C’est alors que je me suis rendu compte au gré de mes recherche, que cela n’était guère évident.

Au fur et à mesure des version de CSS, il y a eu plusieurs solutions qui ont émergé. Et il n’y a donc pas de solution évidente qui ressort.

Le but de cet article est donc d’exprimer la solution la plus approprié en notre temps.

Tout d’abord, voici ce que je veux réaliser :

Le code CSS qui permet de réaliser l’alignement vertical de Catégorie X dans les box de couleur est le suivant :

display: flex;
align-items: center;

Pour avoir une vision d’ensemble voici l’intégralité du code mis en oeuvre :

Le code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css"/>
        <title>Test</title>
    </head>

    <body>
        <div id="main">
            <div id="bloc1">Catégorie 1</div>
            <div id="bloc2">Catégorie 2</div>
            <div id="bloc3">Catégorie 3</div>
        </div>
    </body>
</html>

Le code CSS :

#main {
    margin: 100px;
    width: 600px;
    height: 400px;
    border: 3px solid black;
    background-color: rgb(7, 6, 73);
}

#bloc1 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    border: 3px solid black;
    border-radius: 10px;
    background-color: rgba(255,0,0,0.2);
    color:white;
    display: flex;
    align-items: center;
}

#bloc2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    background-color: rgba(0,250,0,0.2);
    border: 3px solid black;
    border-radius: 10px;
    color:white;
    display: flex;
    align-items: center;
}

#bloc3 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    background-color: rgba(255, 174, 0, 0.2);
    border: 3px solid black;
    border-radius: 10px;
    color:white;
    display: flex;
    align-items: center;
}

SMARTFUL