contact.html

<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title location="title">Contact Me</title>
	<meta name="author" content="name">
	<meta name="description" content="Contact page">
	<meta name="keywords" content="contact">
	<link href="tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">

    </head>
    <body class="bg-gray-200 font-sans leading-normal tracking-normal place-content-center ">
	<!--Header-->
	<div class="w-full m-0 p-0 bg-cover bg-bottom place-content-center " style="background-image:url('cover.jpg'); height: 100vh; max-height:2160px;">
	    <div class="container max-w-4xl mx-auto pt-16  gap-16 md:pt-32 text-center break-normal content-evenly">
		<!--Title-->
		<p configurable="title" class="text-white font-extrabold text-3xl md:text-5xl">
		Contact Me
		</p>
		<p configurable="welcome" class="text-xl md:text-2xl text-gray-500">I'll be happy to hear from you!</p>
		<nav class="mt-16 w-full mx-auto items-center flex">
		    <div class="container mx-auto flex items-center">
			<div class="flex w-1/2 pl-4 text-sm mx-auto">
			    <ul class="list-reset mx-auto  md:flex-none" location="nav_list">
				<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="index.html">HOME</a>
				<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="projects.html">PROJECTS</a>
				<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="jobs.html">JOBS</a>
				<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="contact.html">CONTACT</a></ul>
			</div>



		    </div>
		</nav>

		<div class=" mt-16 grid grid-cols-2 gap-20  my-auto place-items-center mx-auto flex container content-evenly flex flex-wrap">
		    <div class="container max-w-4xl flex mx-auto text-center break-normal justify-center" padding="120px">
			<a href="mailto:michael.bleuez2@gmail.com"><img src="assets/gmail.svg" width="120px" hspace="8"></a>
		    </div>

		    <div class="container max-w-4xl flex  my-auto mx-auto justify-center  text-center break-normal" padding="120px">
			<a href="https://www.facebook.com/profile.php?id=100018309552750"><img src="assets/facebook.png" width="120px" hspace="8"></a>
		    </div>

		</div>


	    </div>
	</div>






	<div class="container px-4 md:px-0 max-w-6xl mx-auto">
	    <script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
	    <script src="https://unpkg.com/tippy.js@4"></script>
	    <script>
		//Init tooltips
		tippy('.avatar')
	    </script>
    </body>
</html>