From 6692425602bc63c37616aaad9850edac78b58c7d Mon Sep 17 00:00:00 2001 From: Denis Monnerat Date: Tue, 17 Dec 2024 08:54:43 +0100 Subject: [PATCH] une correction du tp4 --- R1.02/tp/tp4/correction/pantheon.html | 80 ++++++++++++++++ R1.02/tp/tp4/correction/style.css | 132 ++++++++++++++++++++++++++ 2 files changed, 212 insertions(+) create mode 100644 R1.02/tp/tp4/correction/pantheon.html create mode 100644 R1.02/tp/tp4/correction/style.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..fc4b7b1 --- /dev/null +++ b/R1.02/tp/tp4/correction/style.css @@ -0,0 +1,132 @@ +html{ + + margin:0px; + padding:0px; + height:100vh; +} + +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; +} +.informaticien article img +{ + float :right; + width : 125px; + height:125px; + padding:10px; + box-shadow: 10px 10px 5px #656565; +} +.date +{ + font-size : 1rem; +} + +section.informaticien +{ + display:flex; + justify-content:space-around; + flex-wrap:wrap; + align-self:stretch; + 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; +}