rahmatov · February 7, 2022 09:40 · Feb 7, 2022
diff --git a/500-error-page-challenge.markdown b/500-error-page-challenge.markdown
@@ -0,0 +1,7 @@
+500 Error Page Challenge
+------------------------
+Eyes following the cursor. Designed in a 500 error page. :)
+
+A [Pen](https://codepen.io/Kxrl/pen/BOPNXN) by [rps](https://codepen.io/Kxrl) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/BOPNXN).
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<div class="full-screen">
+      <div class='container'>
+        <span class="error-num">5</span>
+        <div class='eye'></div>
+        <div class='eye'></div>
+
+        <p class="sub-text">Oh eyeballs! Something went wrong. We're <span class="italic">looking</span> to see what happened.</p>
+        <a href="">Go back</a>
+      </div>
+    </div>
diff --git a/script.js b/script.js
@@ -0,0 +1,13 @@
+$(".full-screen").mousemove(function(event) {
+  var eye = $(".eye");
+  var x = (eye.offset().left) + (eye.width() / 2);
+  var y = (eye.offset().top) + (eye.height() / 2);
+  var rad = Math.atan2(event.pageX - x, event.pageY - y);
+  var rot = (rad * (180 / Math.PI) * -1) + 180;
+  eye.css({
+    '-webkit-transform': 'rotate(' + rot + 'deg)',
+    '-moz-transform': 'rotate(' + rot + 'deg)',
+    '-ms-transform': 'rotate(' + rot + 'deg)',
+    'transform': 'rotate(' + rot + 'deg)'
+  });
+});
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,55 @@
+.full-screen {
+  background-color: rgb(51, 51, 51);
+  width: 100vw;
+  height: 100vh;
+  color: white;
+  font-family: 'Arial Black';
+  text-align: center;
+}
+
+.container {
+  padding-top: 4em;
+  width: 50%;
+  display: block;
+  margin: 0 auto;
+}
+
+.error-num {
+  font-size: 8em;
+}
+
+.eye {
+  background: #fff;
+  border-radius: 50%;
+  display: inline-block;
+  height: 100px;
+  position: relative;
+  width: 100px;
+  &::after {
+    background: #000;
+    border-radius: 50%;
+    bottom: 56.1px;
+    content: ' ';
+    height: 33px;
+    position: absolute;
+    right: 33px;
+    width: 33px;
+  }
+}
+
+.italic {
+  font-style: italic;
+}
+
+p {
+  margin-bottom: 4em;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+  text-transform: uppercase;
+  &:hover {
+    color: lightgray;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>