Rapport

d'un site
web
RESTURANT Réalisé par :
ISMAIL CHAFAI
MOHAMMAD EZZAIM

Encadré par :
Mr.ABDALI abdelmounaim
 INTRODUCTION
Dans ce projet ,nous allons utiliser
tout ce que nous avons appris jusque-
là pour créer une page de site
RESTURANT. Il doit y avoir une page
home , skills ,projets, team(contenant
leur images ,noms, fonctions et
réseaux sociaux), Progress et contact
.Nous devons également utiliser le
Bootstrap et un peu de Css .
I. .CREATION DE BARRE DE NAVIGATION
II. . BANNIERE
III. . CARTS (avec un carrousel simple)
IV. . CREATION D'UNE MENU DE
NAVIGATION SUPPLEMENTAIRE
V. . CAROUSEL (avec transition auto)
VI. . FOOTER
VII. . FORMULAIRE
VIII.. CONCLUSION
 BARRE DE NAVIGAITON

navbar-brand :
pour le nom de votre
entreprise, de votre
produit ou de votre
projet
Code associe à <section class="banner d-flex justify-content-center
align-items-center pt-5" >
<div class="container my-5 py-5">
la partie de <div class="row">
<div class="col-md-6"></div>

banniere : <div class="col-md-6">

<h1 class="text-capitalize py-3 redressed
banner-desc text-white ">Lorem, ipsum dolor<br> sit amet
consectetur.</h1>
<p>
<button class="btn btn-order btn-lg me-
5 rounded-0 merriweather">Commander maintenant</button>
<button class="btn btn-outline-info
btn-lg rounded-0 merriweather">Reserver</button>
</p>
</div>
</div>
</div>
</section>
<section class="banner d-flex justify-content-center align-items-center pt-5" >

justify- align-items-
d-flex : content-center: center pt-5:
pour que notre aligner aligner
element avoir un notre elements Notre
display flex horizontalement elements
en centre verticalement
en centre

Row and col:
Dans une disposition en grille, le
contenu doit être placé dans des
colonnes et seules les colonnes
peuvent être des enfants
immédiats de lignes.
text-capitalize:
pour rendre le texte
capitalize
<div class="container my-5 py-5">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<h1 class="text-capitalize py-3 redressed
banner-desc text-white ">Lorem, ipsum dolor<br> sit amet
consectetur. </h1>
<p>
<button class="btn btn-order btn-lg me-5
rounded-0 merriweather">Commander maintenant
</button>
<button class="btn btn-outline-info btn-
lg rounded-0 merriweather">Reserver</button>
</p>
</div>
</div>
</div>
 <div class="row">
<h3 class="text-center text-light merriweather">Nos
variees</h3>
<div class="card text-center bg-transparent mb-4">
<div class="card-header redressed fs-4">
<ul class="nav nav-tabs justify-content-center card-
header-tabs">
<li class="nav-item">
<a class="nav-link active"aria-
current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" aria-
disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body text-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a
natural lead-in to additional content.</p>
</div>
</div>
</div>