Skip to content

Commit 284da88

Browse files
NokskiyNokskiy
committed
All done
1 parent 746bf30 commit 284da88

File tree

2 files changed

+180
-7
lines changed

2 files changed

+180
-7
lines changed

‎index.html‎

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
<b>Avalonix</b>
2020
</div>
2121
<nav>
22-
<a href="https://github.com/AvalonixPlayer/Avalonix/releases/tag/V1.0.2">Download</a>
23-
<a href="https://github.com/AvalonixPlayer/Avalonix/releases/tag/V1.0.2">Features</a>
22+
<a href="#features">Features</a>
23+
<a href="#download">Download</a>
2424
</nav>
2525
</div>
2626
</div>
@@ -44,6 +44,85 @@
4444
</div>
4545
</section>
4646
</header>
47+
48+
<header>
49+
<section id="features" class="features">
50+
<div class="container">
51+
<div class="header-content">
52+
<b>Features</b>
53+
</div>
54+
<div class="features-grid">
55+
<div class="feature-card">
56+
<h3>Cross-Platform</h3>
57+
<p>Works perfectly on both Windows and Linux systems.</p>
58+
</div>
59+
<div class="feature-card">
60+
<h3>User-Friendly</h3>
61+
<p>Intuitive interface designed for seamless music enjoyment.</p>
62+
</div>
63+
<div class="feature-card">
64+
<h3>Working with metadata</h3>
65+
<p>Displays and allows you to edit track metadata..</p>
66+
</div>
67+
</div>
68+
</div>
69+
</section>
70+
</header>
71+
72+
<header>
73+
<section id="download" class="download">
74+
<div class="container">
75+
<div class="header-content">
76+
<b>Download Avalonix</b>
77+
</div>
78+
<a href="https://github.com/AvalonixPlayer/Avalonix/releases/" class="btn">
79+
<h3>Download from Releases</h3>
80+
</a>
81+
<p>Or clone the repository, use build.bat and paste bass.dll/so file.</p>
82+
</div>
83+
</section>
84+
</header>
85+
86+
<header>
87+
<section class="support">
88+
<div class="container">
89+
<div class="header-content">
90+
<b>Support the Project</b>
91+
</div>
92+
<div class="text-content">
93+
Avalonix is non-commercial software. You can help us by starring the repository on GitHub.
94+
</div>
95+
<a href="https://github.com/AvalonixPlayer/Avalonix/" class="btn">
96+
<h3>Star on github</h3>
97+
</a>
98+
</div>
99+
</section>
100+
</header>
101+
102+
<header>
103+
<div class="footer">
104+
<div class="container">
105+
<div class="links">
106+
<h1>Links</h1>
107+
<nav>
108+
<a href="https://github.com/AvalonixPlayer/Avalonix/">Github</a>
109+
<a href="https://github.com/AvalonixPlayer/Avalonix/releases/">Releases</a>
110+
<a href="https://github.com/AvalonixPlayer/Avalonix/blob/main/LICENSE">License</a>
111+
</nav>
112+
</div>
113+
<div class="technologies">
114+
<h1>Technologies</h1>
115+
<nav>
116+
<p>● AvaloniaUI</p>
117+
<p>● Bass.net</p>
118+
<p>● bass</p>
119+
<p>● Taglib-sharp</p>
120+
<p>● NeoSimpleLogger</p>
121+
</nav>
122+
</div>
123+
</div>
124+
</div>
125+
</header>
47126
</main>
48127
</body>
49128
</html>

‎styles.css‎

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
--accent-green: #3cb371;
66
--text-light: #e8f5e9;
77
--text-muted: #a5d6a7;
8-
--text-sellected: #700aac;
8+
--text-sellected: #46f188;
99
}
1010

1111
* {
@@ -16,9 +16,16 @@
1616
}
1717

1818
body {
19+
font-family: 'Segoe UI', system-ui, sans-serif;
1920
background-color: var(--dark-green);
2021
color: var(--text-light);
2122
line-height: 1.6;
23+
min-height: 100vh;
24+
}
25+
26+
header {
27+
background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
28+
box-shadow: 0 4px 62px rgba(0, 0, 0, 0.2);
2229
}
2330

2431
.container {
@@ -33,11 +40,15 @@ body {
3340
background: linear-gradient(to right, var(--dark-green), var(--light-green));
3441
}
3542

36-
.header-content {
37-
font-size: xxx-large;
43+
.head .header-content {
3844
display: flex;
3945
justify-content: space-between;
46+
}
47+
48+
.header-content {
49+
font-size: xxx-large;
4050
align-items: center;
51+
text-align: center;
4152
}
4253

4354
.header-content .avalonix-name {
@@ -53,6 +64,8 @@ body {
5364
nav a {
5465
color: inherit;
5566
text-decoration: none;
67+
margin-left: 10px;
68+
transition: all 0.5s ease;
5669
}
5770

5871
nav a:hover{
@@ -64,13 +77,17 @@ nav a:hover{
6477
background: linear-gradient(to right, var(--medium-green), var(--accent-green));
6578
}
6679

67-
.about .container {
80+
.about .container{
6881
display: flex;
6982
align-items: center;
7083
justify-content: space-between;
7184
gap: 40px;
7285
}
7386

87+
.about .container .text-content .header-content {
88+
text-align: left;
89+
}
90+
7491
.about .text-content {
7592
flex: 1;
7693
}
@@ -82,8 +99,85 @@ nav a:hover{
8299
}
83100

84101
.about .hero-image img {
85-
width: 100%;
102+
width: 50%;
86103
border-radius: 12px;
87104
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
88105
border: 2px solid rgba(255, 255, 255, 0.1);
106+
transition: all 0.5s ease;
107+
top: 0;
108+
}
109+
110+
.about .hero-image img:hover {
111+
transform: scale(3);
112+
}
113+
114+
.features {
115+
text-align: center;
116+
padding: 60px;
117+
background: var(--medium-green);
118+
}
119+
120+
.features-grid {
121+
display: grid;
122+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
123+
gap: 2rem;
124+
}
125+
126+
.feature-card {
127+
padding: 2.5rem 2rem;
128+
border-radius: 16px;
129+
text-align: center;
130+
transition: all 0.3s ease;
131+
border: 1px solid rgba(255, 255, 255, 0.2);
132+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
133+
}
134+
135+
.feature-card:hover {
136+
transform: translateY(-15px);
137+
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
138+
}
139+
140+
.download {
141+
text-align: center;
142+
padding: 40px 0;
143+
background: var(--light-green);
144+
}
145+
146+
.btn {
147+
display: inline-block;
148+
padding: 12px 24px;
149+
background: var(--accent-green);
150+
color: var(--text-light);
151+
text-decoration: none;
152+
border: none;
153+
border-radius: 8px;
154+
font-size: 1rem;
155+
font-weight: 600;
156+
cursor: pointer;
157+
transition: all 0.3s ease;
158+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
159+
}
160+
161+
.btn:hover {
162+
transform: scale(1.2);
163+
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
164+
}
165+
166+
.support {
167+
background: var(--accent-green);
168+
padding: 60px;
169+
text-align: center;
170+
}
171+
172+
.support .btn {
173+
background: var(--light-green);
174+
}
175+
176+
.footer {
177+
padding: 70px;
178+
}
179+
180+
.footer .container {
181+
display: flex;
182+
justify-content: space-around;
89183
}

0 commit comments

Comments
 (0)