Code HTML de page index.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <title>Meuble XXX</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
  <header>
    <h1>Meuble <span class="rouge">Zahrat Albusten</span></h1>
  </header>
  <nav>
    <ul>
      <li><a href="Produits/produits.html">Nos Produits</a></li>
      <br/>
      <li><a href="commander.html">Production/commande</a></li>
      <br/>
      <li><a href="mailto:nom@provider.com">Nous contacter</a></li>
    </ul>
  </nav>
  <section>
    <h2>
      Vente de Meuble de Qualité
    </h2>
    <article>
      Notre société vous offre les meilleurs <br/> PRIX/QUALITE
    </article>
  </section>
  <footer>
    <b>Adresse</b> : Route mahdia Albusten &nbsp&nbsp Tél : +216 74 00 00 00 &nbsp&nbsp
    <a href="#">contact !</a>
  </footer>
</body>

</html>

Code CSS index.css de page index.html

header {
    width: 600px;
    position: absolute;
    left: 40px;
    top: 60px;
    background-color: blue;
}

nav {
    position: absolute;
    left: 20px;
    top: 130px;
    font-family: Arial;
    font-size: 16px;
}

ul {
    list-style-type: circle;
}

li {
    font-family: serif;
    border: 1px solid #555;
    background-color: #ffffcc;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
}

a {
    text-decoration: none;
    /* Les liens ne seront plus soulignés */
    color: red;
    /* Les liens seront en rouge au lieu de bleu */
    font-style: italic;
    /* Les liens seront en italique */
}

/*
a:hover {
    font-size: 18px;
}
*/

/* Quand le visiteur pointe sur le lien */

a:hover {
    text-decoration: underline;
    /* Le lien deviendra souligné quand on pointera dessus */
    color: green;
    /* Le lien sera écrit en vert quand on pointera dessus */
}

h1 {
    font-family: "Adobe Garmond Pro";
    font-size: 24px;
    text-align: center;
}

.rouge {
    color: red;
    font-family: Calibri;
}

section {
    position: absolute;
    left: 250px;
    top: 120px;
}

h2 {
    font-family: "Adobe Garmond Pro";
    font-size: 20px;
    text-align: center;
}

footer {
    width: 600px;
    height: 25px;
    position: absolute;
    left: 40px;
    bottom: 100px;
    border-bottom: 2px solid blue;
    border-right: 2px solid blue;
    border-left: 2px solid blue;
    border-top: 2px solid blue;
}

body {
    background-color: #e6ffff;
    font-family: "Times New Roman";
    font-size: 16px;
}

Code HTML de page fabrication.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <meta charset="utf-8" />
  <title>Vente Mobilier</title>
  <link rel="stylesheet" type="text/css" href="fabrication.css" />
</head>

<body>
  <form>
    <fieldset>
      <legend>Votre identité</legend>
      <ul>
        <li>
          <label>Nom</label>
          <input id=nom name=nom type=text placeholder="Prénom et nom">
        </li>
        <li>
          <label>Email</label>
          <input id=email name=email type=email placeholder="exemple@domaine.com">
        </li>
        <li>
          <label>Téléphone</label>
          <input id=telephone name=telephone type=tel>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>Produit demandé </legend>
      <ol>
        <li>
          <label>Description</label>
          <textarea id="description" name="description" rows="5" cols="50"></textarea>
        </li>
        <li>
          <label>Quantité demandée</label>
          <input id="quantite" name=quantite type=text>
        </li>
        <li>
          <label>Ville</label>
          <select name="ville">
                      <option>Sfax</option>
                      <option>Tunis</option>
                      <option>Sousse</option>
                      <option>Nabeul</option>
                      <option>Tozeur</option>
                    </select>
        </li>
      </ol>
    </fieldset>
    <fieldset>
      <legend>Carte Bancaire</legend>
      <ol>
        <li>
          <fieldset>
            <legend>Type de carte bancaire</legend>
            <input name=type_de_carte type=radio><img src="visa.png" />
            <input name=type_de_carte type=radio><img src="Amex.png" />
            <input name=type_de_carte type=radio><img src="mastercard.png" />
          </fieldset>
        </li>

Code CSS index.css de page fabrication.html

header {
    width: 600px;
    position: absolute;
    left: 40px;
    top: 60px;
    background-color: blue;
}

nav {
    position: absolute;
    left: 20px;
    top: 130px;
    font-family: Arial;
    font-size: 16px;
}

ul {
    list-style-type: circle;
}

li {
    font-family: serif;
    border: 1px solid #555;
    background-color: #ffffcc;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
}

a {
    text-decoration: none;
    /* Les liens ne seront plus soulignés */
    color: red;
    /* Les liens seront en rouge au lieu de bleu */
    font-style: italic;
    /* Les liens seront en italique */
}

/*
a:hover {
    font-size: 18px;
}
*/

/* Quand le visiteur pointe sur le lien */

a:hover {
    text-decoration: underline;
    /* Le lien deviendra souligné quand on pointera dessus */
    color: green;
    /* Le lien sera écrit en vert quand on pointera dessus */
}

h1 {
    font-family: "Adobe Garmond Pro";
    font-size: 24px;
    text-align: center;
}

.rouge {
    color: red;
    font-family: Calibri;
}

section {
    position: absolute;
    left: 250px;
    top: 120px;
}

h2 {
    font-family: "Adobe Garmond Pro";
    font-size: 20px;
    text-align: center;
}

footer {
    width: 600px;
    height: 25px;
    position: absolute;
    left: 40px;
    bottom: 100px;
    border-bottom: 2px solid blue;
    border-right: 2px solid blue;
    border-left: 2px solid blue;
    border-top: 2px solid blue;
}

body {
    background-color: #e6ffff;
    font-family: "Times New Roman";
    font-size: 16px;
}