Scribd
Upload
31 views4 pages

TP HTML v1

Uploaded by

Salma Ackerman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views4 pages

TP HTML v1

Uploaded by

Salma Ackerman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title>Bootstrap demo</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/


all.min.css">

<style>

/* Carousel image adjustments */

.carousel-item img {

max-height: 300px;

width: 100%; /* Make images responsive */

object-fit: cover;

</style>

</head>

<body>

<!-- Navbar -->

<section class="navbar">

<nav class="navbar navbar-expand-lg bg-body-tertiary">

<div class="container-fluid">

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

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-


target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>
</button>

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

<ul class="navbar-nav me-auto mb-2 mb-lg-0">

<li class="nav-item">

<a class="nav-link active" aria-current="page" href="#">Acceuil</a>

</li>

<li class="nav-item">

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

</li>

<li class="nav-item">

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

</li>

</ul>

<form class="d-flex" role="search">

<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Go</button>

</form>

</div>

</div>

</nav>

</section>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>

<div id="carouselExample" class="carousel slide">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="images.jpg" class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="téléchargement (1).jpg" class="d-block w-100" alt="...">


</div>

<div class="carousel-item">

<img src="téléchargement (2).jpg" class="d-block w-100" alt="...">

</div>

</div>

<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-


bs-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="visually-hidden">Previous</span>

</button>

<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-


bs-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="visually-hidden">Next</span>

</button>

</div>

<div class="container">

<div class="row">

<div class="col-md-4">

<div class="card" style="width: 18rem;">

<img src="newyork.jpg" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">New York</h5>

<p class="card-text">New York City comprises 5 boroughs sitting where the Hudson River meets
the Atlantic Ocean. At its core is Manhattan.</p>

<a href="#" class="btn btn-primary">voire plus</a>

</div>

</div>

</div>

<div class="col-md-4">
<div class="card" style="width: 18rem;">

<img src="newyork.jpg" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">New York</h5>

<p class="card-text">New York City comprises 5 boroughs sitting where the Hudson River meets
the Atlantic Ocean. At its core is Manhattan.</p>

<a href="#" class="btn btn-primary">voire plus</a>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card" style="width: 18rem;">

<img src="newyork.jpg" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">New York</h5>

<p class="card-text">New York City comprises 5 boroughs sitting where the Hudson River meets
the Atlantic Ocean. At its core is Manhattan.</p>

<a href="#" class="btn btn-primary">voire plus</a>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

You might also like