Nous rentrons dans le concret! Voici l’exercice:
Format mobil:
Son css:
@import url(« https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i »);
*,
::before,
::after {
box-sizing: border-box; }
figure {
margin: 0; }
img {
max-width: 100%; }
body {
line-height: 1.5;
font-family: « Open Sans », sans-serif;
color: black; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: « Open Sans Condensed », sans-serif;
line-height: 1;
margin: 0; }
a {
color: grey; }
a:hover {
color: white;
background-color: grey; }
.pied-page,
.section-principale article,
.breves article,
.rubriques ul li,
.enveloppe,
.entete-page,
.navigation-principale,
.navigation-principale li,
.derniers-articles article
{
box-shadow: 1px 1px #ccc, 1px 1px #ccc inset;
background-color: white;
}
.entete-page h1,
.entete-page h2 {
font-weight: 200; }
body {
margin: 0;
padding: 0; }
.entete-page {
padding:1rem 1rem;
}
.navigation-principale > ul {
padding:0;
margin:0;
list-style:none;
}
.navigation-principale a {
display:block;
padding:.5rem 1rem;
text-decoration: none;
color:black;
}
.en-avant article figure{
margin: 10px;
height:120px;
overflow: hidden;
display:flex;
align-items: center;
}
article{
display:flex;
flex-direction: column-reverse;
}
.resume,
article a{
display:block;
text-decoration: none;
padding: 0 20px;
order: -10;
}
.derniers-articles{
display: flex;
flex-wrap:wrap;
}
.derniers-articles article{
max-width: 25%;
}
.derniers-articles article h1{
padding: 10px 0;
font-size: .8em;
}
.rubriques ul{
list-style: none;
padding: 0;
margin:0;
display:flex;
flex-wrap:wrap;
}
.rubriques ul li{
width: 50%;
height:100%;
}
.rubriques ul li a figure{
width: 20%;
}
.rubriques img{
display:block;
}
.rubriques ul li a{
display:flex;
align-items: flex-end;
text-decoration:none;
}
.titre-rubrique{
order: 10;
padding-left: .5rem;
}
.breves{
display:flex;
}
.breves article{
width: 50%;
}
.breves h1{
padding: 10px 20px;
}
.pied-page{
padding: 10px;
width:100%;
}
Pour le menu:
@media screen and (max-width: 767px){
/* au survole*/
.navigation-principale::before {
content: »\2261″;
display:block;
font-size: 2rem;
padding: 0rem .5rem;
}
.navigation-principale ul {
display:none;
}
.navigation-principale:hover ul{
display:block;
}
ou
/* au clic*/
/*
#etiquette-controle-menu-principal {
display: block;
padding:1em;
color:black;
}
#controle-menu-principal {
display:none;
}
.navigation-principale ul {
display:none;
}
#controle-menu-principal:checked ~ .navigation-principale ul {
display:block;
}
#etiquette-controle-menu-principal {
padding: 1em 1em 2em 2em;
overflow:hidden;
position:relative;
}
#etiquette-controle-menu-principal::after {
content: »\2261″;
position:absolute;
left:.4em;
top:0;
font-size: 2em;
}
#controle-menu-principal:checked + #etiquette-controle-menu-principal::after {
content: »\2716″;
top:1em;
left:1em;
font-size: 1em;
}
*/
}
Format tablette:
Son code css:
@media screen and (min-width: 768px) {
.enveloppe{
display: flex;
flex-wrap:wrap;
}
.navigation-principale{
flex-basis:100%;
order: -20;
}
.entete-page{
flex-basis: 100%;
order: -15
}
.menu-1er-niveau{
display:flex;
}
.menu-1er-niveau li{
width: 100px;
}
.section-principale{
flex-basis:60%;
display:flex;
flex-direction: column;
}
.section-principale article{
width:50%;
}
.en-avant{
display: flex;
flex-wrap:wrap;
}
.en-avant article{
height: 500px;
}
.rubriques{
flex-basis:20%;
order: -10
}
.resume{
height: 100%;
}
.derniers-articles article{
max-width: 33.333%;
}
.rubriques ul{
display:flex;
flex-direction: column;
}
.rubriques ul li{
width: 100%;
height:100%;
}
.breves{
display:flex;
flex-direction: column;
/* on peu utiliser dislpay: block; */
flex-basis:20%;
}
.breves article{
width:100%;
}
}
Format PC:
Le code css:
@media screen and (min-width: 992px) {
.derniers-articles article{
max-width: 25%;
}
.enveloppe{
max-width: 1224px;
margin:auto;
box-shadow: 0 0 50px;
min-height: 100vh;
align-content: flex-start;
}
}