Skip to content

Commit 6a8abb9

Browse files
author
ImLecus
committed
Improved SEO and performance
1 parent c21a5a9 commit 6a8abb9

10 files changed

+362
-6
lines changed

‎index.html

+16-5
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>HyAssets by Powerbyte7</title>
8-
<link rel="stylesheet" href="./style.css">
8+
<link rel="stylesheet" href="./style.min.css">
99
<link rel="shortcut icon" href="./src/Logo.jpg" type="image/x-icon">
10+
<meta name="description" content="A collection of Hytale 3D models by Powerbyte7. Web by Lecus.">
1011
</head>
1112
<body>
1213
<div id="topLayer">
@@ -23,16 +24,23 @@ <h1>HyAssets<sub>1.1</sub></h1>
2324
<h3>A collection of Hytale 3D models by Powerbyte7</h3>
2425
</div>
2526
<main>
26-
<button id="btn" onclick='window.location.href = "https://github.com/Powerbyte7/HyAssets/archive/refs/tags/v1.1.zip"'><span>download</span></button>
27+
<button id="btn"><a href="https://github.com/Powerbyte7/HyAssets/archive/refs/tags/v1.1.zip" download>download</a></button>
2728
<div class="row">
2829
<div>
2930
<h2>Multiple file format</h2>
3031
<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>
3132
</div>
32-
<img src="./src/hyassets1.jpg" alt="preview 1">
33+
<picture>
34+
<source srcset="./src/hyassets1.webp" type="image/webp">
35+
<img src="./src/hyassets1.jpg" alt="preview 1">
36+
</picture>
37+
3338
</div>
3439
<div class="row2">
35-
<img src="./src/hyassets2.jpg" alt="preview 2">
40+
<picture>
41+
<source srcset="./src/hyassets2.webp" type="image/webp">
42+
<img src="./src/hyassets2.jpg" alt="preview 2">
43+
</picture>
3644
<div>
3745
<h2>fully rigged models</h2>
3846
<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>
@@ -43,7 +51,10 @@ <h2>fully rigged models</h2>
4351
<h2>Item models</h2>
4452
<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>
4553
</div>
46-
<img src="./src/hyassets3.jpg" alt="preview 3">
54+
<picture>
55+
<source srcset="./src/hyassets3.webp" type="image/webp">
56+
<img src="./src/hyassets3.jpg" alt="preview 3">
57+
</picture>
4758
</div>
4859
</main>
4960
<footer>

‎src/campfire.webp

73.1 KB
Binary file not shown.

‎src/dinos.webp

119 KB
Binary file not shown.

‎src/furniture.webp

83.7 KB
Binary file not shown.

‎src/hyassets1.webp

128 KB
Binary file not shown.

‎src/hyassets2.webp

136 KB
Binary file not shown.

‎src/hyassets3.webp

160 KB
Binary file not shown.

‎src/leaves.webp

111 KB
Binary file not shown.

‎style.css

+345-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,345 @@
1-
h1,h3{padding:0}#btn span,h2{text-transform:uppercase}body,h3{margin:0}body,main{overflow-x:hidden}#topLayer p,footer p,h1,h2,h3,span{text-align:center}#btn,#carousel,img{filter:drop-shadow(0px 10px 20px rgba(0, 0, 0, .2666666667))}*,::after,::before{box-sizing:border-box}@font-face{font-family:penumbra-serif-std;src:url("https://use.typekit.net/af/024c41/00000000000000003b9b0a89/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/024c41/00000000000000003b9b0a89/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/024c41/00000000000000003b9b0a89/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");font-display:auto;font-style:normal;font-weight:400;font-stretch:normal}@font-face{font-family:penumbra-serif-std;src:url("https://use.typekit.net/af/7d45ff/00000000000000003b9b0a8b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/7d45ff/00000000000000003b9b0a8b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/7d45ff/00000000000000003b9b0a8b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");font-display:auto;font-style:normal;font-weight:700;font-stretch:normal}#carousel,body{display:flex;justify-content:center;flex-direction:column}main{display:flex;flex-direction:column;margin:200px 20% 0}#topLayer{transition:.3s linear;display:none;position:fixed;top:0;z-index:3000;padding-top:20vh;width:100vw;height:100vh;background-color:rgba(0,0,0,.6);-webkit-animation:.2s fadeIn;animation:.2s fadeIn}#topLayer img{width:100%;padding:0 25%;-webkit-animation:.2s fadeIn;animation:.2s fadeIn}#topLayer p{margin:0 auto;opacity:.6}#btn{position:absolute;top:370px;align-self:center;width:25%;z-index:2000;height:60px;background:linear-gradient(to bottom,#3c91c5,#225b8b);border:2px solid #060b12;border-radius:10px;color:#fff;outline:#AB8D42 solid 2px;font-family:penumbra-serif-std-bold,sans-serif;font-weight:bolder;cursor:pointer}#btn:hover{background:linear-gradient(to bottom,#45a4df,#22658e)}#btn span{font-size:2em;letter-spacing:0}#btn span::before{text-shadow:0 3px 5px rgba(0,0,0,.4)}#carousel{overflow:hidden;width:100%;height:400px;justify-content:stretch;border-bottom:1px solid #b7cedd}#carousel img{width:100vw;position:absolute;top:0;z-index:-1;filter:blur(2px);height:400px}h1,h2,h3,span{color:#fff;font-family:penumbra-serif-std;background:linear-gradient(#f5fbff,#bfe6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}h1{font-size:5em;letter-spacing:1px;filter:drop-shadow(0px 0px 5px #000000);line-height:2}h3{font-size:2rem;filter:drop-shadow(0px 0px 10px #000000)}h2{background:linear-gradient(#ffe98d,#e19f27);-webkit-background-clip:text;background-clip:text;font-size:2em}p{color:#b7cedd;line-height:1.6em;margin-bottom:1.3rem;font-size:16px!important;font-family:"Noto Sans",sans-serif}body{background-color:#0d1421;max-width:100%}.row,.row2{margin-bottom:100px;display:flex;justify-content:space-around}.row div,.row2 div{padding-right:120px}.row div *,.row2 div *{text-align:left}.row img,.row2 img{max-width:50%;cursor:pointer;z-index:1000;transition:.5s linear;aspect-ratio:16/9}.row2 div{padding-left:120px;padding-right:0}footer{padding:2em;background-color:#10161e;border-top:1px solid #2c2b22}sub{font-size:20px;vertical-align:baseline}.card{-webkit-animation:24s infinite card;animation:24s infinite card}@-webkit-keyframes card{0%,16%{transform:translateX(0)}28%,40%{transform:translateX(-100vw)}50%,62%{transform:translateX(-200vw)}75%,86%{transform:translateX(-300vw)}100%{transform:translateX(-400vw)}}@keyframes card{0%,16%{transform:translateX(0)}28%,40%{transform:translateX(-100vw)}50%,62%{transform:translateX(-200vw)}75%,86%{transform:translateX(-300vw)}100%{transform:translateX(-400vw)}}.c2{left:100vw}.c3{left:200vw}.c4{left:300vw}.c5{left:400vw}a{text-decoration:none;color:inherit;font-weight:700}@media (max-width:1300px){main{margin:0;padding-top:150px}.row,.row2{overflow:hidden;justify-content:space-around}.row div,.row2 div{width:30%}.row img,.row2 img{width:50%;margin:0}}@media (max-width:1100px){.row,.row2{justify-content:center}.row div,.row2 div{padding:0}.row *,.row2 *{width:100%!important;padding:0 5%!important;text-align:center!important}.row img,.row2 img{margin:0 auto}.row{flex-direction:column}.row2{flex-direction:column-reverse}.row img,.row2 img{max-width:75%!important}}@media (max-width:800px){#btn{width:40%}#topLayer img{padding:0 10%!important}}@media (max-width:500px){h1{margin-top:100px;margin-bottom:20px;font-size:3.5em}h3{font-size:1.5em;padding:0 10px}.row img,.row2 img{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;padding:0!important}#btn{width:60%}}@media (max-width:400px){#carousel,#carousel img{height:300px}h1{margin-top:50px;font-size:3em}h3{font-size:1.5em}#btn{top:275px}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}::-webkit-scrollbar{background-color:#090e17;width:15px}::-webkit-scrollbar-thumb{background-color:#3c91c5;border-radius:5px;filter:drop-shadow(0px 10px 20px rgba(0, 0, 0, .2666666667))}
1+
h1,h3{
2+
padding:0
3+
}
4+
#btn a,h2{
5+
text-transform:uppercase
6+
}
7+
body,h3{
8+
margin:0
9+
}
10+
body,main{
11+
overflow-x:hidden
12+
}
13+
#topLayer p,footer p,h1,h2,h3,#btn a{
14+
text-align:center
15+
}
16+
#btn,#carousel,picture{
17+
filter:drop-shadow(0px 10px 20px rgba(0, 0, 0, .2666666667))
18+
}
19+
*,::after,::before{
20+
box-sizing:border-box
21+
}
22+
@font-face{
23+
font-family:penumbra-serif-std;
24+
src:url("https://use.typekit.net/af/024c41/00000000000000003b9b0a89/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/024c41/00000000000000003b9b0a89/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/024c41/00000000000000003b9b0a89/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
25+
font-display:auto;
26+
font-style:normal;
27+
font-weight:400;
28+
font-stretch:normal
29+
}
30+
@font-face{
31+
font-family:penumbra-serif-std;
32+
src:url("https://use.typekit.net/af/7d45ff/00000000000000003b9b0a8b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/7d45ff/00000000000000003b9b0a8b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/7d45ff/00000000000000003b9b0a8b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
33+
font-display:auto;
34+
font-style:normal;
35+
font-weight:700;
36+
font-stretch:normal
37+
}
38+
#carousel,body{
39+
display:flex;
40+
justify-content:center;
41+
flex-direction:column
42+
}
43+
main{
44+
display:flex;
45+
flex-direction:column;
46+
margin:200px 20% 0
47+
}
48+
#topLayer{
49+
transition:.3s linear;
50+
display:none;
51+
position:fixed;
52+
top:0;
53+
z-index:3000;
54+
padding-top:20vh;
55+
width:100vw;
56+
height:100vh;
57+
background-color:rgba(0,0,0,.6);
58+
-webkit-animation:.2s fadeIn;animation:.2s fadeIn
59+
}
60+
#topLayer img{
61+
width:100%;
62+
padding:0 25%;
63+
-webkit-animation:.2s fadeIn;
64+
animation:.2s fadeIn
65+
}
66+
#topLayer p{
67+
margin:0 auto;
68+
opacity:.6
69+
}
70+
#btn{
71+
position:absolute;
72+
top:370px;
73+
align-self:center;
74+
width:25%;
75+
z-index:2000;
76+
height:60px;
77+
background:linear-gradient(to bottom,#3c91c5,#225b8b);
78+
border:2px solid #060b12;
79+
border-radius:10px;
80+
color:#fff;
81+
outline:#AB8D42 solid 2px;
82+
font-family:penumbra-serif-std-bold,sans-serif;
83+
font-weight:bolder;
84+
cursor:pointer
85+
}
86+
#btn:hover{
87+
background:linear-gradient(to bottom,#45a4df,#22658e)
88+
}
89+
#btn a{
90+
font-size:2em;
91+
letter-spacing:0
92+
}
93+
#btn a::before{
94+
text-shadow:0 3px 5px rgba(0,0,0,.4)
95+
}
96+
#carousel{
97+
overflow:hidden;
98+
width:100%;
99+
height:400px;
100+
justify-content:stretch;
101+
border-bottom:1px solid #b7cedd
102+
}
103+
#carousel img{
104+
width:100vw;
105+
position:absolute;
106+
top:0;
107+
z-index:-1;
108+
filter:blur(2px);
109+
height:400px
110+
}
111+
h1,h2,h3,#btn a{
112+
color:#fff;
113+
font-family:penumbra-serif-std;
114+
background:linear-gradient(#f5fbff,#bfe6ff);
115+
-webkit-background-clip:text;
116+
background-clip:text;
117+
-webkit-text-fill-color:transparent;
118+
line-height:1.2
119+
}
120+
h1{
121+
font-size:5em;
122+
letter-spacing:1px;
123+
filter:drop-shadow(0px 0px 5px #000000);
124+
line-height:2
125+
}
126+
h3{
127+
font-size:2rem;
128+
filter:drop-shadow(0px 0px 10px #000000)
129+
}
130+
h2{
131+
background:linear-gradient(#ffe98d,#e19f27);
132+
-webkit-background-clip:text;
133+
background-clip:text;
134+
font-size:2em
135+
}
136+
p{
137+
color:#b7cedd;
138+
line-height:1.6em;
139+
margin-bottom:1.3rem;
140+
font-size:16px!important;
141+
font-family:"Noto Sans",sans-serif
142+
}
143+
body{
144+
background-color:#0d1421;
145+
max-width:100%
146+
}
147+
.row,.row2{
148+
margin-bottom:100px;
149+
display:flex;
150+
justify-content:space-around
151+
}
152+
.row div,.row2 div{
153+
padding-right:120px
154+
}
155+
.row div *,.row2 div *{
156+
text-align:left
157+
}
158+
.row picture,.row2 picture{
159+
max-width:50%;
160+
cursor:pointer;
161+
z-index:1000;
162+
transition:.5s linear;
163+
}
164+
.row picture img, .row2 picture img{
165+
width: 100%;
166+
aspect-ratio:16/9
167+
}
168+
.row2 div{
169+
padding-left:120px;
170+
padding-right:0
171+
}
172+
footer{
173+
padding:2em;
174+
background-color:#10161e;
175+
border-top:1px solid #2c2b22
176+
}
177+
sub{
178+
font-size:20px;
179+
vertical-align:baseline
180+
}
181+
.card{
182+
-webkit-animation:24s infinite card;
183+
animation:24s infinite card
184+
}
185+
@-webkit-keyframes card{
186+
0%,16%{
187+
transform:translateX(0)
188+
}
189+
28%,40%{
190+
transform:translateX(-100vw)
191+
}
192+
50%,62%{
193+
transform:translateX(-200vw)
194+
}
195+
75%,86%{
196+
transform:translateX(-300vw)
197+
}
198+
100%{
199+
transform:translateX(-400vw)
200+
}
201+
}
202+
@keyframes card{
203+
0%,16%{
204+
transform:translateX(0)
205+
}
206+
28%,40%{
207+
transform:translateX(-100vw)
208+
}
209+
50%,62%{
210+
transform:translateX(-200vw)
211+
}
212+
75%,86%{
213+
transform:translateX(-300vw)
214+
}
215+
100%{
216+
transform:translateX(-400vw)
217+
}
218+
}
219+
.c2{
220+
left:100vw
221+
}
222+
.c3{
223+
left:200vw
224+
}
225+
.c4{
226+
left:300vw
227+
}
228+
.c5{
229+
left:400vw
230+
}
231+
a{
232+
text-decoration:none;
233+
color:inherit;
234+
font-weight:700
235+
}
236+
@media (max-width:1300px){
237+
main{
238+
margin:0;
239+
padding-top:150px
240+
}
241+
.row,.row2{
242+
overflow:hidden;
243+
justify-content:space-around
244+
}
245+
.row div,.row2 div{
246+
width:30%
247+
}
248+
.row img,.row2 img{
249+
width:50%;
250+
margin:0
251+
}
252+
}
253+
@media (max-width:1100px){
254+
.row,.row2{
255+
justify-content:center
256+
}
257+
.row div,.row2 div{
258+
padding:0
259+
}
260+
.row *,.row2 *{
261+
width:100%!important;
262+
padding:0 5%!important;
263+
text-align:center!important
264+
}
265+
.row img,.row2 img{
266+
margin:0 auto
267+
}
268+
.row{
269+
flex-direction:column
270+
}
271+
.row2{
272+
flex-direction:column-reverse
273+
}
274+
.row picture,.row2 picture{
275+
max-width:75%!important
276+
}
277+
}
278+
@media (max-width:800px){
279+
#btn{
280+
width:40%
281+
}
282+
#topLayer img{
283+
padding:0 10%!important
284+
}
285+
}
286+
@media (max-width:500px){
287+
h1{
288+
margin-top:100px;
289+
margin-bottom:20px;
290+
font-size:3.5em
291+
}
292+
h3{
293+
font-size:1.5em;
294+
padding:0 10px
295+
}
296+
.row picture,.row2 picture{
297+
width:-webkit-max-content!important;
298+
width:-moz-max-content!important;
299+
width:max-content!important;
300+
padding:0!important
301+
}
302+
#btn{
303+
width:60%
304+
}
305+
}
306+
@media (max-width:400px){
307+
#carousel,#carousel img{
308+
height:300px
309+
}
310+
h1{
311+
margin-top:50px;
312+
font-size:3em
313+
}
314+
h3{
315+
font-size:1.5em
316+
}
317+
#btn{
318+
top:275px
319+
}
320+
}
321+
@-webkit-keyframes fadeIn{
322+
0%{
323+
opacity:0
324+
}
325+
100%{
326+
opacity:1
327+
}
328+
}
329+
@keyframes fadeIn{
330+
0%{
331+
opacity:0
332+
}
333+
100%{
334+
opacity:1
335+
}
336+
}
337+
::-webkit-scrollbar{
338+
background-color:#090e17;
339+
width:15px
340+
}
341+
::-webkit-scrollbar-thumb{
342+
background-color:#3c91c5;
343+
border-radius:5px;
344+
filter:drop-shadow(0px 10px 20px rgba(0, 0, 0, .2666666667))
345+
}

0 commit comments

Comments
 (0)