Image-gallery-in-JS/index.html at main · Typee8/Image-gallery-in-JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TASK-JS-EVENTS</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>

    <section class="gallery">
        <figure class="gallery__item gallery__item--pos1">
            <img src="./assets/img/1.jpg" alt="1" class="gallery__image">
            <figcaption class="gallery__caption">source: unsplash.com</figcaption>
        </figure>
        <figure class="gallery__item gallery__item--pos2">
            <img src="./assets/img/2.jpg" alt="1" class="gallery__image">
            <figcaption class="gallery__caption">source: unsplash.com</figcaption>
        </figure>
        <figure class="gallery__item gallery__item--pos3">
            <img src="./assets/img/3.jpg" alt="1" class="gallery__image">
            <figcaption class="gallery__caption">source: unsplash.com</figcaption>
        </figure>
        <figure class="gallery__item gallery__item--pos4">
            <img src="./assets/img/4.jpg" alt="1" class="gallery__image">
            <figcaption class="gallery__caption">source: unsplash.com</figcaption>
        </figure>
        <figure class="gallery__item gallery__item--pos5">
            <img src="./assets/img/5.jpg" alt="1" class="gallery__image">
            <figcaption class="gallery__caption">source: unsplash.com</figcaption>
        </figure>
        <figure class="gallery__item gallery__item--pos6">
            <img src="./assets/img/6.jpg" alt="1" class="gallery__image">
            <figcaption class="gallery__caption">source: unsplash.com</figcaption>
        </figure>
    </section>

    <section class="js-slider">
        <header class="js-slider__zoom">
            <span class="js-slider__nav js-slider__nav--prev">&lt;</span>
            <span class="js-slider__nav js-slider__nav--next">&gt;</span>
            <figure class="js-slider__wrapper">
                <img class="js-slider__image" src="./assets/img/6.jpg" alt="1">
                <figcaption class="js-slider__caption">source: unsplash.com</figcaption>
            </figure>
        </header>
        <footer class="js-slider__thumbs">
            <figure class="js-slider__thumbs-item js-slider__thumbs-item--prototype">
                <img class="js-slider__thumbs-image">
            </figure>
        </footer>
    </section>

    <script src="./assets/js/script.js"></script>
</body>
</html>