267 lines
No EOL
13 KiB
HTML
267 lines
No EOL
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>Maquette site Aurore</title>
|
|
<link rel="stylesheet" href="/static/css/bootstrap.css"/>
|
|
<style rel="stylesheet">
|
|
#top-section {
|
|
background-image: url("/static/img/network_blur.jpg");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.header-bar {
|
|
border-top: 4px solid;
|
|
border-image-source: linear-gradient(90deg, #5d2f86, #8ed6fb 50%, #d32e9d);
|
|
border-image-slice: 1
|
|
}
|
|
|
|
.btn-margin-left {
|
|
margin-left:2rem
|
|
}
|
|
|
|
.padding-top {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.padding-bottom {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="sticky-top">
|
|
<div class="header-bar"></div>
|
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
|
|
|
<div class="container p-2">
|
|
<a class="navbar-brand" href="#">Aurore</a>
|
|
|
|
<div class="float-md-end">
|
|
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link active">À propos</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Aide</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">Services</a>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="btn btn-primary btn-margin-left">S'inscrire</button>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</nav>
|
|
</div>
|
|
<header>
|
|
|
|
<main>
|
|
|
|
<section class="py-5 text-center text-white bg-dark" id="top-section">
|
|
<div class="py-lg-5">
|
|
<h1 class="display-5 fw-bold">Aurore</h1>
|
|
<p class="lead fs-4">Fournisseur réseau étudiant de Paris-Saclay</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="py-5">
|
|
<div class="container">
|
|
<div class="py-lg-5">
|
|
<h1 class="padding-bottom">Nous</h1>
|
|
In publishing and graphic design, Lorem ipsum is a
|
|
placeholder text commonly used to demonstrate the visual
|
|
form of a document or a typeface without relying on
|
|
meaningful content. Lorem ipsum may be used as a
|
|
placeholder before final copy is available. It is also used
|
|
to temporarily replace text in a process called greeking,
|
|
which allows designers to consider the form of a webpage or
|
|
publication, without the meaning of the text influencing
|
|
the design. More at "Wikipedia" Delectus eaque nihil nihil
|
|
aliquid. Ut numquam repudiandae non et eligendi occaecati.
|
|
Officiis exercitationem ab atque culpa. Minima dolore qui
|
|
non voluptate explicabo. Occaecati in veritatis numquam
|
|
iusto vero enim sed laudantium. Sint odio qui eum
|
|
consequuntur aut. Officiis molestias sed deserunt provident
|
|
aut est. Quia porro repellat excepturi libero eos possimus
|
|
modi. Voluptatem aut nam dolor nam error. Facilis aut ut
|
|
aut. Quis aperiam necessitatibus non expedita et. Culpa
|
|
molestiae unde occaecati sed molestiae. Quos commodi hic
|
|
reprehenderit sint. Voluptatem temporibus nesciunt est
|
|
voluptas est dolorem omnis. Ut neque laboriosam
|
|
necessitatibus maiores ipsa blanditiis architecto. Id qui
|
|
enim sequi non suscipit. Assumenda corporis quam minus
|
|
quia. Ut quisquam exercitationem atque facilis asperiores
|
|
harum. Sint veritatis quis molestiae aut nihil. Sit qui at
|
|
molestias. Dolore natus iure temporibus perspiciatis
|
|
aliquid. Quo assumenda dolorem temporibus. Blanditiis
|
|
accusamus et deleniti maiores. Corrupti corporis animi
|
|
consequatur itaque neque perferendis vel. Provident
|
|
molestiae error quas doloremque tempore deserunt recusandae
|
|
culpa.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="row flex-lg-row align-items-start g-5 py-5">
|
|
<h1>Notre travail</h1>
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Diffusion du savoir</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Accès à Internet</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Services web</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Évenementiel</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="py-5">
|
|
<div class="container">
|
|
<div class="row flex-lg-row align-items-start g-5 py-5">
|
|
<h1>Besoin d'aide</h1>
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Contact</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
|
|
</div>
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Inscription</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">Connexion</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
<div class="col-lg-3 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
|
|
|
|
<h2 class="padding-top">En savoir plus</h2>
|
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="py-lg-5">
|
|
<h1 class="padding-bottom">Envie de participer</h1>
|
|
In publishing and graphic design, Lorem ipsum is a
|
|
placeholder text commonly used to demonstrate the visual
|
|
form of a document or a typeface without relying on
|
|
meaningful content. Lorem ipsum may be used as a
|
|
placeholder before final copy is available. It is also used
|
|
to temporarily replace text in a process called greeking,
|
|
which allows designers to consider the form of a webpage or
|
|
publication, without the meaning of the text influencing
|
|
the design. More at "Wikipedia" Delectus eaque nihil nihil
|
|
aliquid. Ut numquam repudiandae non et eligendi occaecati.
|
|
Officiis exercitationem ab atque culpa. Minima dolore qui
|
|
non voluptate explicabo. Occaecati in veritatis numquam
|
|
iusto vero enim sed laudantium. Sint odio qui eum
|
|
consequuntur aut. Officiis molestias sed deserunt provident
|
|
aut est. Quia porro repellat excepturi libero eos possimus
|
|
modi. Voluptatem aut nam dolor nam error. Facilis aut ut
|
|
aut. Quis aperiam necessitatibus non expedita et. Culpa
|
|
molestiae unde occaecati sed molestiae. Quos commodi hic
|
|
reprehenderit sint. Voluptatem temporibus nesciunt est
|
|
voluptas est dolorem omnis. Ut neque laboriosam
|
|
necessitatibus maiores ipsa blanditiis architecto. Id qui
|
|
enim sequi non suscipit. Assumenda corporis quam minus
|
|
quia. Ut quisquam exercitationem atque facilis asperiores
|
|
harum. Sint veritatis quis molestiae aut nihil. Sit qui at
|
|
molestias. Dolore natus iure temporibus perspiciatis
|
|
aliquid. Quo assumenda dolorem temporibus. Blanditiis
|
|
accusamus et deleniti maiores. Corrupti corporis animi
|
|
consequatur itaque neque perferendis vel. Provident
|
|
molestiae error quas doloremque tempore deserunt recusandae
|
|
culpa.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-5">
|
|
<div class="container">
|
|
<div class="row flex-lg-row g-5 py-5">
|
|
<h1>Nos partenaires</h1>
|
|
|
|
<div class="col-lg-4 text-center">
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect></svg>
|
|
</div>
|
|
|
|
<div class="col-lg-4 text-center">
|
|
<center>
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect></svg>
|
|
</center>
|
|
</div>
|
|
|
|
<div class="col-lg-4 text-center">
|
|
<center>
|
|
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect></svg>
|
|
</center>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
<footer class="text-center text-lg-start text-light header-bar bg-dark">
|
|
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
|
|
© 2021 Copyright • Made with ❤️ by Aurore • CC-BY-SA 4.0 • Mentions légales
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/static/js/bootstrap.js"></script>
|
|
</body>
|
|
</html> |