165 lines
5.2 KiB
HTML
165 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Cours NSI / SNT / Socio</title>
|
|
|
|
<!-- 2010. L'epoque dite "web 2.0". Les tableaux ont disparu de la mise en page,
|
|
remplaces par des blocs flottants. Le CSS3 arrive et apporte enfin, sans
|
|
images, ce qu'il fallait auparavant decouper dans Photoshop : coins
|
|
arrondis, degrades, ombres portees.
|
|
|
|
La largeur reste fixe, 960 pixels, parce que le telephone ne sert pas
|
|
encore vraiment a naviguer. Les boutons brillants et les badges "beta"
|
|
sont la signature visuelle de ces annees. -->
|
|
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
padding: 0 0 40px 0;
|
|
background: #e8ebee url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23e8ebee'/%3E%3Crect width='2' height='2' fill='%23e3e6ea'/%3E%3C/svg%3E");
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
color: #444;
|
|
}
|
|
#bandeau {
|
|
background: linear-gradient(to bottom, #4a7fb5, #2f5c8a);
|
|
border-bottom: 3px solid #1d3f61;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
|
}
|
|
#conteneur { width: 960px; margin: 0 auto; }
|
|
#bandeau #conteneur { padding: 18px 0; }
|
|
h1 {
|
|
margin: 0; color: #fff; font-size: 28px; font-weight: bold;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
|
|
float: left;
|
|
}
|
|
.beta {
|
|
display: inline-block; margin-left: 10px; vertical-align: 8px;
|
|
background: linear-gradient(to bottom, #ffd54a, #e8a712);
|
|
color: #6b4700; font-size: 10px; font-weight: bold; text-transform: uppercase;
|
|
padding: 3px 8px; border-radius: 10px; border: 1px solid #c98f0a;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
|
}
|
|
#nav { float: right; padding-top: 10px; }
|
|
#nav a {
|
|
color: #dce8f4; text-decoration: none; margin-left: 18px; font-size: 13px;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
#nav a:hover { color: #fff; text-decoration: underline; }
|
|
.clear { clear: both; }
|
|
|
|
#intro {
|
|
background: #fff; border: 1px solid #c8cdd3; border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
|
|
padding: 22px 26px; margin-top: 26px;
|
|
}
|
|
#intro p { font-size: 15px; line-height: 1.6; margin: 0; color: #555; }
|
|
|
|
.cartes { margin-top: 22px; }
|
|
.carte {
|
|
float: left; width: 228px; margin-right: 16px;
|
|
background: #fff; border: 1px solid #c8cdd3; border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
|
|
padding: 16px;
|
|
}
|
|
.carte:last-child { margin-right: 0; }
|
|
.carte h2 { margin: 0 0 8px 0; font-size: 15px; color: #2f5c8a; }
|
|
.carte p { margin: 0 0 12px 0; color: #777; line-height: 1.5; }
|
|
.bouton {
|
|
display: inline-block; text-decoration: none;
|
|
background: linear-gradient(to bottom, #6ba3d6, #3a6f9f);
|
|
border: 1px solid #2c5a86; border-radius: 5px;
|
|
color: #fff; font-weight: bold; font-size: 12px; padding: 6px 14px;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.2);
|
|
}
|
|
.bouton:hover { background: linear-gradient(to bottom, #7db3e2, #457fb0); }
|
|
|
|
#partage {
|
|
margin-top: 26px; padding: 14px 18px; background: #fff;
|
|
border: 1px solid #c8cdd3; border-radius: 8px; color: #888;
|
|
}
|
|
#partage span {
|
|
display: inline-block; margin-right: 8px; padding: 4px 10px;
|
|
border: 1px solid #c8cdd3; border-radius: 4px;
|
|
background: linear-gradient(to bottom, #ffffff, #eef1f4); font-size: 11px;
|
|
}
|
|
#pied {
|
|
margin-top: 26px; padding-top: 14px; border-top: 1px solid #c8cdd3;
|
|
color: #999; font-size: 12px; text-align: center;
|
|
}
|
|
#pied a { color: #2f5c8a; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="bandeau">
|
|
<div id="conteneur">
|
|
<h1>Cours NSI / SNT / Socio <span class="beta">beta</span></h1>
|
|
<div id="nav">
|
|
<a href="#">Accueil</a><a href="#">Matieres</a><a href="#">Ressources</a><a href="#">Contact</a>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="conteneur">
|
|
|
|
<div id="intro">
|
|
<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.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="cartes">
|
|
<div class="carte">
|
|
<h2>NSI Premiere</h2>
|
|
<p>Numerique et Sciences Informatiques</p>
|
|
<a class="bouton" href="#">Acceder</a>
|
|
</div>
|
|
<div class="carte">
|
|
<h2>NSI Terminale</h2>
|
|
<p>Numerique et Sciences Informatiques</p>
|
|
<a class="bouton" href="#">Acceder</a>
|
|
</div>
|
|
<div class="carte">
|
|
<h2>SNT</h2>
|
|
<p>Sciences Numeriques et Technologie</p>
|
|
<a class="bouton" href="#">Acceder</a>
|
|
</div>
|
|
<div class="carte">
|
|
<h2>L3 Sociologie</h2>
|
|
<p>Algorithmes des graphes</p>
|
|
<a class="bouton" href="#">Acceder</a>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div id="partage">
|
|
Partager cette page :
|
|
<span>J'aime</span><span>Tweeter</span><span>Partager</span><span>+1</span>
|
|
</div>
|
|
|
|
<div id="pied">
|
|
Lycee Charlotte Perriand | Derniere mise a jour : 4 octobre 2010
|
|
| Largeur optimale : 1024 pixels
|
|
<p>
|
|
<a href="1995.html">1995</a> |
|
|
<a href="1998.html">1998</a> |
|
|
<a href="2002.html">2002</a> |
|
|
<a href="2005.html">2005</a> |
|
|
<strong>2010</strong> |
|
|
<a href="2020.html">2020</a> |
|
|
<a href="2026.html">2026</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|