-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
126 lines (115 loc) · 6.41 KB
/
index.html
File metadata and controls
126 lines (115 loc) · 6.41 KB
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
<!doctype html>
<html lang="en">
<head>
<title>I AM THE CSS KING</title>
<link rel="stylesheet" href="./css/main.css" type="text/css">
<link rel="canonical" href="I AM THE CSS KING" />
<meta charset="utf-8" />
<meta name="description" content="GAZE UPON MY WORKS AND BEHOLD THE POWER OF PURE CSS. JAVASCRIPT IS POWERLESS NEXT TO MY MY MIGHT. THE SCRIPT-SIDE IS THE PATHWAY TO DARKNESS, FEAR, AND KILOBLIGHTS." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Open Graph tags -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="I AM THE CSS KING" />
<meta property="og:description" content="GAZE UPON MY WORKS AND BEHOLD THE POWER OF PURE CSS. JAVASCRIPT IS POWERLESS NEXT TO MY MY MIGHT. THE SCRIPT-SIDE IS THE PATHWAY TO DARKNESS, FEAR, AND KILOBLIGHTS." />
<meta property="og:url" content="https://www.thecssking.com" />
<!-- No need to duplicate OG tags - twitter will check for them (https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@thecssking" />
</head>
<body>
<section></section>
<section>
Gaze upon my works and behold the <div class="power">Power</div> of <div class="pure">pure css™</div>
</section>
<section>
<span class="evil">Javascript</span> is powerless next to My Might
</section>
<section>
<!-- Thanks to https://codepen.io/timothylong/pen/HhAer/ for css only modal -->
<a href="#witness-modal" class="witness-btn">WITNESS MY POWER</a>
<div class="modal-window" id="witness-modal">
<div>
<div>A 100% CSS ONLY MODAL WINDOW</div>
<div>THERE IS NO <span class="evil">JAVASCRIPT</span> HERE</div>
<div>ONLY THE MIGHT OF <span class="pure">PURE CSS™</span></div>
<div><a href="#modal-close" class="modal-close-btn">RETURN TO MY DOMAIN </a></div>
</div>
</div>
</section>
<section>
<div>NO LIBRARIES HERE. THIS IS ALL <span class="pure">Pure CSS™</span>, straight out of the box.</div>
</section>
<section>
<div class="square">
<div class="title">WOW</div>
</div>
</section>
<section>
Just Kidding - I love listening to events and reaction properties. That is how i made the button below
</section>
<section>
<div class="frustration-button">
<div class="btn1 btn">CLICK TO SEE THE BENEFITS OF JAVASCRIPT</div>
<div class="btn2 btn">CLICK TO SEE THE BENEFITS OF JAVASCRIPT</div>
</div>
</section>
<section>
The Truth: There is no benefit to javascript, only blight, and extra kilobytes (Kiloblights).
</section>
<section class="decree-announcement">
MY ROYAL DECREE
</section>
<section>
<!-- Thanks too: https://codepen.io/efost/pen/rrjvkk -->
<div class="decree">
<p><span class="caps">A</span>ll can be accomplished through the power of Pure CSS™. There is no feature or dynamic event that can not be implemented in the one true language. Developers fight amongst themselves to determine the best <span class="strike">Javascript</span> framework, yet they do not realize the power that has been at their fingertips all along.</p>
<p>Woe be unto him who uses the script tag. It is a tempting fruit, gleaming in the eye of the developer, yet it is poison. One script tag leads to two, leads to three, and soon your website is bogged down under the weight of a thousand kiloblights. There is no salvation in the dark shadow of <span class="strike">Javascript</span>, only lag and feature creep. It is not too late to turn to the light of Pure CSS™.</p>
<p>I am a kind and merciful ruler. I welcome of all of my lost sheep back to the fold with open brackets. I too was once seduced by the script-side. It is a painful journey of listening to events and reacting to changes. In the dark world of <span class="strike">Javascript</span>, the developer console can seem like your only friend. Yet, you must know that there is somebody for you, somebody who has been there all along. The one true language: Pure CSS™.</p>
</div>
</section>
<section>
The script-side is the pathway to darkness, fear, and kiloblights.
<div class="kiloblights">Kiloblights</div>
</section>
<section>
How many server requests on this <span class="pure">Pure CSS™</span> Page?
</section>
<section>
<div class="request-num holy">1</div>
</section>
<section>
How many server requests on a <span class="evil">Javascript</span> Page?
</section>
<section>
<div class="hide-num">
<div class="request-num red">999999999999999999999999</div>
</div>
</section>
<section>
This represents the normal development lifecycle. You start with one or two scripts, then end up with more requests than there are
atoms in the universe.
</section>
<section>
The price of ignoring the <span class="decree-announcement">The CSS King</span>
<div class="price">
<div><div>Console Warnings</div></div>
<div><div>Kiloblights</div></div>
<div><div>Cookies</div></div>
<div><div>Ransomeware</div></div>
<div><div>XSS Attacks</div></div>
<div><div>Debugging</div></div>
<div><div>Page BLoat</div></div>
</div>
</section>
<section class="repent">
<button>
I am a <div class="benevolent text-change"></div> and <div class="merciful text-change"></div> ruler. All who have strayed will be <div class="text-change welcomed"></div>. <span class="action">Click the <span class="pure">Pure Css™</span> button below to repent.</span>
<div class="repent-btn"></div>
</button>
</section>
<section class="footer">
Made by <a href="https://www.jormars.com">Jordan</a>, who is actually only a minor duke. Thanks too <a href="http://lea.verou.me/css3patterns/#stars">Lea Verou</a>, <a href="https://codepen.io/areimel/pen/BKazmQ">Alex Reimel</a>, <a href="https://codepen.io/timothylong/pen/HhAer/">Timothy Long</a>, <a href=" https://codepen.io/efost/pen/rrjvkk">Eric Foster</a>, <a href="https://codepen.io/yemon/pen/pWoROm">Nooray Yemon</a>, and a few more.
</section>
</body>
</html>