premier comit
This commit is contained in:
commit
b29fa613be
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;
|
||||
}
|
||||
|
||||
|
||||
BIN
img/Photos_Red.jpg
Normal file
BIN
img/Photos_Red.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
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/schema réseaux gsb.png
Normal file
BIN
img/schema réseaux gsb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
445
index.html
Normal file
445
index.html
Normal file
@ -0,0 +1,445 @@
|
||||
<!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">Redouane Assani</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/Photos_Red.jpg" alt="Redouane Assani" width="100%" >
|
||||
</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/schema réseaux gsb.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Projet 1</h5>
|
||||
<p class="card-text">Conception d'une infrasructure lors d'un 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 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="img/schema réseaux 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>Schema réseaux de l'infrasructure 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 class="row">
|
||||
<h2>Un projet de création web ?</h2>
|
||||
<h3>Discutons-en !</h3>
|
||||
|
||||
<div class="col-1">
|
||||
<div class="col-3">
|
||||
<img src="./img/envelope.svg" alt="Image d'une enveloppe" width="100%" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<!-- 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">Redouane Assani</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