Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01
This commit is contained in:
201
www/credits.html
Normal file
201
www/credits.html
Normal file
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Crédits</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
<li><a href="armures.html">Armures</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main class="credits">
|
||||
<div class="titre">
|
||||
<h1>Crédits</h1>
|
||||
<p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Warframe</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Léa Dezothez</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Léa, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
<li>Léa a également fournis la vaste majorité des images.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToLea">Voir la personne</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Jérémy Hébert</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Jérémy, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToJeremy">Voir la personne</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Andres</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToAndres">Voir la personne</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Stanislas Royal</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToStanislas">Voir la personne</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Création de Warframe</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>L’objectif</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Les secrets</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>L’évolution</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Coming soon...</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Jérémy Hébert. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -464,43 +464,6 @@ footer {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/*
|
||||
.histoire header.introduction div {
|
||||
color: #ffefe5;
|
||||
padding: 0 16px;
|
||||
margin: 0 4px;
|
||||
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: #13172c;
|
||||
}
|
||||
|
||||
.histoire header.introduction div a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-decoration: none;
|
||||
}*/
|
||||
/*.histoire header.introduction div.bouton {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.histoire header.introduction div.bouton a {
|
||||
border: none;
|
||||
background-color: #13172c;
|
||||
text-decoration: none;
|
||||
border-radius: 20px;
|
||||
font-size: 1rem;
|
||||
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #ffefe5;
|
||||
padding: 0 16px;
|
||||
margin: 0 4px;
|
||||
}*/
|
||||
|
||||
.histoire header.introduction div.introduction a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
@@ -895,4 +858,109 @@ blockquote a {
|
||||
.armures .habilites {
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Crédits */
|
||||
/* AUTEUR: Jeremy */
|
||||
/****************************/
|
||||
.credits {
|
||||
background: #13172c url("../images/imagesTeam/Intro.png") center;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #ffefe5;
|
||||
}
|
||||
|
||||
.credits header.introduction {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
background-position: top;
|
||||
height: 100vh;
|
||||
display: block;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.credits header.introduction h1,
|
||||
.credits header.introduction p {
|
||||
line-height: 5;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.credits header.introduction div.introduction {
|
||||
background-color: #13172cd5;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.credits div.bouton a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #ffefe5;
|
||||
padding: 10.8px 16px;
|
||||
margin: 0 4px;
|
||||
background-color: #13172c;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.credits div.bouton a:hover {
|
||||
border-radius: 20px;
|
||||
background-color: #b47871;
|
||||
}
|
||||
|
||||
.credits main {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.credits div.titre {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
padding-top: 66px;
|
||||
}
|
||||
|
||||
.credits div.grille {
|
||||
background-color: rgba(115, 110, 154, 0.9);
|
||||
border-radius: 20px;
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
grid-template-areas:
|
||||
"soustitre soustitre"
|
||||
"description description"
|
||||
"bouton bouton";
|
||||
/*grid-template-columns: 1fr 3fr;*/
|
||||
padding: 16px;
|
||||
margin: 16px 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits div.bouton {
|
||||
grid-area: bouton;
|
||||
grid-template-columns: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.credits div.soustitre {
|
||||
grid-area: soustitre;
|
||||
grid-template-columns: 85%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits div.description {
|
||||
grid-area: description;
|
||||
grid-template-columns: 85%;
|
||||
}
|
||||
|
||||
.credits div.image img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
/* hauteur = largeur */
|
||||
border-radius: 20%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.credits div.grilleDroite:hover,
|
||||
.credits div.grilleGauche:hover {
|
||||
background-color: rgba(39, 58, 86, 90%);
|
||||
}
|
||||
@@ -37,7 +37,7 @@
|
||||
<h2>Nos membres</h2>
|
||||
</div>
|
||||
|
||||
<div class="grilleGauche">
|
||||
<div class="grilleGauche" id="goToLea">
|
||||
<div class="avatar"><img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa Dezothez"></div>
|
||||
<div class="nom">
|
||||
<h3>Léa Dezothez</h3>
|
||||
@@ -57,7 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grilleDroite">
|
||||
<div class="grilleDroite" id="goToJeremy">
|
||||
<div class="avatar"><img src="images/imagesTeam/AvatarJeremy.png" alt="Avatar de Jérémy Hébert"></div>
|
||||
<div class="nom">
|
||||
<h3>Jérémy Hébert</h3>
|
||||
@@ -77,9 +77,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grilleGauche">
|
||||
<div class="avatar"><img src="images/imagesTeam/AvatarAndres.png"
|
||||
alt="Avatar de Andres David Herrera Escorcia"></div>
|
||||
<div class="grilleGauche" id="goToAndres">
|
||||
<div class="avatar"><img src="images/imagesTeam/AvatarAndres.png" alt="Avatar de Andres David Herrera Escorcia"></div>
|
||||
<div class="nom">
|
||||
<h3>Andres David Herrera Escorcia</h3>
|
||||
</div>
|
||||
@@ -98,7 +97,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grilleDroite">
|
||||
<div class="grilleDroite" id="goToStanislas">
|
||||
<div class="avatar"><img src="images/imagesTeam/AvatarStanislas.png" alt="Avatar de Stanislas Royal"></div>
|
||||
<div class="nom">
|
||||
<h3>Stanislas Royal</h3>
|
||||
|
||||
Reference in New Issue
Block a user