parent
e3dc28d4ab
commit
7ff4171085
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,230 @@
|
||||
|
||||
|
||||
:root{
|
||||
--color-primary : #2289FF;
|
||||
--color-secondary : #314862 !important;
|
||||
--color-acent : #193F6A;
|
||||
--font-poppin : 'Poppins', serif;
|
||||
}
|
||||
|
||||
|
||||
/* Custom classes */
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.color-secondary {
|
||||
color:var(--color-secondary) ;
|
||||
}
|
||||
|
||||
.bg-acent {
|
||||
background-color: var(--color-acent);
|
||||
}
|
||||
|
||||
.color-acent {
|
||||
color: var(--color-acent);
|
||||
|
||||
}
|
||||
|
||||
/* Header style*/
|
||||
|
||||
header.header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header nav.navbar{
|
||||
box-shadow: none;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header nav.navbar .navbar-brand{
|
||||
font-family: var(--font-poppin);
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header nav.navbar .nav-link {
|
||||
color: var(--color-secondary);
|
||||
font-family: var(--color-secondary);
|
||||
font-weight: 500;
|
||||
padding: 10px 20px;
|
||||
|
||||
}
|
||||
|
||||
.header nav.navbar .nav-item {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.btn-theme {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
font-family : var(--font-poppin);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
padding: 8px 20px ;
|
||||
border-radius: 20px 0px 20px 20px;
|
||||
}
|
||||
|
||||
.btn-theme:hover {
|
||||
background-color: var(--color-acent);
|
||||
box-shadow: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-theme-2{
|
||||
box-shadow: 0 10px 20px 0px rgb(34 137 255/52%);
|
||||
margin: 0;
|
||||
font-family : var(--font-poppin);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
padding: 10px 30px ;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.btn-theme2:hover {
|
||||
background-color: var(--color-acent);
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.btn-play{
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
font-family : var(--font-poppin);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
padding: 10px 16px ;
|
||||
border-radius: 100%;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-play:hover {
|
||||
background-color: var(--color-acent);
|
||||
box-shadow: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.header .navbar .nav-link:hover,
|
||||
.header .navbar .nav-link:active{
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
/* Hero banner */
|
||||
|
||||
#hero-banner {
|
||||
width: 100%;
|
||||
padding: 80px 0;
|
||||
color: val(--color-secondary);
|
||||
font-family: var(--font-poppin);
|
||||
}
|
||||
|
||||
#hero-banner p{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#hero-banner .image{
|
||||
border-radius:80px 80px 0px 80px ;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
|
||||
|
||||
#about-section {
|
||||
width: 100%;
|
||||
padding: 120px 0;
|
||||
background-color: #eeeeee;
|
||||
font-family: var(--font-poppin);
|
||||
}
|
||||
|
||||
#about-section .image {
|
||||
border-radius: 80px 80px 0px 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#about-section .image img{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
#services-section {
|
||||
margin: 100px 0;
|
||||
padding: 100px 0;
|
||||
font-family: var(--font-poppin);
|
||||
}
|
||||
|
||||
#services-section .services-shadow{
|
||||
padding: 20px 30px;
|
||||
text-align: center;
|
||||
border-radius: 0px 30px 30px 0px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#services-section .services-shadow i.fas{
|
||||
padding: 20px;
|
||||
width: 62px;
|
||||
background-color: #eeeeee;
|
||||
color: var(--color-primary);
|
||||
font-size: 20px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#services-section .services-shadow p{
|
||||
font-size: 13px ;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
|
||||
/* footer */
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
padding: 50px 0;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
font-family: var(--font-poppin);
|
||||
border-radius: 100px 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer ul li a{
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer ul li a :hover{
|
||||
opacity: 0.7;
|
||||
color: white;
|
||||
|
||||
}
|
||||
@ -0,0 +1,185 @@
|
||||
.divider:after,
|
||||
.divider:before {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #eee;
|
||||
}
|
||||
.h-custom {
|
||||
height: calc(100% - 73px);
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.h-custom {
|
||||
height: 100%;
|
||||
}
|
||||
.img-fluid{
|
||||
visibility: hidden;
|
||||
margin-top: -100%;
|
||||
}
|
||||
form{
|
||||
margin-top: -80%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
:root{
|
||||
--color-primary : #2289FF;
|
||||
--color-secondary : #314862 !important;
|
||||
--color-acent : #193F6A;
|
||||
--font-poppin : 'Poppins', serif;
|
||||
}
|
||||
|
||||
|
||||
/* Custom classes */
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.color-secondary {
|
||||
color:var(--color-secondary) ;
|
||||
}
|
||||
|
||||
.bg-acent {
|
||||
background-color: var(--color-acent);
|
||||
}
|
||||
|
||||
.color-acent {
|
||||
color: var(--color-acent);
|
||||
|
||||
}
|
||||
|
||||
/* Header style*/
|
||||
|
||||
header.header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header nav.navbar{
|
||||
box-shadow: none;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header nav.navbar .navbar-brand{
|
||||
font-family: var(--font-poppin);
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.header nav.navbar .nav-link {
|
||||
color: var(--color-secondary);
|
||||
font-family: var(--color-secondary);
|
||||
font-weight: 500;
|
||||
padding: 10px 20px;
|
||||
|
||||
}
|
||||
|
||||
.header nav.navbar .nav-item {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.btn-theme {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
font-family : var(--font-poppin);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
padding: 8px 20px ;
|
||||
border-radius: 20px 0px 20px 20px;
|
||||
}
|
||||
|
||||
.btn-theme:hover {
|
||||
background-color: var(--color-acent);
|
||||
box-shadow: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-theme-2{
|
||||
box-shadow: 0 10px 20px 0px rgb(34 137 255/52%);
|
||||
margin: 0;
|
||||
font-family : var(--font-poppin);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
padding: 10px 30px ;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.btn-theme2:hover {
|
||||
background-color: var(--color-acent);
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.btn-play{
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
font-family : var(--font-poppin);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
padding: 10px 16px ;
|
||||
border-radius: 100%;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-play:hover {
|
||||
background-color: var(--color-acent);
|
||||
box-shadow: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.header .navbar .nav-link:hover,
|
||||
.header .navbar .nav-link:active{
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
/* footer */
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
padding: 50px 0;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
font-family: var(--font-poppin);
|
||||
border-radius: 100px 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer ul li a{
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer ul li a :hover{
|
||||
opacity: 0.7;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 224 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 547 KiB |
|
After Width: | Height: | Size: 545 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 249 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 509 KiB |
|
After Width: | Height: | Size: 3.2 MiB |
|
After Width: | Height: | Size: 488 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 574 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 44 KiB |
@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang=-"en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"content="width=device-width,initial-scale=1.0">
|
||||
<title>Keep Safe - Bienvenue ! </title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
<!-- Google Fonts -->
|
||||
<link rel="stylesheet" href="https:/fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
|
||||
<!-- SWIPER JS CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
|
||||
<link rel="stylesheet" href="static/css/acceuil.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--Header here-->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg ">
|
||||
<a class="navbar-brand" href="#"><span class="color-primary">Keep</span> <span class="color-secondary">Safe</span> </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="fas fa-bars"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="acceuil.html">Acceuil <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nos Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="live.html">Live</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="galerie.html">Galerie</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="seconnecter.html">
|
||||
<button class="btn btn-theme">Se Connecter</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!--/Header here-->
|
||||
|
||||
<!--Hero banner-->
|
||||
<section id="hero-banner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-5 my-auto mr-auto">
|
||||
<h1 class="h1 h1-responsive" >Sécurisez votre chez vous</h1>
|
||||
<p>En effet, il n'y a rien de plus important que votre chez vous. Faites nous confiance et optez pour KeepSafe. </p>
|
||||
<button class="btn btn-theme-2">En savoir plus</button>
|
||||
<button class="btn btn-play ml-3 "><i class="fas fa-play"></i></button>
|
||||
</div>
|
||||
<div class="col-md-5 ml-auto">
|
||||
<div class="image">
|
||||
<img src="/static/pictureWeb/apartment.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/Header here-->
|
||||
|
||||
<!--About section-->
|
||||
<section id="about-section" class="my-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="image">
|
||||
<img src="/static/pictureWeb/image-acceuil.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 my-auto">
|
||||
<h6 class="h6 color-primary m-0">Une camera pas comme les autes !</h6>
|
||||
<div class="h1 h1-responsive mb-4"> Observez les animaux qui vous entourent !</div>
|
||||
<p>
|
||||
KeepSafe se différencie par sa polyvalence. Que ce soit lors de vos randonnées ou meme dans votre jardin.
|
||||
Goutez au plaisir d'observer les animaux qui passent devant la camera.
|
||||
</p>
|
||||
<button class="btn btn-theme-2">En savoir plus</button>
|
||||
<button class="btn btn-play ml-3 "><i class="fas fa-play"></i></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--About section-->
|
||||
|
||||
<!-- Services Section Here -->
|
||||
<section id="services-section"class="">
|
||||
<div class="container">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<div class="shadow services-shadow">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h4 class="h5">Sécurisez votre maison</h4>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
|
||||
</div>
|
||||
<div class="shadow services-shadow">
|
||||
<i class="fas fa-paw"></i>
|
||||
<h4 class="h5">Observez les animaux</h4>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
|
||||
</div>
|
||||
<div class="shadow services-shadow">
|
||||
<i class="fas fa-thermometer-full"></i>
|
||||
<h4 class="h5" >Détectez les fuites de chaleur</h4>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Services Section Here -->
|
||||
|
||||
<!-- Footer Here -->
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<h4 class="h3">Keep.Safe</h4>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Quicks links</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>Acceuil</li>
|
||||
<li><a href="" ></a>Nos Services</li>
|
||||
<li><a href="" ></a>Live</li>
|
||||
<li><a href="" ></a>Gallerie</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Location</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>Acceuil</li>
|
||||
<li><a href="" ></a>Nos Services</li>
|
||||
<li><a href="" ></a>Live</li>
|
||||
<li><a href="" ></a>Gallerie</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Services</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>Acceuil</li>
|
||||
<li><a href="" ></a>Nos Services</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Contact</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>+330000000</li>
|
||||
<li><a href="" ></a>contact@keepsafe.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Footer Here -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!--JQuery-->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!--Bootstrap tooltips-->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popperjs/1.14.4/umd/popper.min.is"></script>
|
||||
<!--Bootstrap core JavaScript-->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||
<!--MDB core JavaScript -->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
|
||||
<!-- Swiper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
|
||||
@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang=-"en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"content="width=device-width,initial-scale=1.0">
|
||||
<title>Keep Safe - Bienvenue ! </title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
<!-- Google Fonts -->
|
||||
<link rel="stylesheet" href="https:/fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
|
||||
<!-- SWIPER JS CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
|
||||
<link rel="stylesheet" href="static/css/seconnecter.css"/>
|
||||
</head>
|
||||
<!--Header here-->
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg ">
|
||||
<a class="navbar-brand" href="#"><span class="color-primary">Keep</span> <span class="color-secondary">Safe</span> </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="fas fa-bars"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="acceuil.html">Acceuil <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Nos Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="live.html">Live</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="galerie.html">Galerie</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="seconnecter.html">
|
||||
<button class="btn btn-theme">Se Connecter</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!--/Header here-->
|
||||
|
||||
|
||||
<section class="vh-100 Connecter">
|
||||
<div class="container-fluid h-custom">
|
||||
<div class="row d-flex justify-content-center align-items-center h-100">
|
||||
<div class="col-md-9 col-lg-6 col-xl-5">
|
||||
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
|
||||
class="img-fluid" alt="Sample image">
|
||||
</div>
|
||||
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
|
||||
<form>
|
||||
|
||||
<div class="d-flex flex-column align-items-center justify-content-center justify-content-lg-start">
|
||||
<p class="lead fw-normal mb-0 me-3">Se connecter avec</p>
|
||||
<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
|
||||
<button type="button" class="btn btn-primary btn-floating mx-1">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary btn-floating mx-1">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary btn-floating mx-1">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider d-flex align-items-center my-4">
|
||||
<p class="text-center fw-bold mx-3 mb-0">Or</p>
|
||||
</div>
|
||||
|
||||
<!-- Email input -->
|
||||
<div class="form-outline mb-4">
|
||||
<input type="email" id="form3Example3" class="form-control form-control-lg"
|
||||
placeholder="Entrez votre adresse mail" />
|
||||
</div>
|
||||
|
||||
<!-- Password input -->
|
||||
<div class="form-outline mb-3">
|
||||
<input type="password" id="form3Example4" class="form-control form-control-lg"
|
||||
placeholder="Entrez votre mot de passe" />
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<!-- Checkbox -->
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
|
||||
<label class="form-check-label" for="form2Example3">
|
||||
Se rappeler de moi
|
||||
</label>
|
||||
</div>
|
||||
<a href="#!" class="text-body">Mot de passe oublié ? </a>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-lg-start mt-4 pt-2">
|
||||
<button type="button" class="btn btn-primary btn-lg"
|
||||
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
|
||||
<p class="small fw-bold mt-2 pt-1 mb-0">Vous n'avez pas de compte ? <a href="creeruncompte.html"
|
||||
class="link-danger">Créez en un !</a></p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- Footer Here -->
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<h4 class="h3">Keep.Safe</h4>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Quicks links</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>Acceuil</li>
|
||||
<li><a href="" ></a>Nos Services</li>
|
||||
<li><a href="" ></a>Live</li>
|
||||
<li><a href="" ></a>Gallerie</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Location</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>Acceuil</li>
|
||||
<li><a href="" ></a>Nos Services</li>
|
||||
<li><a href="" ></a>Live</li>
|
||||
<li><a href="" ></a>Gallerie</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Services</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>Acceuil</li>
|
||||
<li><a href="" ></a>Nos Services</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h4 class="m-0 h6">Contact</h4>
|
||||
<hr color="white">
|
||||
<ul>
|
||||
<li><a href="" ></a>+330000000</li>
|
||||
<li><a href="" ></a>contact@keepsafe.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Footer Here -->
|
||||
|
||||
</html>
|
||||
<!--JQuery-->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!--Bootstrap tooltips-->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popperjs/1.14.4/umd/popper.min.is"></script>
|
||||
<!--Bootstrap core JavaScript-->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||
<!--MDB core JavaScript -->
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
|
||||
<!-- Swiper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
|
||||
Loading…
Reference in new issue