Skip to content

Commit

Permalink
fix layout discrepancies with the mock up OpenClassrooms-Student-Cent…
Browse files Browse the repository at this point in the history 
…er#5
  • Loading branch information
@Ingirorhaun
Ingirorhaun committed May 7, 2024
1 parent 2ff4178 commit 418d754
Show file tree
Hide file tree
Showing 2 changed files with 217 additions and 110 deletions.
120 changes: 61 additions & 59 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,110 +5,115 @@
<title>Reservation</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="modal.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=DM+Sans"
rel="stylesheet"
/>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="header-logo">
<img alt="logo" src="Logo.png" width="auto" height="auto" />
</div>
<div class="main-navbar">

<a href="#" class="active"><span>Accueil</span></a>
<a href="#"><span>Détails de l'évènement</span></a>
<a href="#"><span>À propos</span></a>
<a href="#"><span>Contact</span></a>
<a href="#"><span>Évènements passés</span></a>
<a href="javascript:void(0);" class="icon" onclick="editNav()">
<i class="fa fa-bars"></i>
</a>
</div>
<img alt="logo" src="Logo.png" width="auto" height="auto" />
</div>
<div class="main-navbar">
<!-- <a href="#" class="active"><span>Accueil</span></a> -->
<a href="#" class="active"><span>Détails de l'évènement</span></a>
<a href="#"><span>À propos</span></a>
<a href="#"><span>Contact</span></a>
<a href="#"><span>Évènements passés</span></a>
<a href="javascript:void(0);" class="icon" onclick="editNav()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</div>
<main>
<div class="hero-section">
<div class="hero-content">
<h1 class="hero-headline">
Marathon national<br>
Marathon national<br />
de jeux vidéos
</h1>
<p class="hero-text">
Vous aimez jouer ? Notre prochain évènement gaming est ouvert
aux réservations... Places limitées !
Vous aimez jouer ? Notre prochain évènement gaming est ouvert aux
réservations... Places limitées !
</p>
<button class="btn-signup modal-btn">
je m'inscris
</button>
<button class="btn-signup modal-btn">je m'inscris</button>
</div>
<div class="hero-img">
<img src="./bg_img.jpg" alt="img" />
</div>
<button class="btn-signup modal-btn">
je m'inscris
</button>
<button class="btn-signup modal-btn">je m'inscris</button>
</div>

<div class="bground">
<div class="content">
<span class="close"></span>
<div class="modal-body">
<form
name="reserve"
action="index.html"
method="get"
>
<div
class="formData">
<label for="first">Prénom</label><br>
<form name="reserve" action="index.html" method="get">
<div class="formData">
<label for="first">Prénom</label><br />
<input
class="text-control"
type="text"
id="first"
name="first"
/><br>
/><br />
</div>
<div
class="formData">
<label for="last">Nom</label><br>
<div class="formData">
<label for="last">Nom</label><br />
<input
class="text-control"
type="text"
id="last"
name="last"
/><br>
/><br />
</div>
<div
class="formData">
<label for="email">E-mail</label><br>
<div class="formData">
<label for="email">E-mail</label><br />
<input
class="text-control"
type="text"
id="email"
name="email"
/><br>
/><br />
</div>
<div
class="formData">
<label for="birthdate">Date de naissance</label><br>
<div class="formData">
<label for="birthdate">Date de naissance</label><br />
<input
class="text-control"
type="date"
id="birthdate"
name="birthdate"
/><br>
/><br />
</div>
<div
class="formData">
<label for="quantity">À combien de tournois GameOn avez-vous déjà participé ?</label><br>
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
<div class="formData">
<label for="quantity"
>À combien de tournois GameOn avez-vous déjà participé
?</label
><br />
<input
type="number"
class="text-control"
id="quantity"
name="quantity"
min="0"
max="99"
/>
</div>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div
class="formData">
<p class="text-label">
A quel tournoi souhaitez-vous participer cette année ?
</p>
<div class="formData">
<input
class="checkbox-input"
type="radio"
Expand Down Expand Up @@ -177,8 +182,7 @@ <h1 class="hero-headline">
>
</div>

<div
class="formData">
<div class="formData">
<input
class="checkbox-input"
type="checkbox"
Expand All @@ -189,13 +193,13 @@ <h1 class="hero-headline">
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions d'utilisation.
</label>
<br>
<br />
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je Je souhaite être prévenu des prochains évènements.
</label>
<br>
<br />
</div>
<input
class="btn-submit"
Expand All @@ -217,9 +221,7 @@ <h2>Merci pour votre inscription</h2>
</div>
</main>
<footer>
<p class="copyrights">
Copyright 2014 - 2022, GameOn Inc.
</p>
<p class="copyrights">Copyright 2014 - 2022, GameOn Inc.</p>
</footer>
<script src="modal.js"></script>
</body>
Expand Down
Loading

0 comments on commit 418d754

Please sign in to comment.