Övning 20: Kortlayout

Öppna mappen po20 i Visual Studio Code (eller den editor du föredrar). Målet med uppgiften är att få webbsidan att se ut och bete sig som bilden nedan. Denna gång ska du skriva egen HTML-kod. Det som är givet är själva textinnehållet utan uppmärkning med taggar.

  1. Studera Bootstrap-delarna för card, tooltip och modal.
  2. Utgå från exempelkod som ges i Bootstraps dokumentation och på de andra resurslänkarna. Använd dessa för att skapa nedanstående utseende. Bilder och text innehåll finns i mappen.
  3. Font Awesome är inlänkat. Använd fontawesome.com/icons för att söka upp namnet på de klasser som ska användas för att få de ikoner som bilden nedan visar.

Praktisk övning 20

  1. De röda knapparna (länkarna) skall vara inaktiverade och inte kunna gå att trycka på.
  2. När man hovrar över de röda knapparna skall en tooltip dyka upp som meddelar att "Ansökan stängde 2019-01-10".
  3. När man klickar på den gröna knappen skall en modal för Teknikprogrammet dyka upp i mitten av skärmen. Krysset och Nej-knappen ska stänga rutan. Skicka-knappen ska gå att trycka på men inget ska hända när man klikcar på den.

Praktisk övning 20