SNT/sequences/web/epoques/2005.html

<!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;">&#9835; Ma musique &#9835;</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 &nbsp;|&nbsp; 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>