js-gallery-slider-refactored/index.html at master · code-mike-code/js-gallery-slider-refactored · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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>JavaScript: ECMAScript 2015+ - devmentor.pl</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">źródło: 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">źródło: 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">źródło: 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">źródło: 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">źródło: 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">źródło: 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">źródło: 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>