-
Notifications
You must be signed in to change notification settings - Fork 1
/
blog-post.html
62 lines (56 loc) · 4.32 KB
/
blog-post.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
<!DOCTYPE html>
<!--
the main language of the page declared
if, spanish, make sure lang="es"
-->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- a viewport declaration which does not disable zooming -->
<meta name="viewport" content="width=device-width, initialscale=
1.0">
<!-- a non-blocking base64-encoded font resource -->
<link rel="stylesheet" href="fonts.css" media="none"
onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="fonts.css"></noscript>
<!-- a non-blocking stylesheet -->
<link rel="stylesheet" href="libs/normalize.css" media="none"
onload="if(media!='all')media='all'">
<!-- a non-blocking stylesheet -->
<link rel="stylesheet" href="styles.css" media="none"
onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
<!-- a descriptive label for the page -->
<title>Inclusive Design Template | HRD Portal</title>
</head>
<body>
<!-- a handy skip link for keyboard users -->
<a href="#main" id="skip-link">skip to main content</a>
<!-- logo / page navigation etc. goes here -->
<nav>
<!-- nav elements go within a semantic nav element -->
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<main id="main">
<!-- unique content of page goes here, within the main element -->
<h1>The Incan Adventure</h1>
<!-- Title should go before any content. Keyboard/screen reader users might use the keyboard key "h" to skip to the first heading. If any content is placed before this, it will be bypassed-->
<div class="meta">Published on <time datetime="2017-12-12">12/12/2017</time></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere leo ac sem congue, sed maximus quam tempus. Phasellus volutpat leo vitae turpis rhoncus, non efficitur leo malesuada. Praesent quis efficitur enim. <a href="#">Vivamus ut</a> Vestibulum non ex eu mi tincidunt interdum id in ante. Pellentesque efficitur molestie vestibulum. Donec at consectetur diam, quis tincidunt eros. Etiam eu nulla malesuada, facilisis magna ac, suscipit dolor. Curabitur sit amet nibh convallis, vestibulum sapien vel, varius purus. Fusce vel mauris a leo ultrices vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat <a href="#">velit a quam</a> laoreet, vitae aliquet purus pretium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere leo ac sem congue, sed maximus quam tempus. Phasellus volutpat leo vitae turpis rhoncus, non efficitur leo malesuada. Praesent quis efficitur enim. Vivamus ut elit est. Vestibulum non ex eu mi tincidunt interdum id in ante. Pellentesque efficitur molestie vestibulum. Donec at consectetur diam, quis tincidunt eros. Etiam eu nulla malesuada, facilisis magna ac, suscipit dolor. <a href="#">Curabiturg sit</a> amet nibh convallis, vestibulum sapien vel, varius purus. Fusce vel mauris a leo ultrices vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat velit a quam laoreet, vitae aliquet purus pretium.</p>
<img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-0/q83/s640x640/17883832_10155047765251203_7017689998795353709_n.jpg?oh=e0e234e772f9208625993e8f58a4731a&oe=5974F787" alt="Photo of Peruvian archeological site, Machu Picchu as seen from above." width="400"/>
<h2>How to get to Machu Picchu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere leo ac sem congue, sed maximus quam tempus. Phasellus volutpat leo vitae turpis rhoncus, non efficitur leo malesuada. Praesent quis efficitur enim. Vivamus ut elit est. Vestibulum non ex eu mi tincidunt interdum id in ante. Pellentesque efficitur molestie vestibulum. Donec at consectetur diam, quis tincidunt eros. Etiam eu nulla malesuada, facilisis magna ac, suscipit dolor. <a href="#">Curabiturg sit</a> amet nibh convallis, vestibulum sapien vel, varius purus. Fusce vel mauris a leo ultrices vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat velit a quam laoreet, vitae aliquet purus pretium.</p>
</main>
<!-- non-blocking javascript resources go before closing body tag -->
<script src="scripts.js"></script>
</body>
<footer>
<!-- footer content -->
</footer>
</html>