1 files changed, 258 insertions, 0 deletions
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..27e3f80
--- /dev/null
+++ b/main.css
@@ -0,0 +1,258 @@
+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: 5px;
+}
+#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. */
+article
+{
+        margin-left: 20px;
+}
+#description
+{
+        margin: 0;
+        font-size: 110%;
+}
+.photo
+{
+        border: 2px #008100 solid;
+        border-radius: 10px;
+}
+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 10px 10px 10px;
+        padding: 4px;
+        background-color: #f0f0f0;
+}
+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: 710px)
+{
+        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/main.css b/main.css new file mode 100644 index 0000000..27e3f80 --- /dev/null +++ b/main.css
@@ -0,0 +1,258 @@
	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: 5px;
	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	article
	116	{
	117	margin-left: 20px;
	118	}
	119
	120	#description
	121	{
	122	margin: 0;
	123	font-size: 110%;
	124	}
	125
	126	.photo
	127	{
	128	border: 2px #008100 solid;
	129	border-radius: 10px;
	130	}
	131
	132	h3
	133	{
	134	margin: 10px;
	135	border: 2px #008100 solid;
	136	border-radius: 12px;
	137	padding: 3px;
	138	text-align: center;
	139	font-size: 100%;
	140	background-color: white;
	141	}
	142
	143	h3 a
	144	{
	145	text-decoration: none;
	146	}
	147
	148	table
	149	{
	150	margin: 10px;
	151	max-width: 470px;
	152	/* fusionner les bordures */
	153	border-collapse: collapse;
	154	}
	155
	156	caption span
	157	{
	158	font-size: 110%;
	159	text-decoration: underline;
	160	}
	161
	162	caption i
	163	{
	164	font-size: 90%;
	165	}
	166
	167	td
	168	{
	169
	170	border: 1px black solid;
	171	}
	172
	173	pre
	174	{
	175	font-family: sans-serif;
	176	font-size: 90%;
	177	white-space: pre-wrap;
	178	margin: 0 10px 10px 10px;
	179	padding: 4px;
	180	background-color: #f0f0f0;
	181	}
	182
	183	a img
	184	{
	185	border: none;
	186	/* retire la bordure bleue sur certains navigateurs */
	187	}
	188
	189	.parties
	190	{
	191	margin: 10px 0 15px 0;
	192	}
	193
	194	textarea
	195	{
	196	width: 500px;
	197	height: 200px;
	198	}
	199
	200	/* lien fixe en bas */
	201	footer
	202	{
	203	display: flex;
	204	flex-direction: column;
	205	align-items: center;
	206	}
	207
	208	footer h1
	209	{
	210	position: fixed;
	211	bottom: 0;
	212	margin: 2px; /* de 5 par défaut */
	213	text-align: center;
	214	}
	215	footer a
	216	{
	217	text-decoration: none;
	218	}
	219
	220	/* design responsive */
	221	@media screen and (max-width: 710px)
	222	{
	223	nav a
	224	{
	225	font-size: 100%;
	226	}
	227
	228	h1
	229	{
	230	font-size: 110%;
	231	}
	232
	233	textarea
	234	{
	235	width: 400px;
	236	height: 150px;
	237	}
	238	}
	239
	240	@media screen and (max-width: 500px)
	241	{
	242	#logohaut
	243	{
	244	/* afficher petit logo */
	245	display: inline;
	246	}
	247	#logotitre
	248	{
	249	/* cacher grand logo */
	250	display: none;
	251	}
	252
	253	textarea
	254	{
	255	width: 270px;
	256	height: 100px;
	257	}
	258	}