436 lines
21 KiB
HTML
436 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Modèle - Portfolio</title>
|
|
<!-- Lien pour charger le CSS de Boostrap ici (toujours AVANT votre feuille de style perso !) -->
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="py-4">
|
|
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
|
|
<div class="container">
|
|
<a class="navbar-brand text-uppercase fw-bold" href="#">
|
|
<span class="bg-primary bg-gradient p-1 rounded-3 text-light">Un informaticien</span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#me">Qui suis-je ?</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#portfolio">Portfolio</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
|
|
<!-- A propos de vous -->
|
|
<section id="me">
|
|
<div >
|
|
<h1 >Je suis Quelqu'un, </h1>
|
|
<h2 >en formation pour devenir {concepteur et développeur d'applications} / {administrateur systèmes et réseaux}</h2>
|
|
<a href="#competences">Mes compétences</a>
|
|
</div>
|
|
<div >
|
|
<img src="./img/portrait.jpg" alt="John Doe" width="100%" >
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Votre portfolio -->
|
|
<section id="portfolio" >
|
|
<div>
|
|
<h2>Mon portfolio</h2>
|
|
<h3>Projets perso et pro</h3>
|
|
|
|
<div class="row gy-4 gy-md-0 mt-4">
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/300/150?random=1" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Projet 1</h5>
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
<a class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#infoProjet1"
|
|
aria-controls="infoProjet1">En savoir plus</a>
|
|
</div>
|
|
<div class="offcanvas offcanvas-bottom h-100" tabindex="-1" id="infoProjet1"
|
|
aria-labelledby="titelProjet1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="titelProjet1">Projet 1</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<!-- Carousel -->
|
|
<div id="carouselProject1" class="carousel slide shadow h-100" data-bs-ride="carousel"
|
|
data-bs-touch="true">
|
|
<div class="carousel-inner h-100">
|
|
<div class="carousel-item h-100 active" data-bs-interval="10000">
|
|
<img src="https://picsum.photos/1920/1080?random=1" class="d-block w-100" alt="Image slide 1">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 1</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100" data-bs-interval="2000">
|
|
<img src="https://picsum.photos/1920/1080?random=2" class="d-block w-100" alt="Image slide 2">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 2</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100">
|
|
<img src="https://picsum.photos/1920/1080?random=3" class="d-block w-100" alt="Image slide 3">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 3</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselProject1"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselProject1"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/300/150?random=2" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Projet 2</h5>
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
<a class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#infoProjet2"
|
|
aria-controls="infoProjet2">En savoir plus</a>
|
|
</div>
|
|
<div class="offcanvas offcanvas-bottom h-100" tabindex="-1" id="infoProjet2"
|
|
aria-labelledby="titelProjet2">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="titelProjet1">Projet 2</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<!-- Carousel -->
|
|
<div id="carouselProject2" class="carousel slide shadow h-100" data-bs-ride="carousel"
|
|
data-bs-touch="true">
|
|
<div class="carousel-inner h-100">
|
|
<div class="carousel-item h-100 active" data-bs-interval="10000">
|
|
<img src="https://picsum.photos/1920/1080?random=4" class="d-block w-100" alt="Image slide 1">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 1</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100" data-bs-interval="2000">
|
|
<img src="https://picsum.photos/1920/1080?random=5" class="d-block w-100" alt="Image slide 2">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 2</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100">
|
|
<img src="https://picsum.photos/1920/1080?random=6" class="d-block w-100" alt="Image slide 3">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 3</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselProject2"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselProject2"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/300/150?random=3" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Projet 3</h5>
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
<a class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#infoProjet3"
|
|
aria-controls="infoProjet3">En savoir plus</a>
|
|
</div>
|
|
<div class="offcanvas offcanvas-bottom h-100" tabindex="-1" id="infoProjet3"
|
|
aria-labelledby="titelProjet3">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="titelProjet1">Projet 3</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<!-- Carousel -->
|
|
<div id="carouselProject3" class="carousel slide shadow h-100" data-bs-ride="carousel"
|
|
data-bs-touch="true">
|
|
<div class="carousel-inner h-100">
|
|
<div class="carousel-item h-100 active" data-bs-interval="10000">
|
|
<img src="https://picsum.photos/1920/1080?random=7" class="d-block w-100" alt="Image slide 1">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 1</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100" data-bs-interval="2000">
|
|
<img src="https://picsum.photos/1920/1080?random=8" class="d-block w-100" alt="Image slide 2">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 2</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100">
|
|
<img src="https://picsum.photos/1920/1080?random=9" class="d-block w-100" alt="Image slide 3">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 3</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselProject3"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselProject3"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/300/150?random=4" class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Projet 4</h5>
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
<a class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#infoProjet4"
|
|
aria-controls="infoProjet4">En savoir plus</a>
|
|
</div>
|
|
<div class="offcanvas offcanvas-bottom h-100" tabindex="-1" id="infoProjet4"
|
|
aria-labelledby="titelProjet4">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="titelProjet1">Projet 4</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<!-- Carousel -->
|
|
<div id="carouselProject4" class="carousel slide shadow h-100" data-bs-ride="carousel"
|
|
data-bs-touch="true">
|
|
<div class="carousel-inner h-100">
|
|
<div class="carousel-item h-100 active" data-bs-interval="10000">
|
|
<img src="https://picsum.photos/1920/1080?random=10" class="d-block w-100" alt="Image slide 1">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 1</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100" data-bs-interval="2000">
|
|
<img src="https://picsum.photos/1920/1080?random=11" class="d-block w-100" alt="Image slide 2">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 2</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item h-100">
|
|
<img src="https://picsum.photos/1920/1080?random=12" class="d-block w-100" alt="Image slide 3">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>Slide 3</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
|
|
sollicitudin.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselProject4"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselProject4"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partie contact -->
|
|
<section id="contact">
|
|
<div>
|
|
<h2>Un projet de création web ?</h2>
|
|
<h3>Discutons-en !</h3>
|
|
|
|
<div>
|
|
<img src="./img/envelope.svg" alt="Image d'une enveloppe" width="100%" >
|
|
</div>
|
|
<div>
|
|
<!-- Formulaire -->
|
|
<form action="contact.php" method="POST">
|
|
<div>
|
|
<label for="firstname" >Prénom</label>
|
|
<input name="firstname" type="text" class="form-control" id="firstname">
|
|
</div>
|
|
<div>
|
|
<label for="name" >Nom</label>
|
|
<input name="name" type="text" class="form-control" id="name">
|
|
</div>
|
|
<div >
|
|
<label for="email" >Email address</label>
|
|
<input name="email" type="email" class="form-control" id="email">
|
|
</div>
|
|
<div>
|
|
<label for="message" >Message</label>
|
|
<textarea name="message" class="form-control" id="message" rows="3"></textarea>
|
|
</div>
|
|
<div>
|
|
<button type="submit" >Envoyer</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<footer class="border-top">
|
|
<div class="container py-5">
|
|
<div class="row gy-4 align-items-center">
|
|
<div class="col-12 col-md-4">
|
|
<a class="navbar-brand text-dark text-uppercase fw-bold" href="#">
|
|
<span class="bg-primary bg-gradient p-1 rounded-3 text-light">Un informaticien</span>
|
|
</a>
|
|
</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 text-md-end">
|
|
<ul class="list-inline mb-0">
|
|
<li class="list-inline-item">
|
|
<a href="#" 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">
|
|
<a href="#" class="text-decoration-none text-dark" data-bs-toggle="tooltip" title="Instagram">
|
|
<i class="fab fa-instagram-square fa-2x"></i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a href="#" class="text-decoration-none text-dark" data-bs-toggle="tooltip" title="Twitter">
|
|
<i class="fab fa-twitter-square 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 adipiscing elit. Nullam tellus leo, volutpat vitae
|
|
mi
|
|
ultrices,
|
|
sollicitudin
|
|
blandit dui. Mauris ultricies iaculis leo id consequat. Class aptent taciti sociosqu ad
|
|
litora
|
|
torquent
|
|
per conubia
|
|
nostra, per inceptos himenaeos. Sed posuere risus viverra ornare porttitor. Nullam egestas
|
|
nec
|
|
libero eget
|
|
sagittis.
|
|
Phasellus vulputate ante a vulputate vehicula. Suspendisse nec dolor ante.
|
|
</p>
|
|
<p>
|
|
Nunc auctor semper turpis. Duis quam velit, aliquam ut mi vel, sollicitudin dapibus erat.
|
|
Etiam
|
|
vitae
|
|
malesuada urna.
|
|
Vestibulum scelerisque lacus at molestie cursus. Donec placerat enim id enim feugiat
|
|
gravida.
|
|
Integer ut
|
|
maximus libero.
|
|
Nulla faucibus dolor vitae varius rutrum. Nunc neque sem, convallis id lorem quis, vulputate
|
|
imperdiet
|
|
eros. Donec
|
|
viverra commodo congue.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Lien pour les scripts Javascript ici -->
|
|
</body>
|
|
|
|
</html> |