Riding Cities
Premiers pas sur le langage HTML
Projet 2 de la formation "Développeur WordPress" d'OpenClassrooms
Détails du projet
En tant que développeur junior pour l’agence Webonzaï, je suis chargé par Romain mon Maître de Stage et CTO (Directeur des Nouvelles Technologies) de mettre à jour la page internet de Riding Cities, une association qui promeut le Skate dans la région.
Pour se faire il m’envoie par mail une vidéo explicative ainsi que des pièces jointes qui contiennent la page internet du site actuel de Riding Cities, le code existant et la maquette réalisée par le Graphiste de Webonzaï.
Je dois composer avec cela pour rendre le projet pour la réunion prévue au retour du déplacement professionnel de Romain.
Sur leur site, je dois:
- Créer une nouvelle section nommée « Les Membres Fondateurs » avec les noms et les photos des créateurs de l’association.
- Modifier la section contenant le bouton « Télécharger le planning de cours » pour ajouter un titre et deux boutons.
Processus de réalisation du projet
Pour créer la section des membres fondateurs, j’ai commencé par associer les Class CSS : « sectionLinearGradientBackground » qui définie le fond de cette partie par un dégradé et « whiteContentSection » pour la couleur blanche de l’écriture.
La classe « directionRow » quant à elle demande aux éléments de s’aligner sur l’axe horizontal.
Pour ce qui est des boutons de téléchargement des cours, j’ai associé la Class CSS «sectionLightGreyBackground » pour définir le fond de la section, puis une Class «directionRow » comme c’était déjà le cas pour le bouton de base et qui permet de centrer le bouton dans la page.
J'ai associé ensuite chacun des boutons à la Class « button » qui définie toutes les propriétés des boutons : la couleur de fond, les bordures, l ’écriture, sa position dans le bouton et le retrait du soulignage des liens.
Chaque bouton à aussi sa propre Class. Le premier bouton à la Class : « buttonMainColor » et le second «buttonSecondColor » qui définissent les couleurs des liens et des bordures de chaque bouton.
Enfin pour ce qui est du hover des boutons, j'ai simplement à les associer aux bonnes classes déjà présentes elles aussi. C'est à dire: buttonMainColor pour le premier et buttonSecondColor pour le second.
Langages utilisés
