-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
59 lines (59 loc) · 5.99 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Simple Tutorial Template">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="level42.ca">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Tutorial Template</title>
<link rel="stylesheet" href="./css/tut.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<header>
<h1>Hello World!</h1>
<p>Tutorial Demo.</p>
</header>
<section id=tutorial>
<div class="step-container">
<img class="tutorial-image" src="http://placehold.it/500x350">
<div class="tutorial-content">
<h2>Step 1:</h2>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis, nulla non aliquet sodales, nunc turpis gravida purus, pellentesque tristique ex dolor ut mi. Cras vitae risus a diam gravida tempor eget congue mauris. Proin turpis risus, lacinia id velit ac, finibus ultricies elit. Phasellus bibendum mi vitae arcu malesuada, semper tincidunt purus euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin malesuada purus eget suscipit iaculis. Curabitur vestibulum cursus felis. Nam eget luctus turpis. Etiam ut semper sapien. Phasellus ut tempor ipsum. Sed a velit orci.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="divider-line"></div>
<div class="step-container">
<img class="tutorial-image" src="http://placehold.it/500x350">
<div class="tutorial-content">
<h2>Step 2:</h2>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis, nulla non aliquet sodales, nunc turpis gravida purus, pellentesque tristique ex dolor ut mi. Cras vitae risus a diam gravida tempor eget congue mauris. Proin turpis risus, lacinia id velit ac, finibus ultricies elit. Phasellus bibendum mi vitae arcu malesuada, semper tincidunt purus euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin malesuada purus eget suscipit iaculis. Curabitur vestibulum cursus felis. Nam eget luctus turpis. Etiam ut semper sapien. Phasellus ut tempor ipsum. Sed a velit orci.</p>
<p>Aenean aliquam tristique est, nec facilisis erat aliquam eu. Vivamus posuere est eu quam convallis elementum. Suspendisse aliquet sagittis ipsum, quis convallis leo semper ac. Morbi accumsan metus id elit pellentesque vulputate. Mauris volutpat sodales lacinia. Praesent in eleifend tellus. Maecenas non quam lacinia neque convallis ultricies. Sed in tortor a orci volutpat viverra. Mauris enim lectus, sollicitudin non luctus a, mattis at arcu. Proin nibh ipsum, aliquet suscipit nulla venenatis, maximus rutrum neque. Morbi ultrices justo tincidunt enim sollicitudin rhoncus.</p>
<p>Sed interdum egestas mauris, eget convallis elit scelerisque at. Nam lobortis felis semper orci imperdiet dictum. Integer nec sagittis velit. Duis varius lobortis eros. Praesent tincidunt non lectus ut consequat. Sed a mattis urna, eu luctus nunc. Fusce ut enim vel enim pretium rhoncus quis sit amet ante. Aenean risus dui, tincidunt sit amet magna ac, scelerisque aliquet magna. Curabitur quis quam a sapien dapibus placerat. Donec euismod, nunc sit amet viverra viverra, tortor quam ultricies urna, quis malesuada tortor neque at ante. Donec dictum maximus fringilla. Nulla ante tellus, venenatis at lacus vitae, tincidunt tristique diam. Sed lacinia, magna eu aliquam egestas, nulla orci finibus nulla, ac placerat tortor lectus sit amet mauris. In mauris mauris, finibus sit amet tempus sed, accumsan et massa. Suspendisse finibus lectus sit amet nisi dignissim tincidunt. Nullam luctus ante id augue porta, a pretium ex sagittis.</p>
</div>
</div>
<div class="divider-line"></div>
<div class="step-container">
<img class="tutorial-image" src="http://placehold.it/500x350">
<div class="tutorial-content">
<h2>Step 3:</h2>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis, nulla non aliquet sodales, nunc turpis gravida purus, pellentesque tristique ex dolor ut mi. Cras vitae risus a diam gravida tempor eget congue mauris. Proin turpis risus, lacinia id velit ac, finibus ultricies elit. Phasellus bibendum mi vitae arcu malesuada, semper tincidunt purus euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin malesuada purus eget suscipit iaculis. Curabitur vestibulum cursus felis. Nam eget luctus turpis. Etiam ut semper sapien. Phasellus ut tempor ipsum. Sed a velit orci.</p>
<p>Aenean aliquam tristique est, nec facilisis erat aliquam eu. Vivamus posuere est eu quam convallis elementum. Suspendisse aliquet sagittis ipsum, quis convallis leo semper ac. Morbi accumsan metus id elit pellentesque vulputate. Mauris volutpat sodales lacinia. Praesent in eleifend tellus. Maecenas non quam lacinia neque convallis ultricies. Sed in tortor a orci volutpat viverra. Mauris enim lectus, sollicitudin non luctus a, mattis at arcu. Proin nibh ipsum, aliquet suscipit nulla venenatis, maximus rutrum neque. Morbi ultrices justo tincidunt enim sollicitudin rhoncus.</p>
</div>
</div>
</section>
<footer>
<p>Footer Text</p>
</footer>
</body>
</html>