-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
180 lines (164 loc) · 10.9 KB
/
about.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BloggersOasis</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.half-page-img {
height: 50vh;
/* 50% of the viewport height */
object-fit: cover;
/* Maintain aspect ratio, cover the entire area */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">BloggersOasis</a>
<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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="BloggersOasisBootstrap/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/BloggersOasisBootstrap/about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Personal</a></li>
<li><a class="dropdown-item" href="#">Technology</a></li>
<li><a class="dropdown-item" href="#">Travel and Food</a></li>
<li><a class="dropdown-item" href="/BloggersOasisBootstrap/blog.html">Health and Fitness</a></li>
<li><a class="dropdown-item" href="#">Fashion</a></li>
<li><a class="dropdown-item" href="#">Educational</a></li>
<li><a class="dropdown-item" href="#">Parenting</a></li>
<li><a class="dropdown-item" href="#">Finance</a></li>
<li><a class="dropdown-item" href="#">Entertainment</a></li>
<li><a class="dropdown-item" href="#">News</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">More Option</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/BloggersOasisBootstrap/contact.html">Contact</a>
</li>
</ul>
<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>
<div class="container my-4">
<div class="row featurette d-flex justify-content-center align-items-center">
<div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-1">Embrace a Healthier Lifestyle. <span
class="text-body-secondary">Transform Your Well-being.</span></h2>
<p class="lead">Achieving a balanced and healthy lifestyle involves a combination of physical activity,
nutritious eating, and mental wellness. Incorporating regular exercise, such as running, into your
daily routine is a powerful way to enhance your physical health. Running helps in improving
cardiovascular health, building strong muscles, and boosting endurance.</p>
<p class="lead">In addition to running, it’s essential to engage in a variety of fitness activities to
keep your routine exciting and effective. Strength training, yoga, and swimming are excellent ways
to build flexibility, strength, and overall fitness. Remember, staying active not only benefits your
body but also your mind by reducing stress and enhancing mental clarity.</p>
<p class="lead">Complement your exercise regimen with a balanced diet rich in fruits, vegetables, lean
proteins, and whole grains. Proper nutrition fuels your body, aids in recovery, and supports overall
health. Stay hydrated, get enough sleep, and take time for relaxation and mindfulness practices to
maintain a holistic approach to health and well-being.</p>
</div>
<div class="col-md-5">
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="700"
height="700" src="Image/health6.jpg" alt="Woman running">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500"
preserveAspectRatio="xMidYMid slice" focusable="false"> -->
<title>Placeholder</title>
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)"></rect><text x="50%" y="50%"
fill="var(--bs-secondary-color)" dy=".3em">Health</text>
</svg>
</div>
</div>
<div class="row featurette d-flex justify-content-center align-items-center">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading fw-normal lh-1">Unleash Your Inner Style Icon. <span
class="text-body-secondary">Elevate Your Fashion Game.</span></h2>
<p class="lead">Fashion is more than just clothing; it's a form of self-expression. This striking look
featuring a bold leather jacket with unique patches and accessories speaks volumes about
individuality and confidence. Embrace your personal style and let your fashion choices tell your
story.</p>
<p class="lead">From edgy streetwear to chic high fashion, finding the right pieces that resonate with
your personality can transform your appearance and boost your confidence. Explore the latest trends,
experiment with different looks, and don't be afraid to stand out. Remember, the best fashion
statement is one that reflects who you truly are.</p>
<p class="lead">Pair your daring outfits with equally bold beauty choices. Whether it's a deep, dramatic
lipstick or vibrant hair color, let your makeup and hairstyle complement your fashion. Beauty is
about enhancing what you have and expressing your unique vibe. Stay fearless, stay fabulous!</p>
</div>
<div class="col-md-5 order-md-1">
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="700"
height="700" src="Image/fashion.jpg" alt="Fashionable woman">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500"
preserveAspectRatio="xMidYMid slice" focusable="false"> -->
<title>Placeholder</title>
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)"></rect><text x="50%" y="50%"
fill="var(--bs-secondary-color)" dy=".3em">Fashion</text>
</svg>
</div>
</div>
<div class="row featurette d-flex justify-content-center align-items-center">
<div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-1">The Future of Technology. <span
class="text-body-secondary">It’ll blow your mind.</span></h2>
<p class="lead">Technology is evolving at an unprecedented pace, transforming every aspect of our lives.
From artificial intelligence to blockchain, the innovations of today are shaping the world of
tomorrow. Staying ahead of the curve means embracing these advancements and understanding their
potential impacts.</p>
<p class="lead">Coding and software development are at the heart of this technological revolution.
Whether you're a seasoned developer or just starting out, honing your programming skills can open up
a world of opportunities. Dive into languages like Python, JavaScript, and Ruby on Rails to build
the next generation of applications and services.</p>
<p class="lead">Beyond coding, emerging technologies like machine learning, cloud computing, and
cybersecurity are redefining industries. Keeping up with these trends requires continuous learning
and adaptation. Explore the latest tech news, engage with the developer community, and never stop
innovating. The future is digital, and it's happening now.</p>
</div>
<div class="col-md-5">
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="700"
height="700" src="Image/tech.jpg" alt="Code on a computer screen">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500"
preserveAspectRatio="xMidYMid slice" focusable="false"> -->
<title>Placeholder</title>
<rect width="100%" height="100%" fill="var(--bs-secondary-bg)"></rect><text x="50%" y="50%"
fill="var(--bs-secondary-color)" dy=".3em">Technology</text>
</svg>
</div>
</div>
</div>
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
<p>© 2024–2025 BloggerOasis, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
<!-- 1:06:00 -->