Dev_Web/web01
Public Access
5
0
Fork 0
Code Issues Projects Wiki Activity

Page aPropos et style

Browse Source
This commit is contained in:
Stan
2025-11-30 17:59:33 -05:00
parent f9c1919bf5
commit 549b0f6eab
2 changed files with 91 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
www/aPropos.html
View File

@@ -25,7 +25,6 @@
</nav> </nav>
<main class="aPropos"> <main class="aPropos">
<p id="message">Coming soon...</p>
<div class="sidebyside"> <div class="sidebyside">
<div> <div>
<!-- utilisation de get pour avoir les variables dans l'url : page statique --> <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
@@ -85,29 +84,33 @@
<div> <div>
<label>Quel personnage voudriez-vous essayer : </label> <label>Quel personnage voudriez-vous essayer : </label>
<div class="sidebyside"> <div class="sidebyside">
<!-- test clickable region --> <!-- test clickable region no need for in label when surrounding input ?? -->
<label class="clickLabel" for="persoOne"> <label class="clickLabel" for="persoOne">
<input type="checkbox" id="persoOne" name="persoOne" value="1"> <input type="checkbox" id="persoOne" name="persoOne" value="1">
Ember</label> Ember</label>
<label for="persoTwo">
<input type="checkbox" id="persoTwo" name="persoTwo" value="1">
Equinox</label>
<input type="checkbox" id="persoTwo" name="persoTwo" value="1"> <label for="persoThree">
<label for="persoTwo">Equinox</label> <input type="checkbox" id="persoThree" name="persoThree" value="1">
Frost</label>
<label for="persoFour">
<input type="checkbox" id="persoFour" name="persoFour" value="1">
Koumei</label>
<label for="persoFive">
<input type="checkbox" id="persoFive" name="persoFive" value="1">
Rhino</label>
<input type="checkbox" id="persoThree" name="persoThree" value="1"> <label for="persoSix">
<label for="persoThree">Frost</label> <input type="checkbox" id="persoSix" name="persoSix" value="1">
Sevagoth</label>
<label for="persoSeven">
<input type="checkbox" id="persoFour" name="persoFour" value="1"> <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
<label for="persoFour">Koumei</label> Voruna</label>
<input type="checkbox" id="persoFive" name="persoFive" value="1">
<label for="persoFive">Rhino</label>
<input type="checkbox" id="persoSix" name="persoSix" value="1">
<label for="persoSix">Sevagoth</label>
<input type="checkbox" id="persoSeven" name="persoSeven" value="1">
<label for="persoSeven">Voruna</label>
</div> </div>
</div> </div>
<div> <div>
@@ -130,33 +133,36 @@
</div> </div>
<div> <div>
<div> <div id="contactInfo">
<h1>Contactez l'équipe!</h1> <h1>Contactez l'équipe!</h1>
<div> <div>
<div> <div>
<h2>Coordonnées</h2> <h2>Coordonnées</h2>
<div> <div>
<p>Adresse : 475 Rue du Cégep, Sherbrooke, QC J1E 4K1</p> <p>Adresse : <a target="_blank"
href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D">
475 Rue du Cégep, Sherbrooke, QC J1E 4K1</a></p>
<p>Pour plus d'information sur les créateurs : <a target="_blank" <p>Pour plus d'information sur les créateurs : <a target="_blank"
href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p> href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p>
<p>Téléphone : +18195646350</p> <p>Téléphone : <a href="tel:+18195646350">+18195646350</a></p>
</div> </div>
</div> </div>
<div> <div>
<div> <div>
Contact <p>Courriel :
</div> <a target="_blank" href="mailto:empty@zkd.ca">Equipe ALT-F4</a>
<div class="conteneurMaps"> </p>
<iframe title="Maps pour cegep" <div class="conteneurMaps">
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca" <iframe title="Maps pour cegep"
width="600" height="450" allowfullscreen="" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
referrerpolicy="no-referrer-when-downgrade"></iframe> width="600" height="450" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <!--
<!--
Contenu minimal de la page de contact de votre site Web : Contenu minimal de la page de contact de votre site Web :
• <main> – Le contenu principal de la page • <main> – Le contenu principal de la page
@@ -184,6 +190,7 @@ pour avoir complété le formulaire (ex : reponse.html). Cette page devra être
demandées. demandées.
--> -->
</div>
</div> </div>
</div> </div>
</main> </main>

57
www/css/style.css
View File

@@ -271,6 +271,8 @@ footer {
/* min-height: calc(100vh - 60px); */ /* min-height: calc(100vh - 60px); */
/* display: block; */ /* display: block; */
align-content: center;
text-align: center;
} }
.aPropos .conteneurMaps { .aPropos .conteneurMaps {
@@ -279,9 +281,10 @@ footer {
overflow: scroll; overflow: scroll;
} }
.aPropos .conteneurMaps­>iframe { .aPropos .conteneurMaps­ iframe {
border: 0; border: 0;
margin: 10px;
display: block;
} }
.aPropos .sidebyside>div { .aPropos .sidebyside>div {
@@ -298,14 +301,62 @@ footer {
width: 100%; width: 100%;
} }
.aPropos>main {
margin: auto;
display: flex;
justify-content: center;
}
.aPropos form { .aPropos form {
width: 70ch; width: 70ch;
margin: auto; margin: auto;
background-color: #273A56; background-color: #726F9A;
border-radius: 15px; border-radius: 15px;
padding: 10px; padding: 10px;
color: #E6ECF3; color: #E6ECF3;
overflow: scroll; overflow: scroll;
/*!SECTION COULEUR
#B47871
#641A10
#13172C
#726F9A
#273A56
#C19F8A
Couleur texte : #FFEFE5
*/
}
.aPropos p {
width: 100%;
}
.aPropos #contactInfo {
background-color: #273A56;
padding: 10px;
border-radius: 15px;
color: #E6ECF3;
}
.aPropos a:link {
color: #E6ECF3;
font-weight:800;
text-decoration: underline;
text-align: right;
float: right;
}
.aPropos a:visited {
color: #c19f8a;
}
.aPropos a:hover {
color: #726F9A;
}
.aPropos .sidebyside label {
margin: 10px;
padding: 1px;
} }
.aPropos fieldset { .aPropos fieldset {