Bonjour
swizzbeat05,
Pour les fichiers
JQuery, je t'invite à les télécharger sur le site de
JQuery. De là tu ajoutes les fichiers qui finissent par
.css dans le dossier
css et les fichiers qui finissent par
.js dans le dossier
js. N'oublie pas de les
renommer si besoin.
Pour les fichiers
Bootstrap, je t'invite à les télécharger sur le site de
Bootstrap. De là tu ajoutes les fichiers qui finissent par
.css dans le dossier
css et les fichiers qui finissent par
.js dans le dossier
js. N'oublie pas de les
renommer si besoin.
Pour le fichier
style.css, celui-ci je te le donne :
Page : style.css
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
background: #FAFAFA;
position: relative;
padding-bottom: 10rem;
min-height: 100%;
}
a, a:hover, a:active, a:focus, a:before, a:after {
outline: none;
}
input[type=text], input[type=password], input[type=email] {
width: 100%;
outline: none;
padding: 10px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
select{
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 100%;
outline: none;
padding: 10px 10px;
margin: 8px 0;
background: white;
border-radius: 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
font-weight: 100;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: -30px;
left: 0;
font-weight: 100;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.ins_cadre{
border-radius: 15px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
padding: 10px;
background: white;
}
.logbtn{
margin: 15px 0 5px 0;
outline: none;
border: 2px solid #22313F;
background: #22313F;
color: white;
border-radius: 20px;
padding: 5px 20px;
transition: all .5s ease-out
}
.logbtn:hover{
background: white;
color: #22313F;
}
.alert{
width: 100%;
position: absolute;
top: 0;
z-index: 99999;
border-radius: 0;
animation-name: slidedown_alert;
animation-timing-function: ease;
animation-duration: 0.5s;
}
@keyframes slidedown_alert{
0% {padding: 0 15px;}
100%{padding: 15px 15px;}
}
.alert-info {
color: #0096E6;
background-color: rgba(255, 255, 255, .95);
border: 0;
border-bottom: 1px solid #0096E6;
}
.alert-success {
color: #A0C83C;
background-color: rgba(255, 255, 255, .95);
border: 0;
border-bottom: 1px solid #A0C83C;
}
.alert-danger {
color: #E64C3C;
background-color: rgba(255, 255, 255, .95);
border: 0;
border-bottom: 1px solid #E64C3C;
}
.alert-warning {
color: #F39600;
background-color: rgba(255, 255, 255, .95);
border: 0;
border-bottom: 1px solid #F39600;
}
.closef{
position: absolute;
right: 25px;
outline: none;
top: 12px;
color: ;
font-size: 20px;
opacity: 1;
text-shadow: none;
transition: all 0.5s ease-out;
cursor:pointer;
}
.alert-info .closef{
color: #0096E6;
}
.alert-success .closef{
color: #A0C83C;
}
.alert-danger .closef{
color: #E64C3C;
}
.alert-warning .closef{
color: #F39600;
}
.closef:hover{
color: black;
outline: none;
text-decoration: none;
}
.lign1 > .search-pro{
position: absolute;
color: transparent;
top: 15px;
left: 0;
right: 0;
transition: all 0.5s ease-out;
}
.lign1:hover > .search-pro{
transition: all 1s ease-out;
transform: translateY(25px);
color: inherit;
}
.lign2 > .message-pro{
position: absolute;
color: transparent;
top: 15px;
left: 0;
right: 0;
transition: all 0.5s ease-out;
}
.lign2:hover > .message-pro{
transition: all 1s ease-out;
transform: translateY(25px);
color: inherit;
}
.lign3 > .picture-pro{
position: absolute;
color: transparent;
top: 15px;
left: 0;
right: 0;
transition: all 0.5s ease-out;
}
.lign3:hover > .picture-pro{
transition: all 1s ease-out;
transform: translateY(25px);
color: inherit;
}
.image-upload-pfe{
height: 25px;
}
.image-upload-pfe .hide-upload-pfe, .image-upload-pfe .send-upload-pfe{
display: none;
}
.image-plus-pfe{
border-radius: 100px;
transition: all 0.5s ease-out;
cursor: pointer;
display: block;
background: white url('/public/others/plus.svg') center no-repeat;
border: none;
padding: 40px
}
.image-plus-pfe:hover{
transform: rotate(720deg);
transition: all 0.5s ease-out;
}
.image-upload-pfe :invalid .send-upload-pfe{
display: none;
}
.image-upload-pfe :valid .image-plus-pfe{
left: 0;
position: absolute;
padding: 20px;
right: 0;
bottom: -40px;
}
.image-upload-pfe :valid .send-upload-pfe{
display: block;
}
.send-upload-pfe{
font-size: 26px !important;
padding: 25px;
outline: none;
transition: all 0.5s ease-out;
background: transparent;
border: 3px solid #2ecc71;
color: #2ecc71;
border-radius: 100px;
margin-top: -40px;
}
.image-upload{
height: 25px;
}
.image-upload .hide-upload, .image-upload .send-upload{
display: none;
}
.image-plus{
color: black;
border: 1px solid;
border-radius: 100px;
padding: 5px;
width: 25px;
height: 25px;
transition: all 0.5s ease-out;
cursor: pointer;
display: block
}
.image-plus:hover{
transform: rotate(720deg);
transition: all 0.5s ease-out;
}
.image-upload :invalid .send-upload{
display: none;
}
.image-upload :valid .send-upload{
display: block;
}
.send-upload{
width: 25px;
height: 25px;
outline: none;
padding-left: 5.5px;
transition: all 0.5s ease-out;
background: transparent;
border: 1px solid #2ecc71;
color: #2ecc71;
border-radius: 100px;
margin-left: 10px;
}
.trash-avatar{
outline: none;
background: transparent;
color: #CCC;
border: none;
font-size: 16px;
}
.btn-send-upload{
float: right;
margin-top: 10px;
padding: 5px 10px;
outline: none;
color: #666;
background: transparent;
border: 1px solid #CCC;
}
.sz-image{
width: 100px;
border-radius: 100px
}
.mask-upload-av{
display: block;
position: absolute;
top: 0px;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
width: 100px;
height: 100px;
border-radius: 100px;
margin: 0 auto;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 2rem;
background: #F3F3F3;
text-align: center;
}
.social-cust {
border: 1px solid #bbb;
border-radius: 50%;
color: #bbb;
font-size: 24px !important;
padding: 10px;
margin: 0 10px;
width: 48px;
transition: all 0.5s ease-out;
}
.social-cust:hover, .social-cust:focus {
background: white;
color: #22313F;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch-sex {
position: relative;
display: inline-block;
width: 120px;
height: 34px;
}
.switch-sex input {display:none;}
.slider-sex {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2196F3;
-webkit-transition: .4s;
transition: .4s;
}
.slider-sex:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider-sex {
background-color: #D2527F;
}
input:focus + .slider-sex {
box-shadow: 0 0 1px #D2527F;
}
input:checked + .slider-sex:before {
-webkit-transform: translateX(86px);
-ms-transform: translateX(86px);
transform: translateX(86px);
}
/* Rounded sliders */
.slider-sex.round {
border-radius: 34px;
}
.slider-sex.round:before {
border-radius: 50%;
}
.fa-size{
font-size: 28px !important;
margin: 0 10px;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(to right, #e74c3c,#f39c12);
}
.msg{
height: 26px;
width: 90%;
resize: none;
border: none;
max-width: 90%;
padding-left: 10px;
background: 0 0;
font-size: 16px;
outline: 0
}
.bar1{
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
transition: all 0.5s ease-out;
}
.bar2{
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
transition: all 0.5s ease-out;
}
.bar3{
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
transition: all 0.5s ease-out;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 4px);
transform: rotate(-45deg) translate(-4px, 4px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -5px);
transform: rotate(45deg) translate(-5px, -5px);
}
.navbar-btn-default{
background: #22313F;
outline: none;
color: white;
margin-right: 15px;
border: 1px solid white;
border-radius: 20px;
white-space: nowrap;
padding: 5px 12px;
transition: all 1s ease-out;
}
.navbar-btn-default:hover{
transition: all 0.5s ease-out;
color: rgba(0, 0, 0, .8);
background: white;
}
.navbar {
border: none;
}
.form-menu {
outline: none;
color: rgba(0, 0, 0, .8);;
background: transparent;
height: 34px;
border: 1px solid rgba(0, 0, 0, .8); !important;
border-radius: 5px;
transition: all 0.5s ease-out;
}
.form-menu::placeholder{
color: rgba(0, 0, 0, .8);;
}
.navbar-form {
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
border-top: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.navbar-default {
background-color: white;
box-shadow: 0 0 15px rgba(0, 0, 0, .063);
border-color: transparent;
border-bottom: white;
}
.navbar-default .navbar-brand {
color: black;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #666;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: black;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #666;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #dddddd;
background-color: rgba(0, 0, 0, .8);
}
.navbar-default .navbar-toggle {
z-index: 99;
position: absolute;
border-color: white;
float: inherit;
border: none;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: rgba(0, 0, 0, .8);;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #dddddd;
}
@media (max-width: 767px) {
.navbar-default .navbar-brand {
position: absolute;
margin: auto 50%;
transform: translateX(-50%);
}
.navbar-btn-default {
border: none;
padding: 0 10px;
}
.navbar-btn-default:hover, .navbar-btn-default:focus {
background: inherit;
color: white;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #dddddd;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #dddddd;
background-color: rgba(0, 0, 0, .8);;
}
}