Public Access
5
0
This commit is contained in:
LD
2025-11-28 14:07:40 -05:00
6 changed files with 317 additions and 47 deletions

2
.gitignore vendored
View File

@@ -506,3 +506,5 @@ $RECYCLE.BIN/
# Windows shortcuts # Windows shortcuts
*.lnk *.lnk
www/medias/mediasCredits/warframeDuviriRide.mp4
www/medias/mediasHistoireDE/warframeRailjackRide.mp4

View File

@@ -32,7 +32,7 @@
- [ ] Jeremy - [ ] Jeremy
<header> Un entête incluant : <header> Un entête incluant :
▪ Un logo conçu par vous (http://www.logogenie.fr) ▪ Un logo conçu par vous
▪ Une bannière conçue par vous (vous nêtes pas obligés de garder la même sur toutes vos pages) ▪ Une bannière conçue par vous (vous nêtes pas obligés de garder la même sur toutes vos pages)
▪ Le titre principal de la page Web (vous nêtes pas obligés de garder le même sur toutes vos pages) ▪ Le titre principal de la page Web (vous nêtes pas obligés de garder le même sur toutes vos pages)
▪ Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que cest) ▪ Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que cest)

201
www/credits.html Normal file
View 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>Lobjectif</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>

View File

@@ -464,43 +464,6 @@ footer {
height: 100vh; 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 { .histoire header.introduction div.introduction a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
@@ -896,3 +859,108 @@ blockquote a {
position: relative; position: relative;
z-index: 15; 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%);
}

View File

@@ -37,7 +37,7 @@
<h2>Nos membres</h2> <h2>Nos membres</h2>
</div> </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="avatar"><img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa Dezothez"></div>
<div class="nom"> <div class="nom">
<h3>Léa Dezothez</h3> <h3>Léa Dezothez</h3>
@@ -57,7 +57,7 @@
</div> </div>
</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="avatar"><img src="images/imagesTeam/AvatarJeremy.png" alt="Avatar de Jérémy Hébert"></div>
<div class="nom"> <div class="nom">
<h3>Jérémy Hébert</h3> <h3>Jérémy Hébert</h3>
@@ -77,9 +77,8 @@
</div> </div>
</div> </div>
<div class="grilleGauche"> <div class="grilleGauche" id="goToAndres">
<div class="avatar"><img src="images/imagesTeam/AvatarAndres.png" <div class="avatar"><img src="images/imagesTeam/AvatarAndres.png" alt="Avatar de Andres David Herrera Escorcia"></div>
alt="Avatar de Andres David Herrera Escorcia"></div>
<div class="nom"> <div class="nom">
<h3>Andres David Herrera Escorcia</h3> <h3>Andres David Herrera Escorcia</h3>
</div> </div>
@@ -98,7 +97,7 @@
</div> </div>
</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="avatar"><img src="images/imagesTeam/AvatarStanislas.png" alt="Avatar de Stanislas Royal"></div>
<div class="nom"> <div class="nom">
<h3>Stanislas Royal</h3> <h3>Stanislas Royal</h3>