-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (108 loc) · 4.43 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="slidestyles.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript" src="remarkScript.js"></script>
</head>
<body>
<textarea id="source">
name:whiteS
layout:true
class: center, middle, whiteS
---
background-image: url(remark.png)
---
name:whiteS
layout:true
class: center, middle, whiteS
---
#Welcome to <br> Easy Remark
---
name:navyS
layout:true
class:center, middle,navyS
---
##.shadow[Welcome to Easy Remark!]
.left[Easy Remark is a pre-designed template for the Remark Presentation Tool. Easy Remark comes standard with beautiful aesthetic properties, allowing allows the user to focus on the content.]
.left[Properties of Easy Remark include]
+ Color combinations
+ Font styles and sizes
+ Easy to read notes in presentation mode (Keyboard "P")
+ Simple picture-friendly slide layouts
+ Sleek black page margins
+ 16:9 native aspect ratio
.left[The following slides display some of the layouts and styles of Easy Remark. Enjoy!]
???
These are some notes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent vel ligula nec ipsum egestas porta sed non dolor.
Praesent vitae quam sed magna feugiat feugiat id ac risus.
---
name:redS
layout:true
class:center, middle,redS
---
##.shadow[Right Image]
.rightImageBig[.shadow[<img src="remark.png">]]
.leftWordsSmall[A Layout for large images on the right side of the screen, accompanied by text on the left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel ligula nec ipsum egestas porta sed non dolor. Praesent vitae quam sed magna feugiat feugiat id ac risus.]
---
name:blueS
layout:true
class:center, middle,blueS
---
##.shadow[Left Image]
.leftImageBig[.shadow[<img src="remark.png">]]
.rightWordsSmall[A Layout for large images on the left side of the screen, accompanied by text on the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel ligula nec ipsum egestas porta sed non dolor. Praesent vitae quam sed magna feugiat feugiat id ac risus.]
---
name:tealS
layout:true
class:center, middle,tealS
---
##.shadow[Big Image]
.bigImage[.shadow[<img src="remark.png">]]
---
name:orangeS
layout:true
class:center, middle,orangeS
---
##.shadow[Caption]
.midImage[.shadow[<img src="remark.png">]]
.caption[A layout to highlight an Image and provide a centered caption beneath. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
---
name:purpleS
layout:true
class:center, middle,purpleS
---
##.shadow[Lists]
1. Both ordered and unordered lists are automatically justified and styled.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Praesent vel ligula nec ipsum egestas porta sed non dolor.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Praesent vel ligula nec ipsum egestas porta sed non dolor.
+ Praesent vitae quam sed magna feugiat feugiat id ac risus.
---
name:greenS
layout:true
class: center, middle, greenS
---
##.shadow[Left Words]
.leftWordsBig[A layout that focuses on words, placing them on the left with a narrow image on the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel ligula nec ipsum egestas porta sed non dolor. Praesent vitae quam sed magna feugiat feugiat id ac risus. Quisque sodales, enim eget commodo dapibus, ex erat ullamcorper ligula, quis posuere tellus sem congue urna. Vestibulum metus metus, imperdiet a urna sit amet, varius finibus enim. In vitae blandit purus. Morbi malesuada laoreet lectus, eu porttitor dui euismod vitae. ]
.rightImageSmall[.shadow[<img src="narrowRemark.png">]]
---
name:grayS
layout:true
class: center, middle, grayS
---
##.shadow[Right Words]
.rightWordsBig[A layout that focuses on words, placing them on the left with a narrow image on the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel ligula nec ipsum egestas porta sed non dolor. Praesent vitae quam sed magna feugiat feugiat id ac risus. Quisque sodales, enim eget commodo dapibus, ex erat ullamcorper ligula, quis posuere tellus sem congue urna. Vestibulum metus metus, imperdiet a urna sit amet, varius finibus enim. In vitae blandit purus. Morbi malesuada laoreet lectus, eu porttitor dui euismod vitae. ]
.leftImageSmall[.shadow[<img src="narrowRemark.png">]]
</textarea>
<script type="text/javascript" src="remark.js">
</script>
<script type="text/javascript">
var slideshow = remark.create();
</script>
</body>
</html>