Document

Voici un exemple de code HTML pour une page d'accueil avant la connexion de l'utilisateur, utilisant
Bootstrap pour un design réactif et moderne :
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bienvenue sur Camsight</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Camsight</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Connexion</a>
</li>
<a class="nav-link" href="register.html">Inscription</a>
</li>
</ul>
</div>
</nav>

<div class="container mt-5">
<div class="jumbotron">
<h1 class="display-4">Bienvenue sur Camsight!</h1>
<p class="lead">Rejoignez notre communauté et partagez vos expériences de voyage.</p>
<hr class="my-4">
<p>Explorez de nouvelles destinations, réservez des activités et créez des souvenirs

inoubliables.</p>
<a class="btn btn-primary btn-lg" href="register.html" role="button">Inscrivez-vous

maintenant</a>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.10/dist/umd/popper.min.js"></
script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
```
Ce code crée une page d'accueil avec une barre de navigation et un jumbotron Bootstrap, qui est un
composant pour afficher du contenu important. Il y a des liens pour la connexion et l'inscription, et
un message de bienvenue engageant pour les nouveaux visiteurs. Assurez-vous de remplacer les
liens `login.html` et `register.html` par les chemins appropriés vers vos pages de connexion et
d'inscription. **Bonne mise en œuvre !** 😊
Source : conversation avec Bing, 12/04/2024

(1) 60 modèles de formulaire de connexion CSS3 HTML5 gratuits - BeginDot.
https://www.begindot.com/fr/mod%C3%A8les-de-formulaire-de-connexion-css3-html5-gratuits/.
(2) Formulaire de login avec HTML/CSS, PHP et MySQL - CodeurJava.

https://www.codeurjava.com/2016/12/formulaire-de-login-avec-html-css-php-et-mysql.html.
(3) Plus de 90 modèles de page de formulaire de connexion CSS HTML gratuits ....
https://www.wprbs.com/fr/css-login-form-templates.html.
(4) Écrire une application web qui connecte/déconnecte des utilisateurs ....
https://learn.microsoft.com/fr-fr/entra/identity-platform/scenario-web-app-sign-user-sign-in.
(5) github.com.
https://github.com/NicoLarson/exercice_php/tree/751d31e78d5fbfe9852f5be20c6ce41a955051d7/
readme.md.
(6) github.com.
https://github.com/js202005082300/Aide-m-moires/tree/c85c562d508c68fa086972462338ed773a2
5c8ac/JavaScript%2Fcours%2F002_hello_world%2Fnote.md.
(7) github.com.
https://github.com/Agilbay04/VLMS-JTI/tree/ac9dee3ecf421da62ff9cf5b76dee9de633b83de/
bootstrap-4.6.0%2Fsite%2Fcontent%2Fdocs%2F4.6%2Fcomponents%2Fnavbar.md.
(8) github.com.
https://github.com/rkustas/techarticles/tree/598d65a5c026d9ecd3c7f0258f4a44f93e7029d0/client
%2Fpages%2F_document.js.
(9) github.com.
https://github.com/nurulamin8392/phpcrud/tree/9e1617d7f8c123ebc8d6aa329b27424429b942c5/
edit.php.
Pour créer une application web avec Bootstrap qui inclut des fonctionnalités telles que la possibilité
d'effectuer des réservations, une carte intégrée, et des fonctionnalités sociales, voici un exemple de
code HTML utilisant Bootstrap. Ce code inclut les éléments de base pour une page d'accueil après
connexion :
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Web</title>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Camsight</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
</li>
<a class="nav-link" href="#">Réservations</a>
</li>
<a class="nav-link" href="#">Messages</a>
</li>
<a class="nav-link" href="#">Profil</a>
</li>
</ul>
</div>
</nav>

<div class="container mt-4">

<div class="mb-4">
<div class="card">
<div class="card-body">
Carte intégrée ici
</div>
</div>
</div>

<div class="mb-4">
<h2>Vos Réservations</h2>

<ul class="list-group">
<li class="list-group-item">Réservation 1</li>
</ul>
</div>

<div class="mb-4">
<h2>Activités Récentes</h2>

<div class="card">
<div class="card-body">
Jean a aimé votre photo.
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.10/dist/umd/popper.min.js"></
script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
```
Ce code HTML utilise Bootstrap pour créer une interface utilisateur avec une barre de navigation, une
section pour afficher une carte intégrée, une liste de réservations, et une section pour les activités
sociales. Vous devrez remplacer les parties statiques par du contenu dynamique provenant de votre
serveur ou de votre base de données. **Assurez-vous d'ajouter les fonctionnalités interactives
nécessaires pour répondre aux besoins de votre application.** 😊
Source : conversation avec Bing, 12/04/2024
(1) 25 templates Bootstrap gratuits à découvrir - Codeur Blog.

https://www.codeur.com/blog/templates-bootstrap-gratuits/.
(2) 13 templates bootstrap à utiliser pour votre site web - Blog HubSpot.
https://blog.hubspot.fr/website/template-bootstrap.
(3) 95 Modèles de sites Web HTML avec réservation d'hôtel.

https://www.templatemonster.com/fr/hotel-booking-html-website-templates/.
(4) 18 meilleurs modèles de sites Web HTML pour agences de voyages (2021).
https://www.affde.com/fr/best-travel-agency-html-website-templates.html.
(5) 15 Puissants Modèles de Sites Web d'hôtels, de Voyage et de Tourisme .... https://bootstrap-top-
design.com/modeles-de-sites-web-dhotels/.
(6) github.com.
https://github.com/NicoLarson/exercice_php/tree/751d31e78d5fbfe9852f5be20c6ce41a955051d7/
readme.md.
(7) github.com.
https://github.com/js202005082300/Aide-m-moires/tree/c85c562d508c68fa086972462338ed773a2
5c8ac/JavaScript%2Fcours%2F002_hello_world%2Fnote.md.
(8) github.com.
https://github.com/Agilbay04/VLMS-JTI/tree/ac9dee3ecf421da62ff9cf5b76dee9de633b83de/
bootstrap-4.6.0%2Fsite%2Fcontent%2Fdocs%2F4.6%2Fcomponents%2Fnavbar.md.
(9) github.com.
https://github.com/chloe-mayer/runtrack4/tree/8672e3bab3e7aa5ba3faa1d9e2bbe39ce36c3f88/
jour03%2Fjob01%2Findex.php.
(10) github.com.
https://github.com/McSouh/hemmel/tree/3d0f123bcd2212c9d22328d94d1993fd3252817e/
index.php.
(11) github.com.
https://github.com/Beneasy21/ResultPortal/tree/aa0c4fc0297defc9fc674a8459ca71ffc8eae973/
public%2Fstaff%2FHouseParent%2Findex.php.
(12) github.com.
https://github.com/rkustas/techarticles/tree/598d65a5c026d9ecd3c7f0258f4a44f93e7029d0/client
%2Fpages%2F_document.js.
(13) github.com.
https://github.com/nurulamin8392/phpcrud/tree/9e1617d7f8c123ebc8d6aa329b27424429b942c5/
edit.php.

Document

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Document

Transféré par

Droits d'auteur :

Formats disponibles

Voici un exemple de code HTML pour une page d'accueil avant la connexion de l'utilisateur, utilisant

Bootstrap pour un design réactif et moderne :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bienvenue sur Camsight</title>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<a class="navbar-brand" href="#">Camsight</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ml-auto">

<a class="nav-link" href="login.html">Connexion</a>

<a class="nav-link" href="register.html">Inscription</a>

<div class="container mt-5">

<h1 class="display-4">Bienvenue sur Camsight!</h1>

<p class="lead">Rejoignez notre communauté et partagez vos expériences de voyage.</p>

<p>Explorez de nouvelles destinations, réservez des activités et créez des souvenirs

<a class="btn btn-primary btn-lg" href="register.html" role="button">Inscrivez-vous

d'inscription. **Bonne mise en œuvre !** 😊

Source : conversation avec Bing, 12/04/2024

(2) Formulaire de login avec HTML/CSS, PHP et MySQL - CodeurJava.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Camsight</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

<div class="collapse navbar-collapse" id="navbarNav">

<li class="nav-item active">

<a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>

<a class="nav-link" href="#">Réservations</a>

<a class="nav-link" href="#">Messages</a>

<a class="nav-link" href="#">Profil</a>

<div class="container mt-4">

Carte intégrée ici

<li class="list-group-item">Réservation 1</li>

<li class="list-group-item">Réservation 2</li>

<li class="list-group-item">Réservation 3</li>

Jean a aimé votre photo.

nécessaires pour répondre aux besoins de votre application.** 😊

Source : conversation avec Bing, 12/04/2024

(1) 25 templates Bootstrap gratuits à découvrir - Codeur Blog.

(3) 95 Modèles de sites Web HTML avec réservation d'hôtel.

Vous aimerez peut-être aussi

d'inscription. Bonne mise en œuvre ! 😊