1 files changed, 326 insertions, 0 deletions
diff --git a/ordipolo.css b/ordipolo.css
new file mode 100644
index 0000000..28bd55a
--- /dev/null
+++ b/ordipolo.css
@@ -0,0 +1,326 @@
+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;
+        
+        /* cacher petit logo */
+        display: none;
+}
+#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;
+}
+textarea
+{
+        width: 500px;
+        height: 200px;
+}
+/* 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;
+}
+/* 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%;
+        }
+        
+        textarea
+        {
+                width: 400px;
+                height: 150px;
+        }
+}
+@media screen and (max-width: 500px)
+{
+        #logohaut
+        {
+                /* afficher petit logo */
+                display: inline;
+        }
+        #logotitre
+        {
+                /* cacher grand logo */
+                display: none;
+        }
+        
+        textarea
+        {
+                width: 270px;
+                height: 100px;
+        }
+}

diff --git a/ordipolo.css b/ordipolo.css new file mode 100644 index 0000000..28bd55a --- /dev/null +++ b/ordipolo.css
@@ -0,0 +1,326 @@
	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	/* cacher petit logo */
	79	display: none;
	80	}
	81
	82	#logotitre
	83	{
	84	height: 90px;
	85	}
	86
	87	/* Menu de navigation. */
	88	nav
	89	{
	90	position: fixed;
	91	z-index: 2; /* pour être dessus des prestations */
	92	text-align: center;
	93	}
	94
	95	nav a
	96	{
	97	display: inline-block; /* menu horizontal */
	98	border: 2px #008100 solid;
	99	border-radius: 12px;
	100	padding: 3px;
	101	margin: 2px;
	102	background-color: #F4F02D;
	103	font-size: 110%;
	104	text-decoration: none;
	105	}
	106
	107	/* "vous êtes ici" */
	108	#actuelle
	109	{
	110	color: #004F00;
	111	border: 3px #004F00 solid;
	112	}
	113
	114	/* Corps de page. */
	115	section
	116	{
	117	display: flex;
	118	align-items: center;
	119	}
	120
	121	aside
	122	{
	123	width: 174px; /* équivalent à la photo qui fait 170 de large plus la bordure de 2 pixels */
	124	display: flex;
	125	flex-direction: column;
	126	align-items: center;
	127	}
	128
	129	aside p
	130	{
	131	margin: 0;
	132	}
	133
	134	article
	135	{
	136	margin-left: 20px;
	137	}
	138
	139	#description
	140	{
	141	margin: 0;
	142	font-size: 110%;
	143	}
	144
	145	.photo
	146	{
	147	border: 2px #008100 solid;
	148	border-radius: 10px;
	149	}
	150
	151	/* nuage de liens */
	152	section
	153	{
	154	display: flex;
	155	}
	156
	157	#prestations div
	158	{
	159	width: 100%;
	160	display: flex;
	161	flex-wrap: wrap;
	162	justify-content: space-around;
	163	margin: 20px 30px;
	164	padding: 10px;
	165	border: 2px #008100 solid;
	166	border-radius: 12px;
	167	background-color: #F4F02D;
	168	}
	169
	170	h3
	171	{
	172	margin: 10px;
	173	border: 2px #008100 solid;
	174	border-radius: 12px;
	175	padding: 3px;
	176	text-align: center;
	177	font-size: 100%;
	178	background-color: white;
	179	}
	180
	181	h3 a
	182	{
	183	text-decoration: none;
	184	}
	185
	186	table
	187	{
	188	margin: 10px;
	189	max-width: 470px;
	190	/* fusionner les bordures */
	191	border-collapse: collapse;
	192	}
	193
	194	caption span
	195	{
	196	font-size: 110%;
	197	text-decoration: underline;
	198	}
	199
	200	caption i
	201	{
	202	font-size: 90%;
	203	}
	204
	205	td
	206	{
	207
	208	border: 1px black solid;
	209	}
	210
	211	pre
	212	{
	213	font-family: sans-serif;
	214	font-size: 90%;
	215	white-space: pre-wrap;
	216	margin: 0 20px;
	217	padding: 10px;
	218	border: 2px #004F00 dotted;
	219	border-radius: 10px;
	220	}
	221
	222	a img
	223	{
	224	border: none;
	225	/* retire la bordure bleue sur certains navigateurs */
	226	}
	227
	228	.parties
	229	{
	230	margin: 10px 0 15px 0;
	231	}
	232
	233	textarea
	234	{
	235	width: 500px;
	236	height: 200px;
	237	}
	238
	239	/* lien fixe en bas */
	240	footer
	241	{
	242	display: flex;
	243	flex-direction: column;
	244	align-items: center;
	245	}
	246
	247	footer h1
	248	{
	249	position: fixed;
	250	bottom: 0;
	251	margin: 2px; /* de 5 par défaut */
	252	text-align: center;
	253	}
	254	footer a
	255	{
	256	text-decoration: none;
	257	}
	258
	259	/* design responsive */
	260	@media screen and (max-width: 750px)
	261	{
	262	section
	263	{
	264	display: flex;
	265	flex-direction: column;
	266	}
	267
	268	aside
	269	{
	270	margin: auto;
	271	}
	272
	273	p
	274	{
	275	margin: 3px;
	276	}
	277
	278	#prestations div /* à cause du menu sur deux lignes */
	279	{
	280	margin-top: 74px;
	281	}
	282	}
	283
	284	@media screen and (max-width: 710px)
	285	{
	286	header div, header p
	287	{
	288	margin-top: 76px;
	289	}
	290
	291	nav a
	292	{
	293	font-size: 100%;
	294	}
	295
	296	h1
	297	{
	298	font-size: 110%;
	299	}
	300
	301	textarea
	302	{
	303	width: 400px;
	304	height: 150px;
	305	}
	306	}
	307
	308	@media screen and (max-width: 500px)
	309	{
	310	#logohaut
	311	{
	312	/* afficher petit logo */
	313	display: inline;
	314	}
	315	#logotitre
	316	{
	317	/* cacher grand logo */
	318	display: none;
	319	}
	320
	321	textarea
	322	{
	323	width: 270px;
	324	height: 100px;
	325	}
	326	}