10 - Création de la page d'un gîte

Benoit BIAUDET

Mis en ligne le 08-03-2023 à 11:41

Langues disponibles

1 . Création de la page d'un gîte

Vous allez devoir créer une nouvelle page qui va s'appeler "**gite1.html**", pour cela cliquez sur le petit bouton "**nouveau fichier**" et nommez votre page.

![nv fichier](https://coding-school.fr/images/users/1678269134.PNG)

Ensuite, pour vous facilitez la tâche voici une template de la page avec la barre de navigation, l'image de fond ainsi que le footer.

```
<html>
    <head>
        <meta charset="utf-8">
        <title>Le Fleury</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul id="nav">
                <li><a href="index.html">Accueil</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
				
        <div class="footer">
            <p>2023 - Courseulles-sur-Mer</p>
        </div>
    </body>
</html>
```

Nous allons coder ici : 
```
 </nav>
		
 <div class="footer">
```

Tout d'abord nous allons créer une nouvelle div qui va voir une classe nommée **presentationGite** :

```
<div class="presentationGite">

</div>
```

A l'intérieur nous allons mettre un titre, des paragraphes, un bouton de redirection vers la page contact.html.
Ensuite, nous allons recréer une div qui va contenir une classe **images** et dans cette dernière nous allons mettre 6 images du gîte qui seront avec un paramètre ```height``` de 300.

```
<div class="presentationGite">
   <h1>Le fleury</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus ipsum, ultrices vitae tellus vel, congue lacinia leo..</p> 
   <p>Si vous êtes intéressé par ce gîte vous pouvez nous contacter via le formulaire</p>
   <a href="contact.html"><button>Réserver ce gîte</button></a>
   <div class="images">
    <h2>Quelques images du gîte :</h2>
    <img src="fleury/fleury.jpg" height="300">
    <img src="fleury/fleury1.jpg" height="300">
    <img src="fleury/fleury2.jpg" height="300">
    <img src="fleury/fleury6.jpg" height="300">
    <img src="fleury/fleury4.jpg" height="300">
    <img src="fleury/fleury5.jpg" height="300">
    </div>
  </div>
```

Voici le résultat sans le CSS pour le moment :

![sans CSS](https://coding-school.fr/images/users/1678350049.PNG)

Passons maintenant au CSS, comme pour les autres pages nous allons aligner les éléments de la classe au centre.

Nous passons ensuite au titre h1, nous allons les mettre en vert puis augmenter leurs tailles.

```
.presentationGite {
    text-align: center;
}
.presentationGite h1 {
    color: green;
    font-size: 50px;
}
```

Pour les paragraphes nous allons faire les même modifications que sur les pages précédentes (de l'espace partout, augmentation de la taille et mettre en gras le texte)

```
.presentationGite p {
    padding-top: 20px;
    font-size: 15px;
    margin-left: 10%;
    margin-right: 10%;
    font-weight: bold;
}
```

Pour le bouton nous allons faire les même modifications que sur les pages précédentes :

```
.presentationGite button {
    font-size: 30px;
    background-color:blue;
    border: none;
    padding: 13px 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 15px;
    cursor: pointer;
    color: white;
}
.presentationGite button:hover {
    color: green;
    transition: .7s;
    box-shadow: 2px 2px green;
}
```

Enfin pour les images nous allons les espacer les unes des autres, leur mettre des bords arrondies puis, faire un zoom lorsque l'utilisateur va passer sa souris sur l'image :

```
.images h2 {
    color: black;
    text-align: center;
    padding-top: 30px;
}
.images img {
    padding-top: 40px;
    padding-left: 10px;
    padding-bottom: 50px;
    border-radius: 15%;
}
.images img:hover {
    transition: .9s;
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari 3-8 */
    transform: scale(1.2);
}
```

Voici le résultat final :

![page gîte](https://coding-school.fr/images/users/1678433208.PNG)

10 - Création de la page d'un gîte

1 . Création de la page d'un gîte

Sommaire