activité sur l'évolution du design web, sept pages de 1995 à 2026
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>xX-cours-nsi-snt-socio-Xx :: Mon blog</title>
|
||||
|
||||
<!-- 2005. L'epoque des blogs personnels et des profils que chacun decorait
|
||||
lui-meme. Le contraste avec 2002 est brutal : ce n'est plus un site
|
||||
institutionnel, c'est une page qu'on personnalise a l'extreme.
|
||||
|
||||
Les elements caracteristiques : fond a paillettes, texte qui clignote,
|
||||
musique qui se lance toute seule, module de commentaires, pseudo a
|
||||
rallonge, et beaucoup, beaucoup de rose. -->
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background-color: #12002b;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ff66cc' stroke-width='1.2'%3E%3Cpath d='M12 4 L13.5 9 L18 10 L13.5 11 L12 16 L10.5 11 L6 10 L10.5 9 Z'/%3E%3Cpath d='M44 30 L45 33 L48 34 L45 35 L44 38 L43 35 L40 34 L43 33 Z' stroke='%2366ffff'/%3E%3Cpath d='M28 48 L29 51 L32 52 L29 53 L28 56 L27 53 L24 52 L27 51 Z' stroke='%23ffff66'/%3E%3C/g%3E%3C/svg%3E");
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
color: #ffffff;
|
||||
}
|
||||
#cadre {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border: 4px double #ff66cc;
|
||||
background-color: rgba(30, 0, 60, 0.88);
|
||||
padding: 12px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 34px;
|
||||
color: #ff66cc;
|
||||
text-shadow: 2px 2px 0 #000000, 4px 4px 0 #66ffff;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.pseudo { text-align: center; color: #66ffff; font-size: 13px; }
|
||||
.clignote { animation: clignote 1s steps(2, start) infinite; color: #ffff66; font-weight: bold; }
|
||||
@keyframes clignote { to { visibility: hidden; } }
|
||||
.article {
|
||||
border: 2px dashed #66ffff;
|
||||
background-color: #2a0050;
|
||||
padding: 10px;
|
||||
margin: 14px 0;
|
||||
}
|
||||
.article h2 { color: #ffff66; font-size: 20px; margin: 0 0 6px 0; text-shadow: 1px 1px 0 #ff0066; }
|
||||
.date { font-size: 11px; color: #ff99dd; }
|
||||
a { color: #66ffff; }
|
||||
a:hover { color: #ffff66; }
|
||||
ul { list-style: none; padding-left: 0; }
|
||||
ul li { padding: 5px; margin: 4px 0; background-color: #3d0070; border-left: 6px solid #ff66cc; }
|
||||
#lecteur {
|
||||
border: 2px solid #ffff66; background-color: #000000;
|
||||
padding: 8px; text-align: center; margin: 10px 0; font-size: 12px;
|
||||
}
|
||||
#lecteur button {
|
||||
font-family: "Comic Sans MS", cursive; font-size: 13px;
|
||||
background-color: #ff66cc; color: #12002b; border: 2px outset #ffffff;
|
||||
padding: 4px 12px; cursor: pointer;
|
||||
}
|
||||
#coms { border: 2px solid #ff66cc; padding: 10px; margin-top: 14px; }
|
||||
#coms h3 { color: #ff66cc; margin: 0 0 8px 0; }
|
||||
.com { background-color: #2a0050; padding: 6px; margin: 6px 0; font-size: 12px; }
|
||||
#pied { text-align: center; font-size: 11px; margin-top: 14px; color: #ff99dd; }
|
||||
marquee { color: #ffff66; font-size: 16px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="cadre">
|
||||
|
||||
<h1>xX-Cours-NSI-SNT-Socio-Xx</h1>
|
||||
<p class="pseudo">
|
||||
Le blog officiel des cours du lycee Charlotte Perriand<br>
|
||||
<span class="clignote">NOUVEAU !!!</span> 4 matieres en ligne !!
|
||||
</p>
|
||||
|
||||
<marquee scrollamount="5">
|
||||
Bienvenue sur mon blog !!! Lache tes coms !!! Ajoute-moi dans tes favoris !!! ^^
|
||||
</marquee>
|
||||
|
||||
<!-- En 2005, la musique se lancait toute seule au chargement de la page.
|
||||
Les navigateurs modernes l'interdisent : il faut desormais une action
|
||||
de l'utilisateur. Le bouton ci-dessous explique justement pourquoi. -->
|
||||
<div id="lecteur">
|
||||
<span style="color:#ffff66;">♫ Ma musique ♫</span>
|
||||
<button type="button" onclick="expliquer()">Lecture</button>
|
||||
<div id="message" style="color:#66ffff; margin-top:6px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<h2>Bienvenue sur mon blog !!</h2>
|
||||
<p class="date">Poste le 14 mars 2005 a 22h47</p>
|
||||
<p>
|
||||
Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
|
||||
et d'algorithmes des graphes en L3 de sociologie quantitative. Bonne visite
|
||||
a tous et a toutes :-)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<h2>Les matieres</h2>
|
||||
<p class="date">Poste le 14 mars 2005 a 22h51</p>
|
||||
<ul>
|
||||
<li><a href="#">NSI Premiere</a> :: Numerique et Sciences Informatiques</li>
|
||||
<li><a href="#">NSI Terminale</a> :: Numerique et Sciences Informatiques</li>
|
||||
<li><a href="#">SNT</a> :: Sciences Numeriques et Technologie</li>
|
||||
<li><a href="#">L3 Sociologie</a> :: Algorithmes des graphes</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="coms">
|
||||
<h3>Lache tes coms (3)</h3>
|
||||
<div class="com"><b>xX_camille_Xx</b> : trop bien ton blog !! passe sur le mien ^^</div>
|
||||
<div class="com"><b>sofiane62</b> : +1 continue comme ca</div>
|
||||
<div class="com"><b>anonyme</b> : la musique elle est trop bien</div>
|
||||
</div>
|
||||
|
||||
<div id="pied">
|
||||
Visiteurs : 0 0 9 3 4 2 | Derniere mise a jour : 14 mars 2005<br>
|
||||
<a href="#">Livre d'or</a> - <a href="#">Mes amis</a> - <a href="#">Me contacter</a>
|
||||
<p>
|
||||
<a href="1995.html">1995</a> |
|
||||
<a href="1998.html">1998</a> |
|
||||
<a href="2002.html">2002</a> |
|
||||
<b style="color:#ffff66;">2005</b> |
|
||||
<a href="2010.html">2010</a> |
|
||||
<a href="2020.html">2020</a> |
|
||||
<a href="2026.html">2026</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function expliquer() {
|
||||
document.getElementById("message").textContent =
|
||||
"En 2005, cette musique se lancait toute seule des l'ouverture de la page. " +
|
||||
"Depuis, les navigateurs le refusent : le son exige une action de votre part.";
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user