1 files changed, 308 insertions, 0 deletions
diff --git a/ordipolo.css b/ordipolo.css
new file mode 100644
index 0000000..09855e1
--- /dev/null
+++ b/ordipolo.css
@@ -0,0 +1,308 @@
+body
+{
+        font-size: 100%;
+        font-family: sans;
+        /* pour enlever la bande de la couleur du fond en haut et en bas de la page */
+        margin: 0;
+        background-color: #F0EC41;
+}
+#bloc_page
+{
+        max-width: 1200px;
+        /* la largeur max indiquée sert à réduire la variété des largeurs d'écran à prendre en compte */
+        margin: auto;
+        padding: 0 20px 30px 20px;
+        background-color: white;
+}
+h1
+{
+        font-weight: normal;
+        display: inline-block;
+        margin: 5px;
+        border: 2px #008100 solid;
+        border-radius: 12px;
+        padding: 3px;
+        background-color: #F4F02D;
+        font-size: 120%;
+}
+h2
+{
+        font-weight: normal;
+        font-size: 110%;
+        text-decoration: underline;
+}
+p
+{
+        margin: 10px;
+}
+a
+{
+        color: black;
+        /* les liens déjà cliqués restent noirs */
+}
+a:hover /* liens survolés par la souris */
+{
+        color: #004F00;
+}
+.lien:hover
+{
+        font-weight: bold;
+}
+/* En-tête. */
+header
+{
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 20px;
+}
+header div, header p
+{
+        margin-top: 40px;
+}
+#logohaut
+{
+        width: 200px;
+}
+#logotitre
+{
+        height: 90px;
+}
+/* Menu de navigation. */
+nav
+{
+        position: fixed;
+        z-index: 2; /* pour être dessus des prestations */
+        text-align: center;
+}
+nav a
+{
+   display: inline-block; /* menu horizontal */
+        border: 2px #008100 solid;
+        border-radius: 12px;
+        padding: 3px;
+        margin: 2px;
+        background-color: #F4F02D;
+        font-size: 110%;
+        text-decoration: none;
+}
+/* "vous êtes ici" */
+#actuelle
+{
+        color: #004F00;
+        border: 3px #004F00 solid;
+}
+/* Corps de page. */
+section
+{
+        display: flex;
+        align-items: center;
+}
+aside
+{
+        width: 174px; /* équivalent à la photo qui fait 170 de large plus la bordure de 2 pixels */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+}
+aside p
+{
+        margin: 0;
+}
+article
+{
+        margin-left: 20px;
+}
+#description
+{
+        margin: 0;
+        font-size: 110%;
+}
+.photo
+{
+        border: 2px #008100 solid;
+        border-radius: 10px;
+}
+/* nuage de liens */
+section
+{
+        display: flex;
+}
+#prestations div
+{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        margin: 20px 30px;
+        padding: 10px;
+        border: 2px #008100 solid;
+        border-radius: 12px;
+        background-color: #F4F02D;
+}
+h3
+{
+        margin: 10px;
+        border: 2px #008100 solid;
+        border-radius: 12px;
+        padding: 3px;
+        text-align: center;
+        font-size: 100%;
+        background-color: white;
+}
+h3 a
+{
+        text-decoration: none;
+}
+table
+{
+        margin: 10px;
+        max-width: 470px;
+        /* fusionner les bordures */
+        border-collapse: collapse;
+}
+caption span
+{
+        font-size: 110%;
+        text-decoration: underline;
+}
+caption i
+{
+        font-size: 90%;
+}
+td
+{
+        
+        border: 1px black solid;
+}
+pre
+{
+        font-family: sans-serif;
+        font-size: 90%;
+        white-space: pre-wrap;
+        margin: 0 20px;
+        padding: 10px;
+        border: 2px #004F00 dotted;
+        border-radius: 10px;
+}
+a img
+{
+        border: none;
+        /* retire la bordure bleue sur certains navigateurs */
+}
+.parties
+{
+        margin: 10px 0 15px 0;
+}
+/* lien fixe en bas */
+footer
+{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+}
+footer h1
+{
+        position: fixed;
+        bottom: 0;
+        margin: 2px; /* de 5 par défaut */
+        text-align: center;
+}
+footer a
+{
+        text-decoration: none;
+}
+/* remplacement du logo titre qui est trop large */
+@media screen and (min-width: 500px)
+{
+        #logohaut
+        {
+                display: none;
+        }
+}
+@media screen and (max-width: 500px)
+{
+        #logotitre
+        {
+                display: none;
+        }
+}
+/* design responsive */
+@media screen and (max-width: 750px)
+{
+        section
+        {
+                display: flex;
+                flex-direction: column;
+        }
+        
+        aside
+        {
+                margin: auto;
+        }
+        
+        p
+        {
+                margin: 3px;
+        }
+        
+        #prestations div /* à cause du menu sur deux lignes */
+        {
+                margin-top: 74px;
+        }
+}
+@media screen and (max-width: 710px)
+{
+        header div, header p
+        {
+                margin-top: 76px;
+        }
+        nav a
+        {
+                font-size: 100%;
+        }
+        h1
+        {
+                font-size: 110%;
+        }
+}

diff --git a/ordipolo.css b/ordipolo.css new file mode 100644 index 0000000..09855e1 --- /dev/null +++ b/ordipolo.css
@@ -0,0 +1,308 @@
	1	body
	2	{
	3	font-size: 100%;
	4	font-family: sans;
	5	/* pour enlever la bande de la couleur du fond en haut et en bas de la page */
	6	margin: 0;
	7	background-color: #F0EC41;
	8	}
	9
	10	#bloc_page
	11	{
	12	max-width: 1200px;
	13	/* la largeur max indiquée sert à réduire la variété des largeurs d'écran à prendre en compte */
	14	margin: auto;
	15	padding: 0 20px 30px 20px;
	16	background-color: white;
	17	}
	18
	19	h1
	20	{
	21	font-weight: normal;
	22	display: inline-block;
	23	margin: 5px;
	24	border: 2px #008100 solid;
	25	border-radius: 12px;
	26	padding: 3px;
	27	background-color: #F4F02D;
	28	font-size: 120%;
	29	}
	30
	31	h2
	32	{
	33	font-weight: normal;
	34	font-size: 110%;
	35	text-decoration: underline;
	36	}
	37
	38	p
	39	{
	40	margin: 10px;
	41	}
	42
	43	a
	44	{
	45	color: black;
	46	/* les liens déjà cliqués restent noirs */
	47	}
	48
	49	a:hover /* liens survolés par la souris */
	50	{
	51	color: #004F00;
	52	}
	53
	54	.lien:hover
	55	{
	56	font-weight: bold;
	57	}
	58
	59	/* En-tête. */
	60	header
	61	{
	62	background-color: white;
	63	display: flex;
	64	flex-direction: column;
	65	align-items: center;
	66	margin-bottom: 20px;
	67	}
	68
	69	header div, header p
	70	{
	71	margin-top: 40px;
	72	}
	73
	74	#logohaut
	75	{
	76	width: 200px;
	77	}
	78
	79	#logotitre
	80	{
	81	height: 90px;
	82	}
	83
	84	/* Menu de navigation. */
	85	nav
	86	{
	87	position: fixed;
	88	z-index: 2; /* pour être dessus des prestations */
	89	text-align: center;
	90	}
	91
	92	nav a
	93	{
	94	display: inline-block; /* menu horizontal */
	95	border: 2px #008100 solid;
	96	border-radius: 12px;
	97	padding: 3px;
	98	margin: 2px;
	99	background-color: #F4F02D;
	100	font-size: 110%;
	101	text-decoration: none;
	102	}
	103
	104	/* "vous êtes ici" */
	105	#actuelle
	106	{
	107	color: #004F00;
	108	border: 3px #004F00 solid;
	109	}
	110
	111	/* Corps de page. */
	112	section
	113	{
	114	display: flex;
	115	align-items: center;
	116	}
	117
	118	aside
	119	{
	120	width: 174px; /* équivalent à la photo qui fait 170 de large plus la bordure de 2 pixels */
	121	display: flex;
	122	flex-direction: column;
	123	align-items: center;
	124	}
	125
	126	aside p
	127	{
	128	margin: 0;
	129	}
	130
	131	article
	132	{
	133	margin-left: 20px;
	134	}
	135
	136	#description
	137	{
	138	margin: 0;
	139	font-size: 110%;
	140	}
	141
	142	.photo
	143	{
	144	border: 2px #008100 solid;
	145	border-radius: 10px;
	146	}
	147
	148	/* nuage de liens */
	149	section
	150	{
	151	display: flex;
	152	}
	153
	154	#prestations div
	155	{
	156	width: 100%;
	157	display: flex;
	158	flex-wrap: wrap;
	159	justify-content: space-around;
	160	margin: 20px 30px;
	161	padding: 10px;
	162	border: 2px #008100 solid;
	163	border-radius: 12px;
	164	background-color: #F4F02D;
	165	}
	166
	167	h3
	168	{
	169	margin: 10px;
	170	border: 2px #008100 solid;
	171	border-radius: 12px;
	172	padding: 3px;
	173	text-align: center;
	174	font-size: 100%;
	175	background-color: white;
	176	}
	177
	178	h3 a
	179	{
	180	text-decoration: none;
	181	}
	182
	183	table
	184	{
	185	margin: 10px;
	186	max-width: 470px;
	187	/* fusionner les bordures */
	188	border-collapse: collapse;
	189	}
	190
	191	caption span
	192	{
	193	font-size: 110%;
	194	text-decoration: underline;
	195	}
	196
	197	caption i
	198	{
	199	font-size: 90%;
	200	}
	201
	202	td
	203	{
	204
	205	border: 1px black solid;
	206	}
	207
	208	pre
	209	{
	210	font-family: sans-serif;
	211	font-size: 90%;
	212	white-space: pre-wrap;
	213	margin: 0 20px;
	214	padding: 10px;
	215	border: 2px #004F00 dotted;
	216	border-radius: 10px;
	217	}
	218
	219	a img
	220	{
	221	border: none;
	222	/* retire la bordure bleue sur certains navigateurs */
	223	}
	224
	225	.parties
	226	{
	227	margin: 10px 0 15px 0;
	228	}
	229
	230	/* lien fixe en bas */
	231	footer
	232	{
	233	display: flex;
	234	flex-direction: column;
	235	align-items: center;
	236	}
	237
	238	footer h1
	239	{
	240	position: fixed;
	241	bottom: 0;
	242	margin: 2px; /* de 5 par défaut */
	243	text-align: center;
	244	}
	245	footer a
	246	{
	247	text-decoration: none;
	248	}
	249
	250	/* remplacement du logo titre qui est trop large */
	251	@media screen and (min-width: 500px)
	252	{
	253	#logohaut
	254	{
	255	display: none;
	256	}
	257	}
	258
	259	@media screen and (max-width: 500px)
	260	{
	261	#logotitre
	262	{
	263	display: none;
	264	}
	265	}
	266
	267	/* design responsive */
	268	@media screen and (max-width: 750px)
	269	{
	270	section
	271	{
	272	display: flex;
	273	flex-direction: column;
	274	}
	275
	276	aside
	277	{
	278	margin: auto;
	279	}
	280
	281	p
	282	{
	283	margin: 3px;
	284	}
	285
	286	#prestations div /* à cause du menu sur deux lignes */
	287	{
	288	margin-top: 74px;
	289	}
	290	}
	291
	292	@media screen and (max-width: 710px)
	293	{
	294	header div, header p
	295	{
	296	margin-top: 76px;
	297	}
	298
	299	nav a
	300	{
	301	font-size: 100%;
	302	}
	303
	304	h1
	305	{
	306	font-size: 110%;
	307	}
	308	}