SNT/sequences/web/epoques/2020.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cours NSI / SNT / Socio</title>

<!-- 2020. Le changement le plus important ne se voit pas a l'ecran : c'est la
     balise meta viewport, juste au-dessus. Elle indique au telephone de ne pas
     faire semblant d'etre un ecran d'ordinateur. Plus de la moitie des visites
     se font desormais sur mobile, et la page doit donc s'adapter a la largeur
     disponible : c'est ce qu'on appelle le responsive.

     Le style change aussi : fini les degrades et les ombres imitant le relief.
     On revient au plat, avec beaucoup d'espace vide, peu de couleurs, et des
     polices deja installees sur la machine pour eviter un telechargement. -->

<style>
:root {
  --fond: #ffffff;
  --texte: #1f2933;
  --gris: #616e7c;
  --trait: #e4e7eb;
  --accent: #2f6f4f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
}
header {
  position: sticky; top: 0;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  padding: 14px 0;
}
.conteneur { width: min(1080px, 92vw); margin: 0 auto; }
header .conteneur { display: flex; align-items: center; justify-content: space-between; }
.marque { font-weight: 600; font-size: 17px; }
nav a {
  color: var(--gris); text-decoration: none; margin-left: 22px; font-size: 15px;
}
nav a:hover { color: var(--texte); }

h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  margin: 56px 0 16px 0;
  letter-spacing: -0.02em;
}
.chapo { font-size: 19px; color: var(--gris); max-width: 62ch; margin: 0 0 48px 0; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 64px;
}
.carte {
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}
.carte:hover { border-color: var(--accent); transform: translateY(-2px); }
.carte h2 { font-size: 17px; margin: 0 0 6px 0; }
.carte p { margin: 0; color: var(--gris); font-size: 15px; }

footer {
  border-top: 1px solid var(--trait);
  padding: 28px 0 48px 0;
  color: var(--gris);
  font-size: 14px;
}
footer a { color: var(--gris); }
.epoques { margin-top: 12px; }
.epoques a, .epoques strong { margin-right: 6px; }

/* Sous 640 pixels, la barre de navigation passe sous le titre au lieu
   de rester a cote : c'est la media query qui le decide. */
@media (max-width: 640px) {
  header .conteneur { flex-direction: column; align-items: flex-start; gap: 8px; }
  nav a { margin-left: 0; margin-right: 18px; }
}
</style>
</head>

<body>

<header>
  <div class="conteneur">
    <span class="marque">Cours NSI / SNT / Socio</span>
    <nav>
      <a href="#">NSI</a>
      <a href="#">SNT</a>
      <a href="#">L3 Socio</a>
      <a href="#">Ressources</a>
    </nav>
  </div>
</header>

<main class="conteneur">

  <h1>Cours, exercices et ressources</h1>

  <p class="chapo">
    Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
    et d'algorithmes des graphes en L3 de sociologie quantitative.
  </p>

  <div class="grille">
    <a class="carte" href="#">
      <h2>NSI Premiere</h2>
      <p>Numerique et Sciences Informatiques</p>
    </a>
    <a class="carte" href="#">
      <h2>NSI Terminale</h2>
      <p>Numerique et Sciences Informatiques</p>
    </a>
    <a class="carte" href="#">
      <h2>SNT</h2>
      <p>Sciences Numeriques et Technologie</p>
    </a>
    <a class="carte" href="#">
      <h2>L3 Sociologie</h2>
      <p>Algorithmes des graphes</p>
    </a>
  </div>

</main>

<footer>
  <div class="conteneur">
    Lycee Charlotte Perriand
    <div class="epoques">
      <a href="1995.html">1995</a>
      <a href="1998.html">1998</a>
      <a href="2002.html">2002</a>
      <a href="2005.html">2005</a>
      <a href="2010.html">2010</a>
      <strong>2020</strong>
      <a href="2026.html">2026</a>
    </div>
  </div>
</footer>

</body>
</html>