235 lines
3.9 KiB
CSS
235 lines
3.9 KiB
CSS
/**
|
|
* Voici une feuille de style type, bien entendu vous pouvez ajouter
|
|
* ou supprimer des propriétés CSS en fonction de vos besoins.
|
|
*/
|
|
|
|
/**
|
|
* Éléments principaux
|
|
*/
|
|
|
|
/* Fond du site */
|
|
body {
|
|
}
|
|
|
|
/* Site */
|
|
#site {
|
|
margin:0px auto !important;
|
|
max-width:1200px !important;
|
|
}
|
|
|
|
/* Bannière */
|
|
header {
|
|
}
|
|
|
|
/* Titre de la bannière */
|
|
header span {
|
|
}
|
|
|
|
/* Menu */
|
|
nav {
|
|
}
|
|
|
|
/* Items du menu */
|
|
nav a {
|
|
}
|
|
|
|
/* Items au survol du menu */
|
|
nav a:hover {
|
|
}
|
|
|
|
/* Item courant du menu */
|
|
nav a.active {
|
|
}
|
|
|
|
/* Bas de page */
|
|
footer {
|
|
height:400px !important;
|
|
|
|
}
|
|
|
|
footer #footersite, #footerbody {
|
|
}
|
|
|
|
/* Liens du bas de page */
|
|
footer #footersite, #footerbody a {
|
|
}
|
|
|
|
/* footer bloc gauche */
|
|
footer #footersiteLeft, #footerbodyLeft {
|
|
font-size:16px;
|
|
}
|
|
|
|
/* footer bloc central */
|
|
footer #footersiteCenter, #footerbodyCenter {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/* footer bloc droite */
|
|
footer #footersiteRight, #footerbodyRight {
|
|
}
|
|
|
|
/**
|
|
* Éléments de contenu
|
|
*/
|
|
|
|
/* Titres */
|
|
h1 {
|
|
font-size: ;
|
|
color: ;
|
|
}
|
|
h2 {
|
|
font-size: 18;
|
|
color: #5e4eff;
|
|
}
|
|
h3 {
|
|
font-size: 16;
|
|
color: white;
|
|
}
|
|
h4 {
|
|
font-size: 14;
|
|
color: white;
|
|
}
|
|
|
|
/* Liens */
|
|
a {
|
|
}
|
|
|
|
/* Liens au survol */
|
|
a:hover {
|
|
}
|
|
|
|
/* Liens au clic */
|
|
a:active {
|
|
}
|
|
|
|
/* Boutons */
|
|
.button,
|
|
button[type='submit'],
|
|
.pagination a {
|
|
}
|
|
|
|
/* Boutons au survol */
|
|
.button:hover,
|
|
button[type='submit']:hover,
|
|
.pagination a:hover {
|
|
}
|
|
|
|
/* Boutons au clic */
|
|
.button:active,
|
|
button[type='submit']:active,
|
|
.pagination a:active {
|
|
}
|
|
|
|
/* Cases à cocher */
|
|
input[type='checkbox']:checked + label:before {
|
|
}
|
|
|
|
/* Cases à cocher au survol */
|
|
input[type='checkbox']:not(:active):checked:hover + label:before,
|
|
input[type='checkbox']:active + label:before {
|
|
}
|
|
|
|
/* Champs de formulaire */
|
|
input[type='text'],
|
|
input[type='password'],
|
|
.inputFile,
|
|
select,
|
|
textarea {
|
|
}
|
|
|
|
/* Champs de formulaire au survol */
|
|
input[type='text']:hover,
|
|
input[type='password']:hover,
|
|
.inputFile:hover,
|
|
select:hover,
|
|
textarea:hover {
|
|
}
|
|
/* Capsule : Emplacement */
|
|
.wrapper {
|
|
float: right;
|
|
/* padding-left: 450px; */
|
|
}
|
|
|
|
/* Capsule : structure */
|
|
.capsule {
|
|
display: table;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.capsule__btn,
|
|
.capsule__body {
|
|
display: table-cell;
|
|
border: 3px solid;
|
|
vertical-align: middle;
|
|
}
|
|
.capsule--top .capsule__btn, .capsule--top
|
|
.capsule__body {
|
|
vertical-align: middle;
|
|
}
|
|
.capsule--bottom .capsule__btn, .capsule--bottom
|
|
.capsule__body {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.capsule__btn {
|
|
border-right: none;
|
|
padding: 8px;
|
|
padding-left: 20px;
|
|
}
|
|
.capsule__btn--rev .capsule__btn {
|
|
float: right;
|
|
}
|
|
|
|
.capsule__body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Capsule : Styling */
|
|
.brand-style .capsule__body,
|
|
.brand-style .capsule__btn {
|
|
border-color: #FA45C0;
|
|
}
|
|
|
|
.brand-style .capsule__btn {
|
|
background: #FA45C0;
|
|
Color: #FFFFFF;
|
|
border-top-left-radius: 30px;
|
|
border-bottom-left-radius: 30px;
|
|
}
|
|
.brand-style .capsule__body {
|
|
background: #fff;
|
|
border-top-right-radius: 30px;
|
|
border-bottom-right-radius: 30px;
|
|
padding: 8px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
/* Hauteur minimum du site */
|
|
section {
|
|
min-height: 700px;
|
|
}
|
|
/* Zoom sur images */
|
|
<div class=zoom><style>.zoom {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.image img {
|
|
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
|
|
-webkit-transition: all 1s ease; /* Safari et Chrome */
|
|
-moz-transition: all 1s ease; /* Firefox */
|
|
-ms-transition: all 1s ease; /* Internet Explorer 9 */
|
|
-o-transition: all 1s ease; /* Opera */
|
|
transition: all 1s ease;
|
|
}
|
|
.image:hover img {
|
|
/* L'image est doublée */
|
|
-webkit-transform:scale(1.25); /* Safari et Chrome */
|
|
-moz-transform:scale(1.25; /* Firefox */
|
|
-ms-transform:scale(1.25; /* Internet Explorer 9 */
|
|
-o-transform:scale(1.25; /* Opera */
|
|
transform:scale(1.25;
|
|
}</style> |