Je cherchais une idée de site.
J'ai d'abord pensé à faire un site sur les animaux puis je me suis dis qu'il me fallait un site que je pourrais continuer
même après avoir terminé le projet.
J'aime beaucoup voyagé et ça depuis que je suis petite. J'aime découvrir de nouvelle culture
et des nouvelles langues. De plus, j'aime beaucoup prendre des photos. J'ai donc décidé de créer un site dans lequel je pourrais faire découvrir mes
photos. J'ai donc commencé par créer des rubriques avec des pays.
Pour coller avec le sujet, j'ai rajouté un lien wikipédia pour les pays
que je n'avais pas encore visité et j'ai mis des photos dans ceux que j'avais deja visité. J'ai décidé de créer une rubrique dans la page d'accueil avec
des sujets historiques des pays. Vous pouvez retrouver mes photos avec des informations sur les monuments dans les pays suivants :
- Italie
- France
- Sri Lanka
- Japon
Le menu : (l10 à 67 (css))
J'ai repris le programme de l'exercice menu de mathadomicile, puis j'ai changé le style, ajouté des bordures avec :hover
changé la couleur et arrondi les angles. La difficulté a résidé dans le placement des cases. Je voulais que peu importe la taille de l'écran
l'espacement entre chaque case soit le même. J'ai d'abord utilisé la mesure "vw" mais elle n'était pas parfaite. J'ai calculer le pourcentage
necessaire en fonction de la longueur des mots et fini par l'utiliser. Le logo avion permet de revenir à la page principale
Barre de recherche : (l68 à 70)
En javascript, j'ai mis en place une barre de recherche avec un bouton (function recherche()). Puisque je ne pouvais pas créer un algorithme capable d'analyser toutes les
recherches désirés, l'utilisation de la barre se résume à chercher les noms des continents.
slider : (l71 à 105)
Sur la page d'acceuil j'ai mis un slider qui affiche 5 images à la suite en les faisant coulisser. Pour cela je n'ai utlisé que du css avec
La règle @keyframes qui permet de définir exactement les étapes d'une séquence d'animation. Grâce à la propriété "overflow: hidden;", j'ai caché
les images qui suivées celle de l'image principale. Puis je les fais glisser vers la gauche de façon à ce qu'elles se retrouvent dans la zone
affichée. A la fin du slider, toutes les images sont remises à leur place initiale, le slider ne parait donc pas infini car il s'arrête pour
recommencer. Je n'ai pas réussi à régler ce problème.
Les cases des pays : (l06 à 192)
Je me suis inspirée d'un exercice de mathadomicile en essayant de le reproduire à ma facon. J'ai crée une div noir avec une transparence en bas de chaques cases
qui remonte dans l'espace visible quand la souris passe sur la case. J'ai agrandi l'image grâce à la fonction "scale()"
Titre des pages (L193 à 204)
Billet (L205 à 274) :
Le css du billets permet surtout de placer les noms au bon endroit. En ce qui concerne le javascript, le programme enregistre les réponses
de l'utilisateur et les traite dans la fonction "myFunction2". En fonction du lieu sélectionné, l'ordinateur retourne aléatoirement un pays parmis 4 du continent
choisis par l'utilisateur. L'heure dépend du continent aussi. En fonction de son budget, il retourne une classe différente (economy, business ou première). Si
le budget est inférieur ou égal à 50, l'ordinateur affiche une alerte avec le message suivant : "Vous n'avez pas assez d'argent pour partir. Prenez donc un vélo "
Il retourne aussi son nom et choisi aléatoirement plusieurs nombres et lettre pour les sièges. Puis avec la fonction "myFunction()" l'ordinateur
affiche le billet.
Publication : (l275 à 310)
Sur la page d'acceuil j'ai rajouté des articles historiques avec des évènements importants dans l'histoire des pays. Je me suis inspirée du code
des cases des pays en changeant le style et les effets notamment en changeant l'opacité. Puis rajouter du texte en dessous.
Rubrique information (311 à 327)
Mes photos (329 à 349)