-
Notifications
You must be signed in to change notification settings - Fork 0
/
blogs.html
244 lines (212 loc) · 8.93 KB
/
blogs.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kazi Blog</title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">
<style>
/*
div {
color: #fff;
text-align: center;
display: inline ;
background-color: black;
width: 100%;
height: 11%;
}
aside {
position: fixed;
width: 20vw;
overflow-y: auto;
background-color: #f1f1f1;
padding: 20px;
height: 100%;
}
article {
margin-top: 3%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 50px;
}
section {
margin-left: 25%;
margin-right: 2%;
padding: 10px;
overflow-y: auto;
}
</style>
</head>
<body>
<!-- Left Panel with Blog Article Titles -->
<aside>
<!-- Blog Article Titles -->
<h2 style="border-bottom: 1px solid #555050; padding-bottom: 10px;">Blog Articles</h2>
<ul style="list-style-type: none; padding: 0; top: 0px; display: inline;">
<li><a href="#1">Change the workforce of today</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
<li><a href="#">Article 3</a></li>
<li><a href="#" >Article 13</a></li>
<!-- Add more articles as needed -->
</ul>
</aside>
<!-- Header Section with Logo and Heading -->
<div> <br>
<a href="index.html"><img src="logo.png" alt="kazi Logo" width="12%" ></a>
<h1>Kazi Workforce Blogs</h1> </div>
<!-- Main Content Section -->
<section>
<!-- Blog Article Content Goes Here -->
<div class="article" onclick="expandArticle(this)">
<h2>Article Title 1</h2>
<p>Preview of Article 1... <span class="expand-link">[Read more]</span>
<article id="1" class="article" onclick="expandArticle(this)">
<h1> "Revolutionizing Work Culture: Embracing Shifts, Remote Work, and Innovative Scheduling"</h1>
</article>
</p>
<div class="full-content" style="display: none;">
<p>Title:
In an era where the traditional 9-to-5 work model is being challenged, the global workforce
is undergoing a significant transformation. The shift from rigid schedules to flexible
alternatives not only reflects the changing dynamics of the job market but also
addresses the need for enhanced productivity, employee well-being, and efficient
time management. This article explores the evolution of work culture, focusing on
the adoption of weekly shifts, remote work, sleeping cubicles, and smarter working hours.
<h2 > The Weekly Shift Model</h2>
Kenya and Beyond
Across Kenya and the globe, companies are recognizing the benefits of moving away
from the conventional 9-to-5 workday. Embracing weekly shift models allows businesses to accommodate diverse schedules, catering to employees' personal needs and preferences. This flexibility promotes a healthier work-life balance, leading to increased job satisfaction and higher retention rates.
<h2> Embracing Remote and Hybrid Work</h2>
Breaking the Office Chains
Remote work has become more than just a trend; it's a paradigm shift. Companies are acknowledging
the advantages of remote and hybrid work models. Beyond the geographical constraints, remote work
fosters a more inclusive environment, tapping into a global talent pool. Additionally, it enhances
employee autonomy, resulting in improved productivity and creativity.
<h2> Work Cubicles for Sleeping and Working</h2>
Rethinking the Workplace
Innovative companies are introducing sleeping cubicles within office spaces. Recognizing the
importance of rest, these nap pods or sleeping cubicles offer employees a rejuvenating break.
This unconventional approach not only supports mental health but also boosts overall
productivity and focus during working hours.
<h2>Smart Working Hours</h2>
Avoiding Traffic and Maximizing Productivity
To combat the daily commute and optimize working hours, companies are experimenting with
flexible start and end times. By staggered scheduling or offering alternative hours,
businesses aim to reduce traffic congestion, enhance employee well-being, and increase
productivity. This approach allows employees to choose hours that align with their
natural energy levels, resulting in more efficient output.
<h2>Collaborative Software and Web Apps</h2>
Kazi, Notion, Buffer, and Beyond
The rise of collaborative software and web applications is instrumental in this
transformative journey. Tools like Kazi, Notion, and Buffer facilitate seamless
communication, project management, and scheduling. These platforms enable teams
to collaborate in real-time, irrespective of physical location, fostering a
culture of transparency and efficiency.
<h2>The Future of Work</h2>
As we witness the evolution of work culture, it's evident that the traditional
9-to-5 model is giving way to a more adaptive, inclusive, and innovative approach.
Embracing weekly shifts, remote work, sleeping cubicles, smart working hours,
and collaborative software is not just a trend but a necessity in the fast-paced,
ever-changing landscape of the global workforce.
<h2>The future of work lies in flexibility, creativity,</h2> and a commitment to employee
well-being. By embracing these changes, companies can not only attract top talent
but also cultivate a work environment that thrives on adaptability
and continuous improvement.</p>
</div>
</div>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article>
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<article id="13">
<h2>Article Title 2</h2>
<p>Content of the second blog article...</p>
</article>
<!-- Add more articles as needed -->
</section>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.article {
border-bottom: 1px solid #ccc;
padding: 20px;
transition: height 0.3s ease;
cursor: pointer;
}
.article:hover {
background-color: #f9f9f9;
}
.article h2 {
margin-top: 0;
}
.full-content {
height: auto;
overflow: hidden;
}
</style>
</head>
<body>
*/
<div class="article" onclick="expandArticle(this)">
<h2>Article Title 2</h2>
<p>Preview of Article 2... <span class="expand-link">[Read more]</span></p>
<div class="full-content" style="display: none;">
<p>Full content of Article 2...</p>
</div>
</div>
<!-- Add more articles with similar structure -->
<script>
function expandArticle(article) {
const content = article.querySelector('.full-content');
const expandLink = article.querySelector('.expand-link');
if (content.style.display === 'none') {
content.style.display = 'block';
expandLink.textContent = '[Show less]';
} else {
content.style.display = 'none';
expandLink.textContent = '[Read more]';
}
}
</script>
</body>
</html>