premier commit
This commit is contained in:
commit
c2a48e5893
0
contact.php
Normal file
0
contact.php
Normal file
110
css/style.css
Normal file
110
css/style.css
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
@-webkit-keyframes showwindow {
|
||||||
|
0% {
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
object-position: bottom;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes showwindow {
|
||||||
|
0% {
|
||||||
|
-o-object-position: top;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-o-object-position: bottom;
|
||||||
|
object-position: bottom;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-o-object-position: top;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot-effect {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot-effect::before {
|
||||||
|
content: "";
|
||||||
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dot" viewBox="0 0 16 16"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>');
|
||||||
|
background-position: 0% 0%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0.2;
|
||||||
|
top: 40px;
|
||||||
|
right: 40px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.dot-effect {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.dot-effect::before {
|
||||||
|
content: "";
|
||||||
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dot" viewBox="0 0 16 16"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>');
|
||||||
|
background-position: top;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0.2;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
height: 80%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel .carousel-item {
|
||||||
|
position: relative;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel .carousel-item::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 16;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel * {
|
||||||
|
z-index: 17;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-cover {
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img.card-img-top {
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
height: 400px;
|
||||||
|
-o-object-position: top;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img.card-img-top:hover {
|
||||||
|
-webkit-animation: showwindow 3s infinite;
|
||||||
|
animation: showwindow 3s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img.card-img-top:hover.mobile-view {
|
||||||
|
-webkit-animation: showwindow 12s infinite;
|
||||||
|
animation: showwindow 12s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
1
img/envelope.svg
Normal file
1
img/envelope.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" style="" transform="translate(0,1)"><path d="M182.78 80.125c3.367 19.498 10.608 52.67 19.126 84.813 8.126 30.663 17.73 60.122 25.063 75.062 57.968-.962 148.212-16.707 252.343-46.344-91.756-70.023-188.486-99.376-296.532-113.53zM164.657 85c-65.62 51.243-106.43 120.106-138.5 196.25 54.866-38.51 111.644-60.42 169.313-70.906-3.995-12.636-7.88-26.486-11.626-40.625-8.425-31.79-15.554-64.12-19.188-84.72zm322.281 125.906c-74.123 21.218-141.43 35.68-196.25 42.813 24.018 51.794 36.448 106.688 43.688 160.936 70.634-58.76 125.36-118.495 152.563-203.75zM201.53 228.28c-56.563 9.917-111.78 30.946-165.56 68.907 89.478 61.396 189.91 97.037 279.874 119.844-7.362-55.057-20.104-109.997-44.75-161.03-18.39 1.897-35.134 2.875-49.938 2.875h-5.344l-2.718-4.625c-3.898-6.69-7.77-15.598-11.563-25.97z" fill="#0d6efd" fill-opacity="1"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 944 B |
BIN
img/portrait.jpg
Normal file
BIN
img/portrait.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
img/profil.jpg
Normal file
BIN
img/profil.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
img/shéma GSB.png
Normal file
BIN
img/shéma GSB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
441
index.html
Normal file
441
index.html
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
<!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>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.4/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-DQvkBjpPgn7RC31MCQoOeC9TI2kdqa4+BSgNMNj8v77fdC77Kj5zpWFTJaaAoMbC" crossorigin="anonymous">
|
||||||
|
<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">Jérémy Thomas</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 -->
|
||||||
|
<div class="container">
|
||||||
|
<section id="me">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-lg-6">
|
||||||
|
<h1 >Je suis Quelqu'un, </h1>
|
||||||
|
<h2 >en formation pour devenir administrateur systèmes et réseaux</h2>
|
||||||
|
<a href="#competences">Mes compétences</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-lg-6">
|
||||||
|
<img src="./img/profil.jpg" alt="Jérémy Thomas" width="50%" >
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Votre portfolio -->
|
||||||
|
<div class="container">
|
||||||
|
<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="img/shéma GSB.png" class="card-img-top" alt="...">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Projet GSB</h5>
|
||||||
|
<p class="card-text">Conception d'un shéma réseau d'une infrastructure lors du projet</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 GSB</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="img/shéma GSB.png" class="d-block w-100" alt="Image slide 1">
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Slide 1</h5>
|
||||||
|
<p>Shéma réseau de l'entreprise GSB.</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Partie contact -->
|
||||||
|
<div class="container">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</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">Jérémy Thomas</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>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.4/dist/js/bootstrap.bundle.min.js" integrity="sha384-YUe2LzesAfftltw+PEaao2tjU/QATaW/rOitAq67e0CT0Zi2VVRL0oC4+gAaeBKu" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user