LeDevilCat.github.io/Piirrokset.html at main · LeDevilCat/LeDevilCat.github.io · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Harrastetaide</title>
    <link rel="stylesheet" href="CSS/Common-Styles.css">
    <link rel="stylesheet" href="CSS/Media-and-Arts.css">
    <script src="https://kit.fontawesome.com/d7d379a968.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <h1>Harrastetaide</h1>
    </header>
    <nav>
        <a href="index.html">Etusivu</a>
        <!-- <a href="IT-Projektit.html">IT-Projektit</a> -->
        <a href="Mediaprojektit.html">Mediaportfolio</a>
        <a href="Piirrokset.html">Harrastetaide</a>
        <a href="Yhteystiedot.html">Yhteystiedot</a>
    </nav>
    <main class="gallery">
        <!-- <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Tower_of_Bane.jpg">
            <img src="/PHOTOS/ARTWORK/Tower_of_Bane.jpg" alt="Tower of Bane" data-type="image" data-src="/PHOTOS/ARTWORK/Tower_of_Bane.jpg">
            <h2>Tower of Bane</h2>
            <p>Kuvaus projektista.</p>
        </div> -->
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/profile_pic_2025_unsigned.jpg">
            <img src="/PHOTOS/ARTWORK/profile_pic_2025_unsigned.jpg" alt="Profiilikuva 2025" data-type="image" data-src="/PHOTOS/ARTWORK/profile_pic_2025_unsigned.jpg">
            <h2>Profiilikuva 2025</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/profile_pic_2024_unsigned.jpg">
            <img src="/PHOTOS/ARTWORK/profile_pic_2024_unsigned.jpg" alt="Profiilikuva 2024" data-type="image" data-src="/PHOTOS/ARTWORK/profile_pic_2024_unsigned.jpg">
            <h2>Profiilikuva 2024</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Captain_Deream.jpg">
            <img src="/PHOTOS/ARTWORK/Captain_Deream.jpg" alt="Captain Dream" data-type="image" data-src="/PHOTOS/ARTWORK/Captain_Deream.jpg">
            <h2>Captain Dream</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Ajax_(Colored-Lineart).jpg">
            <img src="/PHOTOS/ARTWORK/Ajax_(Colored-Lineart).jpg" alt="Ajax" data-type="image" data-src="/PHOTOS/ARTWORK/Ajax_(Colored-Lineart).jpg">
            <h2>Ajax</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Field_of_Angels_(Colored-Lineart).jpg">
            <img src="/PHOTOS/ARTWORK/Field_of_Angels_(Colored-Lineart).jpg" alt="Enkelien Sotajoukko" data-type="image" data-src="/PHOTOS/ARTWORK/Field_of_Angels_(Colored-Lineart).jpg">
            <h2>Enkelien Sotajoukko</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/profile_pic_2023_unsigned.jpg">
            <img src="/PHOTOS/ARTWORK/profile_pic_2023_unsigned.jpg" alt="Profiilikuva 2023" data-type="image" data-src="/PHOTOS/ARTWORK/profile_pic_2023_unsigned.jpg">
            <h2>Profiilikuva 2023</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Mari_18-year_(Wine_background).jpg">
            <img src="/PHOTOS/ARTWORK/Mari_18-year_(Wine_background).jpg" alt="Mari 18.V" data-type="image" data-src="/PHOTOS/ARTWORK/Mari_18-year_(Wine_background).jpg">
            <h2>Mari 18.V</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/OC-Jeanne.jpg">
            <img src="/PHOTOS/ARTWORK/OC-Jeanne.jpg" alt="Jeanne" data-type="image" data-src="/PHOTOS/ARTWORK/OC-Jeanne.jpg">
            <h2>Jeanne</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/OC-Hotaru_WA.jpg">
            <img src="/PHOTOS/ARTWORK/OC-Hotaru_WA.jpg" alt="Hotaru" data-type="image" data-src="/PHOTOS/ARTWORK/OC-Hotaru_WA.jpg">
            <h2>Hotaru</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Hikaru_(old)_(WA).jpg">
            <img src="/PHOTOS/ARTWORK/Hikaru_(old)_(WA).jpg" alt="Hikaru" data-type="image" data-src="/PHOTOS/ARTWORK/Hikaru_(old)_(WA).jpg">
            <h2>Hikaru</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/OC-Yuri.jpg">
            <img src="/PHOTOS/ARTWORK/OC-Yuri.jpg" alt="Yuri" data-type="image" data-src="/PHOTOS/ARTWORK/OC-Yuri.jpg">
            <h2>Yuri</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/lirutoro.jpg">
            <img src="/PHOTOS/ARTWORK/lirutoro.jpg" alt="Lirutoro" data-type="image" data-src="/PHOTOS/ARTWORK/lirutoro.jpg">
            <h2>Lirutoro</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Kimono_Girl.jpg">
            <img src="/PHOTOS/ARTWORK/Kimono_Girl.jpg" alt="Kimono Girl" data-type="image" data-src="/PHOTOS/ARTWORK/Kimono_Girl.jpg">
            <h2>Kimono Girl</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Touka_Pendragon.jpg">
            <img src="/PHOTOS/ARTWORK/Touka_Pendragon.jpg" alt="Touka Pendragon" data-type="image" data-src="/PHOTOS/ARTWORK/Touka_Pendragon.jpg">
            <h2>Touka Pendragon</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/Sage04_(neko).jpg">
            <img src="/PHOTOS/ARTWORK/Sage04_(neko).jpg" alt="Profiilikuva 2021" data-type="image" data-src="/PHOTOS/ARTWORK/Sage04_(neko).jpg">
            <h2>Profiilikuva 2021</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/gohaizawa.jpg">
            <img src="/PHOTOS/ARTWORK/gohaizawa.jpg" alt="Gohaizawa" data-type="image" data-src="/PHOTOS/ARTWORK/gohaizawa.jpg">
            <h2>Gohaizawa</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>
        <div class="gallery-item" data-images="/PHOTOS/ARTWORK/gokuodas.jpg">
            <img src="/PHOTOS/ARTWORK/gokuodas.jpg" alt="Gokuodas" data-type="image" data-src="/PHOTOS/ARTWORK/gokuodas.jpg">
            <h2>Gokuodas</h2>
            <!-- <p>Kuvaus projektista.</p> -->
        </div>

        <!-- Lisää projekteja -->
    </main>

    <!-- The Modal -->
    <div id="imageModal" class="modal" style="display: none;">
        <button class="close"><i class="fa-solid fa-square-xmark"></i></button> <!-- Close button -->
        <button id="prevImage" class="modal-nav"><i class="fa-solid fa-square-caret-left"></i></button> <!-- Previous button -->
        <img class="modal-content" id="modalImage">
        <button id="nextImage" class="modal-nav"><i class="fa-solid fa-square-caret-right"></i></button> <!-- Next button -->
        <div id="caption"></div>
    </div>

    <footer>
        <div class="footer-links">
            <a href="https://github.com/niejyr"><span class="fa-brands fa-square-github"></span></a>
            <a href="mailto:nieminen.jyri.j@gmail.com"><span class="fa-solid fa-envelope"></span></a>
            <a href="https://www.linkedin.com/in/jyri-nieminen/"><span class="fa-brands fa-linkedin"></span></a>
        </div>
        <p>&copy; 2025 Jyri Nieminen</p>
    </footer>

    <script src="JS/image-Error.js"></script>
    <script src="JS/modal.js"></script>

</body>
</html>