bootstrap
This commit is contained in:
Dorian BOYER
@@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="row d-flex justify-content-end w-100">
|
|
||||||
<div class="w-25 ms-5 d-flex justify-content-center ">
|
|
||||||
<i class="bi bi-instagram me-3"></i>
|
|
||||||
<i class="bi bi-facebook"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row d-flex align-items-center justify-content-center w-100 p-3">
|
|
||||||
<div class="flex-row d-flex align-items-center justify-content-center">
|
|
||||||
<img id="logo" src="public/logo.png" alt="Logo expernet écoles de formation" class="w-20">
|
|
||||||
<h4 class="ms-3 w-50">CENTRE DE FORMATION INFORMATIQUEÀ LA RÉUNION DEPUIS 2002 !</h4>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex flex-column">
|
|
||||||
<button type="button" class="btn btn-warning mb-3"><i class="bi bi-calculator"></i> Demande de devis</button>
|
|
||||||
<button type="button" class="btn btn-warning"><i class="i bi-calculator"></i> Découvrez-notre école</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div></div>
|
|
||||||
<nav class="navbar navbar-expand-lg bg-info">
|
|
||||||
<div class="container-fluid d-flex justify-content-center align-items-center">
|
|
||||||
<ul class="d-flex flex-row gap-4 m-0 p-4">
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">NOS CENTRE</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">FORMATION</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">PLANNING</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">FINACEMENT</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">DIGITAL-LEARNING</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">BLOG</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<main class="row p-5">
|
|
||||||
<div class="col d-flex align-items-center">
|
|
||||||
<p class="text-justify text-light fs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sequi animi officia accusamus, ad reprehenderit dolor iusto ab suscipit nihil deleniti, aspernatur at quia cumque delectus, necessitatibus sunt. Accusantium, inventore!</p>
|
|
||||||
</div>
|
|
||||||
<div class="card border-0 col" id="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<form>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="email" placeholder="Votre email" class="form-control" id="inputEmail3" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-sm-10">
|
|
||||||
<input type="password" placeholder="Entrez votre mot de passe..." class="form-control" id="inputPassword3" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-3">
|
|
||||||
<div class="col-sm-10 offset-sm-2">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Connexion</button>
|
|
||||||
<p class="mt-3">
|
|
||||||
<a href="list.html" class="link-offset-2 link-underline link-underline-opacity-0" href="#">Direction vers la liste des étudiant</a>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer class="bg-info">
|
|
||||||
<div class="container-fluid d-flex justify-content-center align-items-center">
|
|
||||||
<ul class="d-flex flex-row gap-4 m-0 p-4">
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">NOS CENTRE</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">FORMATION</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">PLANNING</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">FINACEMENT</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">DIGITAL-LEARNING</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">BLOG</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="row d-flex justify-content-end w-100">
|
|
||||||
<div class="w-25 ms-5 d-flex justify-content-center ">
|
|
||||||
<i class="bi bi-instagram me-3"></i>
|
|
||||||
<i class="bi bi-facebook"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row d-flex align-items-center justify-content-center w-100 p-3">
|
|
||||||
<div class="flex-row d-flex align-items-center justify-content-center">
|
|
||||||
<img id="logo" src="public/logo.png" alt="Logo expernet écoles de formation" class="w-20">
|
|
||||||
<h4 class="ms-3 w-50">CENTRE DE FORMATION INFORMATIQUEÀ LA RÉUNION DEPUIS 2002 !</h4>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex flex-column">
|
|
||||||
<button type="button" class="btn btn-warning mb-3"><i class="bi bi-calculator"></i> Demande de devis</button>
|
|
||||||
<button type="button" class="btn btn-warning"><i class="i bi-calculator"></i> Découvrez-notre école</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div></div>
|
|
||||||
<nav class="navbar navbar-expand-lg bg-info">
|
|
||||||
<div class="container-fluid d-flex justify-content-center align-items-center">
|
|
||||||
<ul class="d-flex flex-row gap-4 m-0 p-4">
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">NOS CENTRE</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">FORMATION</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">PLANNING</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">FINACEMENT</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">DIGITAL-LEARNING</a></li>
|
|
||||||
<li class="list-group-item"><a class="text-decoration-none text-light" href="">BLOG</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Num</th>
|
|
||||||
<th scope="col">Nom</th>
|
|
||||||
<th scope="col">Prenom</th>
|
|
||||||
<th scope="col">Formation</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">1</th>
|
|
||||||
<td>Boyer</td>
|
|
||||||
<td>Dorian</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">2</th>
|
|
||||||
<td>Clement</td>
|
|
||||||
<td>Théo</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Grondin</td>
|
|
||||||
<td>Clarel</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Munier</td>
|
|
||||||
<td>Jerome</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Pedre</td>
|
|
||||||
<td>Gabriel</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Demontis</td>
|
|
||||||
<td>Matisse</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Ahyong</td>
|
|
||||||
<td>Emjy</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Ahovey</td>
|
|
||||||
<td>SaintGeorge</td>
|
|
||||||
<td>CDA</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
@@ -1,10 +0,0 @@
|
|||||||
#logo{
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
background: url(public/fond.webp);
|
|
||||||
}
|
|
||||||
#card{
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
background-color: rgba(255, 255, 255, 0.4);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user