Marie-Philippe Gill: Fin du Projet Perso

Coucou !

Temps: 1h

J'ai encore travaillé sur mon blog ce cours-ci.

J'ai terminé le chapitre sur la création du design, et voici le résultat :

le code html ;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
   <title>Bienvenue sur mon site !</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Mécanique" href="design.css" />
   
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Rose pour les filles" href="design_poney_rose.css" />
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Sombre et terrifiant" href="sombre.css" />
   <link rel="alternate stylesheet" media="screen" type="text/css" title="Aquatique" href="aquatique.css" />
</head>
   <body>
       
 <div id="en_tete">

</div>

<h3>Titre menu</h3>
  <ul>
   <li><a href="page1.html">Lien</a></li>
   <li><a href="page2.html">Lien</a></li>
   <li><a href="page3.html">Lien</a></li>
  </ul>
 
  </div>

<h3>Titre menu</h3>
  <ul>
   <li><a href="page4.html">Lien</a></li>
   <li><a href="page5.html">Lien</a></li>
   <li><a href="page6.html">Lien</a></li>
  </ul>
  </div>

</div>

<div id="corps">
  <h1>Chez Marie</h1>

<p>
       Bienvenue sur mon super site !<br />
       Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
   </p>
 
   <h2>A qui s'adresse ce site ?</h2>    
   <p>
       A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
       Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
   </p>
   
   <h2>L'auteur</h2>    
   <p>
       L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
       Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
       Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
   </p>

</div>

<div id="pied_de_page">
  <p>Copyright "Chez Marie", tous droits réservés</p>
 </div>
   </body>
</html>

le code css ;

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
*/

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/fond.png");
}

/* L'en-tête */

#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("images/banniere.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

/* Le menu */

#menu
{
   float: left;
   width: 120px;
}

.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}

/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
   
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   clear: both;

text-align: center;

color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

lundi 17 octobre 2011

Fin du Projet Perso

Aucun commentaire:

Enregistrer un commentaire