Une évaluation qui portait sur la création HTML et CSS en flex et responsive:
Version mobil:
Le code HTML:
Détail du menu au survol:
Version tablette:
Version PC:
Le code CSS:
@import url(‘https://fonts.googleapis.com/css?family=Lobster+Two|Open+Sans:400,700’);
*,
::after,
::before{
box-sizing: border-box;
}
figure {
margin: 0;
}
img {
max-width: 100%;
}
body {
line-height: 1.6em;
font-family: « Open Sans », sans-serif;
font-size: 1rem;
color: black;
margin: 0;
padding: 0;
}
.entete-page{
display:flex;
padding:1rem 1rem;
align-items: center;
}
.logo{
width: 64px;
height: 32px;
}
.groupe-titre{
display: flex;
align-items: baseline;
}
.titre-site{
font-family: ‘Lobster Two’, cursive;
font-weight: 700;
font-size: 1.5rem;
padding: 0 .2rem;
}
.sous-titre{
font-family: ‘Lobster Two’, cursive;
font-weight: 400;
font-size: 1rem;
padding: 0 .2rem;
}
.navigation-principale {
background-color: #b3e04f;
padding-top: 50px;
position: relative;
}
.navigation-principale > ul{
margin:0;
list-style: none;
padding:0;
background-color: black;
}
.navigation-principale a{
display:block;
padding: 1rem 2rem;
text-decoration: none;
color: white;
font-size:1rem;
padding:
}
.navigation-principale > ul > li:hover a{
background-color: white;
color: black;
}
.section-principale,
.annexe{
margin: 1rem;
}
.section-principale h1{
font-family: ‘Lobster Two’, cursive;
font-weight: 700;
font-size: 3rem;
margin: 1rem 0;
}
.section-principale h2{
font-family: ‘Lobster Two’, cursive;
font-size: 2rem;
font-weight: 400;
padding-bottom: .5rem
}
h2{
border-bottom: 4px solid #b3e04f;
padding-bottom: .2rem;
margin-bottom: 1rem;
}
.resume{
margin-bottom: 2rem;
}
.annexe h2{
margin-top: 0;
}
.pied-page{
border-top: 4px solid #b3e04f;
padding-left: 1rem;
}
@media screen and (max-width: 767px){
.navigation-principale::before {
content: »\2261″;
display:block;
font-size: 3rem;
position:absolute;
right:.8rem;
top: .5rem;
color: white;
}
.navigation-principale > ul {
display:none;
}
.navigation-principale:hover ul{
display:block;
}
}
@media screen and (min-width: 768px){
.logo{
width: 192px;
height: 96px;
}
.navigation-principale{
display:flex;
padding: 0;
}
.navigation-principale > ul{
display:flex;
}
.groupe-titre{
display:block;
}
.titre-site{
font-size: 3.1rem;
}
.sous-titre{
font-size: 2rem;
}
.annexe{
display:flex
}
.annexe .rubriques{
flex-basis: 50%;
margin:0 1rem;
}
}
@media screen and (min-width: 992px){
.enveloppe{
max-width: 1280px;
margin: auto;
box-shadow: 0 0 50px;
min-height: 100vh;
align-content: flex-start;
}
.entete-page{
flex-basis:100%;
}
.navigation-principale{
flex-basis:100%;
}
.corps{
display:flex;
flex-direction: row-reverse;
}
.section-principale{
font-size: 1.5rem;
line-height: 1.6em;
width: 75%;
}
.annexe{
width:25%;
display:block;
}
.annexe .rubriques{
margin: 0;
}
La correction du prof:
@import url(‘https://fonts.googleapis.com/css?family=Lobster+Two:400,700|Open+Sans:400,400i,700,700i&subset=latin-ext’);
*, ::before, ::after {
box-sizing:border-box;
}
figure {
margin:0;
}
img {
max-width:100%;
}
html {
font-size:100%;
}
body {
margin:0;
font-family: »Open Sans »,sans-serif;
color:#333;
}
.entete-page {
display:flex;
align-items:center;
padding:1rem;
}
.bloc-logo-site img {
width:64px;
}
.entete-page .titre-site {
font-family: « Lobster Two »,cursive;
margin:0;
}
.entete-page .slogan {
font-weight: normal;
font-family: « Lobster Two »,cursive;
margin:0;
}
.navigation-principale {
background-color:#b3e04f;
}
.navigation-principale ul {
padding:0;
margin:0;
list-style: none;
}
.navigation-principale a {
text-decoration: none;
color:white;
background-color: black;
display:block;
padding:1rem 2rem;
}
.navigation-principale a:hover {
text-decoration: none;
color:black;
background-color: white;
display:block;
padding:1rem 2rem;
}
.article-principal {
padding:1rem;
}
.article-principal .entete-article {
display:flex;
flex-direction: column-reverse;
border-bottom:4px solid #b3e04f;
}
.article-principal .entete-article h1 {
margin:0;
font-size:3rem;
font-family: « Lobster Two »,cursive;
}
.article-principal .entete-article h2 {
margin:0;
font-size:2rem;
font-family: « Lobster Two »,cursive;
font-weight: normal;
}
.article-principal .corps-article p {
line-height:1.6;
margin:1em 0;
}
.annexe-page {
padding:1rem;
}
.annexe-page .entete-annexe {
border-bottom:4px solid #b3e04f;
}
.annexe-page .titre-annexe {
font-weight:bold;
}
.pied-page {
border-top:4px solid #b3e04f;
padding: 1rem;
}
@media screen and (max-width:767px) {
.navigation-principale::before {
content:’\2261′;
color:white;
display:block;
padding:.4rem 2rem;
font-size:2em;
text-align:right;
}
.navigation-principale ul {
display:none;
}
.navigation-principale:hover ul {
display:block;
}
.entete-page .titre-site {
font-size:1.5rem;
display:inline;
}
.entete-page .slogan {
font-size:1rem;
display:inline;
}
}
@media screen and (min-width:768px){
.bloc-logo-site img {
width:192px;
}
.entete-page .titre-site {
font-size:3rem;
}
.entete-page .slogan {
font-size:2rem;
}
.navigation-principale ul {
display:flex;
}
.annexes {
display:flex;
}
.annexe-page {
flex-basis:40%;
flex-grow:1;
}
}
@media screen and (min-width:992px) {
.enveloppe {
max-width: 1280px;
margin:0 auto;
background-color:white;
min-height:100vh;
box-shadow: 12px 0 32px rgba(0,0,0,.5);
}
.bloc-central {
display:flex;
}
.bloc-central .section-principale {
flex-grow: 1;
flex-shrink: 1;
}
.bloc-central .annexes {
order:-10;
flex-basis:240px;
flex-grow:0;
flex-shrink:0;
display:block;
}
}