-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog2.html
196 lines (176 loc) · 9.44 KB
/
blog2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic Chronicles | Exploring the Milky Way</title> <!-- Title -->
<link rel="shortcut icon" href="/Blogging-Website/img/favicon.png" type="image/x-icon"> <!-- Favicon -->
<!-- Linking BootStrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Linking Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar bg-dark navbar-expand-lg bg-body-tertiaryborder-bottom border-body sticky-top"
data-bs-theme="dark">
<div class="container-fluid">
<!-- Logo and Heading -->
<a class="navbar-brand gradient" href="index.html"><img src="/Blogging-Website/img/favicon.png"
alt="Cosmic_Chronicles_Logo" class="logo">Cosmic Chronicles</a>
<!-- Navigation Bar Toggle -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- Home Page -->
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<!-- Blog Page -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="blog.html">Blogs</a>
</li>
</ul>
<!-- Search Bar -->
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Blog Hero Section -->
<div class="jumbotron text-center py-5"
style="background-image: url('https://th.bing.com/th/id/OIG3.9z.nI3D9IzwNbLRFVe3V?pid=ImgGn'); background-size: cover; background-position: center; color: white; opacity: 0.9; height: 120vh; background-attachment: fixed;">
<div class="container">
<h1 class="display-4">Exploring the Milky Way</h1>
<p class="lead mt-3">Journey through our home galaxy and learn about its fascinating structure and inhabitants.</p>
</div>
</div>
<!-- Blog Content Section -->
<div class="container my-5">
<h2 class="text-center mb-4">Journey Through Our Home Galaxy</h2>
<p>
The Milky Way, our galactic home, is a vast and breathtaking celestial structure that spans over 100,000 light-years.
This swirling collection of stars, gas, and dark matter houses billions of stars, planets, and moons, along with
mysteries waiting to be unraveled.
</p>
<p>
At its heart lies a supermassive black hole, Sagittarius A*, surrounded by a dense cluster of stars. The galaxy is divided
into several spiral arms, each adorned with vibrant star-forming regions, nebulae, and stellar nurseries. These arms paint
a picture of cosmic artistry, showcasing the incredible forces at play in the universe.
</p>
<p>
The Milky Way's neighbors, the Andromeda Galaxy and the Magellanic Clouds, remind us that our galaxy is part of the
larger Local Group, which itself is a small corner of the vast cosmic web that stretches across the universe.
</p>
<p>
Exploring the Milky Way helps us understand not only the galaxy's structure and evolution but also our place in the
cosmos. The more we learn about our galactic home, the more we uncover about the nature of the universe itself.
</p>
</div>
<!-- Related Blogs Section -->
<div class="container my-5 blog-background">
<!-- <h2 class="text-center mb-4">Explore Our Latest Blogs</h2> -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<!-- Blog Card 3 -->
<div class="col">
<div class="card h-100 blog-card">
<img src="https://th.bing.com/th/id/OIG4.QdiPIOyZlLIAG0rWHMlT?pid=ImgGn" class="card-img-top"
alt="Blog Image 3">
<div class="card-body">
<h5 class="card-title">The Search for Extraterrestrial Life</h5>
<p class="card-text">Are we alone in the universe? Discover the latest efforts in the search for
alien life.</p>
</div>
<div class="card-footer">
<a href="blog3.html" class="btn btn-warning btn-lg w-100">Read More</a>
</div>
</div>
</div>
<!-- Blog Card 4 -->
<div class="col">
<div class="card h-100 blog-card">
<img src="https://th.bing.com/th/id/OIG2.ck8x1sYG9Zgm_yD3xvgV?pid=ImgGn" class="card-img-top"
alt="Blog Image 4">
<div class="card-body">
<h5 class="card-title">Dark Energy and Dark Matter</h5>
<p class="card-text">Unveiling the mysteries of the invisible forces that govern the universe.</p>
</div>
<div class="card-footer">
<a href="blog4.html" class="btn btn-warning btn-lg w-100">Read More</a>
</div>
</div>
</div>
<!-- Blog Card 5 -->
<div class="col">
<div class="card h-100 blog-card">
<img src="https://th.bing.com/th/id/OIG3.c4g6r1gWDZczJdFSpKmn?pid=ImgGn" class="card-img-top"
alt="Blog Image 5">
<div class="card-body">
<h5 class="card-title">The Life Cycle of Stars</h5>
<p class="card-text">Unraveling the birth, life, and death of stars in our universe.</p>
</div>
<div class="card-footer">
<a href="blog5.html" class="btn btn-warning btn-lg w-100">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-dark text-light py-4">
<div class="container">
<div class="row">
<!-- About Section -->
<div class="col-md-4 mb-3">
<h5>About Cosmic Chronicles</h5>
<p>
At Cosmic Chronicles, we bring you closer to the stars with fascinating blogs, stunning visuals,
and a cosmic journey like no other.
</p>
</div>
<!-- Quick Links Section -->
<div class="col-md-4 mb-3">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-light text-decoration-none">Home</a></li>
<li><a href="blog.html" class="text-light text-decoration-none">Blogs</a></li>
</ul>
</div>
<!-- Contact Section -->
<div class="col-md-4 mb-3">
<h5>Contact Us</h5>
<p>
<i class="bi bi-geo-alt"></i> Gandhinagar, Gujarat, India
</p>
<h6>Follow Us</h6>
<a href="https://www.facebook.com" target="_blank" class="text-light me-3"><i
class="bi bi-facebook"><img
src="https://img.icons8.com/?size=512&id=uLWV5A9vXIPu&format=png" alt="Facebook"
height="42px"></i></a>
<a href="https://www.twitter.com" target="_blank" class="text-light me-3"><i
class="bi bi-twitter"><img src="https://img.icons8.com/?size=512&id=13963&format=png"
alt="Twitter" height="42px"></i></a>
<a href="https://www.instagram.com" target="_blank" class="text-light"><i
class="bi bi-instagram"><img
src="https://static.vecteezy.com/system/resources/previews/023/986/514/non_2x/instagram-logo-instagram-logo-transparent-instagram-icon-transparent-free-free-png.png"
alt="Instagram" height="42px"></i></a>
</div>
</div>
<!-- Divider -->
<hr class="border-light">
<!-- Footer Bottom -->
<div class="text-center">
<p class="mb-0">Made with 💫 by Labish✨ | © 2024 Cosmic Chronicles. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>