Merci beaucoup je peux vous donner le code css et une page de mon site, c'est la première fois que je fais un site web
<!DOCTYPE HTML>
<html>
<head>
<title>Half Life 1</title>
<meta charset="utf-8">
<meta name="description" content="Site web sur Half Life ">
<meta name="keywords" content="half life 1 ,action, jeux video, image, gameplay, pc, ordinateur,gordon freeman">
<link href="stylehl.css" type="text/css" rel="stylesheet" media="screen" />
<meta name="author" content="Fabien GENTY">
<script src="jquery.js"> </script>
<script src="responsive.js"></script>
</head>
<header>
<body id="hdpage">
<nav role="navigat" id="menu">
<ul id="menu-horizontal">
<li><a href="index.html" title="Accueil">Accueil</a></li>
<li><a href="hl.html" title="L'univers de Half Life">L'univers de Half Life</a></li>
<li><a href="hl1.html" title="Half life 1">Half Life 1</a></li>
<li><a href="hl2.html" title="Half life 2">Half Life 2</a></li>
</ul>
</nav>
<div id=baniere_test>
<p>HλLF - LIFE </p>
</div>
</header>
<content>
<h1> Half Life 1 :Le début du mythe</h1>
<h2>Résume </h2>
<p>L'action se situe essentiellement dans une zone désertique reculée du Nouveau-Mexique dans une installation connue sous le nom de Black Mesa Research Facility (Centre de recherche de Black Mesa), un lieu fictif complexe ayant de nombreuses similitudes à la fois avec le Laboratoire national de Los Alamos et la Zone 51. Elle se déroule le 16 mai 2000</p>
<h2>Début du jeux</h2>
<p>Half-Life relate les aventures de Gordon Freeman, chercheur au Laboratoire des matériaux anormaux du centre de recherche de Black Mesa, un gigantesque complexe scientifique top secret installé dans une base militaire désaffectée totalement enterrée sous la surface. Alors qu'il participait à une expérience sur un mystérieux échantillon de cristal, Freeman ouvre involontairement une brèche interdimensionnelle vers un monde parallèle, Xen, peuplé de créatures extraterrestres. Des aliens d'espèces et de races diverses font irruption un peu partout dans le centre et attaquent sauvagement son personnel. La salle de test est partiellement détruite par la résonance en chaîne, mais Freeman, équipé d'une combinaison de protection en milieu hostile (HEV), parvient à en sortir indemne après avoir été pris dans une tempête de portails. Après s'être remis d'un court évanouissement, il prend conscience de la catastrophe…</p>
<p>Une petite video du début </p>
<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/ODjmzgq4_Co" frameborder="10" allowfullscreen></iframe>
<p>Voici une petite video des graphismes , il faut se rappler que le jeu date de 1998</p>
<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/tWVTYPtZYmA?rel=0" frameborder="10" allowfullscreen></iframe>
<h2>Gallerie d'images</h2>
<p>La gallerie d'image c'est par ici appuyer sur le lambda</p>
<a href="gallerie/galleriehl1.html"><img id="logo_lambda" src="img/hllogo.png" alt="logo lambda"/></a>
</content>
<footer>
<ul>
<li>Si vous voulez me <a href="mailto:maxime.renard01@etu.univ-paris-diderot.fr?subject=Probleme-de-connection" title="contact"target="_blank"> contacter </a></li>
<li><a href="http://store.steampowered.com/search/?snr=1_5_9__12&term=half+life" target="blank">Liens vers le store Steam</a></li>
</ul>
<a href="#hdpage" alt= "haut de page" title="haut de page">
<img id="hdp" src="img/ap.png" width="100" height="100" alt="haut de page" title "haut de page"/></a>
</footer>
</body>
</html>
/* remise des parametres a zero*/
*
{
margin:0px;
padding:0px;
color:black;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
em
{
font-style:normal;
}
strong
{
font-style:normal;
}
/*Mise en page des contenus */
body
{
color:#d9d9d9;
width:60%;
height:80%;
margin right:5%;
margin left:10%;
padding:5% auto;
font-family:"Comic Sans MS",Arial,sans-serif;
font-size:1em;
background:url("img/background.jpeg") no-repeat center fixed;
background-size:cover;
-moz-background-size:cover;
}
h1
{
text-align:center;
margin: 10% 4%;
padding: 2% 2%;
border: solid 5px;
-moz-box-shadow: 13px 2px 130px 10px #fcff2f;
-webkit-box-shadow: 13px 2px 130px 10px #fcff2f;
-o-box-shadow: 13px 2px 130px 10px #fcff2f;
box-shadow: 13px 2px 130px 10px #fcff2f;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
h2
{
font-size: 30px;
text-align: center;
padding: :1% auto;
margin:2%;
color:#C0C0C0;
text-decoration : underline;
text-shadow: 2px 2px black;
margin-top: 5%;
}
li.sous_titre
{
margin-left:20%;
}
li.sans_puce
{
slist-style-type: none;
color: grey;
text-shadow: green 0.1em 0.1em 0.2em}
content ul div#menu_episode
{
color:#b3b3b3;
font-size: 20px;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
list-style-type: none;
text-align: left;
}
content ul li,p
{
margin:3.5%;
padding: 1%;
text-align: justify;
color:#b3b3b3;
font-size: 20px;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
li.menu
{
list-style-type: none;
}
/* mise en page des video et images*/
div img
{
border: white 50px;
border-radius: 10px;
margin :auto;
}
.video
{
margin-left: 100px;
}
/*Menu simple avec ul*/
nav#menu
{
font-size: 25px;
margin:auto;
width:70%;
height:auto;
border-radius: 15px;
background-color:#ffff33;
background: -moz-linear-gradient(top , #b30000, #4d4d4d);
box-shadow: 0px 0px 0px 1px #000;
margin-top: 10px;
}
ul#menu-horizontal li
{
display:inline;
padding: 0.5em;
}
ul#menu-horizontal
{
list-style-type:none;
text-align:center;
}
ul#menu-horizontal a
{
text-decoration:none;
width:30px;
height:50px;
color:black;
line-height:60px;
text-align:center;
}
ul#menu-horizontal a:hover
{
color:#333333;
text-shadow: 5px 5px 10px #ff6600;
padding:6px 1px;
background:url("img/fleche.gif") top center no-repeat;
}
nav
{
margin:auto;
width:400px;
}
div#liste
{
margin-left: 5%;
margin-right: 1px;
list-style-type: none;
column-count:2;
-moz-column-count:2;
column-width:10px;
-moz-column-width:10px;
column-gap:10px;
-moz-column-gap:10px;
column-rule:2px solid black;
-moz-column-rule:2px solid black;
}
/* parametres pour la baniere*/
div#baniere_test p
{
color:rgb(104,104,104) ;
text-shadow: 6px 4px 4px black;
font-size: 50px;
text-align: center;
line-height: 100px;
letter-spacing: 22px;
}
div#baniere_test
{
background-color:#000000;
width:70%;
height: 60%;
margin: 0 auto;
font-size:1.5em;
border-radius:5px;
box-shadow:0px 0px 65px #404040 inset,0px 0px 20px black inset;
}
img#logo_lambda
{
height:80px;
width:140px;
position: relative;
left: 70%;
bottom: 100px;
}
img#hdp
{
position: fixed;
right: 1%;
bottom: 50px;
}
footer
{
border: solid 4px grey;
border-radius: 4px;
width:auto;
height: 70px;
position: relative;
}
footer ul li
{
display: inline-block;
margin: 10px;
padding: 10px;
font-style : italic;
font-size: 30px;
overflow:
}
