Pierwsza strona w html i css

Udało się! Po trzech tygodniach nauki zrobiłam moją pierwszą stronę całkowicie przy użyciu wyłącznie html i css 😀 Jestem z siebie dumna 😀

Czas pracy: 5 dni (po 6-8h), a i tak przydałoby się jej jeszcze kilka poprawek. Mam nadzieję, że kolejne strony pójdą już nieco szybciej, choć i tak jeszcze nie do końca łapię się w tym, jak działają poszczególne właściwości. Założę się jednak, że za kilka stron będę już kumać tego css-a i html-a trochę lepiej 🙂

Stronkę można zobaczyć tu: Moja pierwsza samodzielna strona w html i css

Jest tam:

  • menu w formie listy nienumerowanej, ułożone w poziomie, wraz z wysuwanym pod-menu, zmieniającym odcień po najechaniu myszką. Za cholerę nie mogłam go wyśrodkować, bo ani menu, ani divy ponad nim nie mają stałej szerokości, tylko dopasowują się do szerokości ekranu. Menu jest do wymiany. Póki co, wygląda tak: screen
  • ekran główny, gdzie w pierwszej kolejności wyświetla się tytuł i animacja, a po kilku sekundach pojawia się reszta contentu, włącznie z tłem. Wysokość ekranu dostosowana jest do wysokości okna przeglądarki (w wersji mobilnej już nie, bo treść nachodziłaby na niższego diva. W wersji mobilnej również znika strzałka kierująca do treści poniżej).
  • cztery divy z obrazkami i opisami
  • piąty div, w którym te same dane zaprezentowane są w dwóch różnych formach: w formie tabeli i w formie listy nienumerowanej. W wersji mobilnej lepiej prezentuje się lista, choć tabelę w sumie chyba też można poprawić tak, by każda komórka znajdowała się pod poprzednią. Zdecydowanie muszę to sprawdzić.
  • div szósty z przyciskami zmieniającymi kolor tła po najechaniu myszką
  • stopka, gdzie znajdują się odnośniki do mediów społecznościowych, zmieniające położenie po najechaniu myszką i linki, pod którmi po najechaniu myszką pojawia się podkreślenie.

Tło jest nieruchome i nie scrolluje się wraz z treścią. Stronę starałam się dopasować również do wersji mobilnej, wygląda wtedy nieco inaczej, niż w wersji na desktopy.

Zabieram się za robienie drugiej strony 😀

Joanna

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *