diff --git a/Assets/Pages/Autres/checkout.html b/Assets/Pages/Autres/checkout.html index c711353..c667e21 100644 --- a/Assets/Pages/Autres/checkout.html +++ b/Assets/Pages/Autres/checkout.html @@ -1,36 +1,45 @@  + Kyflo + + - + + +
- + + + - + + + - + + + @@ -42,10 +51,10 @@

Nom et prénom :

- +

Adresse ligne 1 :

- +

Adresse ligne 2 :

@@ -60,33 +69,36 @@

Numéro de téléphone :

- +

Valider:

- + - +
Nom ProduitQuantitéPrixNom ProduitQuantitéPrix
R2D2500 €R2D2500 €
Nao5 000€Nao5 000€
TOTAL : 6 000€
- - - - - - - - - - - - - + + + + + + + + + + + + + + + -
Accès rapideUne question ?
AccueilNos Promotions
Nos ProduitsVotre panier
Accès rapideUne question ?
AccueilNos Promotions
Nos ProduitsVotre panier
+
+ \ No newline at end of file diff --git a/Assets/Pages/Autres/commande.html b/Assets/Pages/Autres/commande.html index 506d2ce..7ea2843 100644 --- a/Assets/Pages/Autres/commande.html +++ b/Assets/Pages/Autres/commande.html @@ -1,14 +1,17 @@  + Kyflo + + - + +

Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !

Retourner a l'accueil

- + - + + \ No newline at end of file diff --git a/Assets/Pages/Autres/commentaire.html b/Assets/Pages/Autres/commentaire.html index 6d3b6dd..c513732 100644 --- a/Assets/Pages/Autres/commentaire.html +++ b/Assets/Pages/Autres/commentaire.html @@ -1,12 +1,15 @@  + Kyflo + + +
-

Nous contacter :

-
+

Nous contacter :

+

Nom et Prénom :

- +

Email :

- +

Question :

- +

Valider:

Nos réseaux sociaux :

- - - - + + + +
+ + + + + + + +
- + + \ No newline at end of file diff --git a/Assets/Pages/Autres/nous.html b/Assets/Pages/Autres/nous.html index 23554dd..4537928 100644 --- a/Assets/Pages/Autres/nous.html +++ b/Assets/Pages/Autres/nous.html @@ -1,74 +1,95 @@ + Kyflo + - + + - + - + + +
-

Qui sommes-nous ?

-

L'équipe :

- - - - -
-

Nos engagements :

- +

Qui sommes-nous ?

+

L'équipe :

+ + + + + +
+

Nos engagements :

+

Nos réseaux sociaux :

- - - - + + + +
+ + + + + + + +
- + + \ No newline at end of file diff --git a/Assets/Pages/Autres/search_result.html b/Assets/Pages/Autres/search_result.html index 4abee4c..5fee454 100644 --- a/Assets/Pages/Autres/search_result.html +++ b/Assets/Pages/Autres/search_result.html @@ -1,36 +1,54 @@  + Kyflo + - + + - + - - + + + +

Résultats pour la recherche "robot guerrier":

@@ -38,23 +56,26 @@
- - - - - - - - - - - - - + + + + + + + + + + + + + + + -
Accès rapideUne question ?
AccueilNos Promotions
Nos ProduitsVotre panier
Accès rapideUne question ?
AccueilNos Promotions
Nos ProduitsVotre panier
+
+ \ No newline at end of file diff --git a/Assets/Pages/Produits/nao.html b/Assets/Pages/Produits/nao.html index e1f6fce..a26dd75 100644 --- a/Assets/Pages/Produits/nao.html +++ b/Assets/Pages/Produits/nao.html @@ -1,42 +1,49 @@  + Kyflo + - + + - - + + + +

ROBOT NAO

-

5 000€

-

Nao est un robot humanoide français crée entre 2005 et 2006 sur Aldebaran ou plutot dans la société Aldebaran. En effet Nao a été conçu dans une start-up française à Paris.A partir de 2007, il va remplacer le robot canidé "Aibo" comme plateforme standard de la robotcup.

+

5 000€

+

Nao est un robot humanoide français crée entre 2005 et 2006 sur Aldebaran ou plutot dans la société Aldebaran. En effet Nao a été conçu dans une start-up française à Paris.A partir de 2007, il va remplacer le robot canidé "Aibo" comme plateforme + standard de la robotcup.

Caractéristiques du robot :

-

La plateforme robotique NAO existe en différents modèles qui comportent de 14 à 25 degrés de liberté. Elle est équipée d'une centrale inertielle avec un accéléromètre 3 axes et 2 gyromètres, de 2 sonars utilisant des capteurs à ultrason (émetteurs et récepteurs), de 8 capteurs de pressions résistifs sous les pieds et de 2 bumpers. NAO dispose de 90 minutes d'autonomie.

-

Le robot dispose également d'un système multimédia évolué incluant quatre microphones (pour la reconnaissance vocale et la localisation de la source sonore), deux haut-parleurs (pour la synthèse vocale), et deux caméras HD (1280 × 960 pixels) (pour la localisation ou la reconnaissance de visage ou d'objet). - Ces deux caméras couleurs, positionnées verticalement, lui permettent de voir une personne de 1,8 m de la tête au pied à 1,5 m. Malheureusement, pour le moment, ces deux caméras ne sont pas activables en même temps.

-

La plateforme robotique NAO est livrée avec une suite logicielle qui comporte un outil de programmation graphique (Choregraphe), un simulateur physique (NaoSim) et un kit de développement (SDK) qui permet de développer en Python (scripts des modules Chroregraphe) et C++ (modules embarqués). Des ponts en C#, Java et Matlab existent également. NAO est compatible avec Microsoft Robotics Studio, Cyberbotics Webots et Gostai Studio (Urbi).

+

La plateforme robotique NAO existe en différents modèles qui comportent de 14 à 25 degrés de liberté. Elle est équipée d'une centrale inertielle avec un accéléromètre 3 axes et 2 gyromètres, de 2 sonars utilisant des capteurs à ultrason (émetteurs + et récepteurs), de 8 capteurs de pressions résistifs sous les pieds et de 2 bumpers. NAO dispose de 90 minutes d'autonomie.

+

Le robot dispose également d'un système multimédia évolué incluant quatre microphones (pour la reconnaissance vocale et la localisation de la source sonore), deux haut-parleurs (pour la synthèse vocale), et deux caméras HD (1280 × 960 pixels) + (pour la localisation ou la reconnaissance de visage ou d'objet). Ces deux caméras couleurs, positionnées verticalement, lui permettent de voir une personne de 1,8 m de la tête au pied à 1,5 m. Malheureusement, pour le moment, ces deux + caméras ne sont pas activables en même temps.

+

La plateforme robotique NAO est livrée avec une suite logicielle qui comporte un outil de programmation graphique (Choregraphe), un simulateur physique (NaoSim) et un kit de développement (SDK) qui permet de développer en Python (scripts des + modules Chroregraphe) et C++ (modules embarqués). Des ponts en C#, Java et Matlab existent également. NAO est compatible avec Microsoft Robotics Studio, Cyberbotics Webots et Gostai Studio (Urbi).

Commentaires clients :

@@ -56,39 +63,42 @@

Nom et Prénom :

- +

Email :

- +

Commentaire:

- +

Valider:

-
+
+ \ No newline at end of file diff --git a/Assets/Pages/Produits/pepper.html b/Assets/Pages/Produits/pepper.html index 941af57..0f7f2e1 100644 --- a/Assets/Pages/Produits/pepper.html +++ b/Assets/Pages/Produits/pepper.html @@ -1,38 +1,43 @@  + Kyflo + - + + - - + + + +

ROBOT PEPPER

-

15 000€

+

15 000€

Pepper est un robot humanoïde, développé par la société SoftBank Robotics (anciennement Aldebaran), capable de reconnaître certaines émotions.

Caractéristiques du robot :

-

Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran tactile.

+

Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran + tactile. +

Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.

Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.

@@ -59,39 +64,42 @@

Nom et Prénom :

- +

Email :

- +

Commentaire:

- +

Valider:

-
+
+ \ No newline at end of file diff --git a/Assets/Pages/Produits/r2d2.html b/Assets/Pages/Produits/r2d2.html index 701a5fa..bcb9610 100644 --- a/Assets/Pages/Produits/r2d2.html +++ b/Assets/Pages/Produits/r2d2.html @@ -1,33 +1,36 @@  + Kyflo + - + + - - + + + +

ROBOT R2D2

-

500€

+

500€

R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien.

@@ -54,39 +57,42 @@

Nom et Prénom :

- +

Email :

- +

Commentaire:

- +

Valider:

-
+
+ \ No newline at end of file diff --git a/Assets/Pages/Produits/terminator.html b/Assets/Pages/Produits/terminator.html index a3a3f0c..9eea7c6 100644 --- a/Assets/Pages/Produits/terminator.html +++ b/Assets/Pages/Produits/terminator.html @@ -1,26 +1,29 @@  + Kyflo + - + + - - + + + +
@@ -28,7 +31,7 @@

ROBOT TERMINATOR

-

50 000€

+

50 000€

Le robot terminator est idéal si vous envisagez de conquérir la planète !

@@ -55,39 +58,42 @@

Nom et Prénom :

- +

Email :

- +

Commentaire:

- +

Valider:

-
+
+ \ No newline at end of file diff --git a/Assets/css.css b/Assets/css.css index d5def2e..d701c3e 100644 --- a/Assets/css.css +++ b/Assets/css.css @@ -1,93 +1,99 @@ /*204, 25, 25*/ + + /*==========================================================================================*/ + + /*BODY + GENERAL*/ -body{ - background : linear-gradient(to left,#141414, #444444, #141414); + +body { + background: linear-gradient(to left, #141414, #444444, #141414); margin: 0; font-family: 'Roboto', sans-serif; - } -#content{ +#content { margin-left: 8vw; margin-right: 8vw; } -h1{ +h1 { font-size: 3vw; - color : white; + color: white; } - -body>#bienvenue>h1{ - font-size : 3vw; - color : white; - text-align : center; -} -body>#bienvenue>h2{ - font-size : 2vw; - color : lightgrey; +body>#bienvenue>h1 { + font-size: 3vw; + color: white; text-align: center; } -button#hautPage{ +body>#bienvenue>h2 { + font-size: 2vw; + color: lightgrey; + text-align: center; +} + +button#hautPage { position: fixed; z-index: 1; left: 95%; top: 90%; padding: 1vw 1vw; background-color: rgba(0, 0, 0, 0.5); - border: 0.1vw solid rgb(204,25,25); + border: 0.1vw solid rgb(204, 25, 25); color: white; } -button#hautPage>img{ - width:2vw; +button#hautPage>img { + width: 2vw; } /*=====================================*/ + + /*NAVBAR*/ -a#kyflo{ - font-size: 5vw; +a#kyflo { + font-size: 3vw; color: rgb(204, 25, 25); padding: 0.5vw 1vw; transform: none; - border : none; + border: none; } -a#nous{ +a#nous { border-right: 0.15vw solid rgb(204, 25, 25); border-left: 0.15vw solid rgb(204, 25, 25); } #panier { - float : right; - width : 18.5%; - padding : 1.2vw 1vw; + float: right; + width: 9%; + padding: 1.2vw 1vw; border-left: 0.15vw solid rgb(204, 25, 25); - margin-right: -13%; + margin-right: -6%; } -#loupe{ +#loupe { float: right; display: block; color: rgb(255, 255, 255); text-align: center; margin-top: 1.2vw; margin-right: 2vw; - padding: 1vw; - border: 0.1vw solid rgb(204,25,25); + padding: 0.5vw; + border: 0.1vw solid rgb(204, 25, 25); text-decoration: none; - font-size: 2vw; + font-size: 1vw; font-weight: bold; transform: none; border-left: none; background-color: rgb(204, 25, 25); } -#loupe:hover{ +#loupe:hover { color: rgb(0, 0, 0); transition-duration: 0.2s; } @@ -103,9 +109,9 @@ a#nous{ display: block; color: rgb(255, 255, 255); text-align: center; - padding: 2.4vw 2vw; + padding: 1.8vw 1.4vw; text-decoration: none; - font-size: 2vw; + font-size: 1vw; border-right: 0.15vw solid rgb(204, 25, 25); font-weight: bold; transform: skew(-0.2rad); @@ -116,100 +122,107 @@ a#nous{ color: rgb(0, 0, 0); } -.topnav a#nous:hover, a#contactN:hover { - padding: 2.4vw 3vw; +.topnav a#nous:hover, +a#contactN:hover { + padding: 1.8vw 2.5vw; } -.topnav a#kyflo:hover{ +.topnav a#kyflo:hover { color: white; background-color: rgb(22, 22, 22); } -.topnav a#panier:hover{ +.topnav a#panier:hover { background-color: black; + margin-right: -2%; } - .topnav input[type=text] { float: right; - padding: 1vw; + padding: 0.5vw; width: 40%; border: 0.1vw solid rgb(204, 25, 25); - font-size: 2vw; + font-size: 1vw; margin-top: 1.2vw; background-color: rgb(22, 22, 22); } /*======================================*/ + + /*FOOTER*/ -footer{ +footer { margin-top: 8vw; } -footer>div>table{ +footer>div>table { width: 100%; - border-top : 0.1vw solid rgb(204,25,25); + border-top: 0.1vw solid rgb(204, 25, 25); background-color: rgb(27, 27, 27); - margin : auto; + margin: auto; padding: 2vw 8vw; - -} -a{ - text-decoration: none; - color : grey; } -a:hover{ - color:rgb(204, 25, 25); +a { + text-decoration: none; + color: grey; +} + +a:hover { + color: rgb(204, 25, 25); transition-duration: 0.4s; } -tr{ +tr { border-bottom: 0.2vw solid red; color: white; height: 5vw; } -th{ +th { font-size: 2vw; - text-align : left; + text-align: left; border-bottom: 0.1vw solid white; } -th#line{ +th#line { border: none; - } -button#contactB{ + +button#contactB { margin: auto; display: flex; justify-content: center; padding: 1.5vw 4vw; font-size: 1.5vw; - color : lightgrey; + color: lightgrey; background-color: rgb(27, 27, 27); - border : 0.1vw solid rgb(204, 25, 25); + border: 0.1vw solid rgb(204, 25, 25); transform: skew(-.312rad); margin-bottom: 2vw; } -button#contactB:hover{ +button#contactB:hover { background-color: rgb(204, 25, 25); transition-duration: 0.5s; border-radius: 1vw; } -td{ +td { width: 20%; font-size: 1.5vw; } -td#contact{ +td#contact { width: 100%; } + + /*======================================*/ + + /*FLEX CONTAINER*/ .flex-container { @@ -217,7 +230,7 @@ td#contact{ flex-wrap: wrap; } -.flex-container > div { +.flex-container>div { background-color: rgba(59, 59, 59, 0.5); width: 47%; margin: 1vw; @@ -226,266 +239,296 @@ td#contact{ font-size: 30px; } -.flex-container>div>a>h3{ +.flex-container>div>a>h3 { text-align: left; - font-size : 3vw; + font-size: 3vw; margin-left: 35%; - color : lightgrey; + color: lightgrey; } -.flex-container>div>a>h4{ +.flex-container>div>a>h4 { text-align: left; - font-size : 2vw; + font-size: 2vw; margin-left: 35%; - color : lightgrey; + color: lightgrey; } -.flex-container>div>a>img{ +.flex-container>div>a>img { width: 30%; margin-top: 10%; } + + /*==========================================*/ + + /*CONFIRMATION COMMENTAIRE*/ -#Merci>h1{ + +#Merci>h1 { font-size: 2.8vw; - color : white; - text-align : center; + color: white; + text-align: center; margin-top: 7%; } -#Merci>h2{ +#Merci>h2 { font-size: 2vw; - text-align : center; + text-align: center; margin-top: 5%; - -} -#Merci>h2>a{ - color : lightgrey; - text-decoration: none; - -} -#Merci>h2>a:hover{ - color : rgb(204, 25, 25); } -#Merci>img{ +#Merci>h2>a { + color: lightgrey; + text-decoration: none; +} + +#Merci>h2>a:hover { + color: rgb(204, 25, 25); +} + +#Merci>img { display: block; margin-left: auto; margin-right: auto; - width : 10%; + width: 10%; margin-top: 5%; - float : none; + float: none; } /*==========================================*/ + /*==========================================*/ + + /* CSS DESCRIPTION PRODUIT */ + + /*EN TETE PRODUIT*/ -#Produit{ + +#Produit { margin-top: 5%; } -#Produit>h1{ - text-align: left; - font-size : 4vw; - margin-left: 25%; +#Produit>h1 { + text-align: left; + font-size: 4vw; + margin-left: 25%; } - -#Produit>h2#barre{ +#Produit>h2#barre { text-decoration: line-through; } -#Produit>h2{ +#Produit>h2 { text-align: left; - font-size : 3vw; + font-size: 3vw; margin-left: 25%; - color : red; - } + color: red; +} -#Produit>h2#barre{ +#Produit>h2#barre { text-decoration: line-through; } -#Produit>h3{ +#Produit>h3 { text-align: left; - font-size : 1.5vw; + font-size: 1.5vw; margin-left: 25%; - color : lightgrey; + color: lightgrey; } -#Produit>img{ +#Produit>img { width: 20%; float: left; border: 0.2vw solid rgb(204, 25, 25); 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 rgb(204, 25, 25); } -#Produit>button:hover{ +#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; - background-color: rgba(204,25,25,0.5); + border: 0.1vw solid rgb(204, 25, 25); +} + +#Produit>button:hover { + color: white; + background-color: rgba(204, 25, 25, 0.5); transition-duration: 0.5s; border-radius: 2vw; } + + /*=====================*/ + + /* MOSAIQUE PRODUITS*/ -#produits{ +#produits { border: 0.1vw solid red; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); margin-top: 8vw; padding: 2vw 2vw; } - -img{ +img { width: 30%; float: left; } -h3,h4{ +h3, +h4 { color: white; } -h3:hover{ +h3:hover { color: rgb(204, 25, 25); transition-duration: 0.2s; } + + /*================================================*/ + + /*CARACTERISTIQUES PRODUIT*/ -#Carac{ - width : 100%; - border-top : 0.2vw solid rgb(204,25,25); + +#Carac { + width: 100%; + border-top: 0.2vw solid rgb(204, 25, 25); margin-top: 8%; } -#Carac>h1{ +#Carac>h1 { font-size: 3vw; - color : white; + color: white; } -#Carac>h2{ +#Carac>h2 { font-size: 1.5vw; - color : lightgrey; + color: lightgrey; } + + /*================================================*/ + + /*COMMENTAIRES CLIENT*/ -#Client{ - width : 100%; +#Client { + width: 100%; margin-left: 5%; } -#Client>div>h1{ - font-size : 2vw; - color :white; +#Client>div>h1 { + font-size: 2vw; + color: white; margin-left: 8%; } #Client>div>h2 { - font-size : 1vw; - color : yellow; + font-size: 1vw; + color: yellow; margin-left: 8%; } #Client>div>h3 { - font-size : 1.5vw; - color : lightgrey; + font-size: 1.5vw; + color: lightgrey; margin-left: 8%; } -#Client>div>img{ - float : left; +#Client>div>img { + float: left; width: 7%; - } -#Client>div{ + +#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 rgb(204,25,25); + +#Coms { + width: 100%; + border-top: 0.2vw solid rgb(204, 25, 25); margin-top: 5%; padding: 2vw 2vw; } -#Coms>h1{ +#Coms>h1 { font-size: 3vw; - color: white; + color: white; } -#Coms>h2{ +#Coms>h2 { font-size: 3vw; color: white; border-top: 0.2vw dashed rgb(204, 25, 25); text-align: center; } -#Coms{ +#Coms { background-color: rgba(0, 0, 0, 0.5); border: 0.1vw solid rgb(204, 25, 25); } -#Coms>form>h1{ +#Coms>form>h1 { font-size: 1.5vw; - color : white; + color: white; } -input, select { +input, +select { width: 20%; padding: 1vw 1vw; font-size: 1.5vw; background-color: rgb(27, 27, 27); color: white; - border : 0.1vw solid rgba(255, 255, 255, 0.5); + border: 0.1vw solid rgba(255, 255, 255, 0.5); border-radius: 3vw; } -input:hover{ +input:hover { border-radius: 0vw; transition-duration: 0.5s; } -input:valid{ +input:valid { border-radius: 0vw; transition-duration: 0.5s; - border : 0.1vw solid rgb(8, 170, 8); + border: 0.1vw solid rgb(8, 170, 8); } - -input[placeholder=Commentaire], select, input[placeholder="Question, suggestion, remarque"], select { +input[placeholder=Commentaire], +select, +input[placeholder="Question, suggestion, remarque"], +select { width: 60%; padding: 1vw 1vw; font-size: 1.5vw; } -input[type=submit], select { +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 rgb(204,25,25); - color : white; + border: 0.15vw solid rgb(204, 25, 25); + color: white; display: block; margin-left: auto; margin-right: auto; @@ -495,29 +538,33 @@ 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: 0.15vw solid rgb(0, 0, 0); border-radius: 2vw; } -h1#valider{ +h1#valider { text-align: center; } -table>tr>td>input{ +table>tr>td>input { border: 0vw solid white; background-color: rgba(255, 255, 255, 0); } + + /*================================================*/ + /*==========================================================================================*/ + + /*Slide des promotions*/ div#slider { - width: 100%; + width: 100%; max-width: 1920px; margin: auto; margin-top: 5%; - } div#slider figure { @@ -528,29 +575,49 @@ div#slider figure { 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%;} + 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%; @@ -562,14 +629,18 @@ div#slider figure { animation: 16s slidy infinite; } + /*==========================================================================================*/ + + /*Panier*/ -form[action="commande.html"]>h1{ +form[action="commande.html"]>h1 { font-size: 1.5vw; } -form[action="commande.html"]>input[type=text], select { +form[action="commande.html"]>input[type=text], +select { width: 50%; padding: 1vw 1vw; font-size: 1.5vw; @@ -581,132 +652,96 @@ form[action="commande.html"]>input[type=text], select { margin-top: 5vw; } -input[type=number], select{ - border : 0.1vw solid white; +input[type=number], +select { + border: 0.1vw solid white; } -table#basket{ +table#basket { margin-top: 5vw; background-color: rgba(0, 0, 0, 0.5); text-align: center; border: 0.1vw solid rgb(204, 25, 25); } -tr#cent>th{ +tr#cent>th { text-align: center; - } -td#total{ +td#total { text-align: right; - color: rgb(204,25,25); + color: rgb(204, 25, 25); font-size: 2vw; font-weight: bold; padding: 0vw 2vw; } + /*=================================*/ + + /*CONTACT*/ -#content>h1{ +#content>h1 { text-align: center; font-size: 3vw; } -#content>form>h2{ +#content>form>h2 { font-size: 1.5vw; color: lightgrey; } -table#reseaux{ +table#reseaux { width: 70%; - margin : auto; + margin: auto; } -tr#res>td{ +tr#res>td { text-align: center; } -tr#res>td>a>img{ +tr#res>td>a>img { float: none; } + + /*===========================*/ + + /*QUI SOMMES NOUS*/ -#content>h1{ + +#content>h1 { margin-top: 3vw; } -#content>h2{ +#content>h2 { font-size: 2vw; color: white; text-align: left; margin-top: 5vw; } -#content>ul>li>h3{ +#content>ul>li>h3 { font-size: 1.5vw; color: lightgrey; } -table#equipe{ +table#equipe { width: 100%; } -tr#equ>td{ +tr#equ>td { text-align: center; } -tr#equ>td>img{ +tr#equ>td>img { float: none; border: 0.2vw solid rgb(204, 25, 25); } + /*=========================*/ -/*====================================*/ -/*PARTIE RESPONSIVE*/ -@media screen and (max-width: 600px) { - .topnav a, .topnav input[type=text] { - float: none; - display: block; - text-align: left; - width: 76.5%; - margin: 0; - padding: 2vw; - border: none; - transform: none; - } - .topnav a#panier, a#nous{ - border: none; - } - - .topnav a#nous:hover, a#contactN:hover{ - padding : 2.4vw 2vw; - } - a#loupe{ - width: 5%; - border-left: 0.1vw solid rgb(204,25,25) - } - .topnav input[type=text] { - border: 1px solid rgb(190, 73, 73); - } - .flex-container > div { - width: 85%; - margin-left: auto; - margin-right: auto; - } - .flex-container>div>a>img{ - width: 20%; - margin-top: 3%; - margin-left: 10%; - } - .flex-container>div>a>h3, .flex-container>div>a>h4{ - margin-left: 50%; - } - #content{ - margin-left: 2vw; - margin-right: 2vw; - } - -} \ No newline at end of file +/*====================================*/ \ No newline at end of file diff --git a/Assets/resp.css b/Assets/resp.css new file mode 100644 index 0000000..f460f24 --- /dev/null +++ b/Assets/resp.css @@ -0,0 +1 @@ +@media screen and (max-width: 600px) {} \ No newline at end of file diff --git a/index.html b/index.html index beb990e..55195f4 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,35 @@  + Kyflo + - + + - + - + + +

Bienvenue sur le site de KyFlo !

Vendeur de robot depuis 2010 !

- +
@@ -41,38 +44,81 @@
+ \ No newline at end of file