You've already forked TheComputersIdentity
mirror of
https://github.com/MrLyallCSIT/TheComputersIdentity.git
synced 2026-01-18 07:09:39 +00:00
Leet, Binary and English Version
This commit is contained in:
Alexander Davis
76
1337.html
Normal file
76
1337.html
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Story by HTML5 UP
|
||||||
|
html5up.net | @ajlkn
|
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
|
|
||||||
|
Note: Only needed for demo purposes. Delete for production sites.
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>The Computer's Identity - Leet Version</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Wrapper -->
|
||||||
|
<div id="wrapper" class="divided">
|
||||||
|
|
||||||
|
<!-- One -->
|
||||||
|
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
|
||||||
|
<div class="content">
|
||||||
|
<h1>The Computer's Identity</h1>
|
||||||
|
<h2>Leet Version</h2>
|
||||||
|
<p class="major">Leet (or "1337"), also known as eleet or leetspeak, is an alternative alphabet for many languages that is used primarily on the Internet. It uses some characters to replace others in ways that play on the similarity of their glyphs via reflection or other resemblance. For example, leet spellings of the word leet include 1337 and l33t; eleet may be spelled 31337 or 3l33t.</p>
|
||||||
|
<h2>Language Selection</h2>
|
||||||
|
<p class="major">Please select the language you would like to read in.</p>
|
||||||
|
<ul class="actions vertical">
|
||||||
|
<li><a href="video.html" class="button special big wide smooth-scroll-middle">Watch the Video</a></li>
|
||||||
|
<li><a href="english.html" class="button special big wide smooth-scroll-middle">English</a></li>
|
||||||
|
<li><a href="binary.html" class="button special big wide smooth-scroll-middle">Binary (Number Base 2)</a></li>
|
||||||
|
<li><a href="octal.html" class="button special big wide smooth-scroll-middle">Octal (Number Base 8)</a></li>
|
||||||
|
<li><a href="deanary.html" class="button special big wide smooth-scroll-middle">ASCII (Number Base 10)</a></li>
|
||||||
|
<li><a href="hex.html" class="button special big wide smooth-scroll-middle">Hexadecimal (Number Base 16)</a></li>
|
||||||
|
<li><a href="1337.html" class="button special big wide smooth-scroll-middle">Leet (1337)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/banner.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Two -->
|
||||||
|
<section class="wrapper style1 align-center">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>D4 c0MPU7ER'Z 1d3n7YTy (lE3t v3rzY0N)</h2>
|
||||||
|
<p>]-[|\|1c|AN, Bu7 N0 ()n3 3\/3R C|\|0wZ, N0 O|\|E 3\/3r R3Al|s3z, D4 73cHn1k1agn'5 |d3|\|TI7y, E\/3ry ]\/[()RNIn6, D4 bl4kk B()x Y|\| My R00M 833pS, @nD |T w4CES uP W]-[3n 1 d0, D4 fANz wh|R 4|\||) ZP!n UP, D4 1()u|)3zT 7hYNG !|\| mY r00M, 0TH3R th4n my alar]\/[, bUT Yt'Z 1|)3n7i7y, |T'S name, 4g3 an|) ]-[0bBY3z, !z GEn3r4L1z3d, To 3V3RY0N3 bUt ]\/[3, 7HYz Y5n'7 @ r0mant!k R3La7IoNz]-[1p, wiTh 4 m4N @N|) ]-[1s c0]\/[PUt3r, 8u7 M()R3 oF a komPa]\[!()ns]-[YP, Wh3RE man me3T5 mach|NE, My m@Ch|NE5 1d3NTiTy YZ aN U]\[UZuA1 one, m!]\[e 15 k4ll3d 6O1i4T]-[, aS a InZY|)3 ;0Ke w|Th 4N0THEr c()Mpu73R i 8UIl7, CaLL3d |)4\/i|), |)4\/Id |Z d4 8IGgER 0f d4 T\/\/o, 4N|) |s d4 le5S p0weRphul O]\[3, 60l14T]-['S i|)eN7ity C]-[4gnG3S 0n a r3Gul4r BaZIZ, He 1s 3 Y34rZ OLd, | gOt h!]\/[ AnD m@D3 h!m WhE|\| Y Z74rTEd UNI, Y3t odDly en()U6H, g()lI47H 1z @ khr|57|A|\|, ANd Z0m3H0W D035 beTTeR 3vaNGelIzM ThA|\| | d(), BuT 3veRY0]\[e juSt ASsumes 7HaT I'M Cr@Sy, tha7 1'm JuST 4 \/\/HackY 1t d00d, 8Ut I'm |\|O7, |ph j00 T]-[1gnk k4r3fulLy, 3v3rY7h1ng ha5 4n Y|)3NTYty, |'m Wr1T|Ng 7hYS O|\| ]\/[Y P]-[oN3, a|\| 3XPEnSIv3 ph0n3 ! ]-[Av3 ]\[4]\/[3D j4rvIZ, bekAuSE Yt'S MY DiG|741 d00dal 4s5!57@gn7, 3V3n thOUGh i7 only WoRcZ bY 5ending pU1Z3Z 0ph 3l3kTR1k|7Y t0 07heR ThY]\[GS T]-[@7 |)O d4 s4]\/[3, YDEgnTiTy |ph ph0Ugnd ign EVErYT]-[|gng, 1 f()UN|) My ||)3NT|7Y 1N k0MPuT3RZ, D4 th!nGS tHa7 bU!1D mY P4s5i0n 4nd Car3, WhIl3 I u53 Th4t PazS10N 4Nd k4R3 to 8u!ld 7H3M, bU7 I'M NoT jusT a 7ekh]\[Ik|AN, | aM a khR1sT|an 7EChgnYk1An, aND tHat'S d4 bE5T KINd ()f 73cHgnik|4gn, b3CausE WIT]-[ gOd'5 PoW3R, | k4n BE d4 Bezt 0u7 7]-[3r3, wITh N0 1dEntYtY, @ k0]\/[pUt3r I5 n0Th!gng, YeT W17h iDEntI7Y, 4 comPUter kaN 8E d4 zmal1 1ItTlE B0X, tha7 C]-[AN63S |)3@tH t0 1ife, D4 5Mal1 L|7tle 80x, T]-[47 briNGS ;()y tO m|lL|0]\[s, 4 zmaL1 L|7TlE 8Okz, T]-[4t gE7s abuSEd, |)O35 TH|S n07 sOUn|) F4MYli@r? Z0M37]-[YnG 0r s()]\/[30ne 7H@7 bR!nGS j0y 7O m11LY0]\[5? an|) Z0m3thYN6 0r 5()]\/[30gn3 tHaT G37Z 4BuS3d? 1 tR347 mY c0mpUtERz, D4 samE \/\/4y i TreaT PE0Pl3 4r0UNd ME, B3CAUSE d4 w0R1d n3eDS LOv3, k0]\/[puTEr'S Do|\|'t h4v3 f33l|NgZ, 4gnD MaYb3 T]-[3y w1Ll ogn3 d4Y, 8UT tHI]\[k ab()uT on3 thYgng, wOuld j00 trE4T j00r L0ved ognEZ d4 Zam3 W4Y j00 Tr347 j00R cOMPut3RZ? b3c4U53 3\/eN 7H()ugH Th3Y d0n't H4vE f3EL1N6s, k0mpu7eRS have 4]\[ YdEnt17Y.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="wrapper style1 align-center">
|
||||||
|
<div class="inner">
|
||||||
|
<ul class="icons">
|
||||||
|
<li><a href="https://twitter.com/alexanderedavis" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||||
|
<li><a href="https://www.facebook.com/Alexander.Davis1995" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||||
|
<li><a href="https://www.instagram.com/alexanderedavis/" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alexanderedavis/" class="icon style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
|
||||||
|
<li><a href="mailto:contact@alexanderdavis.tech" class="icon style2 fa-envelope"><span class="label">Email</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<p>© The Computer's Identity. Created and Designed by <a href="https://www.alexanderdavis.tech">Alexander Davis</a>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="assets/js/jquery.min.js"></script>
|
||||||
|
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||||
|
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||||
|
<script src="assets/js/skel.min.js"></script>
|
||||||
|
<script src="assets/js/util.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
65
binary.html
Normal file
65
binary.html
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Story by HTML5 UP
|
||||||
|
html5up.net | @ajlkn
|
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>The Computer's Identity - Binary</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Wrapper -->
|
||||||
|
<div id="wrapper" class="divided">
|
||||||
|
|
||||||
|
<!-- One -->
|
||||||
|
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
|
||||||
|
<div class="content">
|
||||||
|
<h1>Story</h1>
|
||||||
|
<p class="major"><!--[-->A (modular, highly tweakable) responsive one-page template designed by <a href="https://html5up.net">HTML5 UP</a> and released for free under the <a href="https://html5up.net/license">Creative Commons</a>.<!--]--></p>
|
||||||
|
<ul class="actions vertical">
|
||||||
|
<li><a href="#first" class="button big wide smooth-scroll-middle">Get Started</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/banner.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Two -->
|
||||||
|
<section class="wrapper style1 align-center">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>Massa sed condimentum</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante sed ex pharetra lacinia sit amet vel massa. Donec facilisis laoreet nulla eu bibendum. Donec ut ex risus. Fusce lorem lectus, pharetra pretium massa et, hendrerit vestibulum odio lorem ipsum.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="wrapper style1 align-center">
|
||||||
|
<div class="inner">
|
||||||
|
<ul class="icons">
|
||||||
|
<li><a href="https://twitter.com/alexanderedavis" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||||
|
<li><a href="https://www.facebook.com/Alexander.Davis1995" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||||
|
<li><a href="https://www.instagram.com/alexanderedavis/" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alexanderedavis/" class="icon style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
|
||||||
|
<li><a href="mailto:contact@alexanderdavis.tech" class="icon style2 fa-envelope"><span class="label">Email</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<p>© The Computer's Identity. Created and Designed by <a href="https://www.alexanderdavis.tech">Alexander Davis</a>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="assets/js/jquery.min.js"></script>
|
||||||
|
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||||
|
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||||
|
<script src="assets/js/skel.min.js"></script>
|
||||||
|
<script src="assets/js/util.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
128
english.html
Normal file
128
english.html
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!--
|
||||||
|
Story by HTML5 UP
|
||||||
|
html5up.net | @ajlkn
|
||||||
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>The Computer's Identity - English Version</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Wrapper -->
|
||||||
|
<div id="wrapper" class="divided">
|
||||||
|
|
||||||
|
<!-- One -->
|
||||||
|
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
|
||||||
|
<div class="content">
|
||||||
|
<h1>The Computer's Identity</h1>
|
||||||
|
<h2>English Version</h2>
|
||||||
|
<p class="major">The English language is one of the most commonly used around the world with approximately 330 to 360 million people speak English as their first language</p>
|
||||||
|
<h2>Language Selection</h2>
|
||||||
|
<p class="major">Please select the language you would like to read in.</p>
|
||||||
|
<ul class="actions vertical">
|
||||||
|
<li><a href="video.html" class="button special big wide smooth-scroll-middle">Watch the Video</a></li>
|
||||||
|
<li><a href="english.html" class="button special big wide smooth-scroll-middle">English</a></li>
|
||||||
|
<li><a href="binary.html" class="button special big wide smooth-scroll-middle">Binary (Number Base 2)</a></li>
|
||||||
|
<li><a href="octal.html" class="button special big wide smooth-scroll-middle">Octal (Number Base 8)</a></li>
|
||||||
|
<li><a href="deanary.html" class="button special big wide smooth-scroll-middle">ASCII (Number Base 10)</a></li>
|
||||||
|
<li><a href="hex.html" class="button special big wide smooth-scroll-middle">Hexadecimal (Number Base 16)</a></li>
|
||||||
|
<li><a href="1337.html" class="button special big wide smooth-scroll-middle">Leet (1337)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/banner.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Two -->
|
||||||
|
<section class="wrapper style1 align-center">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>The Computers Identity</h2>
|
||||||
|
<p>Three years,</br>Is all it takes to make a technician,</br>But no one ever knows,</br>No one ever realises,</br>The technician's identity,</br></br>Every morning,</br>The black box in my room beeps,</br>And it wakes up when I do,</br>The fans whir and spin up,</br>The loudest thing in my room,</br>Other than my alarm,</br></br>But it's identity,</br>It's name, age and hobbies,</br>Is generalised,</br>To everyone but me,</br></br>This isn't a romantic relationship,</br>With a man and his computer,</br>But more of a companionship,</br>Where man meets machine,</br></br>My machines identity is an unusual one,</br>Mine is called Goliath,</br>As a inside joke with another computer I built,</br>Called David,</br></br></br>David is the bigger of the two,</br>And is the less powerful one,</br>Goliath's identity changes on a regular basis,
|
||||||
|
</br>He is 3 years old,
|
||||||
|
</br>I got him and made him when I started uni,
|
||||||
|
</br></br>
|
||||||
|
Yet oddly enough,
|
||||||
|
</br>Goliath is a Christian,
|
||||||
|
</br>And somehow does better evangelism than I do,
|
||||||
|
</br>But everyone just assumes that I'm crazy,
|
||||||
|
</br></br>
|
||||||
|
That I'm just a whacky IT guy,
|
||||||
|
</br>But I'm not,
|
||||||
|
</br>If you think carefully,
|
||||||
|
</br>Everything has an identity,
|
||||||
|
</br></br>
|
||||||
|
I'm writing this on my phone,
|
||||||
|
</br>An expensive phone I have named JARVIS,
|
||||||
|
</br>Because it's my digital personal assistant,
|
||||||
|
</br>Even though it only works by sending pulses of electricity to other things that do the same,
|
||||||
|
</br></br>
|
||||||
|
</br>Identity if found in everything,
|
||||||
|
</br>I found my identity in computers,
|
||||||
|
</br>The things that build my passion and care,
|
||||||
|
</br>While I use that passion and care to build them,
|
||||||
|
</br></br>
|
||||||
|
But I'm not just a Technician,
|
||||||
|
</br>I am a Christian Technician,
|
||||||
|
</br>And that's the best kind of Technician,
|
||||||
|
</br>Because with God's power,
|
||||||
|
</br>I can be the best out there,
|
||||||
|
</br></br>
|
||||||
|
</br>With no identity,
|
||||||
|
</br>A computer is nothing,
|
||||||
|
</br>Yet with identity,
|
||||||
|
</br>A computer can be the small little box,
|
||||||
|
</br>That changes death to life,
|
||||||
|
</br></br>
|
||||||
|
The small little box,
|
||||||
|
</br>That brings joy to millions,
|
||||||
|
</br>A small little box,
|
||||||
|
</br>That gets abused,
|
||||||
|
</br>
|
||||||
|
</br>Does this not sound familiar?
|
||||||
|
</br>Something or someone that brings joy to millions?
|
||||||
|
</br>And something or someone that gets abused?
|
||||||
|
</br>
|
||||||
|
</br>I treat my computers,
|
||||||
|
</br>The same way I treat people around me,
|
||||||
|
</br>Because the world needs love,
|
||||||
|
</br>
|
||||||
|
</br>Computer's don't have feelings,
|
||||||
|
</br>And maybe they will one day,
|
||||||
|
</br>But think about one thing,
|
||||||
|
</br>Would you treat your loved ones the same way you treat your computers?
|
||||||
|
</br>Because even though they don't have feelings,
|
||||||
|
</br>Computers have an identity. </p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="wrapper style1 align-center">
|
||||||
|
<div class="inner">
|
||||||
|
<ul class="icons">
|
||||||
|
<li><a href="https://twitter.com/alexanderedavis" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||||
|
<li><a href="https://www.facebook.com/Alexander.Davis1995" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||||
|
<li><a href="https://www.instagram.com/alexanderedavis/" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alexanderedavis/" class="icon style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
|
||||||
|
<li><a href="mailto:contact@alexanderdavis.tech" class="icon style2 fa-envelope"><span class="label">Email</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<p>© The Computer's Identity. Created and Designed by <a href="https://www.alexanderdavis.tech">Alexander Davis</a>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="assets/js/jquery.min.js"></script>
|
||||||
|
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||||
|
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||||
|
<script src="assets/js/skel.min.js"></script>
|
||||||
|
<script src="assets/js/util.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
323
index.html
323
index.html
@@ -6,7 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Story by HTML5 UP</title>
|
<title>The Computer's Identity - Language Selection</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="stylesheet" href="assets/css/main.css" />
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||||||
@@ -19,10 +19,17 @@
|
|||||||
<!-- One -->
|
<!-- One -->
|
||||||
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
|
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>Story</h1>
|
<h1>The Computer's Identity</h1>
|
||||||
<p class="major"><!--[-->A (modular, highly tweakable) responsive one-page template designed by <a href="https://html5up.net">HTML5 UP</a> and released for free under the <a href="https://html5up.net/license">Creative Commons</a>.<!--]--></p>
|
<h2>Language Selection</h2>
|
||||||
|
<p class="major">Please select the language you would like to read in.</p>
|
||||||
<ul class="actions vertical">
|
<ul class="actions vertical">
|
||||||
<li><a href="#first" class="button big wide smooth-scroll-middle">Get Started</a></li>
|
<li><a href="video.html" class="button special big wide smooth-scroll-middle">Watch the Video</a></li>
|
||||||
|
<li><a href="english.html" class="button special big wide smooth-scroll-middle">English</a></li>
|
||||||
|
<li><a href="binary.html" class="button special big wide smooth-scroll-middle">Binary (Number Base 2)</a></li>
|
||||||
|
<li><a href="octal.html" class="button special big wide smooth-scroll-middle">Octal (Number Base 8)</a></li>
|
||||||
|
<li><a href="deanary.html" class="button special big wide smooth-scroll-middle">ASCII (Number Base 10)</a></li>
|
||||||
|
<li><a href="hex.html" class="button special big wide smooth-scroll-middle">Hexadecimal (Number Base 16)</a></li>
|
||||||
|
<li><a href="1337.html" class="button special big wide smooth-scroll-middle">Leet (1337)</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
@@ -30,311 +37,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Two -->
|
|
||||||
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first">
|
|
||||||
<div class="content">
|
|
||||||
<h2>Magna etiam feugiat</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante sed ex pharetra lacinia sit amet vel massa. Donec facilisis laoreet nulla eu bibendum. Donec ut ex risus. Fusce lorem lectus, pharetra pretium massa et, hendrerit vestibulum odio lorem ipsum dolor sit amet.</p>
|
|
||||||
<ul class="actions vertical">
|
|
||||||
<li><a href="#" class="button">Learn More</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="image">
|
|
||||||
<img src="images/spotlight01.jpg" alt="" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Three -->
|
|
||||||
<section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
|
|
||||||
<div class="content">
|
|
||||||
<h2>Tempus adipiscing</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante sed ex pharetra lacinia sit amet vel massa. Donec facilisis laoreet nulla eu bibendum. Donec ut ex risus. Fusce lorem lectus, pharetra pretium massa et, hendrerit vestibulum odio lorem ipsum dolor sit amet.</p>
|
|
||||||
<ul class="actions vertical">
|
|
||||||
<li><a href="#" class="button">Learn More</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="image">
|
|
||||||
<img src="images/spotlight02.jpg" alt="" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Four -->
|
|
||||||
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in">
|
|
||||||
<div class="content">
|
|
||||||
<h2>Pharetra etiam nulla</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante sed ex pharetra lacinia sit amet vel massa. Donec facilisis laoreet nulla eu bibendum. Donec ut ex risus. Fusce lorem lectus, pharetra pretium massa et, hendrerit vestibulum odio lorem ipsum dolor sit amet.</p>
|
|
||||||
<ul class="actions vertical">
|
|
||||||
<li><a href="#" class="button">Learn More</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="image">
|
|
||||||
<img src="images/spotlight03.jpg" alt="" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Five -->
|
|
||||||
<section class="wrapper style1 align-center">
|
|
||||||
<div class="inner">
|
|
||||||
<h2>Massa sed condimentum</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante sed ex pharetra lacinia sit amet vel massa. Donec facilisis laoreet nulla eu bibendum. Donec ut ex risus. Fusce lorem lectus, pharetra pretium massa et, hendrerit vestibulum odio lorem ipsum.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Gallery -->
|
|
||||||
<div class="gallery style2 medium lightbox onscroll-fade-in">
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/01.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/01.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Ipsum Dolor</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/02.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/02.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Feugiat Lorem</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/03.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/03.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Magna Amet</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/04.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/04.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Sed Tempus</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/05.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/05.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Ultrices Magna</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/06.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/06.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Sed Tempus</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/07.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/07.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Ipsum Lorem</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/08.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/08.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Magna Risus</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/09.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/09.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Tempus Dolor</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/10.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/10.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Sed Etiam</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/11.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/11.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Magna Lorem</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<a href="images/gallery/fulls/12.jpg" class="image">
|
|
||||||
<img src="images/gallery/thumbs/12.jpg" alt="" />
|
|
||||||
</a>
|
|
||||||
<div class="caption">
|
|
||||||
<h3>Ipsum Dolor</h3>
|
|
||||||
<p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><span class="button small">Details</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Six -->
|
|
||||||
<section class="wrapper style1 align-center">
|
|
||||||
<div class="inner">
|
|
||||||
<h2>Ipsum sed consequat</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante sed ex pharetra lacinia sit amet vel massa. Donec facilisis laoreet nulla eu bibendum. Donec ut ex risus. Fusce lorem lectus, pharetra pretium massa et, hendrerit vestibulum odio lorem ipsum.</p>
|
|
||||||
<div class="items style1 medium onscroll-fade-in">
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-diamond"></span>
|
|
||||||
<h3>Lorem</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-save"></span>
|
|
||||||
<h3>Ipsum</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-bar-chart"></span>
|
|
||||||
<h3>Dolor</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-wifi"></span>
|
|
||||||
<h3>Amet</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-cog"></span>
|
|
||||||
<h3>Magna</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-paper-plane"></span>
|
|
||||||
<h3>Tempus</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-desktop"></span>
|
|
||||||
<h3>Aliquam</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-refresh"></span>
|
|
||||||
<h3>Elit</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-hashtag"></span>
|
|
||||||
<h3>Morbi</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-bolt"></span>
|
|
||||||
<h3>Turpis</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-envelope"></span>
|
|
||||||
<h3>Ultrices</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<span class="icon style2 major fa-leaf"></span>
|
|
||||||
<h3>Risus</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Seven -->
|
|
||||||
<section class="wrapper style1 align-center">
|
|
||||||
<div class="inner medium">
|
|
||||||
<h2>Get in touch</h2>
|
|
||||||
<form method="post" action="#">
|
|
||||||
<div class="field half first">
|
|
||||||
<label for="name">Name</label>
|
|
||||||
<input type="text" name="name" id="name" value="" />
|
|
||||||
</div>
|
|
||||||
<div class="field half">
|
|
||||||
<label for="email">Email</label>
|
|
||||||
<input type="email" name="email" id="email" value="" />
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="message">Message</label>
|
|
||||||
<textarea name="message" id="message" rows="6"></textarea>
|
|
||||||
</div>
|
|
||||||
<ul class="actions">
|
|
||||||
<li><input type="submit" name="submit" id="submit" value="Send Message" /></li>
|
|
||||||
</ul>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="wrapper style1 align-center">
|
<footer class="wrapper style1 align-center">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<ul class="icons">
|
<ul class="icons">
|
||||||
<li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
<li><a href="https://twitter.com/alexanderedavis" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||||
<li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
<li><a href="https://www.facebook.com/Alexander.Davis1995" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||||
<li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
<li><a href="https://www.instagram.com/alexanderedavis/" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
<li><a href="#" class="icon style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
|
<li><a href="https://www.linkedin.com/in/alexanderedavis/" class="icon style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
|
||||||
<li><a href="#" class="icon style2 fa-envelope"><span class="label">Email</span></a></li>
|
<li><a href="mailto:contact@alexanderdavis.tech" class="icon style2 fa-envelope"><span class="label">Email</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>© Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
|
<p>© The Computer's Identity. Created and Designed by <a href="https://www.alexanderdavis.tech">Alexander Davis</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
@@ -349,4 +62,4 @@
|
|||||||
<script src="assets/js/main.js"></script>
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user