<!DOCTYPE html>
<html>
<head>
	<title>Contacter Nous</title>
	<?php include('../sections/head.php'); ?>

</head>
<body>

	<?php include('../sections/header.php'); ?>

	<style type="text/css">

		.main-heading{
			font-family: "Teko", sans-serif;
			font-weight: 600;
			font-size: 30pt;
		}

		.hero{ 
			height:50vh;
			overflow: hidden; 
			position: relative;
		}
		.hero img{
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: -20vh;
		}
		
		.hero p{
			font-family: "Teko", sans-serif;
			font-weight: 600;
			font-size: 40pt;
			position: absolute;
			bottom: 0px;
			color: white;
			line-height: 0px;
			white-space: nowrap;
			text-transform: uppercase;
		}

		.contact-form {
			background-color: #eee;
			border-radius: 20px 0px 0px 20px;
			padding: 60px;
		}

		.contact-img{
			border-radius: 0px 20px 20px 0px;
			overflow: hidden;
			background-color: darkred;
			background-image: url('assets/img/contact-section.jpeg');
			background-size: cover;
			background-position: center;
		}

		.contact-form .form-control{
			border:2px solid #aaa;
			padding: 16px 10px;
			margin-bottom: 20px;
		}

		.lbl-accept{
			color:#343434;
			opacity: 0.5;
		}

		.text-dark{
			color:#343434;
		}

		.lbl-accept a,.text-dark a{
			color:#343434;
			text-decoration: underline;
		}
	</style>

	<div class="containter-fluid">
		<div class="hero">
			<img src="assets/img/contact-hero.jpeg" width="100%">
			<p>Lorem ipsum dolor sit amet consectetur urus habitant aliquet dolor lacus commodo tempus pulvinar</p>
		</div>
	</div>
	<div class="container">
		<div class="row mb-5">
			<div class="col-lg-6 offset-3 text-center my-5">
				<h1 class="main-heading">Contactez-nous</h1>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero.</p>
			</div>

			<div class="col-lg-8 contact-form">
				<div class="bg-white p-4">
					<div class="row">
						<div class="col-lg-6">
							<input type="text" name="" class="form-control" placeholder="Nom et prénom">
						</div>
						<div class="col-lg-6">
							<input type="text" name="" class="form-control" placeholder="Téléphone (*)">
						</div>
						<div class="col-lg-6">
							<input type="text" name="" class="form-control" placeholder="Email (*)">
						</div>
						<div class="col-lg-6">
							<input type="text" name="" class="form-control" placeholder="Adresse (*)">
						</div>
						<div class="col-lg-6">
							<input type="text" name="" class="form-control" placeholder="Code postal">
						</div>
						<div class="col-lg-6">
							<input type="text" name="" class="form-control" placeholder="Ville">
						</div>
						<div class="col-lg-12">
							<textarea class="form-control" name="" placeholder="Message" rows="6"></textarea>
						</div>
						<div class="col-lg-12">
							<input type="checkbox" name="" id="accept">
							<label class="lbl-accept" for="accept">En soumettant ce formulaire, j'accepte <a href="#">la politique de confidentialité</a></label>

							<button class="btn btn-main btn-primary my-3">Envoyer</button>

							<p class="text-dark">Ce site est protégé par reCAPTCHA. <a href="#">les règles de confidentialité</a> et <a href="#">les conditions d'utilisation</a> de Google s'appliquent.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4 p-0 contact-img">
				<!-- <img src="assets/img/contact-section.jpeg" width="100%"> -->
			</div>

		</div>
	</div>


	<?php include('../sections/footer.php'); ?>

</body>
</html>