Skip to content

Commit c2d3b47

Browse files
HellonaGRHellonaGR
authored
Ενημέρωση Blog.html για να είναι πιο όμορφο
Έβαλα παραπάνω χρώματα και σκιές
1 parent 865b1bf commit c2d3b47

File tree

1 file changed

+206
-143
lines changed

1 file changed

+206
-143
lines changed

‎Blog.html‎

Lines changed: 206 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,213 @@
11
<!DOCTYPE html>
22
<html lang="el">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>HellonaGR - Blog</title>
7-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8-
<link rel="stylesheet" href="styles.css">
9-
<style>
10-
11-
.post {
12-
background: white;
13-
border-radius: 10px;
14-
padding: 2rem;
15-
margin-bottom: 2rem;
16-
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
17-
transition: transform 0.3s, box-shadow 0.3s;
18-
position: relative;
19-
overflow: hidden;
20-
}
21-
22-
.post:hover {
23-
transform: translateY(-5px);
24-
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
25-
}
26-
27-
.post::before {
28-
content: '';
29-
position: absolute;
30-
top: 0;
31-
left: 0;
32-
width: 4px;
33-
height: 100%;
34-
background: var(--primary);
35-
}
36-
37-
.post-title {
38-
font-size: 1.8rem;
39-
margin-bottom: 1rem;
40-
color: var(--dark);
41-
}
42-
43-
.post-meta {
44-
color: #666;
45-
margin-bottom: 1.5rem;
46-
font-size: 0.9rem;
47-
display: flex;
48-
align-items: center;
49-
gap: 10px;
50-
}
51-
52-
.post-meta i {
53-
color: var(--primary);
54-
}
55-
56-
.post-content {
57-
margin-bottom: 1.5rem;
58-
color: #555;
59-
line-height: 1.7;
60-
}
61-
62-
.read-more {
63-
display: inline-flex;
64-
align-items: center;
65-
gap: 5px;
66-
color: var(--primary);
67-
text-decoration: none;
68-
font-weight: 500;
69-
transition: color 0.3s;
70-
}
71-
72-
.read-more:hover {
73-
color: var(--secondary);
74-
}
75-
76-
.read-more i {
77-
transition: transform 0.3s;
78-
}
79-
80-
.read-more:hover i {
81-
transform: translateX(3px);
82-
}
83-
</style>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blog - HellonaGR</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
8+
<style>
9+
/* Βασικό Στυλ */
10+
body {
11+
font-family: 'Roboto', sans-serif;
12+
background: linear-gradient(135deg, #1100ff, #1eff00);
13+
background-attachment: fixed;
14+
background-size: cover;
15+
color: #fff;
16+
line-height: 1.8;
17+
margin: 0;
18+
text-align: center;
19+
font-size: 1.2rem;
20+
}
21+
22+
/* Header */
23+
header {
24+
padding: 2rem 1rem;
25+
text-align: center;
26+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
27+
}
28+
29+
header h1 {
30+
font-size: 3rem;
31+
font-weight: 700;
32+
color: #00c6ff;
33+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
34+
margin: 0;
35+
}
36+
37+
header p a {
38+
color: #00c6ff;
39+
font-size: 1.2rem;
40+
font-weight: bold;
41+
text-decoration: none;
42+
border: 2px solid #00c6ff;
43+
padding: 5px 10px;
44+
border-radius: 5px;
45+
transition: background-color 0.3s, color 0.3s;
46+
}
47+
48+
header p a:hover {
49+
background-color: #00c6ff;
50+
color: #fff;
51+
}
52+
53+
/* Container */
54+
.container {
55+
margin: 2rem auto;
56+
animation: slideIn 1s ease-in-out;
57+
}
58+
59+
.container img {
60+
width: 200px;
61+
height: 200px;
62+
border-radius: 50%;
63+
border: 3px solid #00c6ff;
64+
margin-bottom: 1rem;
65+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
66+
}
67+
68+
.container a h1 {
69+
font-size: 2.5rem;
70+
color: #00c6ff;
71+
text-decoration: none;
72+
margin: 0;
73+
}
74+
75+
.container h2 {
76+
font-size: 2rem;
77+
font-weight: 500;
78+
color: #00c6ff;
79+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
80+
margin-top: 0.5rem;
81+
}
82+
83+
84+
main {
85+
padding: 2rem;
86+
max-width: 1000px;
87+
margin: auto;
88+
}
89+
90+
.blog-post {
91+
background-color: rgba(30, 30, 30, 0.95);
92+
padding: 1.5rem;
93+
border-radius: 10px;
94+
margin-bottom: 2rem;
95+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
96+
transition: transform 0.3s, box-shadow 0.3s;
97+
display: flex;
98+
gap: 1rem;
99+
align-items: center;
100+
animation: fadeInUp 1s ease-in-out;
101+
}
102+
103+
.blog-post:hover {
104+
transform: translateY(-5px);
105+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
106+
}
107+
108+
.blog-post img {
109+
width: 200px;
110+
height: auto;
111+
border-radius: 8px;
112+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
113+
}
114+
115+
.blog-post-content {
116+
flex: 1;
117+
}
118+
119+
.blog-post h2 {
120+
margin-top: 0;
121+
color: #00c6ff;
122+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
123+
}
124+
125+
.blog-post p {
126+
color: #ccc;
127+
}
128+
129+
/* Footer */
130+
footer {
131+
text-align: center;
132+
padding: 2rem;
133+
background: linear-gradient(135deg, #1e1e1e, #2e2e2e);
134+
color: #ccc;
135+
font-size: 1rem;
136+
border-top: 3px solid #00c6ff;
137+
animation: fadeIn 2s ease-in-out;
138+
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
139+
}
140+
141+
footer a {
142+
color: #00c6ff;
143+
text-decoration: none;
144+
font-weight: bold;
145+
}
146+
147+
footer a:hover {
148+
text-decoration: underline;
149+
}
150+
151+
/* Animations */
152+
@keyframes slideIn {
153+
from {
154+
transform: translateY(-20px);
155+
opacity: 0;
156+
}
157+
to {
158+
transform: translateY(0);
159+
opacity: 1;
160+
}
161+
}
162+
163+
@keyframes fadeInUp {
164+
from {
165+
transform: translateY(20px);
166+
opacity: 0;
167+
}
168+
to {
169+
transform: translateY(0);
170+
opacity: 1;
171+
}
172+
}
173+
</style>
84174
</head>
85175
<body>
86-
<header>
87-
<nav>
88-
<a href="https://hellonagr.github.io/hellonagr/" class="logo-container">
89-
<img src="https://yt3.googleusercontent.com/zq_PJG5ZqWI5Y6ZEjkdkqqE8UdQxUNoY2vtSDM3bHWikqVejo0SMDFj04L0s3zcLGksbCkzS-Q=s160-c-k-c0x00ffffff-no-rj"
90-
alt="HellonaGR Logo" class="logo-img">
91-
<span class="logo-text">HellonaGR</span>
92-
</a>
93-
<div class="nav-links">
94-
<a href="https://hellonagr.github.io/hellonagr/">Αρχική</a>
95-
<a href="https://hellonagr.github.io/hellonagr/Blog">Blog</a>
96-
<a href="https://hellonagr.github.io/hellonagr/epikinonia">Επικοινωνία</a>
97-
</div>
98-
</nav>
99-
</header>
100-
101-
<div class="container">
102-
<h1 class="page-title fade-in">Το Blog μου</h1>
103-
104-
<div id="posts">
105-
<!-- Άρθρο 1 -->
106-
<article class="post fade-in">
107-
<h2 class="post-title">Ancient city seed 1.21+</h2>
108-
<div class="post-meta">
109-
<i class="far fa-calendar-alt"></i>
110-
Δέν θυμάμαι!
111-
</div>
112-
<div class="post-content">
113-
<p></p>
114-
</div>
115-
<a href="https://hellonagr.github.io/hellonagr/warden-seed" class="read-more">
116-
Διαβάστε Περισσότερα
117-
<i class="fas fa-arrow-right"></i>
118-
</a>
119-
</article>
120-
121-
<!-- Άρθρο 2 -->
122-
<article class="post fade-in">
123-
<h2 class="post-title">4 village seed 1.21 στο spawn!</h2>
124-
<div class="post-meta">
125-
<i class="far fa-calendar-alt"></i>
126-
Δέν θυμάμαι!
127-
</div>
128-
<div class="post-content">
129-
<p>Σε αυτό το seed σε κάνει spawn ανάμεσα απο 4 plains villages!!!</p>
130-
</div>
131-
<a href="https://hellonagr.github.io/hellonagr/4villageseed" class="read-more">
132-
Διαβάστε Περισσότερα
133-
<i class="fas fa-arrow-right"></i>
134-
</a>
135-
</article>
136-
</div>
176+
<header>
177+
<p><a href="index.html">Πίσω στην αρχική</a></p>
178+
</header>
179+
<div class="container">
180+
<img src="https://yt3.googleusercontent.com/zq_PJG5ZqWI5Y6ZEjkdkqqE8UdQxUNoY2vtSDM3bHWikqVejo0SMDFj04L0s3zcLGksbCkzS-Q=s160-c-k-c0x00ffffff-no-rj"
181+
alt="HellonaGR">
182+
<a href="https://www.youtube.com/@HellonaGR" target="_blank">
183+
<h1>HellonaGR</h1>
184+
</a>
185+
<h2>BLOG</h2>
186+
</div>
187+
<main>
188+
<div class="blog-post">
189+
<img src="images/warden-seed-1.webp" alt="Ancient City Seed">
190+
<div class="blog-post-content">
191+
<h2>Ancient city seed 1.21+</h2>
192+
<p>Σε αυτό το seed σε κάνει spawn μέσα σε ένα ancient city!!!</p>
193+
<p><a href="https://hellonagr.github.io/hellonagr/warden-seed">Διαβάστε Περισσότερα</a></p>
194+
</div>
137195
</div>
138-
139-
140-
141-
<script>
142-
document.addEventListener('DOMContentLoaded', () => {
143-
const posts = document.querySelectorAll('.post');
144-
posts.forEach((post, index) => {
145-
post.style.animationDelay = `${index * 0.1}s`;
146-
});
147-
});
148-
</script>
196+
<div class="blog-post">
197+
<img src="images/4villageseed-1.png" alt="Village Seed">
198+
<div class="blog-post-content">
199+
<h2>4 village seed 1.21 στο spawn!</h2>
200+
<p>Σε αυτό το seed σε κάνει spawn ανάμεσα από 4 plains villages!!!</p>
201+
<p><a href="https://hellonagr.github.io/hellonagr/4villageseed">Διαβάστε Περισσότερα</a></p>
202+
</div>
203+
</div>
204+
</main>
205+
<footer>
206+
<p><a href="https://hellonagr.github.io/hellonagr/epikinonia">Επικοινωνία</a> μαζί μου</p>
207+
<p>Κάντε subscribe στο <a href="https://www.youtube.com/@HellonaGR" target="_blank">YouTube</a> (HellonaGR)</p>
208+
<p>Μπείτε στον <a href="https://discord.com/invite/Dkhky9ZBqp">Discord</a> server μου</p>
209+
<p>Κάντε subscribe στο <a href="https://www.planetminecraft.com/member/hellonagr">Planet Minecraft Community</a> (HellonaGR)</p>
210+
<p>Δείτε τον κώδικα του site μου στο github απο <a href="https://github.com/HellonaGR/hellonagr">εδώ</a></p>
211+
</footer>
149212
</body>
150-
</html>
213+
</html>

0 commit comments

Comments
 (0)