Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style3.css">
		<title>Service traiteur - Chez Pierrot</title>
	</head>
<body>
	<div id="blocpage">
	<header>
		<h1>Restaurant chez Pierrot</h1>
		<nav>
				<ul>
					<li><a href="page_accueil.html">Accueil</a></li>
					<li><a href="page_carte.html">La carte</a></li>
					<li><a href="page_traiteur.html" id="page">Service traiteur</a></li>
					<li><a href="pagereservationstyle4.html">Réservations</a></li>
					<li><a href="#">Nous contacter</a></li>
				</ul>
		</nav>
	</header>

	<section>
		<div id="traiteurpage">
		<article>
			<div id="logopierrot">
				<img src="images/logo_pierrot.png"/>
			</div>
				<p id="premierp">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.
				</p>
			<div id="images">
				<img src="images/plat1.jpg"/>
				<img src="images/plat2.jpg"/>
				<img src="images/plat3.jpg"/>
			</div>
				<p id="deuxiemep">Pour toutes commandes auprès du service traiteur veuillez nous appeler au 01 01 01 01 01
				</p>
		</article>
		</div>
	</section>

	<footer>		<!-- Début bloc footer -->
	<div id="blocfooter">
		<div id="meslistes">
			<div id="adresse">
				<h1>Adresse</h1>
				<ul>
					<li>16 quai de Stalingrad</li>
					<li>75001 Paris</li>
					<li>Métro : Châtelet</li>
				</ul>
			</div>

		<div id="horraires">
				<h1>Horraires</h1>
				<ul>
					<li>Lundi au Vendredi : 11h30 - 15h / 18h - 23h</li>
					<li>Samedi : 11h30 - 15h / 18h - 2h</li>
					<li>Dimanche : Fermé</li>
				</ul>
		</div>

			<div id="telephonecontact">
				<h1>Téléphone</h1>
				<p>06 06 06 06 06</p>
			</div>
		</div>  <!-- Fin div " mes listes " -->
	</div>  <!-- Fin bloc footer -->
</footer>
</div>

</body>
</html>


/* Dimenssions et Polices d'écriture */

@font-face
{
	font-family: Arial,	sans-serif;
}


html, body
{
	margin: 0;
	padding: 0;
	width: 100%;

}


#blocpage
{
	font-family: Arial,	sans-serif;
	background: url("images/restaurant.jpg") repeat-x;

	width: 100%;

}

/* Structure du header */

header
{
	background-color: rgba(91, 30, 20, 90%);
	height: 135px;

}

header h1
{
	color: #FDD78C;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 0px;
	font-size: 2em;

}

/* Structure du nav dans le header */

nav
{
	background-color: rgba(58, 14, 6, 95%);
	height: 70px;
	margin-top: -20px;

}

nav ul
{
	list-style: none;
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

nav li
{
padding-top: 12px;
padding-bottom: 12px;
}

nav a
{
	color: white;
	font-size: 1.3em;
	text-decoration: none;
	border: 1px solid white;
	border-radius: 8px;
	margin-left: 25px;
	padding: 5px;
	font-weight: bold;
}

nav a:hover
{
	color: black;
	background-color: white;
	font-weight: bold;
}

#page
{
	background-color: white;
	color: black;
	font-weight: bold;
}

/* Structure page section */
section
{
	width: 100%;
	height: 600px;

	margin-top: 50px;

}

#traiteurpage
{
	width: 100%;
	height: 1000px;
	margin-top: 0px;
	display: flex;
	justify-content: center;

}

#traiteurpage p
{
	color: white;
	font-size: 1em;


}


article
{
	background-color: rgba(0, 0, 0, 95%);
	width: 1000px;
	height: 550px;
	border-radius: 10px;
	margin-top: 0px;
}

#logopierrot
{

	width: 300px;
	display: flex;
	justify-content: center;
	margin: auto;
}

#logopierrot img
{
	margin-top: -90px;
}


#premierp
{
	margin-top: -30px;
	text-align: center;

}

#deuxiemep
{

	width: 1000px;

	margin-top: 15px;
	text-align: center;

}
#images
{
	display: flex;
	justify-content: center;
	width: 1000px;
	margin-top: 25px;


}

#images img
{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 250px;
	border-radius: 15px;
}
/* Pied de page */

footer
{
	width: 100%;
	height: 100px;
	margin-top: 0px;

	border-bottom: 27px solid #5B1E14;
	border-top: 27px solid #5B1E14;
	background-color: yellow;
}

#blocfooter
{
	width: 100%;
	height: 100px;
	margin-top: 0px;
	margin: auto;
}

#meslistes
{
	background-color: #FDD78C;
	height: 100px;
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-top: 0px;
}

#meslistes ul
{
	text-align: center;
	font-style: italic;
	padding-left: 10px;
	padding-right: 10px;
	list-style: none;
	font-size: 1em;
}

/* Adresse du restaurant */

#adresse ul
{
	margin-top: -10px;
}

#adresse
{
	height: 90px;
	margin-top: 5px;
}

#adresse h1
{
	font-size: 1.3em;
	margin-top: 0px;
	text-align: center;
}

/* Horraires du restaurant */

#horraires ul
{
	margin-top: -10px;
}

#horraires
{

	height: 90px;
	width: 520px;
	margin-top: 5px;

}

#horraires h1
{
	font-size: 1.3em;
	margin-top: 0px;
	text-align: center;
}

/* Téléphone du restaurant */

#telephonecontact p
{
	margin-top: -10px;
	text-align: center;
}

#telephonecontact
{

	height: 90px;
	width: 150px;
	margin-top: 20px;

}

#telephonecontact h1
{
	font-size: 1.3em;
	margin-top: 0px;
	text-align: center;
}

/* barre de defilement et
opacity a regler / disposition des listes / positionnement du telephone */