1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
| *,*::before,*::after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
*{
font-size: 16px;
font-family: verdana;
}
.header{
background-color: gray;
height: 40vh;
position: relative;
}
.wrapper{
height: 20%;
display: flex;
justify-content: space-around;
align-items: center;
}
.field{
position: relative;
}
input{
border-radius: 21px;
outline: none;
border: none;
height: 25px;
padding: .5em;
}
.btn{
position: absolute;
border: none;
border-radius: 100%;
height:24px;
width: 24px;
top: 0;
right: 0;
background-color: red;
}
.panier{
width: 19px;
height: 19px;
}
.user{
width: 21px;
height: 21px;
}
.logo span{
color: white;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
}
.pictogrammes{
width: 90px;
height:25px;
display: flex;
justify-content: space-around;
}
.img{
display: block;
}
nav{
display: flex;
width: 50%;
position: absolute;
bottom: 30px;
transform: translateX(50%);
}
a{
flex: 1;
text-decoration: none;
outline: none;
color: white;
font-size: 1em;
text-transform: uppercase;
font-weight: bold;
text-align: center;
padding: .5em;
} |
Partager