-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (163 loc) · 6.89 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="shortcut icon"
href="https://img.icons8.com/3d-fluency/94/globe-africa.png"
type="image/x-icon"
/>
<link
rel="shortcut icon"
href="https://icons8.com/icon/c84A8yTomT5p/internet"
type="image/x-icon"
/>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=\, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<header>
<div class="container container-flex">
<div class="title">
<h1>Living the simple life</h1>
<p>A Blog exploring minimalism in life</p>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="About-me.html">About Me</a></li>
<li><a href="recent-posts.html">Recent Posts</a></li>
</ul>
</nav>
</div>
</header>
<!-- Middle section -->
<div class="container container-flex">
<main role="main">
<article class="featured-article">
<h2 class="article-title">Finding simplicity in life</h2>
<img
src="https://images.unsplash.com/photo-1533090161767-e6ffed986c88?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image of decent background with clock"
class="article-image"
/>
<p class="article-info">July 23, 2019 | 3 comments</p>
<p class="article-body">
<strong>Life can get complicated really quickly</strong> but it
doesn't have to be! There are many ways to simplify your life,
<a href="">a few of which we've explored in the past.</a> This week
we're taking a bit of a approach though, in how you can find
simplicity in the life you already living.
</p>
<a href="" 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 ways to do
that is to keep your cooking nice and simple.
</p>
<a href="" class="article-read-more">continue reading</a>
</div>
<div class="article-recent-secondary">
<img
src="https://images.unsplash.com/photo-1496116218417-1a781b1c416c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="image of dumplings"
class="article-image"
/>
<p class="article-info">July 19, 2019 | 3 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="" class="article-read-more">continue reading</a>
</div>
<div class="article-recent-secondary">
<img
src="https://images.unsplash.com/photo-1449247709967-d4461a6a6103?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="article-image"
/>
<p class="article-info">July 12, 2019 | 3 comments</p>
</div>
</article>
<article class="article-recent">
<div class="article-recent-main">
<h2 class="article-title">Simple decorations</h2>
<p class="article-body">
A home isn't a home until 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="" class="article-read-more">continue reading</a>
</div>
<div class="article-recent-secondary">
<img
src="https://images.unsplash.com/photo-1487700160041-babef9c3cb55?q=80&w=1452&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="article-image"
/>
<p class="article-info">July 3, 2019 | 3 comments</p>
</div>
</article>
</main>
<aside class="sidebar">
<div class="sidebar-widget">
<h1 class="widget-title">About me</h1>
<img
src="https://images.unsplash.com/photo-1548213238-0da7521bd6e0?q=80&w=422&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="widget-image about-img"
/>
<p class="widget-body">
I find life better, and I'm happier, when things are nice and
simple.
</p>
</div>
<div class="sidebar-widget">
<h2 class="widget-title">Recent Posts</h2>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Keeping cooking simple</h3>
<img
src="https://images.unsplash.com/photo-1496116218417-1a781b1c416c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="widget-image"
/>
</div>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Simplicity and work</h3>
<img
src="https://images.unsplash.com/photo-1449247709967-d4461a6a6103?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="widget-image"
/>
</div>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Simple decorations</h3>
<img
src="https://images.unsplash.com/photo-1487700160041-babef9c3cb55?q=80&w=1452&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="widget-image"
/>
</div>
</div>
</aside>
</div>
<!-- footer -->
<footer>
<p>Living the Simple Life</p>
<p>Copyright 2019</p>
</footer>
</body>
</html>