-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (98 loc) · 4.04 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marcos González">
<meta name="description" content="A collection of Hytale 3D models by Powerbyte7. Web by Lecus.">
<title>HyAssets by Powerbyte7</title>
<link rel="stylesheet" href="./style.min.css">
<link rel="shortcut icon" href="./src/Logo.jpg" type="image/x-icon">
<base target="_blank">
</head>
<body>
<div id="topLayer">
<img src="" class="modalImg">
<p>HyAssets by Powerbyte7</p>
</div>
<section id="carousel">
<picture>
<source srcset="./src/dinos.webp" type="image/webp">
<img src="./src/dinos.jpg" class="card c1">
</picture>
<picture>
<source srcset="./src/furniture.webp" type="image/webp">
<img src="./src/furniture.jpg" class="card c2">
</picture>
<picture>
<source srcset="./src/campfire.webp" type="image/webp">
<img src="./src/campfire.jpg" class="card c3">
</picture>
<picture>
<source srcset="./src/leaves.webp" type="image/webp">
<img src="./src/leaves.jpg" class="card c4">
</picture>
<picture>
<source srcset="./src/dinos.webp" type="image/webp">
<img src="./src/dinos.jpg" class="card c5">
</picture>
<h1>HyAssets<sub>1.1</sub></h1>
<h3>A collection of Hytale 3D models by Powerbyte7</h3>
</section>
<main>
<button id="btn"><a href="https://github.com/Powerbyte7/HyAssets/archive/refs/tags/v1.1.zip" download>download</a></button>
<div class="row">
<div>
<h2>Multiple file format</h2>
<p>Every creature is avaliable in 4 different formats and they have some textures to alternate with. Actually it brings some prefabricated characters, as the kweebecs and zombies.</p>
</div>
<picture>
<source srcset="./src/hyassets1.webp" type="image/webp">
<img src="./src/hyassets1.jpg" alt="preview 1">
</picture>
</div>
<div class="row2">
<picture>
<source srcset="./src/hyassets2.webp" type="image/webp">
<img src="./src/hyassets2.jpg" alt="preview 2">
</picture>
<div>
<h2>fully rigged models</h2>
<p>Models are completely rigged and ready to animate. Each extremity of their body is divided to make the rigging process practically null for you!</p>
</div>
</div>
<div class="row">
<div>
<h2>Item models</h2>
<p>Additionally, it has some JSON models for some items and a big variety of block textures. That brings the possibility to create your own landscapes.</p>
</div>
<picture>
<source srcset="./src/hyassets3.webp" type="image/webp">
<img src="./src/hyassets3.jpg" alt="preview 3">
</picture>
</div>
</main>
<footer>
<p>HyAssets by <a href="https://twitter.com/Powerbyte7">Powerbyte7</a><br>Web by <a href="https://twitter.com/ImLecus">Lecus</a></p>
</footer>
<script>
document.querySelectorAll(".row img").forEach(image => {
image.addEventListener("click", () => {
makeBigger(image)
})})
document.querySelectorAll(".row2 img").forEach(image => {
image.addEventListener("click", () => {
makeBigger(image)
})})
function makeBigger(i){
document.getElementById("topLayer").style.display = "block";
document.querySelector("#topLayer img").src = i.src;
}
document.querySelector("#topLayer").addEventListener("click",() => {
document.getElementById("topLayer").style.display = "none";
}
);
</script>
</body>
</html>