Galeria Harley-Davidson

Od jakiegoś czasu na naszym blogu możecie znaleźć kilka artykułów pokazujących, jak powstają nasze projekty. Dzisiaj pokażę, jak stworzyłam galerię w stylu znanej marki Harley-Davidson.

Co ważne tworząc ją korzystałam z pewnym elmentów dostępnych w paczce MDB Free, którą możecie pobrać tutaj.

Gotowy projekt znajdziecie pod tym linkiem.

Krok 1: Wypakowujemy naszą paczkę po czym za pomocą dowolnego edytora kodu otwieramy w niej "index.html" oraz plik "style.css" znajdujący się w podfolderze "style".

Krok 2: Skupiamy się na sekcji body. Usuwamy cały content pomiędzy komentarzami "Start your project here" i "End your project here".

Krok 3: Teraz możemy przygotować podłoże do naszej galerii. Zacznijmy od stworzenia diva z klasą .container, a w jego rogu umieśćmy logo Harley-Davidson.

Krok 4: Następnie dodajmy css, aby container i logo były odpowiednio umieszczone.

Krok 5: Teraz zajmiemy się naszym menu i przyciskiem. Dodajmy div z klasą .menu oraz button, który po naciśnięciu przeniesie nas do oficjalnej strony Harley-Davidson.

Krok 6: Ponownie wróćmy do naszego pliku style.css. Nasze menu pozycjonujemy poprzez dodanie margin-top dodanie pozycji absolute i transform: translate(-50%).

Nasz przycisk natomiast będzie posiadał background-color: transparent oraz pomarańczowy kolor obramowania o grubości 1px. Do tego zmienimy rozmiar czcionki na 14px poprzez font-size i oddalimy ją od obramowań poprzez zmianę lewego i prawego paddingu na 20px.

Dodatkowo, aby nasza czcionka wyglądała, jak ta na zdjęciu musimy ją zaimportować na samej górze pliku style.css

Krok 7: Następnie w naszym pliku index.html w tagu figure umieszczamy trzy zdjęcia (ważne, aby były bez tła). Nad każdym z nich stwórzmy div z klasą name oraz odpowiednio name-1, name-2 i name-3, w którym umieszczamy nazwę danego modelu.

Krok 8: Aby nasza galeria działała poprawnie musimy również opisać to co znajduje się w tagu figure.

Krok 9: W następnym kroku zmienimy pozycję naszych elementów poprzez stworzenie klas.

Krok 10: Następną rzeczą, którą napiszemy w naszym pliku index.html są dwa divy z klasą gradient i odpowiednio gradient-left oraz gradient-right. Z dokumentacji MDB kopiujemy ikony i po czym umieszczamy je w odpowiednich divach. Dodajemy do nich klasę fa-3x, aby zwiększyć ich rozmiar.

Krok 11: Na koniec opiszmy sobie powyższe klasy.

Krok 12: Ostatnią rzeczą, którą musimy dodać, aby nasza karuzela działała poprawnie, jest kod JavaScript umieszczony na samym dole strony.

I voilà! Nasza galeria jest gotowa.