-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (148 loc) · 7.66 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="From the Soul">
<title> ex Animus | From the Soul </title>
<link rel="stylesheet/less" type="text/css" href="resources/style.less">
<link rel="stylesheet" type ="text/css" href="resources/desktop.css">
</head>
<body>
<div id="overlay">
</div>
<div id="landing">
<h1 class="title">ex Animus</h1>
<h3 class="subtitle">From the Soul</h3>
<button class="cta">Reveles <span>discover</span></button>
</div>
<header>
<h1>ex Animus</h1>
</header>
<nav>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<path d="M44.237 16.35L31.99 28.69 19.65 16.443l-1.407 1.42 12.34 12.246-12.248 12.34 1.42 1.408 12.247-12.34 12.34 12.248 1.407-1.42L33.41 30.1l12.247-12.34"/>
</svg>
<ul class="menu">
<li>Main</li>
<li>About Project</li>
<li>Developer Info</li>
</ul>
</nav>
<!-- Mainly for semantic purposes.
Allows for JS function that gets siblings to only get all sections when searching for each sibling -->
<div id="sectionsWrapper">
<section id="main">
<button class="toggleNav"> Navigation </button>
<div id="quotesWrapper">
<h1 class="number"></h1>
<p class="quote"></p>
</div>
<ul id="controls">
<li id="next">Next</li>
<li id="previous">Previous</li>
<li id="random">Random</li>
</ul>
</section>
<section id="about">
<button class="backToMain"> Back To Main </button>
<h1>About ex Animus</h1>
<p>
Every one of us goes through challenges and have to endure demanding situations throughout life. Often, through simply being open, attentive and reflective, I've found that there is usually something to be gained and understood from that which we experience: snippets of wisdom that may sum up the ordeal and or provide guidance for when similar things appear once again.
<br><br>
This project features proverbs and words of inspiration/wisdom that I've come up with: stemming from ordeals I've personally gone through and observed in life, having been formed based on my own personal evaluations and understanding of what they could possibly teach me.
<br><br>
Having accumulated so many over a period of time, I decided to share them here as the focal point of this project. I felt that I could do something creative and productive with all of them and that someone may vibe closely with an entry, or perhaps gain some inspiration/wisdom from another.
</p>
</section>
<section id="devInfo">
<button class="backToMain"> Back To Main </button>
<h1>Developer Info</h1>
<div id="infoWrapper">
<h3 id="projectName">Project Name <span>ex Animus<span></h3>
<h3 id="version">Current Version <span>2.0</span></h3>
<h3 id="techUsed">Technology Used</h3>
<ul id="techUsed">
<li class="tag">HTML5</li>
<li class="tag">CSS3</li>
<li class="tag">Javascript </li>
</ul>
<h3 id="inspirations">Inspirations</h3>
<ul id="inspirations">
<li class="tag">Latin Language</li>
<li class="tag">Wisdom</li>
<li class="tag">Life Experiences</li>
<li class="tag">Minimalism</li>
<li class="tag">Typography</li>
</ul>
<button id="changelog">Changelog <span>+</span></button>
<div class="versionRecord">
<div class="version">
<h1>Version 2.3</h1>
<ul class="versionNotes">
<li>More adjustment's made to the project's UI for Desktop screen sizes</li>
</ul>
</div>
<div class="version">
<h1>Version 2.2</h1>
<ul class="versionNotes">
<li>Adjustments made to project's UI for desktop / tablet screen sizes</li>
<li>Changed the project's title in the index.html head</li>
</ul>
</div>
<div class="version">
<h1>Version 2.1</h1>
<ul class="versionNotes">
<li>Fade in animation upon loading/reloading project</li>
<li>Changelog section of Developer Info is now toggleable via button</li>
<li>(5) New Entries</li>
</ul>
</div>
<div class="version">
<h1>Version 2.0</h1>
<ul class="versionNotes">
<li>Revamped Design Layout</li>
</ul>
</div>
<div class="version">
<h1>Version 1.1</h1>
<ul class="versionNotes">
<li>Adjustments made to interface's main body and elements when viewed on mobile screen</li>
</ul>
</div>
<div class="version">
<h1>Version 1.0</h1>
<ul class="versionNotes">
<li>Initial Release</li>
</ul>
</div>
</div>
</div>
<div class="plugWrapper">
<h3>Design + Development By</h3>
<h1>viaMedia</h1>
<ul class="social">
<li>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.73.084-.73 1.205.085 1.838 1.237 1.838 1.237 1.07 1.835 2.81 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.136-.303-.54-1.523.104-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.137 3 .404 2.28-1.552 3.285-1.23 3.285-1.23.644 1.653.24 2.873.12 3.176.764.84 1.23 1.91 1.23 3.22 0 4.61-2.806 5.625-5.476 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.824.57 4.8-1.574 8.236-6.074 8.236-11.37 0-6.626-5.373-12-12-12"/></svg>
</li>
<li>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.05 3.233c-.04.78-.17 1.203-.28 1.485-.15.374-.32.64-.6.92-.28.28-.55.453-.92.598-.28.11-.71.24-1.49.276-.85.038-1.1.047-3.24.047s-2.39-.01-3.24-.05c-.78-.04-1.21-.17-1.49-.28-.38-.15-.64-.32-.92-.6-.28-.28-.46-.55-.6-.92-.11-.28-.24-.71-.28-1.49-.03-.84-.04-1.1-.04-3.23s.01-2.39.04-3.24c.04-.78.17-1.21.28-1.49.14-.38.32-.64.6-.92.28-.28.54-.46.92-.6.28-.11.7-.24 1.48-.28.85-.03 1.1-.04 3.24-.04zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg>
</li>
</ul>
</div>
</section>
</div>
<script src="resources/quotes.js"></script>
<script src="resources/script.js"></script>
<script src="resources/less.min.js" type="text/javascript"></script>
<script>
hide(landing);
hide(nav);
display(section_Main);
hide(section_About);
hide(section_DevInfo);
</script>
</body>
</html>