cours_html_css/animations.html at master · jeuneyannick/cours_html_css · 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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="animations">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css"> <!-- Link c'est une information !-->
    <link href="https://fonts.googleapis.com/css?family=Lato&Lemonada&Oswald" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <title>Animations</title>
</head>
<body>
    <header>
        <div id="logo">
            <a href="index.html"><img src="img/logo.png" alt="logo"></a>
        </div>
        <div id="slogan">
            <h1>Mon premier site en HTML/CSS</h1>
        </div>
        <div id="reseauSociaux">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            <i class="fa fa-instagram" aria-hidden="true"></i>
        </div>
    </header>
    <nav>
        <a href="index.html">Structure</a>
        <a href="texte.html">Texte</a>
        <a href="selecteurs.html">Selecteurs</a>
        <a href="images.html">Image</a>
        <a href="Position.html">Position</a>
        <a href="tableau.html">Tableau</a>
        <a href="listes.html">Liste</a>
        <a href="zoning.html">Zoning</a>
        <a href="ancres.html">Ancres</a>
        <a href="Multimedia.html">Multimedia</a>
        <a href="Animations.html"class="couleur">Animations</a>
    </nav>
    <main>

        <h2>Animations</h2>
        <h3>InfoBulle</h3>
        <div class="infoBulle">
            <p>
                <a href="#">Passez la souris !<span>Salut. je suis un popup</span></a>
           </p>
           <p>
               <a href="#">Ici aussi !<span>Salut un autre popup</span></a>
           </p>
           <p>
               <a href="#">Une fois encore<span>Salut encore un popup</span></a>
           </p>
       </div>
          <section>
            <h3>Effets de survol avec transitions et filtres CSS</h3>
            <ul class="imgEffets">
                <li><img src="img/survol_img1.jpg" alt=""></li>
                <li><img src="img/survol_img2.jpg" alt=""></li>
                <li><img src="img/survol_img3.jpg" alt=""></li>
                <li><img src="img/survol_img4.jpg" alt=""></li>
          </ul>
      </section>
      <section>
            <h3>Rotation d'un menu CSS3</h3>
            <article id="menuRotate">
                <dl class="menu">
                    <dt class="btnRot">Partager</dt>
                    <dd><a href="">...</a></dd>
                    <dd><a href="">Delicious</a></dd>
                    <dd><a href="">Facebook</a></dd>
                    <dd><a href="">Twitter</a></dd>
                </dl>
                <div class="masque"></div>
                <div class="ombre"></div>
            </article>
      </section>
        </main>

    </body>
    </html>