-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
160 lines (134 loc) · 6.63 KB
/
index.html
File metadata and controls
160 lines (134 loc) · 6.63 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="img/blogfav.ico">
<link rel="stylesheet" href="style.css">
<title>Responsive Blog Website | Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<style>
.logo {
position: relative;
display: flex;
align-items: center;
margin-left: 0;
margin-right: 20px;
padding-left: 0;
}
.logo img {
height: 160px;
/* adjust size */
width: auto;
margin-left: 0;
/* margin-right: 10px; */
padding-left: 0;
object-fit: contain;
}
</style>
</head>
<body>
<header>
<div class="container container-nav">
<div class="logo">
<img src="img/JBlogLogo.png" alt="logo">
</div>
<div class="site-title">
<h1 style="font-size: 40px;">Living The Social Life</h1>
<p class="subtitle" style="font-size: 20px;">A blog exporting minimalism in life</p>
</div>
<nav>
<ul>
<li><a href="" class="current-page">Home</a></li>
<li><a href="about/">About me</a></li>
<li><a href="recent/">Recent posts</a></li>
</ul>
</nav>
</div>
</header>
<div class="container container-flex">
<main role="main">
<article class="article-featured">
<h2 class="article-title">Finding simplicity in life</h2>
<img src="img/life.jpg" alt="greenery pic" class="article-image">
<p class="article-info">June 15, 2025| 55 comments</p>
<p class="article-body">Life can get complicated really quickly, but it doesn't have to be! There are
many ways to simplify your life, a few of which we've explored in the past. This week we're taking a
bit of a approach through, in how you can find simplicity in the life you already leaving.</p>
<a href="Blog1/" class="article-read-more">CONTINUE READING</a>
</article>
<article class="article-recent">
<div class="article-recent-main">
<h2 class="article-title">Keeping cooking simple</h2>
<p class="article-body">Food is a very important part of everyone's life. If you want to be healthy,
you have to eat healthy. One of the easiest way to do that is to keep your cooking nice and
simple.</p>
<a href="Blog2/" class="article-read-more">CONTINUE READING</a>
</div>
<div class="article-recent-secondary">
<img src="img/food.jpg" alt="" class="article-image">
<p class="article-info">June 8, 2025| 28 comments</p>
</div>
</article>
<article class="article-recent">
<div class="article-recent-main">
<h2 class="article-title">Simplicity and work</h2>
<p class="article-body">Work is often a major source of stress. People get frustrated, it ruins
their relationship with others and it leads to burnout. By keeping your work life as simple as
possible, it will help balance everything out.</p>
<a href="Blog3/" class="article-read-more">CONTINUE READING</a>
</div>
<div class="article-recent-secondary">
<img src="img/work.jpg" alt="" class="article-image">
<p class="article-info">May 12, 2025| 11 comments</p>
</div>
</article>
<article class="article-recent">
<div class="article-recent-main">
<h2 class="article-title">Simple decoration</h2>
<p class="article-body">A home isn't a home untill you've decorated a little. People either don't
decorate, or they go overboard and it doesn't have the impact they were hoping for. Staying
simple will help draw the eye where you want it to and make things pop like never before.</p>
<a href="Blog4/" class="article-read-more">CONTINUE READING</a>
</div>
<div class="article-recent-secondary">
<img src="img/deco.jpg" alt="" class="article-image">
<p class="article-info">April 3, 2025| 19 comments</p>
</div>
</article>
</main>
<aside class="sidebar">
<div class="sidebar-widget">
<h2 class="widget-title">ABOUT ME</h2>
<a href="about/"><img src="img/selfphoto2.jpg" alt="HTML tutorial" ></a>
<p class="widget-body">Life feels lighter and joy comes easier when i embrace simplicity — in thoughts, things, and living.</p>
</div>
<div class="sidebar-widget">
<h2 class="widget-title">RECENT POSTS</h2>
<div class="widget-recent-post">
<!-- <img src="img/food.jpg" alt="" class="widget-image"> -->
<a href="Blog2/"><img src="img/food.jpg" alt="HTML tutorial" ></a>
<h3 class="widget-recent-post-title">Keeping cooking simple</h3>
</div>
<div class="widget-recent-post">
<!-- <img src="img/work.jpg" alt="" class="widget-image"> -->
<a href="Blog3/"><img src="img/work.jpg" alt="HTML tutorial" ></a>
<h3 class="widget-recent-post-title">Simplicity and work</h3>
</div>
<div class="widget-recent-post">
<!-- <img src="img/deco.jpg" alt="" class="widget-image"> -->
<a href="Blog4/"><img src="img/deco.jpg" alt="HTML tutorial" ></a>
<h3 class="widget-recent-post-title">Simple decoration</h3>
</div>
</div>
</aside>
</div>
<footer>
<p><strong>Living the simple life</strong></p>
<p>Copyright © 2025</p>
<p>Made with <i class="fas fa-heart"></i> Jeeshan™</p>
</footer>
</body>
</html>