correction tp4

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;
+}