Refonte des crédits + quasi finalisation des crédits + retrait des images inutilisés dans les pages d'équipe et de l'histoire DE
This commit is contained in:
364
www/credits.html
364
www/credits.html
@@ -25,171 +25,225 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="credits">
|
<main class="credits">
|
||||||
<div class="titre">
|
<header class="introduction">
|
||||||
<h1>Crédits</h1>
|
<div class="introduction">
|
||||||
<p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
|
<h1>Crédits</h1>
|
||||||
</div>
|
<p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
|
||||||
|
<a href="#premiereBox">Plus d'infos</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div class="grille">
|
<section>
|
||||||
<div class="soustitre">
|
<article id="premiereBox">
|
||||||
<h3>Warframe</h3>
|
<div class="box">
|
||||||
</div>
|
<h2>Warframe</h2>
|
||||||
<div class="description">
|
<p class="contenu">
|
||||||
<p>
|
Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
|
||||||
Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
|
</p>
|
||||||
</p>
|
<div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
|
</article>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grille">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Léa Dezothez</h3>
|
<h2>Léa Dezothez</h2>
|
||||||
</div>
|
<ul>
|
||||||
<div class="description">
|
<li class="contenu">
|
||||||
<ul>
|
Pour connaître le rôle de Léa, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
|
||||||
<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>
|
||||||
<li>Léa a également fournis la vaste majorité des images.</li>
|
<li class="contenu">
|
||||||
</ul>
|
Léa a également fournis la vaste majorité des images.
|
||||||
</div>
|
</li>
|
||||||
<div class="bouton"><a href="team.html#goToLea">Voir la personne</a></div>
|
</ul>
|
||||||
</div>
|
<div class="bouton"><a href="team.html#lea">Voir la personne</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<div class="grille">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Jérémy Hébert</h3>
|
<h2>Jérémy Hébert</h2>
|
||||||
</div>
|
<ul>
|
||||||
<div class="description">
|
<li class="contenu">
|
||||||
<ul>
|
Pour connaître le rôle de Jérémy, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
<li class="contenu">
|
||||||
</div>
|
Jérémy a également fournis les logos ainsi que l'image se trouvant dans la page de réponse au formulaire.
|
||||||
<div class="bouton"><a href="team.html#goToJeremy">Voir la personne</a></div>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
|
<div class="bouton"><a href="team.html#jeremy">Voir la personne</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<div class="grille">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Andres</h3>
|
<h2>Andres David Herrera Escorcia</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
|
||||||
<ul>
|
</p>
|
||||||
<li>Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
<div class="bouton"><a href="team.html#andres">Voir la personne</a></div>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
<div class="bouton"><a href="team.html#goToAndres">Voir la personne</a></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grille">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Stanislas Royal</h3>
|
<h2>Stanislas Royal</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.
|
||||||
<ul>
|
</p>
|
||||||
<li>Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
<div class="bouton"><a href="team.html#stanislas">Voir la personne</a></div>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
<div class="bouton"><a href="team.html#goToStanislas">Voir la personne</a></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grille">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Création de Warframe</h3>
|
<h2>Discotools.xyz</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Discotools.xyz a permi la création du bouclier présent dans le logo ainsi que le favicon.
|
||||||
<p>
|
</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.
|
<div class="bouton"><a href="https://discotools.xyz/fr/icons-editor">Voir la source</a></div>
|
||||||
</p>
|
</div>
|
||||||
<br>
|
</article>
|
||||||
<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">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>L’objectif</h3>
|
<h2>Figma</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Figma a été utiliser dans la conception du logo, du favicon et de l'image de remerciement pour avoir remplis le formulaire.
|
||||||
<p>
|
</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.
|
<div class="bouton"><a href="https://www.figma.com/fr-fr/">Voir la source</a></div>
|
||||||
</p>
|
</div>
|
||||||
<br>
|
</article>
|
||||||
<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">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Les secrets</h3>
|
<h2>Lyco Canario</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Lyco Canario est derrière la poule utilisée dans l'image de remerciement pour avoir remplis le formulaire.
|
||||||
<p>
|
</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.
|
<div class="bouton"><a href="https://dribbble.com/lycocanario">Voir la source</a></div>
|
||||||
</p>
|
</div>
|
||||||
<br>
|
</article>
|
||||||
<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">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>L’évolution</h3>
|
<h2>Visual Studio Code</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Visual Studio Code a été l'outil de développement utilisé pour l'ensemble du projet.
|
||||||
<p>
|
</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.
|
<div class="bouton"><a href="https://code.visualstudio.com/">Voir la source</a></div>
|
||||||
</p>
|
</div>
|
||||||
<br>
|
</article>
|
||||||
<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">
|
<article>
|
||||||
<div class="soustitre">
|
<div class="box">
|
||||||
<h3>Coming soon...</h3>
|
<h2>/noclip</h2>
|
||||||
</div>
|
<p class="contenu">
|
||||||
<div class="description">
|
Le documentaire sur Warframe conçu par /noclip a servit à rédiger la page sur l'histoire de Digital Extremes.
|
||||||
<p>
|
</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.
|
<div class="bouton"><a href="https://www.youtube.com/watch?v=UOE6528pwFc&list=PL-THgg8QnvU7Weo1mCM9H2AXljC7UrDm8&index=2">Voir la source</a></div>
|
||||||
</p>
|
</div>
|
||||||
<br>
|
</article>
|
||||||
<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.
|
<article>
|
||||||
</p>
|
<div class="box">
|
||||||
<br>
|
<h2>Jacob Deschamps & Josianne Fortin</h2>
|
||||||
<p>
|
<p class="contenu">
|
||||||
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.
|
La théorie fournie par le corps professoral a dépanné l'équipe à de multiples reprises.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<div class="bouton"><a href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la source</a></div>
|
||||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Gitea</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Les systèmes de Gitea ont permi un travail connecté durant l'ensemble du projet.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://about.gitea.com/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>ChatGPT</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
ChatGPT a permi la rédaction de certains texte du site.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://chatgpt.com/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Gemini</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Gemini a permi la rédaction de certains texte du site.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://gemini.google.com/app">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Moqups</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Moqups a permis de créé la maquette autour de laquelle c'est articulé le style artistique du site.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://moqups.com/fr/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Google Maps</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Google Maps a permi l'intégration de la map sur le site.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://www.google.com/maps">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>World Wide Web Consortium</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Les validateurs du World Wide Web Consortium ont permi la révison du code de l'ensemble du site.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://validator.w3.org/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Brave Search</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Le moteur de recherche Brave Search a dépanné a de multiples reprises.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://search.brave.com/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Google</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Le moteur de recherche Google a dépanné a de multiples reprises.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://www.google.com/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="box">
|
||||||
|
<h2>DuckDuckGo</h2>
|
||||||
|
<p class="contenu">
|
||||||
|
Le moteur de recherche DuckDuckGo a dépanné a de multiples reprises.
|
||||||
|
</p>
|
||||||
|
<div class="bouton"><a href="https://duckduckgo.com/">Voir la source</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|||||||
@@ -1070,14 +1070,14 @@ Couleur texte : #FFEFE5
|
|||||||
/* AUTEUR: Jeremy */
|
/* AUTEUR: Jeremy */
|
||||||
/****************************/
|
/****************************/
|
||||||
.credits {
|
.credits {
|
||||||
background: #13172c url("../images/imagesTeam/Intro.png") center;
|
background: #C19F8A center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: top;
|
background-position: top;
|
||||||
color: #ffefe5;
|
color: #ffefe5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits header.introduction {
|
.credits header.introduction {
|
||||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
background: #13172c url("../images/ImagesCredits/temporaire.webp") center/cover fixed;
|
||||||
background-position: top;
|
background-position: top;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -1096,6 +1096,36 @@ Couleur texte : #FFEFE5
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.credits header.introduction div.introduction a {
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffefe5;
|
||||||
|
padding: 10.8px 16px;
|
||||||
|
margin: 160px 4px;
|
||||||
|
background-color: #13172c;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits header.introduction div.introduction a:hover {
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #b47871;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits main {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.credits div.bouton a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -1115,58 +1145,28 @@ Couleur texte : #FFEFE5
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits div.titre {
|
.credits section article {
|
||||||
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;
|
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;
|
padding: 16px;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits div.grilleDroite:hover,
|
.credits section article div.box {
|
||||||
.credits div.grilleGauche:hover {
|
background-color: rgba(19, 23, 44, 0.8);
|
||||||
background-color: rgba(39, 58, 86, 90%);
|
padding: 16px;
|
||||||
|
margin: 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits section article div.box:hover {
|
||||||
|
background-color: rgba(39, 58, 86, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits section article h2,
|
||||||
|
.credits section article h3,
|
||||||
|
.credits section article .contenu {
|
||||||
|
padding: 8px 0;
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/****************************/
|
/****************************/
|
||||||
|
|||||||
BIN
www/images/ImagesCredits/Credits.png
Normal file
BIN
www/images/ImagesCredits/Credits.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Reference in New Issue
Block a user