sticky bar on top + more content

master
otthorn 3 years ago
parent 62832dc474
commit aa1bb0b745

@ -12,11 +12,18 @@
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
}
</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">
<a class="navbar-brand" href="#">Aurore</a>
@ -33,6 +40,7 @@
</ul>
</div>
</nav>
</div>
<header>
<main>
@ -84,7 +92,7 @@
<div class="py-5 bg-light">
<div class="container">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="row flex-lg-row align-items-center g-5 py-5">
<h1>Notre travail</h1>
<div class="col-lg-3">
<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>
@ -122,7 +130,7 @@
<div class="py-5">
<div class="container">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="row flex-lg-row align-items-center g-5 py-5">
<h1>Besoin d'aide</h1>
<div class="col-lg-3">
<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>
@ -157,6 +165,62 @@
</div>
</div>
<div class="py-5 bg-light">
<div class="container">
<div class="py-lg-5">
<h1>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 align-items-center g-5 py-5">
<h1>Nos partenaires</h1>
<div class="col-lg-4">
<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">
<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">
<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>
</div>
</div>
</div>
</div>
</main>
<script src="/static/js/bootstrap.js"></script>

Loading…
Cancel
Save