Skip to content

Commit 666e6f8

Browse files
HellonaGRHellonaGR
authored
Add files via upload
1 parent bd6ed3b commit 666e6f8

File tree

2 files changed

+73
-161
lines changed

2 files changed

+73
-161
lines changed

‎index.html‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,37 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>HellonaGR - Αρχική</title>
7-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
87
<link rel="stylesheet" href="styles.css">
98
</head>
109
<body>
11-
<header>
12-
<nav>
13-
<a href="https://hellonagr.github.io/hellonagr/" class="logo-container">
14-
<img src="https://yt3.googleusercontent.com/zq_PJG5ZqWI5Y6ZEjkdkqqE8UdQxUNoY2vtSDM3bHWikqVejo0SMDFj04L0s3zcLGksbCkzS-Q=s160-c-k-c0x00ffffff-no-rj"
15-
alt="HellonaGR Logo" class="logo-img">
16-
<span class="logo-text">HellonaGR</span>
10+
<div class="container">
11+
<img src="https://yt3.googleusercontent.com/zq_PJG5ZqWI5Y6ZEjkdkqqE8UdQxUNoY2vtSDM3bHWikqVejo0SMDFj04L0s3zcLGksbCkzS-Q=s160-c-k-c0x00ffffff-no-rj"
12+
alt="HellonaGR"
13+
style="width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--primary); margin-bottom: 1.5rem;">
14+
15+
<a href="https://www.youtube.com/@HellonaGR" target="_blank" style="text-decoration: none;">
16+
<h1 class="page-title fade-in">HellonaGR</h1>
17+
</a>
18+
19+
<div style="display: flex; justify-content: center; gap: 1rem; margin-top: 2rem;">
20+
<a href="https://hellonagr.github.io/hellonagr/Blog" style="background: linear-gradient(135deg, #00ff2a, #00eeff); color: black; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none;">
21+
<span>Blog</span>
22+
1723
</a>
18-
<div class="nav-links">
19-
<a href="https://hellonagr.github.io/hellonagr/">Αρχική</a>
20-
<a href="https://hellonagr.github.io/hellonagr/Blog">Blog</a>
21-
<a href="https://hellonagr.github.io/hellonagr/epikinonia">Επικοινωνία</a>
22-
</div>
23-
</nav>
24-
</header>
24+
<a href="https://www.youtube.com/@HellonaGR"
25+
style="background: linear-gradient(135deg, #ff0000, #f84242); color: black; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none;">
26+
<span>Youtube</span>
27+
</a>
2528

26-
<div class="container">
27-
<h1 class="page-title fade-in">Καλώς ήρθατε στο HellonaGR</h1>
28-
29-
<div class="content fade-in" style="text-align: center;">
30-
<img src="https://yt3.googleusercontent.com/zq_PJG5ZqWI5Y6ZEjkdkqqE8UdQxUNoY2vtSDM3bHWikqVejo0SMDFj04L0s3zcLGksbCkzS-Q=s160-c-k-c0x00ffffff-no-rj"
31-
alt="HellonaGR"
32-
style="width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--primary); margin-bottom: 1.5rem;">
33-
29+
<a href="https://hellonagr.github.io/hellonagr/epikinonia"
30+
style="background: linear-gradient(135deg, #0004ff, #07cdf0); color: black; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none;">
31+
Επικοινωνία
32+
</a>
3433

35-
<div style="display: flex; justify-content: center; gap: 1rem; margin-top: 2rem;">
36-
<a href="https://hellonagr.github.io/hellonagr/Blog" style="background: var(--primary); color: white; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none;">
37-
Δείτε το Blog μου
38-
</a>
39-
<a href="https://hellonagr.github.io/hellonagr/epikinonia" style="background: var(--secondary); color: white; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none;">
40-
Επικοινωνία
41-
</a>
42-
</div>
34+
<h3 style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center;color: black;">
35+
Θα κάνω ενημέρωση το <a href="https://hellonagr.github.io/hellonagr/Blog">Blog</a> συντομα!!!
36+
</h3>
4337
</div>
4438
</div>
45-
46-
4739
</body>
48-
</html>
40+
</html>

‎styles.css‎

Lines changed: 48 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,91 @@
1-
/* styles.css */
21
:root {
3-
--primary: #6a11cb;
4-
--secondary: #2575fc;
2+
--primary: #111dcb;
3+
--secondary: #0adce4;
54
--dark: #1a1a2e;
65
--light: #f8f9fa;
76
--text: #333;
8-
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
9-
}
10-
11-
* {
12-
box-sizing: border-box;
13-
margin: 0;
14-
padding: 0;
7+
--bg-gradient: linear-gradient(135deg, #979ce0 10%, #0f71e2 55%, #d4a711 100%);
158
}
169

1710
body {
1811
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1912
background: var(--bg-gradient);
2013
color: var(--text);
21-
line-height: 1.6;
22-
}
23-
24-
/* Header */
25-
header {
26-
background: white;
27-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
28-
padding: 1rem 2rem;
29-
position: sticky;
30-
top: 0;
31-
z-index: 100;
32-
}
33-
34-
nav {
35-
display: flex;
36-
justify-content: space-between;
37-
align-items: center;
38-
max-width: 1200px;
39-
margin: 0 auto;
40-
}
41-
42-
.logo-container {
14+
line-height: 1.8;
4315
display: flex;
16+
justify-content: center;
4417
align-items: center;
45-
gap: 15px;
46-
text-decoration: none;
47-
}
48-
49-
.logo-img {
50-
width: 50px;
51-
height: 50px;
52-
border-radius: 50%;
53-
object-fit: cover;
54-
border: 2px solid var(--primary);
55-
}
56-
57-
.logo-text {
58-
font-size: 1.8rem;
59-
font-weight: bold;
60-
color: var(--primary);
61-
}
62-
63-
.nav-links {
64-
display: flex;
65-
gap: 1.5rem;
18+
flex-direction: column;
19+
min-height: 100vh;
20+
margin: 0;
21+
text-align: center;
22+
font-size: 1.2rem;
6623
}
67-
68-
.nav-links a {
69-
color: var(--text);
70-
text-decoration: none;
71-
font-weight: 500;
72-
transition: color 0.3s;
73-
position: relative;
24+
img {
25+
display: block;
26+
margin: 0 auto;
7427
}
7528

76-
.nav-links a:hover {
29+
.page-title {
30+
margin: 0;
7731
color: var(--primary);
32+
font-size: 2.5rem;
33+
text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
34+
transition: transform 0.3s ease, color 0.3s ease;
35+
cursor: pointer;
7836
}
7937

80-
.nav-links a::after {
81-
content: '';
82-
position: absolute;
83-
width: 0;
84-
height: 2px;
85-
bottom: -4px;
86-
left: 0;
87-
background-color: var(--primary);
88-
transition: width 0.3s;
89-
}
90-
91-
.nav-links a:hover::after {
92-
width: 100%;
93-
}
94-
95-
/* Κύριο Περιεχόμενο */
96-
.container {
97-
max-width: 800px;
98-
margin: 3rem auto;
99-
padding: 0 1.5rem;
100-
}
101-
102-
.page-title {
103-
text-align: center;
104-
margin-bottom: 3rem;
38+
.page-title:hover {
10539
color: var(--primary);
106-
position: relative;
40+
text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
41+
transform: scale(1.1);
10742
}
10843

10944
.page-title::after {
11045
content: '';
11146
display: block;
112-
width: 80px;
113-
height: 4px;
47+
width: 100px;
48+
height: 6px;
11449
background: var(--secondary);
11550
margin: 0.5rem auto 0;
116-
border-radius: 2px;
51+
border-radius: 3px;
11752
}
11853

119-
/* Footer */
120-
footer {
121-
background: var(--dark);
122-
color: white;
123-
padding: 2rem;
124-
text-align: center;
125-
margin-top: 3rem;
126-
}
127-
128-
.social-links {
129-
display: flex;
130-
justify-content: center;
131-
gap: 1.5rem;
132-
margin: 1rem 0;
54+
a {
55+
text-decoration: none;
56+
background: none;
13357
}
13458

135-
.social-links a {
59+
a:hover {
60+
transform: scale(1.1);
61+
background: var(--primary);
13662
color: white;
137-
font-size: 1.2rem;
138-
transition: color 0.3s;
139-
}
140-
141-
.social-links a:hover {
142-
color: var(--secondary);
143-
}
144-
145-
.copyright {
146-
margin-top: 1rem;
147-
color: rgba(255,255,255,0.7);
148-
font-size: 0.9rem;
149-
}
150-
151-
/* Animations */
152-
@keyframes fadeIn {
153-
from { opacity: 0; transform: translateY(20px); }
154-
to { opacity: 1; transform: translateY(0); }
15563
}
15664

157-
.fade-in {
158-
animation: fadeIn 0.6s ease-out;
65+
footer {
66+
background: var(--dark);
67+
color: white;
68+
padding: 2.5rem;
69+
text-align: center;
70+
margin-top: 3rem;
71+
font-size: 1.1rem;
15972
}
16073

161-
/* Responsive */
16274
@media (max-width: 768px) {
16375
nav {
16476
flex-direction: column;
16577
gap: 1rem;
16678
}
16779

16880
.container {
169-
padding: 0 1rem;
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
justify-content: center;
85+
min-height: 100vh;
86+
text-align: center;
17087
}
171-
}
88+
.page-title {
89+
font-size: 2rem;
90+
}
91+
}

0 commit comments

Comments
 (0)