initial project commit

2 years ago · 8ca00e5f91
commit 8ca00e5f91
3 changed files with 132 additions and 0 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <title>Cipher</title>
+    <meta name="description" content="Web development agency"/>
+    <link href="style.css" rel="stylesheet" />
+</head>
+
+<body>
+
+<div hidden>
+    <h1>Cipher</h1>
+    <meta content="Cipher" itemprop="name"/>
+    <meta content="Web development agency" itemprop="description"/>
+</div>
+
+<div class="wrapper">
+    <h2>COMING COON<span class="dot">.</span></h2>
+    <p>CIPHER.HR</p>
+    <div class="boxes">
+        <div class="box"></div>
+        <div class="box"></div>
+        <div class="box"></div>
+        <div class="box"></div>
+    </div>
+</div>
+
+<script type="text/javascript" defer>
+    const boxes = document.querySelectorAll('.box');
+
+    for (let i = 0; i < boxes.length; i++) {
+        boxes[i].addEventListener('mouseover', function() {
+            this.style.backgroundColor = getRandomColor();
+        });
+        boxes[i].addEventListener('mouseout', function() {
+            this.style.backgroundColor = 'transparent';
+        });
+    }
+
+    function getRandomColor() {
+        let letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+</script>
+</body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,78 @@
+
+body {
+    margin: 0;
+    background: #00091B;
+    color: #fff;
+    font-family: monospace, sans-serif;
+    font-size: 18px;
+    line-height: 1;
+}
+
+
+@keyframes fadeIn {
+    from {top: 20%; opacity: 0;}
+    to {top: 50%; opacity: 1;}
+
+}
+
+@-webkit-keyframes fadeIn {
+    from {top: 20%; opacity: 0;}
+    to {top: 50%; opacity: 1;}
+
+}
+
+.wrapper {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    animation: fadeIn 1000ms ease;
+    -webkit-animation: fadeIn 1000ms ease;
+
+}
+
+h2 {
+    font-size: 50px;
+    margin: 0;
+}
+
+.dot {
+    color: #feab2a;
+}
+
+p {
+    text-align: center;
+    margin: 20px;
+
+}
+
+.boxes {
+    display: flex;
+    justify-content: space-between;
+}
+
+.box {
+    display: inline-block;
+    color: #00091B;
+    background: #fff;
+    height: 50px;
+    width: 50px;
+    border-radius: 50px;
+    border: 2px solid #fff;
+    transition: all 200ms ease;
+    position: relative;
+}
+
+.box:not(:last-child) {
+    margin-right: 15px;
+}
+
+.box:hover {
+    color: #fff;
+    cursor: pointer !important;
+    transform: scale(1.2);
+    -webkit-transform: scale(1.2);
+    text-decoration: none;
+
+}