|
|
|
|
@ -210,10 +210,8 @@
|
|
|
|
|
|
|
|
|
|
<h3>Outils</h3>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="bg-secondary h-100 w-100 py-5">
|
|
|
|
|
<div class="bg-secondary h-100 w-100 py-5"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
@ -245,10 +243,66 @@
|
|
|
|
|
|
|
|
|
|
<div class="row gy-4 mt-5">
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
<div class="bg-secondary h-100 w-100 py-5"></div>
|
|
|
|
|
<h3>Informations</h3>
|
|
|
|
|
<ul class="list-unstyled mt-5">
|
|
|
|
|
<li><i class="bi bi-geo-alt-fill"></i> 63110 - Beaumont</li>
|
|
|
|
|
<li><i class="bi bi-telephone-fill"></i> +33 7 68 36 13 59</li>
|
|
|
|
|
<!-- <li><i class="bi bi-email"></i> pradier.hugo36@gmail.com</li> -->
|
|
|
|
|
<li>
|
|
|
|
|
<i class="bi bi-envelope-fill"></i>
|
|
|
|
|
<a href="mailto:pradier.hugo36@gmail.com">
|
|
|
|
|
pradier.hugo36@gmail.com</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
<div class="bg-secondary h-100 w-100 py-5"></div>
|
|
|
|
|
<!-- Formulaire -->
|
|
|
|
|
<h3>Formulaire</h3>
|
|
|
|
|
<form class="row mt-5">
|
|
|
|
|
<div class="col-6 my-2">
|
|
|
|
|
<label for="firstname" class="form-label">Prénom</label>
|
|
|
|
|
<input
|
|
|
|
|
name="firstname"
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="firstname"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-6 my-2">
|
|
|
|
|
<label for="name" class="form-label">Nom</label>
|
|
|
|
|
<input
|
|
|
|
|
name="name"
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="name"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
<label for="email" class="form-label">Email</label>
|
|
|
|
|
<input
|
|
|
|
|
name="email"
|
|
|
|
|
type="email"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="email"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
<label for="message" class="form-label">Message</label>
|
|
|
|
|
<textarea
|
|
|
|
|
name="message"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="message"
|
|
|
|
|
rows="3"
|
|
|
|
|
></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 my-2">
|
|
|
|
|
<button type="submit" class="btn btn-secondary w-100">
|
|
|
|
|
Envoyer
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -258,26 +312,91 @@
|
|
|
|
|
<!-- Bas de page -->
|
|
|
|
|
<footer class="border-top">
|
|
|
|
|
<div class="container py-5">
|
|
|
|
|
<div class="row gy-4">
|
|
|
|
|
<div class="row gy-4 align-items-center">
|
|
|
|
|
<div class="col-12 col-md-4">
|
|
|
|
|
<div class="bg-secondary py-5"></div>
|
|
|
|
|
<a class="navbar-brand text-dark text-uppercase fw-bold" href="#">
|
|
|
|
|
<span class="bg-secondary bg-gradient p-1 rounded-3 text-light"
|
|
|
|
|
>Hugo</span
|
|
|
|
|
>
|
|
|
|
|
PRADIER
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 col-md-4">
|
|
|
|
|
<div class="bg-secondary py-5"></div>
|
|
|
|
|
<div class="col-12 col-md-4 text-md-center">
|
|
|
|
|
<ul class="list-unstyled mb-0">
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
data-bs-toggle="modal"
|
|
|
|
|
data-bs-target="#mentionsLegales"
|
|
|
|
|
>Mentions légales</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-12 col-md-4">
|
|
|
|
|
<div>
|
|
|
|
|
<ul class="list-inline text-center">
|
|
|
|
|
<div class="col-12 col-md-4 text-md-end">
|
|
|
|
|
<ul class="list-inline mb-0">
|
|
|
|
|
<li class="list-inline-item">
|
|
|
|
|
<i class="bi bi-linkedin fa-5x"></i>
|
|
|
|
|
<a
|
|
|
|
|
href="https://www.linkedin.com/in/hugo-pradier-25b562251/"
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
title="LinkedIn"
|
|
|
|
|
>
|
|
|
|
|
<i class="fab fa-linkedin fa-2x"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="list-inline-item">
|
|
|
|
|
<i class="bi bi-github fa-5x"></i>
|
|
|
|
|
<a
|
|
|
|
|
href="https://github.com/Hugo-P3663"
|
|
|
|
|
class="text-decoration-none text-dark"
|
|
|
|
|
data-bs-toggle="tooltip"
|
|
|
|
|
title="Github"
|
|
|
|
|
>
|
|
|
|
|
<i class="fab fa-github fa-2x"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
|
|
|
<div
|
|
|
|
|
class="modal fade"
|
|
|
|
|
id="mentionsLegales"
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
aria-labelledby="exampleModalLabel"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
>
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h5 class="modal-title">Mentions légales</h5>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn-close"
|
|
|
|
|
data-bs-dismiss="modal"
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<p>
|
|
|
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui
|
|
|
|
|
itaque voluptate magnam debitis reiciendis repudiandae sed enim
|
|
|
|
|
quasi ad illum? Dolor, ea eos minima iure praesentium officia
|
|
|
|
|
illum accusamus ipsum.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
|
|
|
|
|
fugiat suscipit recusandae similique nostrum laborum provident
|
|
|
|
|
pariatur officia quisquam soluta asperiores reprehenderit,
|
|
|
|
|
optio, magni quibusdam, deleniti perspiciatis ab error
|
|
|
|
|
explicabo?
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
