Zadania

Zad. 1. Posługując się szablonem coming-soon-szablon.zip, należy przygotować stronę informującą o nadchodzącym produkcie (ang. coming soon page), której wygląd będzie zgodny ze zrzutami ekranu poniżej:

Wskazówki:

  • plik index.html w dołączonym szablonie nie wymaga żadnych modyfikacji, aby uzyskać pożądany efekt - cała praca powinna odbywać się w pliku main.less
  • należy wykorzystać atrybuty flexbox, aby ulokować element div.its-coming w środkowej części okna przeglądarki,
  • przydatne mogą być jednostki miary związane z obszarem wyświetlania strony:
    • vw (viewport width), np. width: 100vw - element zajmuje całą szerokość (100%) viewportu
    • vh (viewport height), np. height: 100vh
  • tło strony:
    • tło strony stanowi gradient pomiędzy kolorami #d61628 (lewy-dolny róg) i #9d00ff (prawy-górny róg)
    • aby określić tło strony należy wykorzystać grafikę svg - można zastosować funkcję svg-gradient z biblioteki less (dokumentacja: http://lesscss.org/functions/#misc-functions-svg-gradient) lub przygotować osobny plik svg (np. w programie Inkscape)
  • zaokrąglone narożniki dla elementu div.its-coming można uzyskać przy pomocy atrybutu border-radius (np. border-radius: 12px)
  • półprzezroczyste tło dla elementu div.its-coming można uzyskać podając kolor tła w formacie rgba (red-green-blue-alpha, gdzie alpha oznacza przezroczystość; dokumentacja: http://www.w3schools.com/CSS/css3_colors.asp)

Zad. 2. Należy wykorzystać projekt opracowany w ramach poprzednich zajęć laboratoryjnych (Laboratorium: Responsywne interfejsy) i wprowadzić w nim następujące zmiany:

  • (2.1) należy zmodyfikować lub usunąć atrybuty background-color pochodzące z oryginalnego szablonu, aby poprawić wygląd witryny
  • (2.2) w menu strony należy wykorzystać ikony z biblioteki Font Awesome (dostępne ikony: http://fontawesome.io/icons/)

Zad. 3. W projekcie z zad. 2 powyżej należy zastosować preprocesor stylów Less:

  • (3.1) nazwę pliku main.css należy zmienić na main.less, a następnie dołączyć go do plików html analogicznie jak w szablonie rozwiązania do zad. 1 powyżej
  • (3.2) należy zastosować następujące mechanizmy preprocesora less:
    • zmienne
    • domieszki
    • domieszki z parametrami
    • wbudowane funkcje, np. lighten
    • zagnieżdżanie reguł

 

Last modified: Friday, 15.12.2017, 15:36