Laboratorium: Responsywne interfejsy - cz. 2

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:

• laptop/desktop: coming-soon_md-lg.png
• tablet: coming-soon_sm.png
• smartphone: coming-soon_xs.png

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ł