Compte rendu
L'idée du site

Nous avons passé du temps pour trouver une idée pour le projet et nous nous sommes diriger vers quelque chose que nous avons commun : Les jeux vidéos. Et nous avons déjà joué à quelque jeux ensemble et le jeu qui nous a le plus marqué et sur lequel il y avait le plus de chose à dire est : The Forest.

Par la suite nous avons eu les idées des différents pages pour parler de l'histoire du jeu, des fins, des ennemis et de la map.

Mettre une image à gauche et du texte à droite et inversement...

Un des problèmes que nous avons eu a été de faire le code pour pouvoir faire comme présentement : du texte à gauche et une image à droite ou inversement. Après avoir arpenter W3School nous somme arriver au code actuel qui fonctionne avec deux classes : gauche et droite. La classe gauche met ce qu'elle contient à gauche de l'écran et prend la moitié de ce dernier et la classe droite fais la même chose mais sur la droite.

.gauche { float: left; width: 50%; padding-top: 50px; padding-bottom: 100px; } .droite { float: right; width: 50%; padding-top: 50px; padding-bottom: 100px; }
Mettre des images libre de droits

Un des problèmes majeurs à été d'avoir des images libres de droit du jeu. Pour régler ce problème nous avons dû relancer le jeu et faire toute une panoplie de screenshots pour absolument tout et n'importe quoi surtout pour les ennemis qui ont tendance à ne pas rester statique...

Le menu

Pour faire le menu nous avons utilisé le tutoriel de W3Schools sur les menus et le seul problème que nous avons eu à été de mettre le logo du jeu en haut à gauche parce que le texte avait tendance à ajouter une sorte de marge en dessous nous avons donc dû trouver une unité de taille pour l'image pour qu'elle prenne la taille du texte

ul { list-style-type: none; margin-top: 0%; padding: 0; overflow: hidden; background-color: #1e1e1e; position: sticky; font-family: "HeadlinerNo.45"; } li { float: left; position: sticky; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li img { height: 6vmin; vertical-align: bottom; } .menu a:hover { background-color: #020202; } .menu { font-size: 3vmin; position: fixed; width: 100%; letter-spacing: 1px; }
L'adaptation aux différents écrans

Un autre problème a été de trouver la bonne unité pour la taille du texte afin qu'il s'adapte à la taille de l'écran. Pour trouver la bonne unité nous avons utilisé un tutoriel de W3School. Nous sommes passés par le hm, le vm et bien d'autres. L'unité actuelle est donc le vmin.

La police d'écriture

Nous voulions utiliser la police d'écriture du jeu, nous nous sommes donc renseigné et nous avons remarqué que la police d'écriture était disponible pour des projets personnels, scolaires... la seule condition était de mentionner quelque part sur le site la provenance de la police : ce qui a été fait en bas de page.

Les Sources

W3School

Le fandom du jeu

kcfont pour la police

Et bien évidemment le jeu