<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Site d'information culturelle et sportive</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="icomoon/style.css">
<meta name="description" content="Site avec newsletter sur le sport et la culture" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="sports, actus, culture, newsletter" />
</head>
<body lang="fr">
<header>
<nav>
<input type="checkbox" id="burger" hidden>
<label for="burger" class="burger-btn">
<span class="burger-btn-bar"></span>
<span class="burger-btn-bar"></span>
<span class="burger-btn-bar"></span>
</label>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À Propos</a></li>
<li><a href="#" class="active">Nos newsletters</a></li>
</ul>
</nav>
</header>
<main>
<h1>Site d'information culturelles et sportives.</h1>
<a href="#" onclick="toggleModal()" class="openModal">S'inscrire à notre newsletter</a>
<p>Bonjour et bienvenu sur notre site, <br>
Depuis cette page nous vous invitons à choisir les abonnements aux newsletter qui vous conviennent. <br>
© S&C diffusion 2021 <br>
<a href="https://www.instagram.com/s-et-c">Rejoignez notre communauté</a> <br>
<a href="mailto:contact@s-et-c.fr">Nous écrire</a>
</main>
<div class="modal-background" id="modal">
<div class="modal">
<form method="get">
<h4>S'abonner à <span class="icon-cross cursor-pointer" onclick="toggleModal()"></span></h4>
<hr/>
<div>
<input type="checkbox" name="test" id="sport" class="hidden-radio"/>
<label for="sport">sports et activités sportives</label>
<input type="radio" id="s_hebdo" name="sport_freq" value="hebdo" class="hides"/>
<label for="s_hebdo" class="hides">Hebdomadaire</label>
<input type="radio" id="s_daily" name="sport_freq" value="daily" class="hides" />
<label for="s_daily" class="hides">Journalier</label>
</div>
<br/>
<div>
<input type="checkbox" name="test" id="culture" class="hidden-radio"/>
<label for="culture">arts et cultures</label>
<input type="radio" id="c_hebdo" name="culture_freq" value="hebdo" class="hides"/>
<label for="c_hebdo" class="hides">Hebdomadaire</label>
<input type="radio" id="c_daily" name="culture_freq" value="daily" class="hides" />
<label for="c_daily" class="hides">Journalier</label>
</div>
<hr/>
<input type="email" name="mail" placeholder="E-mail" class="modal-mail" required/>
<button type="submit" class="modal-btn">Enregistrer mon abonnement</button>
</form>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>