From b804c7884c33c535d9375482993740e0dac4b6d1 Mon Sep 17 00:00:00 2001 From: Dmitri DB Date: Sun, 1 May 2022 13:15:50 -0700 Subject: moved beach to canvas element, css modifications, and test of dna logo --- dna.css | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ dna.html | 105 ++++++++++++++++++++++++++++++++++++++++++ index.html | 34 +++++++------- style.css | 84 ++++++++++++++-------------------- 4 files changed, 305 insertions(+), 69 deletions(-) create mode 100644 dna.css create mode 100644 dna.html 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 @@ + + + + + 31337itsolutions + + + + + +
+
+

31337itsolutions - The Future Is In Our DNA

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +

+ 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 & design, and research. +

+ +
+ + + diff --git a/index.html b/index.html index 239959c..4946009 100644 --- a/index.html +++ b/index.html @@ -6,24 +6,22 @@ -
-
-

Welcome to 31337itsolutions.com!

-

- 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 & design, and research. -

- -
- +
+

Welcome to 31337itsolutions.com!

+

+ 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 & design, and research. +

+ +
+
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; +} -- cgit v1.2.3