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.