JSFiddle - React, Tailwind, and code Playground

by MPPPQQQ

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Nature&Ecologie</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
	<!-- Haut de Page -->
		
	<header>
		<h1 class="Titre"><img src="img/owl.png" width="50px" height="50px" class="logo"> Nature & Ecologie</h1>
		<h3 class="sous-titre">Ensemble préservons la planète !</h3>
		<br />
	</header>

		<!-- Naviguation -->
		<nav class="menu">
			<ul class="menu">
				<li class="btn" id="Accueil"><a href="#">Accueil</a></li>
				<li class="btn" id="Contact"><a href="Pages/Contact.html">Contact</a></li>
				<li class="btn" id="Abonnement"><a href="Pages/Abonnement.html">Abonnement</a></li>
			</ul>
		</nav>

		<!-- Contenue de la page -->

		<div id="Contenue">

			<div class="first_part">
				<h1>Qui sommes nous ?</h1>
				<p><img src="Pages/tigre.jpg" alt="Tigre Blanc" class="tigre">Nature&Ecologie est un site internet créé en février 2019. Il permet aux utilisateurs d'en apprendre plus sur le monde qui les entoure et de la nature plus précisemment.
				Nature&Ecologie a déjà conquis plus de 100 000 utilisateurs en seulement un mois notamment du fait de sa large variété de possibilité. Vous pouvez par exemple en apprendre sur la végétation, les animaux en voie de disparaition ou plus d'autre chose... </p>
			</div>

			<div class="second_Part">
				<h1>YouTube</h1>
				<p>Nature&Ecologie est sur YouTube depuis 2014. Là-bas, nous partageons nos meilleurs astuces pour que vous profitiez de la vie tout en respectant notre belle planète !</p>

				<p>Vous pouvez dès à présent regarder notre dernière vidéo :</p>
				<iframe title="Clique pour regarder la vidéo" width="280" height="157" src="https://www.youtube.com/embed/HFASv9CQ0s8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


		</div>




		<!-- Pied de Page -->

		<footer>
			<p>
				<p class="nous_contacter"><a href="mailto:(recycleresell.info.com)">Nous...

CSS

nav.menu ul.menu li.btn {
    list-style-type: none;
    display: inline-block;
}

nav.menu ul.menu li.btn a{
    text-decoration: none;
    background-color: #169A27;
    font-family: "gunplayregular", Arial Black, sans-serif;
    color: white;
    padding: 10px;
}

nav.menu ul.menu li.btn:hover a{
    background-color: #218217;
    transition: 0,3s all;""
}

.btn {
    font-family: 'gunplayregular',Arial Black, sans-serif;
}

header {
    background-color: #218217 ;
    display: block;
}

footer {
    background-color:  #218217;
    display: block;
}

.copyright {
    font-family: 'gunplayregular', sans-serif;
    color: #fff;
    margin-left: 10px;
    font-size: x-small;
}

.Titre {
    text-align: center;
    font-family: 'Wild Nature', "Arial Black";
    font-size: 50px;
    color: #fff;
}

img.tigre {
    float: left;
}

.nous_contacter a{
    font-family: 'gunplayregular', "Times New Roman", Arial Black, sans-serif;
    text-decoration: none;
    list-style-type: none;
    color: #fff;
    font-size: large;
    margin-left: 10px;
    font-style: oblique;

}

.sous-titre {
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    font-style: italic;
    font-size: 16px;

}

.logo {
    position: absolute;
    top: 38px;
    left: 900px;
}

.menu {
    background-color: #218217;
    padding: 10px;
}

nav.menu ul {
    padding: 0; margin: 0;
}