You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

275 lines
13 KiB

<!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/aurora_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;
}
footer {
margin-top: 2rem;
}
.bg-one {
background: #8ed6fb;
}
</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>
<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-one">
<div class="container">
<div class="row flex-lg-row align-items-start g-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">
<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="bg-one">
<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="">
<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>