moved beach to canvas element, css modifications, and test of dna logo

author: Dmitri DB <[email protected]> 2022-05-01 13:15:50 -0700
committer: Dmitri DB <[email protected]> 2022-05-01 13:15:50 -0700
commit: b804c7884c33c535d9375482993740e0dac4b6d1 (patch)
tree: 6a4d028b4034b57797dd0be8c892ff30a0dcf244
parent: 57b2af4cf830ad722605ddbeb0cd245cceb49151 (diff)
download: 31337itsolutions.com-b804c7884c33c535d9375482993740e0dac4b6d1.tar.gz
4 files changed, 305 insertions, 69 deletions
diff --git a/dna.css b/dna.css
new file mode 100644
index 0000000..2f67abb
--- /dev/null
+++ b/dna.css
@@ -0,0 +1,151 @@
+.wrapper{
+    position: relative;
+    margin-top: 10%;
+    margin-left: 5%;
+    margin-bottom: 5%;
+}
+
+.line{
+    position: absolute;
+    top: 0px;
+    width: 4px;
+    height: 5px;
+    background: var(--dark-blue-trans);
+    z-index: -2;
+}
+
+.circle{
+    position: absolute;
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--light-blue-trans);
+    z-index: -2;
+}
+
+.circle-top{
+    top: 0px;
+    left: -3.5px;
+}
+
+.circle-bottom{
+    bottom: 0px;
+    left: -3.5px;
+}
+
+.dot{
+    position: absolute;
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    left: -1.5px;
+}
+
+.line1{
+    margin-left: 0%;
+    animation: twist 5s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+
+.line2{
+    margin-left: 5%;
+    animation: twist 5s .05s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line3{
+    margin-left: 10%;
+    animation: twist 5s .1s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line4{
+    margin-left: 15%;
+    animation: twist 5s .15s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line5{
+    margin-left: 20%;
+    animation: twist 5s .2s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line6{
+    margin-left: 25%;
+    animation: twist 5s .25s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line7{
+    margin-left: 30%;
+    animation: twist 5s .3s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line8{
+    margin-left: 35%;
+    animation: twist 5s .35s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line9{
+    margin-left: 40%;
+    animation: twist 5s .4s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line10{
+    margin-left: 45%;
+    animation: twist 5s .45s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line11{
+    margin-left: 50%;
+    animation: twist 5s .5s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line12{
+    margin-left: 55%;
+    animation: twist 5s .55s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line13{
+    margin-left: 60%;
+    animation: twist 5s .6s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line14{
+    margin-left: 65%;
+    animation: twist 5s .65s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line15{
+    margin-left: 70%;
+    animation: twist 5s .7s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line16{
+    margin-left: 75%;
+    animation: twist 5s .75s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line17{
+    margin-left: 80%;
+    animation: twist 5s .8s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line18{
+    margin-left: 85%;
+    animation: twist 5s .85s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line19{
+    margin-left: 90%;
+    animation: twist 5s .9s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line20{
+    margin-left: 95%;
+    animation: twist 5s .95s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+@keyframes twist{
+    0%{height: 4px; top: 0px; left: 0px; transform: rotate(-720deg)}
+    50%{height: 200px; top: -100px; left: 5px;}
+    100%{height: 4px; top: 0px; left: 0px; transform: rotate(0deg);}
+}
diff --git a/dna.html b/dna.html
new file mode 100644
index 0000000..6d4b494
--- /dev/null
+++ b/dna.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>31337itsolutions</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="dna.css">
+</head>
+<body>
+  <canvas id ="beach"></canvas>
+  <div class="content">
+    <div class="wrapper">
+      <h3>31337itsolutions - The Future Is In Our DNA</h3>
+      <div class="line line1">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line2">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line3">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line4">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line5">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line6">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line7">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line8">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line9">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line10">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line11">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line12">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line13">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line14">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line15">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line16">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line17">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+      <div class="line line18">
+        <span class="circle circle-top"></span>
+        <span class="circle circle-bottom"></span>
+      </div>
+    </div>
+  </div>
+
+    <p>
+    We specialize in providing over 25 years of experience in delivering top tier IT consulting services. Our full stack runs the gamut all the way from software, hardware, network and security engineering, and in a wide range of fields such as marketing, art &amp; design, and research.
+    <div class="menu">
+      <ul class="menu">
+        <li><a href="/">Home</a></li>
+        <li><a href="/services.html">Services</a></li>
+        <li><a href="https://dev.31337itsolutions.com">Git</a></li>
+        <li><a href="/contact.html">Contact</a></li>
+      </ul>
+    </div>
+    <div id="copyright"> 
+    Copyright &copy; 2022 31337 IT Solutions
+    <br>
+    All Rights Reserved
+    </div>
+</body>
+</html>
diff --git a/index.html b/index.html
index 239959c..4946009 100644
--- a/index.html
+++ b/index.html
@@ -6,24 +6,22 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <div class="beach">
-    <div class="content">
-      <h1>Welcome to 31337itsolutions.com!</h1>
-      <p>
-      We specialize in providing over 25 years of experience in delivering top tier IT consulting services. Our full stack runs the gamut all the way from software, hardware, network and security engineering, and in a wide range of fields such as marketing, art &amp; design, and research.
-      <div class="menu">
-        <ul class="menu">
-          <li><a href="/">Home</a></li>
-          <li><a href="/services.html">Services</a></li>
-          <li><a href="https://dev.31337itsolutions.com">Git</a></li>
-          <li><a href="/contact.html">Contact</a></li>
-        </ul>
-      <div>
-      <div id="copyright"> 
-      Copyright &copy; 2022 31337 IT Solutions
-      <br>
-      All Rights Reserved
-      </div>
+  <div class="content">
+    <h1>Welcome to 31337itsolutions.com!</h1>
+    <p>
+    We specialize in providing over 25 years of experience in delivering top tier IT consulting services. Our full stack runs the gamut all the way from software, hardware, network and security engineering, and in a wide range of fields such as marketing, art &amp; design, and research.
+    <div class="menu">
+      <ul class="menu">
+        <li><a href="/">Home</a></li>
+        <li><a href="/services.html">Services</a></li>
+        <li><a href="https://dev.31337itsolutions.com">Git</a></li>
+        <li><a href="/contact.html">Contact</a></li>
+      </ul>
+    <div>
+    <div id="copyright"> 
+    Copyright &copy; 2022 31337 IT Solutions
+    <br>
+    All Rights Reserved
     </div>
   </div>
 </body>
diff --git a/style.css b/style.css
index 6049c25..53ad607 100644
--- a/style.css
+++ b/style.css
@@ -8,38 +8,41 @@
 /* main body and colors */
 
 :root {
-  --sand1: hsl(59, 100%, 86%, 0.5);
-  --sand2: hsl(59, 100%, 86%, 0.2);
-  --sand3: hsl(59, 100%, 86%, 0.1);
-  --beachborder: hsl(255, 0, 0, 0.1);
+  --sand1: hsla(59, 50%, 16%, 0.5);
+  --sand2: hsla(59, 100%, 86%, 0.2);
+  --sand3: hsla(59, 100%, 86%, 0.1);
   --dark-blue: hsl(211, 100%, 50%);
+  --dark-blue-trans: hsla(211, 100%, 50%, 0.5);
   --light-blue: hsl(179, 100%, 40%);
-  /* The 0.75 alpha here is so the dark black text flows with the gradient */
-  --textcolor: hsla(0, 0%, 0%, 0.75);
+  --light-blue-trans: hsla(179, 100%, 40%, 0.5);
+  --textcolor: hsla(0, 0%, 0%);
   --visitedcolor: hsl(211, 100%, 50%);
   --linkcolor: hsl(215, 100%, 50%);
   --textshadow: hsl(211, 100%, 50%);
 }
 
+#beach {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  /* should be below everything else */
+  z-index: -1;
+  background: linear-gradient(-45deg, var(--sand2), var(--sand3), var(--sand3));
+}
+
 html {
   width: 100%;
   font: 1.6em "SputnicSans", sans-serif;
   color: var(--textcolor);
-  background: linear-gradient(-45deg, var(--sand1), var(--light-blue), var(--dark-blue));
+  background: linear-gradient(-45deg, var(--light-blue), var(--dark-blue));
   background-size: 400% 400%;
   animation: gradient 10s ease infinite;
   height: 100vh;
+  z-index: 2;
 }
 
-/*
-body {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(to top left , var(--sand1), var(--sand2), var(--sand3), hsla(10,10%,10%,.10));
-  background-size: 100% 100%;
-}
-*/
-
 @keyframes gradient {
 	0% {
 		background-position: 0% 50%;
@@ -52,30 +55,7 @@ body {
 	}
 }
 
-a {
-  color: var(--linkcolor);
-  text-shadow: 0 0 5px var(--textshadow);
-  font-weight: 400;
-  padding-bottom: 5px;
-  background: url("wave.svg");
-  /*
-  background-repeat: repeat;
-  background-position-x: 0%;
-  background-position-y: 0%;
-  background-size: auto auto;
-  */
-  background-repeat: repeat-x;
-  background-size: 15px 5px; 
-  background-position: 1px 19px;
-  animation: move 15s linear infinite;
-  -webkit-animation: move 15s linear infinite;
-  animation-play-state: paused;
-  text-decoration: none;
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-
-@-webkit-keyframes move {
+@keyframes move {
 from {
     background-position: 2px 19px;
   }
@@ -84,13 +64,15 @@ from {
   }
 }
 
-@keyframe move {
-from {
-    background-position: 2px 19px;
-  }
-  to {
-    background-position: 500px 19px;
-  }
+a {
+  padding-bottom: 5px;
+  background: url("wave.svg");
+  background-repeat: repeat-x;
+  background-size: 20px 20px; 
+  animation: move 15s linear infinite;
+  animation-play-state: paused;
+  text-decoration: none;
+  background-color: transparent;
 }
 
 a:hover {
@@ -105,10 +87,6 @@ a:visited {
   text-shadow: 0 0 5px var(--textshadow);
 }
 
-.content {
-  margin-bottom: 1em;
-}
-
 div.menu {
   text-align: center;
 }
@@ -133,3 +111,7 @@ img#haha {
   width: 3%;
   height: 3%;
 }
+
+.content {
+  margin-bottom: 1em;
+}
author	Dmitri DB <[email protected]>	2022-05-01 13:15:50 -0700
committer	Dmitri DB <[email protected]>	2022-05-01 13:15:50 -0700
commit	b804c7884c33c535d9375482993740e0dac4b6d1 (patch)
tree	6a4d028b4034b57797dd0be8c892ff30a0dcf244
parent	57b2af4cf830ad722605ddbeb0cd245cceb49151 (diff)
download	31337itsolutions.com-b804c7884c33c535d9375482993740e0dac4b6d1.tar.gz