Skip to content

m-ar-c/trombinoscope

This branch is 2 commits ahead of, 242 commits behind g404-dev-web/trombinoscope:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4bea5c9 · May 22, 2019
Aug 6, 2018
May 22, 2019
Sep 20, 2018
Aug 5, 2018
Sep 19, 2018
May 21, 2019
May 20, 2019
Aug 5, 2018
Sep 19, 2018
Sep 19, 2018
Aug 6, 2018
Aug 5, 2018
Jul 6, 2018

Repository files navigation

Trombinoscope

Démarrage du projet

git clone https://github.com/simplon-roanne/trombinoscope
cd trombinoscope
# Stopper les autres conteneurs actifs
docker stop $(docker ps -a -q)
docker rm $(docker ps -a -q
# Lancer Docker
docker-compose up --remove-orphans

Le serveur web est accessible sur http://localhost:8080

Mission

Simplon Roanne vous demande d'ajouter votre avatar au trombinoscope de la promotion sur la page d'accueil existante :

  • Prenez vous en selfie ! (avec votre téléphone ou votre webcam)
  • Redimensionnez la photo en 300px par 300px
  • Modifiez la structure HTML existante dans la page index.html pour y afficher votre photo
  • la balise html englobante de votre élément avatar devra avoir un id comportant votre nom
  • Ouvrez le fichier trombi.scss et éditez le. Attention les fichiers CSS sont les fichiers générés par le compileur SASS (il ne faut pas les éditer) !
  • Ajouter la ligne d'appel du fichier trombi.css dans le fichier index.html
  • Appliquez seulement un filtre CSS3 de votre choix, choisissez le bien
  • Créez un effet de transition sur ce filtre au survol de la souris sur votre avatar
  • Modifiez vos informations personelles (votre nom et votre statut)
  • Supprimer le reste des avatars inutiles, ils sont là pour vous donner un exemple de la grid
  • Pull request !!

Extra

  • Appliquez une transformation 3D sur votre avatar, visible seulement au :hover avec une transition non linéaire

Recherches associées

  • débuter avec Sass Scss
  • How to apply Css3 filters

Mission 2

  • Créer une page personnelle avec le contenu de votre choix ( un CV ? ) accessible par un lien sur l'avatar
  • Vous pourrez vous servir du fichier styleguide.html qui recense tous les élements d'UI disponibles pour ce thème. Attention, il ne doit pas être édité !

Extra

  • Appliquez les normes responsives à votre page personnelle en utilisant les class de la grid existante
  • Votre page personnelle devrait contenir une photo et des liens vers github+linkedin

Recherches associées

  • getting started with Bootstrap 4
  • Css grid system
  • How to Use Sass Variables/Extends/Mixins/Functions

Admin base de données

L'interface grapique pour éditer la base données MySQL est sur http://localhost:8085 host : trombinoscope-mysql user : root pwd : p4ssword

Executer le script d'insertion en BDD des positions

docker exec -i -t trombinoscope-mysql sh -c "mysql -u root -p < migration.sql"

Mot de passe : p4ssword

Recherches associées

  • mysql insert
  • adminer add rows

Accomplissements

  • Votre avatar et vos informations s'affichent bien sur la page d'accueil
  • Votre code est mergé avec succès dans le projet
  • Vous avez créé une page personnelle mergée dans le projet
  • Vous avez participé au codage d'une fonctionnalité de bouton like

About

Création du trombinoscope de la promotion _01

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 52.4%
  • HTML 46.1%
  • PHP 1.1%
  • Other 0.4%