IUT_Informatique/KyFlo
Archived
1
0
Fork 0
Code Activity
This repository has been archived on 2024-02-17. You can view files and clone it, but cannot push or open issues or pull requests.
KyFlo/Assets/css.css
Kybo 7669c24573 footer change
2019-12-15 13:32:25 +01:00

687 lines
11 KiB
CSS
Raw Blame History

/*BODY + GENERAL*/
html{
scroll-behavior: smooth;
}
body {
background: linear-gradient(to left, rgb(10, 1, 92), rgb(0, 82, 50));
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
z-index: 2;
}
img {
width: 30%;
float: left;
}
.content {
background-color: #ddd;
padding: 2vw;
}
h1 {
font-size: 2vw;
color: white;
}
/*=====================================*/
/*NAVBAR*/
a#kyflo {
font-size: 3vw;
color: rgb(0, 0, 0);
padding: 0.5vw 1vw;
transform: none;
border: none;
}
a.raccourci {
border-right: 0.15vw solid rgb(0, 0, 0);
border-left: 0.15vw solid rgb(0, 0, 0);
}
#panier {
float: right;
width: 9%;
padding: 1.2vw 1vw;
border-left: 0.15vw solid rgb(0, 0, 0);
margin-right: -6%;
}
a#panier>h3{
margin-top :0.5vw;
margin-bottom: 0;
color: black;
}
#go {
float: right;
display: block;
color: rgb(0, 0, 0);
text-align: center;
margin-top: 1.2vw;
margin-right: 2vw;
padding: 0.5vw;
border: 0.1vw solid rgb(0, 0, 0);
text-decoration: none;
font-size: 1vw;
font-weight: bold;
transform: none;
border-left: none;
border-top: none;
background-color: rgb(255, 255, 255);
}
#go:hover {
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
transition-duration: 0.2s;
}
.topnav {
overflow: hidden;
background-color: rgb(255, 255, 255);
position: fixed;
z-index: 1;
}
.topnav a {
float: left;
display: block;
color: rgb(0, 0, 0);
text-align: center;
padding: 1.8vw 1.4vw;
text-decoration: none;
font-size: 1vw;
border-right: 0.15vw solid white;
font-weight: bold;
transform: skew(-0.2rad);
}
.topnav a:hover {
background-color: rgb(206, 206, 206);
color: black;
}
.topnav .raccourci:hover,
.raccourci:hover {
padding: 1.8vw 2.5vw;
}
.topnav a#kyflo:hover {
background-color :transparent;
}
.topnav a#panier:hover {
background-color: rgb(206, 206, 206);
margin-right: -2%;
}
.topnav input[type=text] {
float: right;
padding: 0.5vw;
color: black;
width: 40%;
border: none;
border-bottom: 0.1vw solid rgb(0, 0, 0);
font-size: 1vw;
margin-top: 1.2vw;
background-color: rgb(255, 255, 255);
}
/*================================================*/
/*TOP*/
div#bienvenue{
padding: 4vw;
}
body>#bienvenue>h1 {
font-size: 3vw;
color: white;
text-align: center;
}
body>#bienvenue>h2 {
font-size: 2vw;
color: lightgrey;
text-align: center;
}
/*=================*/
/*Slide des promotions*/
div#slider {
width: 100%;
max-width: 1920px;
margin: auto;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
}
div#slider figure img {
width: 20%;
height: auto;
float: left;
}
div#slider {
width: 100%;
max-width: 1920px;
overflow: hidden
}
@keyframes slidy {
0% {left: 0%;}
20% {left: 0%;}
25% {left: -100%;}
45% {left: -100%;}
50% {left: -200%;}
70% {left: -200%;}
75% {left: -300%;}
95% {left: -300%;}
100% {left: -400%;}
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 16s slidy infinite;
}
/*======================================*/
/* TITRE */
.title h1{
font-size: 3vw;
padding: 6vw;
margin: 0;
text-align: center;
}
.title{
background-color: rgba(255, 255, 255, 0.4)
}
/*================================================*/
/*FLEX CONTAINER*/
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #ddd;
justify-content: center;
}
.flex-container>div {
width: 30%;
margin: 1vw;
text-align: center;
line-height: 3vw;
border-bottom: 0.2vw solid grey;
border-right: 0.2vw solid grey;
font-size: 30px;
}
.flex-container>div>a>h2 {
text-align: center;
font-size: 2vw;
color: rgb(0, 0, 0);
}
.flex-container>div>a>img {
float: none;
width: 50%;
}
.flex-container div:hover img{
width: 60%;
transition-duration: 0.5s;
}
.out img{
opacity: 0.4;
}
.out h1{
font-size: 2vw;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
.flex-container div.out:hover img{
width: 50%;
cursor: not-allowed;
transition-duration: 0.5s;
}
.flex-container div.out:hover{
cursor: not-allowed;
border: none;
border-bottom: 0.2vw solid grey;
border-right: 0.2vw solid grey;
}
.flex-container div:hover{
border: 0.3vw solid lightseagreen;
transition-duration: 0.2s;
}
/*==========================================*/
/* CONTACT*/
#contact input{
width: 50%;
color: black;
display: block;
margin: auto;
font-size: 2vw;
background-color: transparent;
border: none;
border-bottom: 0.2vw solid rgb(90, 90, 90);
padding: 0.5vw;
}
#contact input:focus{
background-color: rgba(0,0,0,0.1);
border-bottom : 0.2vw solid rgb(16, 133, 172);
transition-duration: 0.3s;
}
#contact input:valid{
border-bottom : 0.2vw solid rgb(24, 216, 40);
transition-duration: 0.3s;
}
#contact input[type=submit]{
border: 0.2vw solid grey;
width: 30%;
}
#contact input[type=submit]:hover{
background-color: grey;
color: white;
transition-duration: 0.3s;
}
#contact h2{
margin: 0;
padding: 2vw;
font-size: 2vw;
text-align: center;
}
/*==========================================================*/
/*FOOTER*/
footer {
margin-top: 8vw;
bottom: 0;
}
footer>div>table {
width: 100%;
background-color: #ddd;
margin: auto;
padding: 2vw 8vw;
}
a {
text-decoration: none;
color: rgb(90, 90, 90);
}
a:hover {
color: white;
transition-duration: 0.4s;
}
tr {
border-bottom: 0.2vw solid red;
color: white;
height: 5vw;
}
th {
font-size: 2vw;
color: black;
text-align: left;
border-bottom: 0.1vw solid rgb(0, 0, 0);
}
th#line {
border: none;
}
button#contactB {
margin: auto;
display: flex;
justify-content: center;
padding: 1.5vw 4vw;
font-size: 1.5vw;
color: rgb(90, 90, 90);
background-color: transparent;
border: 0.1vw solid rgb(90, 90, 90);
transform: skew(-.312rad);
margin-bottom: 2vw;
}
button#contactB:hover {
background-color: rgb(90, 90, 90);
color: white;
transition-duration: 0.5s;
border-radius: 1vw;
}
td {
width: 20%;
font-size: 1.5vw;
}
td#contact {
width: 100%;
}
/*======================================*/
/*CONFIRMATION COMMENTAIRE*/
#Merci>h1 {
font-size: 2.8vw;
color: white;
text-align: center;
margin-top: 7%;
}
#Merci>h2 {
font-size: 2vw;
text-align: center;
margin-top: 5%;
}
#Merci>h2>a {
color: lightgrey;
text-decoration: none;
}
#Merci>h2>a:hover {
color: white;
}
#Merci>img {
display: block;
margin-left: auto;
margin-right: auto;
width: 10%;
margin-top: 5%;
float: none;
}
/*==========================================*/
/* CSS DESCRIPTION PRODUIT */
/*EN TETE PRODUIT*/
#Produit {
margin-top: 5%;
}
#Produit>h1 {
text-align: left;
font-size: 4vw;
margin-left: 25%;
}
#Produit>h2#barre {
text-decoration: line-through;
}
#Produit>h2 {
text-align: left;
font-size: 3vw;
margin-left: 25%;
color: red;
}
#Produit>h2#barre {
text-decoration: line-through;
}
#Produit>h3 {
text-align: left;
font-size: 1.5vw;
margin-left: 25%;
color: lightgrey;
}
#Produit>img {
width: 20%;
float: left;
border: 0.2vw solid white;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5);
}
#Produit>button {
background-color: rgba(0, 0, 0, 0.5);
padding: 1vw 1vw;
float: right;
text-align: center;
font-size: 2vw;
margin-right: 10%;
color: white;
border: 0.1vw solid white;
}
#Produit>button:hover {
color: white;
background-color: rgba(204, 25, 25, 0.5);
transition-duration: 0.5s;
border-radius: 2vw;
}
/*=====================*/
/*CARACTERISTIQUES PRODUIT*/
#Carac {
width: 100%;
border-top: 0.2vw solid white;
margin-top: 8%;
}
#Carac>h1 {
font-size: 3vw;
color: white;
}
#Carac>h2 {
font-size: 1.5vw;
color: lightgrey;
}
/*================================================*/
/*COMMENTAIRES CLIENT*/
#Client {
width: 100%;
margin-left: 5%;
}
#Client>div>h1 {
font-size: 2vw;
color: white;
margin-left: 8%;
}
#Client>div>h2 {
font-size: 1vw;
color: yellow;
margin-left: 8%;
}
#Client>div>h3 {
font-size: 1.5vw;
color: lightgrey;
margin-left: 8%;
}
#Client>div>img {
float: left;
width: 7%;
border-radius: 50%;
}
#Client>div {
margin-bottom: 3%;
border-bottom: 0.1vw solid rgb(134, 134, 134);
margin-right: 8%;
}
/*================================================*/
/*ESPACE LAISSER COMMENTAIRE*/
#Coms {
width: 100%;
border-top: 0.2vw solid white;
margin-top: 5%;
padding: 2vw 2vw;
}
#Coms>h1 {
font-size: 3vw;
color: white;
}
#Coms>h2 {
font-size: 3vw;
color: white;
border-top: 0.2vw dashed white;
text-align: center;
}
#Coms {
background-color: rgba(0, 0, 0, 0.5);
border: 0.1vw solid white;
}
#Coms>form>h1 {
font-size: 1.5vw;
color: white;
}
input:valid {
border-radius: 0vw;
transition-duration: 0.5s;
border: 0.1vw solid rgb(8, 170, 8);
}
input[placeholder=Commentaire],
select,
input[placeholder="Question, suggestion, remarque"],
select {
width: 60%;
padding: 1vw 1vw;
font-size: 1.5vw;
}
input[type=submit],
select {
width: 20%;
padding: 1vw 1vw;
font-size: 1.5vw;
background-color: rgba(0, 0, 0, 0.5);
border: 0.15vw solid white;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
}
input[type=submit]:hover {
color: rgb(255, 255, 255);
background-color: rgba(204, 25, 25, 0.5);
transition-duration: 0.5s;
border: 0.15vw solid rgb(0, 0, 0);
border-radius: 2vw;
}
h1#valider {
text-align: center;
}
table>tr>td>input {
border: 0vw solid white;
background-color: rgba(255, 255, 255, 0);
}
/*================================================*/
/*Panier*/
form[action="commande.html"]>h1 {
font-size: 1.5vw;
}
form[action="commande.html"]>input[type=text],
select {
width: 50%;
padding: 1vw 1vw;
font-size: 1.5vw;
}
#livraison {
background-color: rgba(0, 0, 0, 0.5);
border: 0.1vw solid white;
margin-top: 5vw;
}
input[type=number],
select {
border: 0.1vw solid white;
}
table#basket {
margin-top: 5vw;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
border: 0.1vw solid white;
}
tr#cent>th {
text-align: center;
}
td#total {
text-align: right;
color: white;
font-size: 2vw;
font-weight: bold;
padding: 0vw 2vw;
}
/*===============================================*/
View git blame Copy permalink