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.

<!-- Start your project here-->

<div class="container mt-4">

    <img src="https://seeklogo.net/wp-content/uploads/2014/11/harley-davidson-logo.png" class="logo">

</div>

<!-- End your project here-->

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

.container {
    height: 550px;
    width: 900px;
    box-shadow: 2px 2px 10px black;
    margin: 40px auto 0 auto;
    padding: 0;
    overflow: hidden;
    background-image: url('https://www.cgarchitect.com/content/portfolioitems/2013/05/77974/001254_large.jpg');
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 5px;
}

.logo {
    position: absolute;
    z-index: 4;
    height: 70px;
    left: 40px;
    top: 20px;
}

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.

<!-- Start your project here-->
        
<div class="container mt-4">
    <img src="https://seeklogo.net/wp-content/uploads/2014/11/harley-davidson-logo.png" class="logo">

    <div class="menu">Website Gallery Customization</div>

    <a href="https://www.harley-davidson.com/us/en/museum.html" target="_blank"><button>Museum</button></a>
</div>
        
<!-- End your project here-->

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.

.menu {
    position: absolute;
    z-index: 5;
    color: rgb(150, 150, 150);
    word-spacing: 30px;
    left: 50%;
    transform: translate(-50%);
    margin-top: 40px;
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
    font-size: 14px;
}
        
button {
    position: absolute;
    z-index: 4;
    right: 40px;
    height: 30px;
    top: 40px;
    color: rgb(255, 102, 0);
    background-color: transparent;
    border: 1px solid rgb(255, 102, 0);
    font-family: 'Oswald', sans-serif;
    padding: 0 20px 0 20px;
    font-size: 14px;
}

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

@import url('https://fonts.googleapis.com/css?family=Oswald|Teko&display=swap');

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.

<!-- Start your project here-->
                
<div class="container mt-4">
    <img src="https://seeklogo.net/wp-content/uploads/2014/11/harley-davidson-logo.png" class="logo">
        
    <div class="menu">Website Gallery Customization</div>
        
    <a href="https://www.harley-davidson.com/us/en/museum.html" target="_blank"><button>Museum</button></a>

    <figure>
      <div class="name name-1">FORTY EIGHT</div>
      <img
        src="https://www.freepnglogos.com/uploads/harley-davidson-png/harley-davidson-sportster-motorcycle-bike-png-image-26.png">

      <div class="name name-2">ROAD KING</div>
      <img
        src="https://cdn.dealerspike.com/imglib/products/harley-showroom/models/road-king-special/vivid-black-fs8.png">


      <div class="name name-3">SPORTSTER</div>
      <img
        src="https://www.freepnglogos.com/uploads/harley-davidson-png/harley-davidson-brown-motorcycle-bike-png-image-png-13.png">

    </figure>
</div>
                
<!-- End your project here-->

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

div.container figure img {
    position: relative;
    height: 280px;
    z-index: 2;
    margin: 210px 50px 0 50px;
}

div.container figure {
    display: block;
    position: relative;
    width: 220%;
    margin-left: 165px;
    left: 0;
    transition: 1s ease-in-out;
}

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

.name {
    position: absolute;
    z-index: 1;
    color: white;
    font-size: 150px;
    font-family: 'Teko', sans-serif;
    font-weight: bold;
    letter-spacing: 3px;
}

.name-1 {
    margin-top: 130px;
}

.name-2 {
    margin-top: -360px;
    margin-left: 680px;
}

.name-3 {
    margin-top: -360px;
    margin-left: 1300px;
}

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.

<!-- Start your project here-->
                        
<div class="container mt-4">
    <img src="https://seeklogo.net/wp-content/uploads/2014/11/harley-davidson-logo.png" class="logo">
                
    <div class="menu">Website Gallery Customization</div>
                
    <a href="https://www.harley-davidson.com/us/en/museum.html" target="_blank"><button>Museum</button></a>
        
    <figure>
        <div class="name name-1">FORTY EIGHT</div>

        <img src="https://www.freepnglogos.com/uploads/harley-davidson-png/harley-davidson-sportster-motorcycle-bike-png-image-26.png">
        
        <div class="name name-2">ROAD KING</div>

        <img src="https://cdn.dealerspike.com/imglib/products/harley-showroom/models/road-king-special/vivid-black-fs8.png">

        <div class="name name-3">SPORTSTER</div>

        <img src="https://www.freepnglogos.com/uploads/harley-davidson-png/harley-davidson-brown-motorcycle-bike-png-image-png-13.png">
    </figure>

    <div class="gradient gradient-left">
        <i class="fas fa-angle-left fa-3x"></i>
    </div>

    <div class="gradient gradient-right">
        <i class="fas fa-angle-right fa-3x"></i>
    </div>
</div>
                        
<!-- End your project here-->

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

.gradient {
    display: block;
    position: absolute;
    z-index: 3;
    margin-top: -505px;
    color: rgb(77, 77, 77);
    height: 550px;
    width: 8%;
    padding-top: 255px;
    cursor: pointer;
}

.gradient-left {
    background-image: linear-gradient(to right, rgb(8, 8, 8), transparent 100%);
    padding-left: 50px;
}

.gradient-left:hover {
    background-image: linear-gradient(to right, rgb(36, 36, 36), transparent 100%);
}

.gradient-right {
    float: right;
    right: 0;
    background-image: linear-gradient(to left, rgb(8, 8, 8), transparent 100%);
}

.gradient-right:hover {
    background-image: linear-gradient(to left, rgb(36, 36, 36), transparent 100%);
}

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

$(document).ready(function () {
    var x = 0;

    $('.gradient-left').click(function () {
      x = (x >= 70) ? (x - 70) : 140;
      $('figure').css('left', -x + '%');
    });

    $('.gradient-right').click(function () {
      x = (x <= 130) ? (x + 70) : 0;
      $('figure').css('left', -x + '%');
    });
});

I voilà! Nasza galeria jest gotowa.