Skip to content

Commit 65000ba

Browse files
FonsicreusFonsicreus
committed
Satella 1.1
Added a new music slider Added credits Reduced volume Added bio Improved style Improved code
1 parent afdf9e5 commit 65000ba

4 files changed

Lines changed: 335 additions & 96 deletions

File tree

‎resources/images/icon_arrow.png‎

3.84 KB
Loading

‎satella.html‎

Lines changed: 81 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,67 +11,104 @@
1111
<title>Satella</title>
1212
</head>
1313
<body class="satella">
14-
<script src="utilidades.js"></script>
14+
<script src="utilities.js"></script>
1515
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
1616

17-
<div class="center">
18-
<div class="imageandtext">
19-
<img
20-
class="satella"
21-
src="resources/images/icon_satella.gif"
22-
alt="Icon"
23-
/>
24-
<p class="username">サテラ</p>
17+
<div class="flex-body">
18+
<div class="socials">
19+
<div class="center">
20+
<img
21+
class="satella"
22+
src="resources/images/icon_satella.gif"
23+
alt="Icon"
24+
/>
25+
<p class="username">サテラ</p>
26+
</div>
27+
28+
<div class="link">
29+
<a href="https://steamcommunity.com/id/Fonsicreus/" target="_blank">
30+
<img
31+
class="link-image"
32+
src="resources/images/icon_steam.png"
33+
alt="Icon"
34+
/>
35+
</a>
36+
<a href="https://x.com/Fonsicreus" target="_blank">
37+
<img
38+
class="link-image"
39+
src="resources/images/icon_x.jpg"
40+
alt="Icon"
41+
/>
42+
</a>
43+
<a href="https://discord.gg/Aje9WwjpRu" target="_blank">
44+
<img
45+
class="link-image"
46+
src="resources/images/icon_discord.png"
47+
alt="Icon"
48+
/>
49+
</a>
50+
</div>
2551
</div>
2652
</div>
2753

28-
<div class="link">
29-
<a href="https://steamcommunity.com/id/Fonsicreus/" target="_blank">
30-
<img
31-
class="linkimage"
32-
src="resources/images/icon_steam.png"
33-
alt="Icon"
34-
/>
35-
</a>
36-
<a href="https://x.com/Fonsicreus" target="_blank">
37-
<img
38-
class="linkimage"
39-
src="resources/images/icon_x.jpg"
40-
alt="Icon"
41-
/>
42-
</a>
43-
<a href="https://discord.gg/Aje9WwjpRu" target="_blank">
44-
<img
45-
class="linkimage"
46-
src="resources/images/icon_discord.png"
47-
alt="Icon"
48-
/>
49-
</a>
54+
<div class="flex-body-bio" style="display: none">
55+
<div class="bio">
56+
<ul class="bio-list">
57+
<li>This is my first website!</li>
58+
<li>I am studying HTML, CSS, and JS.</li>
59+
<li>3 years of experience in Blender as an animator.</li>
60+
<li>I have studies in computer assembly, maintenance, and networking.</li>
61+
<li>My favorite anime are Frieren, Re:Zero, Ookami Kodomo no Ame to Yuki, and Houseki no Kuni.</li>
62+
<li><a href="https://myanimelist.net/profile/Fonsicreus" target="_blank" class="dark-link">Here is a link to my MyAnimeList profile if anyone is interested</a></li>
63+
</ul>
64+
</div>
65+
</div>
66+
67+
<a
68+
href="https://www.youtube.com/watch?v=5XJAiHD8rXQ"
69+
class="credits"
70+
target="_blank"
71+
>CREDITS</a
72+
>
73+
74+
<audio class="musicplayer" id="background-audio" loop>
75+
<source src="resources/audio/background_satella.mp3" type="audio/mp3" />
76+
Your browser does not support the audio element.
77+
</audio>
78+
79+
<div class="musicplayer">
80+
<input
81+
type="range"
82+
id="custom-volume-slider-satella"
83+
min="0"
84+
max="100"
85+
value="100"
86+
/>
5087
</div>
5188

89+
<img
90+
class="pull-down-menu"
91+
src="resources/images/icon_arrow.png"
92+
alt="Arrow"
93+
onclick="clickOnImage()"
94+
/>
95+
5296
<!-- Hidden text for the .js to use this text to display -->
53-
<p class="añadirTexto" style="display: none">
97+
<p class="añadir-texto" style="display: none">
5498
I'll do anything to make you stay with me...
5599
</p>
56-
<p class="añadirTexto" style="display: none">
100+
<p class="añadir-texto" style="display: none">
57101
You belong to me, no one else...
58102
</p>
59-
<p class="añadirTexto" style="display: none">
103+
<p class="añadir-texto" style="display: none">
60104
I can't live without you, don't you see that?
61105
</p>
62-
<p class="añadirTexto" style="display: none">
106+
<p class="añadir-texto" style="display: none">
63107
Don't you dare to leave me...
64108
</p>
65-
<p class="añadirTexto" style="display: none">DON'T YOU DARE TO LEAVE ME</p>
66-
67-
<div class="footermusicplayer">
68-
<audio class="musicplayer" loop controls>
69-
<source src="resources/audio/background_satella.mp3" type="audio/mp3" />
70-
Your browser does not support the audio element.
71-
</audio>
72-
</div>
109+
<p class="añadir-texto" style="display: none">DON'T YOU DARE TO LEAVE ME</p>
73110

74-
<video loop muted class="backgroundvideo">
111+
<video loop muted class="background-video">
75112
<source src="resources/video/background_satella.mp4" type="video/mp4" />
76113
Your browser does not support the video element.
77114
</video>

0 commit comments

Comments
 (0)