Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit b600fa7

Browse files
ch4rlesexech4rlesexe
authoredJan 20, 2025
Add files via upload
1 parent 7af6740 commit b600fa7

21 files changed

+3148
-0
lines changed
 

‎blogs/1.html

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>The Evolution of Web Development - 3Z0</title>
7+
<link rel="stylesheet" href="/style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9+
<style>
10+
/* Hero Image Section */
11+
.hero-container {
12+
width: 100%;
13+
height: 450px;
14+
overflow: hidden;
15+
}
16+
17+
.hero-image {
18+
width: 100%;
19+
height: 100%;
20+
object-fit: cover;
21+
}
22+
23+
/* Blog Post Content Box */
24+
.blog-post-content {
25+
max-width: 900px;
26+
margin: -80px auto 40px; /* Adjusted margin to overlap hero image */
27+
padding: 20px;
28+
background: var(--light-background);
29+
border-radius: 10px;
30+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
31+
position: relative;
32+
z-index: 10;
33+
}
34+
35+
.blog-post-content h1 {
36+
color: var(--primary-color);
37+
font-size: 2.2rem;
38+
margin-bottom: 10px;
39+
}
40+
41+
.blog-post-content p {
42+
font-size: 1.1rem;
43+
line-height: 1.8;
44+
color: var(--text-color);
45+
margin-bottom: 15px;
46+
}
47+
48+
.blog-post-content blockquote {
49+
border-left: 4px solid var(--primary-color);
50+
padding: 15px;
51+
font-style: italic;
52+
background: var(--border-color);
53+
margin: 20px 0;
54+
}
55+
56+
.post-meta {
57+
font-size: 0.9rem;
58+
color: var(--light-text);
59+
margin-bottom: 20px;
60+
}
61+
62+
.callout {
63+
background: var(--primary-color);
64+
color: white;
65+
padding: 20px;
66+
border-radius: 5px;
67+
font-size: 1.1rem;
68+
margin: 20px 0;
69+
}
70+
71+
.related-posts {
72+
margin-top: 40px;
73+
}
74+
75+
.related-posts h3 {
76+
font-size: 1.5rem;
77+
margin-bottom: 15px;
78+
color: var(--primary-color);
79+
}
80+
81+
.related-posts ul {
82+
list-style: none;
83+
padding-left: 0;
84+
}
85+
86+
.related-posts ul li {
87+
margin-bottom: 10px;
88+
}
89+
90+
.related-posts ul li a {
91+
text-decoration: none;
92+
color: var(--secondary-color);
93+
font-weight: bold;
94+
}
95+
96+
.related-posts ul li a:hover {
97+
color: var(--primary-color);
98+
}
99+
</style>
100+
</head>
101+
<body>
102+
<!-- Navbar -->
103+
<nav class="navbar">
104+
<div class="nav-content">
105+
<div class="logo">3Z0</div>
106+
<div class="menu-toggle">
107+
<i class="fas fa-bars"></i>
108+
</div>
109+
<ul class="nav-links">
110+
<li><a href="/">Home</a></li>
111+
<li><a href="/pages/blog.html">Blog</a></li>
112+
<li><a href="/pages/about.html">About</a></li>
113+
<li><a href="/pages/contact.html">Contact</a></li>
114+
</ul>
115+
</div>
116+
</nav>
117+
118+
<!-- Hero Image -->
119+
<div class="hero-container">
120+
<img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e" alt="Web Development Evolution" class="hero-image">
121+
</div>
122+
123+
<!-- Blog Post Content -->
124+
<main class="blog-post-content">
125+
<h1>The Evolution of Web Development</h1>
126+
<p class="post-meta">Published on <strong>January 14th, 2025</strong> at <strong>4:35pm</strong> by <strong>Charlie</strong>.</p>
127+
128+
<p>Web development has undergone a massive transformation over the years. From simple text-based websites to dynamic applications powered by artificial intelligence, the journey has been incredible.</p>
129+
130+
<h2>The Early Days</h2>
131+
<p>Back in the 1990s, the internet was a new and unexplored space. Websites were mostly text-heavy, using basic **HTML** and very limited styling through **CSS**.</p>
132+
133+
<blockquote>"The web is not just about technology; it’s about making human connections." - Tim Berners-Lee</blockquote>
134+
135+
<p>Static websites dominated the web, with tools like **GeoCities** and **FrontPage** allowing users to create simple pages. JavaScript was introduced in 1995, paving the way for interactive elements.</p>
136+
137+
<h2>The Rise of JavaScript Frameworks</h2>
138+
<p>By the 2000s, JavaScript gained popularity, and libraries like jQuery made scripting easier. However, it was the introduction of **React, Angular, and Vue.js** that truly changed web development.</p>
139+
140+
<div class="callout">
141+
💡 Did you know? The first website ever created is still live! Check out <a href="http://info.cern.ch" target="_blank" style="color:white; text-decoration:underline;">Tim Berners-Lee's original website</a>.
142+
</div>
143+
144+
<h2>The Modern Web</h2>
145+
<p>Today, web applications are built with cutting-edge technologies like **Node.js, TypeScript, and AI-driven development**. The rise of **PWAs (Progressive Web Apps)** has further blurred the lines between websites and native apps.</p>
146+
147+
<h2>What’s Next?</h2>
148+
<p>The future of web development lies in **Web3, AI-assisted coding, and immersive 3D experiences**. As the industry continues to evolve, one thing remains constant: the web will always be a place of innovation.</p>
149+
150+
<!-- Related Posts -->
151+
<div class="related-posts">
152+
<h3>Related Articles</h3>
153+
<ul>
154+
<li><a href="#">Why Dark Mode is Taking Over UI Design</a></li>
155+
<li><a href="#">Top JavaScript Frameworks in 2025</a></li>
156+
<li><a href="#">The Role of AI in Web Development</a></li>
157+
</ul>
158+
</div>
159+
</main>
160+
161+
<!-- Footer -->
162+
<footer class="footer">
163+
<div class="footer-content">
164+
<div class="footer-section">
165+
<h4>About 3Z0</h4>
166+
<p>A modern platform for sharing ideas, knowledge, and experiences.</p>
167+
</div>
168+
<div class="footer-section">
169+
<h4>Quick Links</h4>
170+
<ul>
171+
<li><a href="/">Home</a></li>
172+
<li><a href="/pages/blog.html">Blog</a></li>
173+
<li><a href="/pages/about.html">About</a></li>
174+
<li><a href="/pages/contact.html">Contact</a></li>
175+
</ul>
176+
</div>
177+
<div class="footer-section">
178+
<h4>Connect</h4>
179+
<div class="social-links">
180+
<a href="https://solo.to/zeitgeist" target="_blank" rel="noopener noreferrer">
181+
<i class="fas fa-globe"></i>
182+
</a>
183+
<a href="https://x.com/n35b" target="_blank" rel="noopener noreferrer">
184+
<i class="fab fa-twitter"></i>
185+
</a>
186+
<a href="https://www.youtube.com/@n35b" target="_blank" rel="noopener noreferrer">
187+
<i class="fab fa-youtube"></i>
188+
</a>
189+
<a href="https://www.instagram.com/bi_t" target="_blank" rel="noopener noreferrer">
190+
<i class="fab fa-instagram"></i>
191+
</a>
192+
<a href="https://www.tiktok.com/@combs" target="_blank" rel="noopener noreferrer">
193+
<i class="fab fa-tiktok"></i>
194+
</a>
195+
<a href="https://discord.com" target="_blank" rel="noopener noreferrer">
196+
<i class="fab fa-discord"></i>
197+
</a>
198+
</div>
199+
</div>
200+
201+
</div>
202+
<div class="footer-bottom">
203+
<p>&copy; 2024 3Z0. All rights reserved.</p>
204+
</div>
205+
</footer>
206+
207+
<script src="/js/main.js"></script>
208+
</body>
209+
</html>

‎blogs/2.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Minimalist Design Principles - 3Z0</title>
7+
<link rel="stylesheet" href="/style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9+
<style>
10+
.hero-container {
11+
width: 100%;
12+
height: 450px;
13+
overflow: hidden;
14+
}
15+
.hero-image {
16+
width: 100%;
17+
height: 100%;
18+
object-fit: cover;
19+
}
20+
.blog-post-content {
21+
max-width: 900px;
22+
margin: -80px auto 40px;
23+
padding: 20px;
24+
background: var(--light-background);
25+
border-radius: 10px;
26+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27+
position: relative;
28+
z-index: 10;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<nav class="navbar">
34+
<div class="nav-content">
35+
<div class="logo">3Z0</div>
36+
<ul class="nav-links">
37+
<li><a href="/">Home</a></li>
38+
<li><a href="/pages/blog.html">Blog</a></li>
39+
<li><a href="/pages/about.html">About</a></li>
40+
<li><a href="/pages/contact.html">Contact</a></li>
41+
</ul>
42+
</div>
43+
</nav>
44+
45+
<div class="hero-container">
46+
<img src="https://images.unsplash.com/photo-1516542076529-1ea3854896f2" alt="Minimalist Design" class="hero-image">
47+
</div>
48+
49+
<main class="blog-post-content">
50+
<h1>Minimalist Design Principles</h1>
51+
<p class="post-meta">Published on <strong>January 11th, 2025</strong> at <strong>1:35pm</strong> by <strong>Charlie</strong>.</p>
52+
53+
<p>Minimalist design is not just about simplicity; it's about clarity, functionality, and aesthetics. The concept has revolutionized modern design, making interfaces more intuitive and reducing cognitive load.</p>
54+
55+
<h2>The Core Principles of Minimalism</h2>
56+
<p>Minimalist design focuses on **clean layouts, ample white space, and essential elements only**. This helps users interact with content more efficiently while creating a **modern and visually pleasing experience**.</p>
57+
58+
<blockquote>"Simplicity is the ultimate sophistication." - Leonardo da Vinci</blockquote>
59+
60+
<h2>Why Minimalism Works</h2>
61+
<ul>
62+
<li>Enhances user experience by reducing distractions.</li>
63+
<li>Improves website performance by eliminating unnecessary elements.</li>
64+
<li>Creates timeless and elegant aesthetics.</li>
65+
</ul>
66+
67+
<div class="callout">
68+
💡 **Fun Fact:** Apple’s design philosophy is heavily influenced by minimalism, leading to its iconic product designs.
69+
</div>
70+
71+
<h2>Implementing Minimalist Design</h2>
72+
<p>To adopt minimalism in design, consider these key strategies:</p>
73+
<ol>
74+
<li>Use a **limited color palette**.</li>
75+
<li>Employ **simple typography** with readable fonts.</li>
76+
<li>Remove non-essential UI elements.</li>
77+
<li>Prioritize **whitespace and clear hierarchy**.</li>
78+
</ol>
79+
80+
<h2>Final Thoughts</h2>
81+
<p>Minimalist design is not just about reducing elements but about refining them to create a seamless user experience. By adopting these principles, designers can build modern, elegant, and highly functional interfaces.</p>
82+
83+
<div class="related-posts">
84+
<h3>Related Articles</h3>
85+
<ul>
86+
<li><a href="#">Top UI Trends for 2025</a></li>
87+
<li><a href="#">Why Less is More in Web Design</a></li>
88+
</ul>
89+
</div>
90+
</main>
91+
92+
<!-- Footer -->
93+
<footer class="footer">
94+
<div class="footer-content">
95+
<div class="footer-section">
96+
<h4>About 3Z0</h4>
97+
<p>A modern platform for sharing ideas, knowledge, and experiences.</p>
98+
</div>
99+
<div class="footer-section">
100+
<h4>Quick Links</h4>
101+
<ul>
102+
<li><a href="/">Home</a></li>
103+
<li><a href="/pages/blog.html">Blog</a></li>
104+
<li><a href="/pages/about.html">About</a></li>
105+
<li><a href="/pages/contact.html">Contact</a></li>
106+
</ul>
107+
</div>
108+
<div class="footer-section">
109+
<h4>Connect</h4>
110+
<div class="social-links">
111+
<a href="https://solo.to/zeitgeist" target="_blank"><i class="fas fa-globe"></i></a>
112+
<a href="https://x.com/n35b" target="_blank"><i class="fab fa-twitter"></i></a>
113+
<a href="https://www.youtube.com/@n35b" target="_blank"><i class="fab fa-youtube"></i></a>
114+
<a href="https://www.instagram.com/bi_t" target="_blank"><i class="fab fa-instagram"></i></a>
115+
<a href="https://www.tiktok.com/@combs" target="_blank"><i class="fab fa-tiktok"></i></a>
116+
<a href="https://discord.com" target="_blank"><i class="fab fa-discord"></i></a>
117+
</div>
118+
</div>
119+
</div>
120+
<div class="footer-bottom">
121+
<p>&copy; 2024 3Z0. All rights reserved.</p>
122+
</div>
123+
</footer>
124+
</body>
125+
</html>
There was a problem loading the remainder of the diff.

0 commit comments

Comments
 (0)
Failed to load comments.