You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
3.8 KiB
84 lines
3.8 KiB
<!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> |