diff --git a/R1.02/tp/tp4/README.md b/R1.02/tp/tp4/README.md index a017a5c..e089d28 100644 --- a/R1.02/tp/tp4/README.md +++ b/R1.02/tp/tp4/README.md @@ -1,5 +1,7 @@ # TP CSS - mise en page d'un site +> Une [correction](./correction) + > Vous pouvez utiliser l'inspecteur dans les outils développeur pour modifier du code CSS directement dans le navigateur. > Vous pouvez utiliser [des aides](https://developer.mozilla.org/fr/docs/Web/CSS/Reference) pour trouver les propriétés CSS. diff --git a/R1.02/tp/tp4/correction/pantheon.html b/R1.02/tp/tp4/correction/pantheon.html new file mode 100644 index 0000000..9e964a2 --- /dev/null +++ b/R1.02/tp/tp4/correction/pantheon.html @@ -0,0 +1,80 @@ + + + + + + TP mise en page avec le css + + + +
+

Mon Panthéon

+ +
+
+

Les informaticiens

+
+ Ritchie +

Dennis
Ritchie

+

9 septembre 1941 - 12 octobre 2011

Nationalité : américaine

+
+
+ linus torvalds +

Linus
Torvalds

28 décembre 1969 -

+

Nationalité : finlandaise

+
+
+ Pascal +

Blaise
Pascal

+

19 juin 1623 - 19 août 1662

+

Nationalité : française

+
+
+ turing +

Alan
Turing

23 juin 1912 - 7 juin 1954

+

Nationalité : britannique

+
+
+ + + + diff --git a/R1.02/tp/tp4/correction/style.css b/R1.02/tp/tp4/correction/style.css new file mode 100644 index 0000000..99e708f --- /dev/null +++ b/R1.02/tp/tp4/correction/style.css @@ -0,0 +1,147 @@ +html{ + + margin:0px; + padding:0px; + height:100vh; + font-size:20px; +} + +body +{ + display:grid; + min-height:100vh; + max-width:80%; + margin:auto; + font-family: Helvetica, Arial,sans-serif; + font-size:1rem; + height:100%; + margin-bottom:0px; + grid-template-columns : 2fr 1fr; + grid-template-rows : auto 1fr auto; + /* align-items:stretch;*/ +} + +header { + grid-column: 1 / span 2; +} + +section h2{ + flex-basis:100%; + text-align:center; +} + +h2.titre +{ + text-align:center; + background-color: #eeeeee; + padding:1rem; + margin-top:2rem; + margin-bottom:2rem; +} + +nav { + margin:3rem; + margin-bottom:3.5rem; +} + +nav ul +{ + list-style-type: none; + padding : 5px; + text-align:center; + font-size:1.2rem; + display:flex; + justify-content:center; +} + +nav ul li +{ + margin-left :1rem ; + margin-right:1rem; +} + +footer a,nav ul a +{ + color: #3B81BE; + text-decoration:none; + border-bottom: 1px dashed #666666; +} + + +em{ + font-weight:bold; +} + +.informaticien article +{ + flex:1 40%; + padding:1em; + border : 1px solid #eeeeee; + margin : 5px; + text-align:left; + container-type: inline-size; +} + +.informaticien article img +{ + width : 125px; + height:125px; + padding:10px; + box-shadow: 10px 10px 5px #656565; +} + + +@container (min-width:400px) +{ + .informaticien article img + { + float :right; + } + +} + +.date +{ + font-size : 1rem; +} + +section.informaticien +{ + display:flex; + justify-content:space-around; + flex-wrap:wrap; +/* align-self:stretch;*/ +/* align-content : space-around;*/ + grid-column : 1 ; +} + +aside +{ + padding-left:1.5rem; + border-left : 1px solid #eeeeee; + margin:0px; + grid-column : 2; + /*align-self:center;*/ +} + +aside p +{ + font-size:0.9rem; + text-align:justify; +} + +aside p::before +{ + content:">>"; + color: #3B81BE; +} + +footer +{ + grid-column : span 2; + padding-top:10px; + border-top:1px solid #eeeeee; + margin:0px; + display:flex; + justify-content:space-between; +}