-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (108 loc) · 5.52 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
<html>
<head>
<!-- This meta tag prevents the device to zoom in the content of the page
when the screen is too small, we set the width to the actual width of the device
that way we make sure is not zooming in or out anything. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Lora&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<div class="container container-nav">
<div class="site-title">
<h1>Living the social life</h1>
<p class="subtitle">A blog exploring minimalism in life</p>
</div>
<nav>
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="recent-posts.html">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="white desk" class="article-image">
<p class="article-info">July 23, 2019 | 3 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 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="img/food.jpg" alt="food" class="article-image">
<p class="article-info"></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="img/chair.jpg" alt="chair" class="article-image">
<p class="article-info"></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="img/plant.jpg" alt="plant" class="article-image">
<p class="article-info"></p>
</div>
</article>
</main>
<aside class="sidebar">
<div class="sidebar-widget">
<h2 class="widget-title">ABOUT ME</h2>
<img src="img/me.jpg" alt="me" class="widget-image">
<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="img/food.jpg" alt="" class="widget-image">
</div>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Simplicity and work</h3>
<img src="img/chair.jpg" alt="" class="widget-image">
</div>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Simple decorations</h3>
<img src="img/plant.jpg" alt="" class="widget-image">
</div>
</div>
</aside>
</div>
<footer>
<p><strong>Living the Simple Life</strong></p>
<p>Copyright 2019</p>
</footer>
</body>
</html>