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

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *