Une évaluation! Chaud…
La partie écran de téléphone, avec menu déroulant progressif et couleur de survol. HTML et CSS uniquement.
Les photos et les titres d’article doivent devenir partiellement transparent à leurs survole.
La partie écran PC.
Vous pouvez remarquer que je n’ai pas pue m’empêcher, il est évident que la première photo (un giff animé en réalité) ne fait pas partie de l’exercice.
voici le code HTML:
Et le code css nécéssaire :
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,700&subset=latin,latin-ext);
*,
::before,
::after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
}
figure {
text-align: center;
}
img {
max-width:100%;
}
a>img {
border-width: 0;
}
body {
font-family: »Roboto »,Arial,sans-serif;
background-color: rgb(22,43,77);
color:#fff;
font-weight: 300;
}
h1,h2,h3,h4 {
font-weight: 100;
}
article::before,
#super-entete::before,
#pied-page::before {
content: » »;
display:table;
}
article::after,
#super-entete::after,
#pied-page::after {
content: » »;
display:table;
clear:both;
}
#super-entete,
#pied-page
{
background-color:rgba(255,255,255,.2);
text-align:center;
}
#entete-page a,
#menu-principal a {
color:inherit;
text-decoration:inherit;
display:block;
}
#entete-page .slogan {
font-size:1rem;
padding:1em;
}
#entete-page .titre-site {
padding:.6rem;
}
.titre-site-b {
color:#d12767;
}
.etiquette-controle-menu-principal {
background-color: rgba(255,255,255,.2);
text-align:center;
font-size: 3rem;
display:block;
}
.etiquette-controle-menu-principal::after {
content: »\2261″;
}
#controle-menu-principal {
display:none;
}
#menu-principal {
max-height:0;
overflow:hidden;
transition: all 1s;
}
#controle-menu-principal:checked ~ #menu-principal {
max-height:100vh;
}
#menu-principal ul {
margin:0;
padding:0;
list-style: none;
}
#menu-principal a {
display:block;
padding:1em;
border-top:2px solid rgb(22,43,77);
}
#menu-principal a:hover,
#menu-principal .lien-page-courante {
background-color: rgb(22,43,77);
}
.bloc-image-en-une,
.bloc-image-annonce{
text-align:center;
padding:0;
}
.bloc-image-en-une img,
.bloc-image-annonce img {
vertical-align: middle;
}
.article-en-une .contenu-article {
padding:1rem 2rem 2rem;
}
.article-en-une .titre-article {
font-size: 3.2rem;
line-height: 1;
margin-bottom: .5em;
}
.article-en-une .resume-article {
line-height:1.6;
opacity:.5;
}
.article-en-une .date-publication {
display:block;
font-weight:100;
margin:2rem 0;
font-size:2rem;
line-height: 1;
opacity:.5;
}
.article-en-une .date-publication .jour {
font-size:3rem;
}
.article-en-une:nth-of-type(1) {
background-color:#b71757;
}
.article-en-une:nth-of-type(2) {
background-color:#0d7e71;
}
.article-en-une:nth-of-type(3) {
background-color:#b1660e;
}
.article-en-une:nth-of-type(4) {
background-color:#d12767;
}
.article-en-une:nth-of-type(5) {
background-color:#2d95bb;
}
.date-publication .mois,
.date-publication .jour {
display:block;
text-align: center;
}
.annonce {
background-color:#fff;
color:#000;
}
.texte-annonce {
padding:1rem 2rem 2rem;
}
.titre-annonce {
font-size:2rem;
margin-bottom:.5em;
line-height:1
}
.corps-annonce{
line-height:1.6;
opacity:.5;
}
#pied-page {
padding:2rem;
opacity:.5;
}
@media screen and (min-width:992px) {
.etiquette-controle-menu-principal::after {
content:none;
}
.enveloppe {
max-width: 1140px;
margin:0 auto;
}
#super-entete {
margin: 0 10px 10px;
}
#entete-page {
float:left;
}
#entete-page .titre-site,
#entete-page .slogan {
float:left;
min-height:90px;
padding:0 1rem;
line-height:90px;
}
#menu-principal {
max-height:none;
overflow:visible;
float:right;
}
#controle-menu-principal:checked ~ #menu-principal {
max-height:none;
}
#menu-principal ul.menu-niveau-1 > li {
float:left;
}
#menu-principal a {
display:block;
min-height:90px;
padding:0 1rem;
line-height:90px;
}
#contenu-principal {
margin:10px;
float:left;
width:calc(75% – 20px);
}
.article-en-une {
position:relative;
}
.article-en-une .bloc-image-en-une {
width:50%;
float:left;
}
.article-en-une .contenu-article {
width:90%;
float:left;
}
.article-en-une .bloc-image-en-une + .contenu-article {
width:40%;
}
.article-en-une .date-publication{
position:absolute;
top:0;
right:0;
margin:0 .5rem;
}
.article-en-une:nth-of-type(2n) .bloc-image-en-une {
float:right;
}
.article-en-une:nth-of-type(2n) .contenu-article {
float:right;
}
.article-en-une:nth-of-type(2n) .date-publication{
left:0;
right:auto;
}
#bloc-annexes-page-01 {
margin:10px;
float:right;
width:calc(25% – 20px);
}
.annonce {
margin-bottom:20px;
}
#pied-page {
clear:both;
margin:10px 10px 0;
text-align:left;
}
.credits-1 {
float:left;
}
.credits-2 {
float:right;
}
}
Par la suite nous exécutons une version plus abouti et plus complexe, toujours html et css seul.
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,700&subset=latin,latin-ext);
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
figure {
text-align: center;
}
img {
max-width: 100%;
}
a>img {
border-width: 0;
}
body {
font-family: « Roboto », Arial, sans-serif;
background-color: rgb(22, 43, 77);
color: #fff;
font-weight: 300;
}
h1, h2, h3, h4 {
font-weight: 100;
}
article::before, #super-entete::before, #pied-page::before {
content: « »;
display: table;
}
article::after, #super-entete::after, #pied-page::after {
content: « »;
display: table;
clear: both;
}
#super-entete, #pied-page {
background-color: rgba(255, 255, 255, .2);
text-align: center;
}
#entete-page a, #menu-principal a {
color: inherit;
text-decoration: inherit;
display: block;
}
#entete-page .slogan {
font-size: 1rem;
padding: 1em;
}
#entete-page .titre-site {
padding: .6rem;
}
.titre-site-b {
color: #d12767;
}
@media screen and (max-width:991px) {
.etiquette-controle-menu-principal {
text-align: center;
font-size: 3rem;
display: block;
}
.etiquette-controle-menu-principal::after {
content: « \2261 »;
}
#controle-menu-principal {
display: none;
}
#menu-principal {
max-height: 0;
overflow: hidden;
}
#controle-menu-principal:checked~#menu-principal {
max-height: none;
}
#menu-principal label, #menu-principal a {
border-bottom: 2px solid rgb(22, 43, 77);
}
.menu {
background-color: rgba(255, 255, 255, .3)
}
/* .menu {
background-color: red;
}
.menu .menu {
background-color: green;
}
.menu .menu .menu{
background-color: blue;
} */
.controle-menu {
display: none;
}
.controle-menu~.menu {
height: 0;
overflow: hidden;
}
.controle-menu:checked~.menu {
height: auto;
overflow: hidden;
}
.etiquette-controle-menu {
position: relative;
padding-left: 1em;
padding-right: 1em;
}
.etiquette-controle-menu::after {
content: « \25b8 »;
display: block;
position: absolute;
font-size: 2em;
right: .2em;
top: .2em;
transition: all 1s;
}
.controle-menu:checked+.etiquette-controle-menu::after {
transform: rotate(90deg);
}
}
#menu-principal ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu-principal label, #menu-principal a {
display: block;
padding: 1em;
}
#menu-principal label:hover, #menu-principal a:hover, #menu-principal .lien-page-courante {
background-color: rgb(22, 43, 77);
}
.bloc-image-en-une, .bloc-image-annonce {
text-align: center;
padding: 0;
}
.bloc-image-en-une img, .bloc-image-annonce img {
vertical-align: middle;
}
.article-en-une .contenu-article {
padding: 1rem 2rem 2rem;
}
.article-en-une .titre-article {
font-size: 3.2rem;
line-height: 1;
margin-bottom: .5em;
}
.article-en-une .resume-article {
line-height: 1.6;
opacity: .5;
}
.article-en-une .date-publication {
display: block;
font-weight: 100;
margin: 2rem 0;
font-size: 2rem;
line-height: 1;
opacity: .5;
}
.article-en-une .date-publication .jour {
font-size: 3rem;
}
.article-en-une:nth-of-type(1) {
background-color: #b71757;
}
.article-en-une:nth-of-type(2) {
background-color: #0d7e71;
}
.article-en-une:nth-of-type(3) {
background-color: #b1660e;
}
.article-en-une:nth-of-type(4) {
background-color: #d12767;
}
.article-en-une:nth-of-type(5) {
background-color: #2d95bb;
}
.date-publication .mois, .date-publication .jour {
display: block;
text-align: center;
}
.annonce {
background-color: #fff;
color: #000;
}
.texte-annonce {
padding: 1rem 2rem 2rem;
}
.titre-annonce {
font-size: 2rem;
margin-bottom: .5em;
line-height: 1
}
.corps-annonce {
line-height: 1.6;
opacity: .5;
}
#pied-page {
padding: 2rem;
opacity: .5;
}
@media screen and (min-width:992px) {
.etiquette-controle-menu-principal::after {
content: none;
}
.enveloppe {
max-width: 1140px;
margin: 0 auto;
}
#super-entete {
margin: 0 10px 10px;
}
#entete-page {
float: left;
}
#entete-page .titre-site, #entete-page .slogan {
float: left;
min-height: 90px;
padding: 0 1rem;
line-height: 90px;
}
#menu-principal {
float: right;
}
#menu-principal ul.menu-niveau-1>li {
float: left;
}
#menu-principal a,
#menu-principal label {
display: block;
min-height: 90px;
padding: 0 1rem;
line-height: 90px;
}
.menu li {
position:relative;
}
.controle-menu {
display:none;
}
.menu-niveau-2 {
position:absolute;
background-color:rgba(100,120,160,.95);
z-index:1000;
width:10em;
right:0;
}
.menu-niveau-3 {
position:absolute;
background-color:rgba(100,120,160,.95);
z-index:1000;
width:10em;
top:0;
right:100%
}
.controle-menu ~ .menu {
display:none;
}
.controle-menu:checked ~ .menu {
display:block;
}
#contenu-principal {
margin: 10px;
float: left;
width: calc(75% – 20px);
}
.article-en-une {
position: relative;
}
.article-en-une .bloc-image-en-une {
width: 50%;
float: left;
}
.article-en-une .contenu-article {
width: 90%;
float: left;
}
.article-en-une .bloc-image-en-une+.contenu-article {
width: 40%;
}
.article-en-une .date-publication {
position: absolute;
top: 0;
right: 0;
margin: 0 .5rem;
}
.article-en-une:nth-of-type(2n) .bloc-image-en-une {
float: right;
}
.article-en-une:nth-of-type(2n) .contenu-article {
float: right;
}
.article-en-une:nth-of-type(2n) .date-publication {
left: 0;
right: auto;
}
#bloc-annexes-page-01 {
margin: 10px;
float: right;
width: calc(25% – 20px);
}
.annonce {
margin-bottom: 20px;
}
#pied-page {
clear: both;
margin: 10px 10px 0;
text-align: left;
}
.credits-1 {
float: left;
}
.credits-2 {
float: right;
}
}