Travail responsive + flexbox
This commit is contained in:
KEZEL BENOIT p1907091
parent
6c5fcc578b
commit
2612cf1037
7 changed files with 156 additions and 29 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 217 KiB |
|
|
@ -21,18 +21,18 @@ body {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
font-size: 2vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body>#bienvenue>h1 {
|
||||
font-size: 3vw;
|
||||
font-size: 2vw;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body>#bienvenue>h2 {
|
||||
font-size: 2vw;
|
||||
font-size: 1.5vw;
|
||||
color: lightgrey;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -64,6 +64,7 @@ a#kyflo {
|
|||
padding: 0.5vw 1vw;
|
||||
transform: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
a#nous {
|
||||
|
|
@ -79,6 +80,11 @@ a#nous {
|
|||
margin-right: -6%;
|
||||
}
|
||||
|
||||
a#panier>h3{
|
||||
margin-top :0.5vw;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#loupe {
|
||||
float: right;
|
||||
display: block;
|
||||
|
|
@ -104,7 +110,9 @@ a#nous {
|
|||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: rgba(22, 22, 22, 0.61);
|
||||
box-shadow: 0vw 0.5vw 0.4vw rgba(255, 0, 0, 0.534);
|
||||
border-bottom: 0.15vw solid rgb(204, 25, 25);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
|
|
@ -158,6 +166,7 @@ a#contactN:hover {
|
|||
|
||||
footer {
|
||||
margin-top: 8vw;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer>div>table {
|
||||
|
|
@ -235,23 +244,23 @@ td#contact {
|
|||
|
||||
.flex-container>div {
|
||||
background-color: rgba(59, 59, 59, 0.5);
|
||||
width: 47%;
|
||||
width: 30%;
|
||||
margin: 1vw;
|
||||
text-align: center;
|
||||
line-height: 5vw;
|
||||
line-height: 3vw;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.flex-container>div>a>h3 {
|
||||
text-align: left;
|
||||
font-size: 3vw;
|
||||
font-size: 2vw;
|
||||
margin-left: 35%;
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
.flex-container>div>a>h4 {
|
||||
text-align: left;
|
||||
font-size: 2vw;
|
||||
font-size: 1.5vw;
|
||||
margin-left: 35%;
|
||||
color: lightgrey;
|
||||
}
|
||||
|
|
@ -261,7 +270,8 @@ td#contact {
|
|||
margin-top: 10%;
|
||||
}
|
||||
|
||||
#middle {}
|
||||
|
||||
|
||||
|
||||
|
||||
/*==========================================*/
|
||||
|
|
@ -379,7 +389,7 @@ td#contact {
|
|||
#produits {
|
||||
border: 0.1vw solid red;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin-top: 8vw;
|
||||
margin-top: 3vw;
|
||||
padding: 2vw 2vw;
|
||||
}
|
||||
|
||||
|
|
@ -570,7 +580,6 @@ div#slider {
|
|||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
div#slider figure {
|
||||
|
|
@ -737,12 +746,15 @@ table#equipe {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
tr#equ>td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tr#equ>td>img {
|
||||
float: none;
|
||||
width: 20%;
|
||||
border: 0.2vw solid rgb(204, 25, 25);
|
||||
}
|
||||
|
||||
|
|
|
|||
135
Assets/resp.css
135
Assets/resp.css
|
|
@ -1,5 +1,24 @@
|
|||
@media screen and (max-width: 600px) {
|
||||
.topnav a,
|
||||
|
||||
/*===========GENERAL===========*/
|
||||
h1{
|
||||
font-size: 3vw;
|
||||
}
|
||||
body>#bienvenue>h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
body>#bienvenue>h2 {
|
||||
font-size: 2vw;
|
||||
}
|
||||
button#hautPage{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/*===========NAVBAR===========*/
|
||||
.topnav{
|
||||
position: static;
|
||||
}
|
||||
.topnav input[type=text] {
|
||||
float: none;
|
||||
display: block;
|
||||
|
|
@ -9,23 +28,52 @@
|
|||
padding: 2vw;
|
||||
border: none;
|
||||
transform: none;
|
||||
font-size: 3vw;
|
||||
}
|
||||
.topnav a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2vw;
|
||||
border: none;
|
||||
transform: none;
|
||||
font-size: 3vw;
|
||||
|
||||
}
|
||||
.topnav a#kyflo{
|
||||
font-size: 8vw;
|
||||
text-align: center;
|
||||
}
|
||||
.topnav a#panier,
|
||||
a#nous {
|
||||
border: none;
|
||||
}
|
||||
.topnav a#panier{
|
||||
width: 20%;
|
||||
margin-right: -14%;
|
||||
}
|
||||
.topnav a#panier:hover{
|
||||
margin-right: -14%;
|
||||
}
|
||||
.topnav a#nous:hover,
|
||||
a#contactN:hover {
|
||||
padding: 2.4vw 2vw;
|
||||
padding: 2vw 2vw;
|
||||
}
|
||||
a#loupe {
|
||||
.topnav a#loupe {
|
||||
width: 5%;
|
||||
padding: 1vw;
|
||||
font-size: 3vw;
|
||||
border-left: 0.1vw solid rgb(204, 25, 25)
|
||||
}
|
||||
.topnav input[type=text] {
|
||||
border: 1px solid rgb(190, 73, 73);
|
||||
}
|
||||
/* FLEX CONTAINER*/
|
||||
.topnav a#panier>h3{
|
||||
display:none;
|
||||
}
|
||||
/*===========FLEX CONTAINER===========*/
|
||||
.flex-container>div {
|
||||
width: 85%;
|
||||
margin-left: auto;
|
||||
|
|
@ -44,4 +92,83 @@
|
|||
margin-left: 2vw;
|
||||
margin-right: 2vw;
|
||||
}
|
||||
|
||||
/*========FOOTER=========*/
|
||||
tr {
|
||||
border-bottom: 0.2vw solid red;
|
||||
color: white;
|
||||
height: 4vw;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
th#line {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button#contactB {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5vw 4vw;
|
||||
font-size: 2vw;
|
||||
color: lightgrey;
|
||||
background-color: rgb(27, 27, 27);
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
transform: skew(-.312rad);
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
button#contactB:hover {
|
||||
background-color: rgb(204, 25, 25);
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 20%;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
td#contact {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*=======FLEX CONTAINER========*/
|
||||
|
||||
.flex-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-container>div {
|
||||
width: 80%;
|
||||
margin: 1vw;
|
||||
line-height: 5vw;
|
||||
}
|
||||
|
||||
.flex-container>div>a>h3 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.flex-container>div>a>h4 {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.flex-container>div>a>img {
|
||||
width: 20%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
/*=====Produits=======*/
|
||||
#Produit>h3 {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
#Carac>h2 {
|
||||
font-size: 2.5vw;
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
}
|
||||
16
index.html
16
index.html
|
|
@ -19,7 +19,7 @@
|
|||
<a id="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id="nous" href="Assets/Pages/Autres/nous.html">A propos</a>
|
||||
<a id="contactN" href="Assets/Pages/Autres/contact.html">Contact</a>
|
||||
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt></a>
|
||||
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="loupe" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</div>
|
||||
|
|
@ -55,25 +55,13 @@
|
|||
<h3>Robot Nao</h3>
|
||||
<h4>5 000€</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/cat.png" alt>
|
||||
<h3>Robot chat</h3>
|
||||
<h4>Rupture de stock</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
|
||||
<h3>Robot r2d2</h3>
|
||||
<h4>500€</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/jaune.png" alt>
|
||||
<h3>Robot champion</h3>
|
||||
<h4>Rupture de stock</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
|
||||
<h3>Robot valkyrie</h3>
|
||||
|
|
|
|||
Reference in a new issue