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

Compare commits

base: Dev_Web:a1700911298a7547793428d5a1419d464cd1e521
Branches Tags
Dev_Web:main
..
compare: Dev_Web:0d4fc0cdafbd9b0e0010f2ee9efd5fd94809ff25
Branches Tags
Dev_Web:main

2 Commits
a170091129 ... 0d4fc0cdaf

Author SHA1 Message Date
Jeremy
0d4fc0cdaf Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01 2025-12-03 23:20:24 -05:00
Jeremy
7387f0b83a Finalisation aPropos.html + CSS 2025-12-03 23:20:19 -05:00
2 changed files with 47 additions and 75 deletions
Expand all files Collapse all files

36
www/aPropos.html
View File

@@ -34,22 +34,20 @@
<main class="aPropos">
<h1>Contactez l’équipe!</h1>
<div class="sidebyside">
<div class="colonne">
<section class="commentaire">
<!-- utilisation de get pour avoir les variables dans l'url : page statique -->
<!-- si utilisation de serveur dynamique, changer pour POST -->
<form method="get" action="reponse.html">
<h2>Commentaire</h2>
<fieldset id="firstField">
<fieldset id="infoContact">
<legend>Informations de contact</legend>
<div>
<label for="nomComplet">Votre nom complet :</label>
<input id="nomComplet" name="nomComplet" type="text" required minlength="3"
placeholder="Prénom Nom">
<input id="nomComplet" name="nomComplet" type="text" required minlength="3" placeholder="Prénom Nom">
</div>
<div>
<label for="email">Votre adresse courriel : </label>
<input id="email" name="email" type="email" required
placeholder="(ex. vous@fournisseur.com)" size="30">
<input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)" size="30">
</div>
</fieldset>
<fieldset>
@@ -141,21 +139,18 @@
<button type="reset">Réinitialiser</button>
</div>
</form>
</div>
<div class="colonne" id="contactInfo">
</section>
<section class="coordonnees">
<div id="contactInfo">
<div>
<h2>Coordonnées</h2>
<div class="grille">
<p id="titreAdresse">Adresse :</p>
<a id="contenuAdresse" 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>
<a id="contenuAdresse" 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 id="titreInfo">Pour plus d’information sur les créateurs :</p>
<a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de
Sherbrooke</a>
<a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a>
<p id="titreTelephone">Téléphone :</p>
<a id="contenuTelephone" href="tel:+18195646350">+1 (819) 564-6350</a>
@@ -163,16 +158,11 @@
<p id="titreCourriel">Courriel :</p>
<a id="contenuCourriel" target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
</div>
<div class="conteneurMaps">
<iframe id="mapsFrame" title="Maps pour cégep" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="conteneurMaps">
<iframe id="mapsFrame" title="Maps pour cégep"
src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca"
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</section>
</div>
</main>

86
www/css/style.css
View File

@@ -45,30 +45,6 @@
/** FIN DE SECTION modifier par script **/
.sidebyside {
display: flex;
}
.colonne {
flex: 1;
}
/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
.col-container {
display: table;
}
.col {
display: table-cell;
/* Make elements inside the container behave like table cells */
}
.centered {
text-align: center;
margin: auto;
display: block;
}
body {
min-height: 100vh;
/* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -312,6 +288,33 @@ footer a:hover {
display: block;
}
.aPropos .sidebyside {
display: flex;
max-width: 100%;
}
.aPropos .sidebyside section.commentaire,
.aPropos .sidebyside section.coordonnees {
width: 50%;
margin: 16px;
}
/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
.aPropos .col-container {
display: table;
}
.aPropos .col {
display: table-cell;
/* Make elements inside the container behave like table cells */
}
.aPropos .centered {
text-align: center;
margin: auto;
display: block;
}
.aPropos h1 {
text-align: center;
}
@@ -331,35 +334,19 @@ footer a:hover {
padding: 1em;
}
.aPropos .sidebyside>div {
margin: 5px 20px;
}
.aPropos .sidebyside>h2 {
width: 100%;
}
.aPropos textarea {
resize: none;
width: 100%;
}
.aPropos form {
width: 70ch;
width: 100%;
height: 100%;
margin: auto;
background-color: #726F9A;
border-radius: 20px;
padding: 1em;
padding: 16px;
color: #E6ECF3;
overflow: none;
}
.aPropos .sidebyside>div {
height: 100%;
}
.aPropos p {
@@ -371,6 +358,7 @@ footer a:hover {
padding: 1em;
border-radius: 20px;
color: #E6ECF3;
width: 100%;
}
.aPropos .grille {
@@ -423,7 +411,6 @@ footer a:hover {
text-align: right;
}
.aPropos .grille #contenuAdresse,
.aPropos .grille #contenuInfo,
.aPropos .grille #contenuTelephone,
@@ -440,7 +427,6 @@ footer a:hover {
color: #c19f8a;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.conteneurMaps::-webkit-scrollbar {
display: none;
@@ -460,7 +446,7 @@ footer a:hover {
.aPropos #mapsFrame {
border-radius: 20px;
width: 100%;
height: 500px;
height: 400px;
}
.aPropos .sidebyside label {
@@ -482,20 +468,16 @@ footer a:hover {
margin-bottom: 1em;
}
.aPropos #firstField label {
.aPropos #infoContact label {
width: 11em;
display: inline-block
}
.aPropos #firstField input {
.aPropos #infoContact input {
width: 25em;
display: inline-block
}
/*.aPropos div {*/
/* display: block; */
/*}*/
/****************************/
/* PAGE: L'équipe */
/* AUTEUR: Jérémy Hébert */