miniSITE/textes.html at master · Fabgraph/miniSITE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie-edge">
        <title>miniSITE : des textes</title>
        <!-- la feuille de style externe avec une balise link -->
        <link href="css/style.css" rel="stylesheet">
        <style>

            /* les pseudo class :first-child */
            li:first-child {
                background: lightblue;
            }
            article li:first-child {
                background: purple;
            }
            article li:nth-child(4) {
                background: olive;
                color: white;
            }
            #nchild li:nth-child(2n) {
                background: #000;
                color:#fff;
            }


        </style>
    </head>
    <body>
        <!--début de la div principale-->
        <div id="wrapper">
            <!--en-tête de la page ou d'une division ou d'une section-->
            <header>
                <h1><a href="index.html">Le minisite de Fabrice</a></h1>
            </header>

        <!--pour une division sur le côté de la page-->
        <aside class="fond_gris">
                <h1>Bienvenue</h1>
            <!--la navigation de la page-->
            <nav class="fond_rouge">
                <h2>Navigation</h2>
                    <ul>
                        <li><a href="index.html" title="miniSITE : accueil">Accueil</a></li>
                        <li><a href="photos.html" title="miniSITE : photos">Photos</a></li>
                        <li><a href="textes.html" title="miniSITE : textes">Textes</a></li>
                        <li><a href="formulaire.html" title="miniSITE : formulaire">Formulaire</a></li>
                        <li><a href="tableau.html" title="miniSITE : tableau">Tableau</a></li>
                        <li><a href="mignon.html" title="miniSITE : mignon>Migon">Mignon</a></li>
                        <li><a href="bilbo.html" title="mniniSITE : Bilbo">Bilbo</a></li>
                        <li><a href="bordures.html" title="miniSITE : Bordures">Bordures</a></li>
                        <li><a href="float.html" title="miniSITE : le float">Le float</a></li>
                        <ul>
                            <li><a href="cubitus1.html" title="miniSITE : le cubitus 1">Le cubitus 1</a></li>
                            <li><a href="cubitus2.html" title="miniSITE : le cubitus 2">Le cubitus 2</a></li>
                            <li><a href="damier.html" title="miniSITE : le damier">Le damier</a></li>
                        </ul>
                    </ul>
            </nav>
        </aside>

        <div id="main" class="fond_bleu">
        <!--contenu principal-->
            <!--du contenu textuel, un article avec son h2-->
            <article>
                <h2>Voici quelques morales de Fables de Jean de la Fontaine</h2>
                <h3 class="fond_gris">L'Aigle et la Pie</h3>
                <p>Quoiqu'ainsi que la pie il faille dans ces lieux
                        Porter habit de deux paroisses</p>

                <h3 class="fond_gris">Un Animal dans la Lune</h3>
                <p>la Philosophie
                        Dit vrai, quand elle dit que les gens tromperont
                        Tant que sur leur rapport les hommes jugeront.</p>

                <!-- je joue avec les class -->
                <h3 class="fond_gris">L'Avare qui a perdu son trésor</h3>
                <p>L'usage seulement fait la possession.
                        Je demande à ces gens de qui la passion
                        Est d'entasser toujours, mettre somme sur somme,
                        Quel avantage ils ont que n'ait pas un autre homme. </p>
                <!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora saepe, animi fugit quis quod sapiente similique commodi temporibus aut maxime. Quaerat dicta eaque aperiam veniam, eos architecto impedit recusandae necessitatibus.</p> -->
            </article>
            <h3>Une astuce avec un hover</h3>
            <div id="survol">
                Survolez cette ligne pour me faire apparaître
                <p>Coucou je suis là !</p>
            </div>
            <article>
                <h1>Une liste de choses à faire</h1>
                    <ul>
                        <li>Faire les courses</li>
                        <li>Lire mes mails</li>
                        <li>Prendre un café avec un ami</li>
                        <li>Faire le ménage</li>
                        <li>Faire à manger</li>
                        <li>Faire la vaisselle</li>
                    </ul>
                <h1>Ce que je fais dans l'ordre quand j'arrive au boulot</h1>
                    <ol>
                        <li>Dire bonjour aux collègues</li>
                        <li>Mettre mon repas au réfrigirateur</li>
                        <li>Prendre un café</li>
                        <li>Fumer une cigarette</li>
                        <li>Allumer mon PC</li>
                        <li>Me connecter à ma boîte mail</li>

                    </ol>
            </article>
            <article id="nchild">
                    <h1>Une liste de choses à ne pas faire</h1>
                        <ul>
                            <li>Fumer</li>
                            <li>Boire</li>
                            <li>Prendre des produits trops gras</li>
                            <li>Regarder la télé</li>
                            <li>Faire la fête</li>
                            <li>Du bruit</li>
                        </ul>
                </article>
        </div><!-- fermeture de la div mean -->

        <div class="clear"></div>

            <!--le pied de page-->
            <footer class="fond_bleu">Pied de page</footer>


        </div><!--fermeture première div wrapper-->
    </body>
</html>