-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (102 loc) · 5.67 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Ubuntu:300,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<div class="container container-flex">
<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-page" href="index.html">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> <!-- / .container -->
</header>
<div class="container container-flex">
<!-- Use main to indicate the main content. Accesibility reason, more than one per page will mess up the Accesibility. -->
<main>
<!-- using the tags article for the posts -->
<article class="article-featured">
<!-- we want to show the img first but we will do it with a flex property on the CSS side. Put the title first for Accesibility so the screen reader will read the title first and then the img -->
<h2 class="article-title">Finding simplicity in life</h2>
<img src="img/life.jpg" alt="a very clean minimal desk with a lamp, a plant an a clock on the wall." class="article-img"/>
<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="img/food.jpg" alt="two dumplings on a wood plate with chopsticks" class="article-img">
<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="img/work.jpg" alt="a chair white chair at a white desk on a white wall" class="article-img">
<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="img/deco.jpg" alt="a green plant in a clear, round vase with water in it" class="article-img">
<p class="article-info">July 3, 2019 | 3 comments</p>
</div>
</article>
</main>
<!-- In this case using the aside tag for the widgets of the sidebar -->
<aside class="sidebar">
<div class="sidebar-widget">
<!-- widget sidebar about me -->
<h2 class="widget-title">ABOUT ME</h2>
<img src="img/about-me.jpg" alt="john doe" class="widget-image">
<p class="widget-body">I find life better, and I'm happier, when things are nice and simple.</p>
</div>
<!-- widget sidebar recent posts -->
<div class="sidebar-widget">
<h2 class="widget-title">RECENT POSTS</h2>
<div class="widget-recent-post">
<!-- we want to show the img first but we will do it with a flex property on the CSS side. Put the title first for Accesibility so the screen reader will read the title first and then the img -->
<h3 class="widget-recent-post-title">Keeping cooking simple</h3>
<img src="img/food.jpg" alt="two dumplings on a wood plate with chopsticks" class="widget-img">
</div>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Simplicity and work</h3>
<img src="img/work.jpg" alt="a chair white chair at a white desk on a white wall" class="widget-img">
</div>
<div class="widget-recent-post">
<h3 class="widget-recent-post-title">Simple decorations</h3>
<img src="img/deco.jpg" alt="a green plant in a clear, round vase with water in it" class="widget-img">
</div>
</div> <!-- closes sidebar-widget -->
</aside>
</div> <!-- / .container -->
<footer>
<p><strong>Living the Simple Life</strong></p>
<p>Copyright 2019</p>
</footer>
</body>
</html>