Évaluation sur le Responsive Design

Pascal FurlanCSS, Evaluations

Pour évaluer nos compétences sur le Responsive Design, notre formateur nous a demandé de créer une page d’un blog fictif, avec les indications suivantes :

Il m’aura fallu une vingtaine d’heures pour réaliser le travail ci-dessous :

Mon code HTML :

Le CSS a été mis dans deux fichiers. Le premier permet de regrouper tous les styles communs, et le second pour regrouper toute la mécanique Responsive Design.

Ci-dessous, mon CSS pour les styles-communs :

@import url(‘https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i’);*,
::before,
::after {
box-sizing: border-box;
}img {
max-width: 100%;
display: block;
}body {
font-family: « Roboto », sans-serif;
background-color: #0b192f;
font-size: .85rem;
margin: 0;
}#enveloppe {
padding: 0 10px;
background-color: #0b192f;
}#entete-page {
background-color: #162b4d;
text-align: center;
color: white;
padding: 10px;
}#entete-page h1,
h2 {
font-weight: 100;
}#entete-page h1 {
font-size: 2rem;
}#entete-page h2 {
font-size: .85rem;
color: #48718f;
}.titre-rose {
color: #d12766;
}#navigation-principale {
background-color: #132b4e;
}#navigation-principale a {
text-decoration: none;
color: #fff;
text-align: center;
display: block;
padding: 1rem;
border-bottom: 2px solid #0b192f;
}#navigation-principale ul {
background-color: #132b4e;
list-style: none;
padding: 0;
margin: 0;
}#navigation-principale li:nth-of-type(1) {
background-color: #0b192f;
list-style: none;
padding: 0;
margin: 0;
}

#navigation-principale a:hover {
color: white;
background-color: #0b192f;
}

.bloc-article h2,
.bloc-article p {
padding: 30px 30px 0 30px;
margin: 0;
}

.bloc-article p {
opacity: .6;
line-height: 1.6rem
}

.module-page h3 {
background-color: #fff;
margin: 0;
padding: 20px 20px 0 20px;
font-weight: 300;
}

.module-page {
margin-bottom: 20px;
}

.module-page p {
background-color: #fff;
margin: 0;
padding: 20px;
line-height: 1.6rem;
}

.image-article:hover {
opacity: .6;
margin: 0;
padding: 0;
border: none;
}

.article-en-une {
color: #fff;
}

.titre-article a {
font-size: 3.2rem;
color: inherit;
text-decoration: none;
line-height: 2.8rem;
}

.titre-article a:hover {
opacity: .6;
}

.titre-annexe {
font-size: 2rem;
}

.image-annexe,
.image-article {
width: 100%;
margin: 0;
padding: 0;
}

.article01 {
background-color: #b71757;
}

.article02 {
background-color: #0d7e71;
}

.article03 {
background-color: #b1660e;
}

.article04 {
background-color: #d12767;
}

.article05 {
background-color: #2d95bb;
}

.corps-article {
display: block;
}

.bloc-article .date-article {
text-align: center;
font-weight: 100;
opacity: .4;
padding: 24px;
}

.bloc-article .date-article .jour {
font-size: 3.2rem;
padding: 10px;
}

.bloc-article .date-article .mois {
padding: 6px;
font-size: 1.8rem;
}

#pied-page {
background-color: #162b4d;
color: #637692;
text-align: center;
padding: 1rem;
font-size: .8rem;
line-height: .5rem;
}

Ci-dessous, mon CSS pour le Responsive Design :

#enveloppe {
position: relative;
overflow: hidden;
}#entete-page {
padding-top: 70px;
}#etiquette-controle-menu-principal {
display: block;
padding: 0;
color: white;
background-color: #162b4d;
width: 4rem;
padding-left: 4rem;
position: absolute;
height: 5rem;
top: 10px;
left: 45%;
overflow: hidden;
z-index: 100;
}#controle-menu-principal {
display: none;
}#navigation-principale ul {
max-height: 0px;
opacity: 0;
transition: all .5s;
}#etiquette-controle-menu-principal::after {
content: « \2261 »;
position: absolute;
right: .1em;
top: .1em;
font-size: 5.5em;
}#controle-menu-principal:checked ~ #navigation-principale ul {
opacity: 1;
max-height: 300px;
transition: all .5s;
}@media screen and (min-width:768px) {
#enveloppe::before,
#entete-page::before,
#navigation-principale::before,
.article-en-une::before,
.bloc-article::before,
.corps-article::before,
.date-article::before,
.image-article::before,
#annexes-page::before,
#pied-page::before {
content: «  »;
display: table;
}#enveloppe::after,
#entete-page::after,
#navigation-principale::after,
.article-en-une::after,
.bloc-article::after,
.corps-article::after,
.image-article::after,
.date-article::after,
#annexes-page::after,
#pied-page::after {
content: «  »;
display: table;
clear: both;
}#enveloppe {
max-width: 1140px;
margin: auto;
}

#etiquette-controle-menu-principal {
display: none;
}

#entete-page {
float: left;
padding: 20px;
text-align: left;
min-height: 90px;
}

#entete-page h1,
#entete-page h2 {
margin: 0;
display: inline-block;
}

#entete-page h2 {
padding-left: 20px;
}

#navigation-principale > ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
display: block;
opacity: 1;
}

#navigation-principale > ul > li {
float: left;
}

#navigation-principale > ul > li > a {
display: block;
min-height: 90px;
padding: 2rem;
}

.article-en-une {
display: block;
float: left;
width: 75%;
padding-top: 20px;
padding-bottom: 20px;
}

.bloc-article {
position: relative;
}

.article-en-une .bloc-article:nth-child(odd) .image-article {
float: left;
width: 50%;
}

.article-en-une .bloc-article:nth-child(odd) .corps-article {
float: right;
width: 50%;
padding: 0 60px 10px 0;
}

.article-en-une .bloc-article:nth-child(even) .image-article {
float: right;
width: 50%;
}

.article-en-une .bloc-article:nth-child(even) .corps-article {
float: left;
width: 50%;
padding: 0 0 10px 60px;
text-align: right
}

.article01 .date-article,
.article03 .date-article,
.article05 .date-article {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 10px;
}

.article-en-une .article05 {
padding-bottom: 20px;
}

.article02 .date-article,
.article04 .date-article {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 10px;
}

#annexes-page {
float: right;
width: 25%;
padding: 20px 0 0 20px;
}

#pied-page .copyright {
float: left;
}

#pied-page .design {
float: right;
}

#pied-page {
text-align: left;
clear: both;
}
}

Au final, l’apparence de la page du blog, en version écran mobile et en version écran PC :

VERSION ECRAN MOBILE :

VERSION ECRAN MOBILE, MENU DÉROULÉ :

VERSION ECRAN PC :