From 7b5a935811ef778c08eb9453b39c03926737ede9 Mon Sep 17 00:00:00 2001 From: yuriats Date: Thu, 30 Apr 2020 06:51:38 -0400 Subject: [PATCH] Upload files to '' --- index.html | 86 +++++ layer1.html | 35 ++ style.css | 1042 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1163 insertions(+) create mode 100644 index.html create mode 100644 layer1.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f9a1a2c --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + + KAEL + + + + + + +
+

O Fabuloso mundo de KAEL

+
+ +
+ + +
+

Layer_2

+

+ Layer_2

+
+ + + +
+ + +
+

Layer_1

+

Layer_1

+
+ + +
+ + +
+

Layer_3

+

Layer_3

+
+ +
+ + +
+

Layer_4

+

Layer_4

+
+ +
+ + +
+

Layer_5

+

Layer_5

+
+ +
+ + +
+

Layer_6

+

Layer_6

+
+ +
+ + +
+

Layer_7

+

Layer_7

+
+ +
+ + +
+

Layer_8

+

Layer_8

+
+ + + + diff --git a/layer1.html b/layer1.html new file mode 100644 index 0000000..20eb445 --- /dev/null +++ b/layer1.html @@ -0,0 +1,35 @@ + + + + + Blog de desing + + + + + +
+

Layer_1 - Aula de Design

+
+
+
+
+
+
+
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea rem sunt accusamus, aliquam, exercitationem fugit harum explicabo ipsam accusantium totam nobis qui possimus autem, at saepe molestias praesentium eveniet consequatur?

+
+ +
+ + +
+

Home

+

Home

+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a71c9a8 --- /dev/null +++ b/style.css @@ -0,0 +1,1042 @@ +body, +html { + overflow: hidden; + background-color: #050704; + margin: 0; + font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; +} + +/* DEMO-SPECIFIC STYLES */ +.typewriter h1 { + color: #f0f0f0; + font-family: monospace; + overflow: hidden; /* Ensures the content is not revealed until the animation */ + border-right: 0.15em solid #ffa500; /* The typwriter cursor */ + white-space: nowrap; /* Keeps the content on a single line */ + margin: 0 auto; /* Gives that scrolling effect as the typing happens */ + letter-spacing: 0.15em; /* Adjust as needed */ + -webkit-animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite; + animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite; +} + +a { + text-decoration:none; + color: #f0f0f0; +} + +h2 { + color: #f0f0f0; + font-family: monospace; + width: auto; + margin-left: 10%; + margin-right: 10%; +} +/* The typing effect */ +/* The typewriter cursor effect */ +body { + padding-top: 1em; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; +} +@-webkit-keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } +} +@keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } +} +@-webkit-keyframes blink-caret { + from, to { + border-color: transparent; + } + 50% { + border-color: #61a26a; + } +} +@keyframes blink-caret { + from, to { + border-color: transparent; + } + 50% { + border-color: #61a26a; + } +} + +/* end typewriter */ +.f { + position: fixed; + top: 5px; + right: 10px; + font-family: 'Arial'; + font-size: 0.8em; + color: #61a26a; +} +.f a { + color: none; +} + + +/* home-project */ + +.home-p { + position: absolute; + top: 9%; + left: 12%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.home-p:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.home-p:hover .home-p-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.home-p:hover .home-p-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.home-p:hover .home-p-name { + left: 200%; + opacity: 1; +} +.home-p:hover .home-p-name:before { + width: 100%; +} +.home-p-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.home-p-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.home-p-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.home-p-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* end-home */ + + +.Project { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.Project:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.Project:hover .Project-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.Project:hover .Project-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.Project:hover .Project-name { + left: 200%; + opacity: 1; +} +.Project:hover .Project-name:before { + width: 100%; +} +.Project-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.Project-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.Project-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.Project-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + + +.roject { + position: absolute; + top: 20%; + left: 20%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.roject:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.roject:hover .roject-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.roject:hover .roject-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.roject:hover .roject-name { + left: 200%; + opacity: 1; +} +.roject:hover .roject-name:before { + width: 100%; +} +.roject-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.roject-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.roject-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.roject-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* oject */ +.oject { + position: absolute; + top: 87%; + left: 36%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.oject:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.oject:hover .oject-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.oject:hover .oject-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.oject:hover .oject-name { + left: 200%; + opacity: 1; +} +.oject:hover .oject-name:before { + width: 100%; +} +.oject-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.oject-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.oject-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.oject-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* ject */ + +.ject { + position: absolute; + top: 20%; + left: 82%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.ject:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.ject:hover .ject-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.ject:hover .ject-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.ject:hover .ject-name { + left: 200%; + opacity: 1; +} +.ject:hover .ject-name:before { + width: 100%; +} +.ject-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.ject-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.ject-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.ject-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* ect */ + +.ect { + position: absolute; + top: 70%; + left: 20%; + right: 10%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.ect:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.ect:hover .ect-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.ect:hover .ect-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.ect:hover .ect-name { + left: 200%; + opacity: 1; +} +.ect:hover .ect-name:before { + width: 100%; +} +.ect-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.ect-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.ect-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.ect-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* ct */ + +.ct { + position: absolute; + top: 70%; + left: 60%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.ct:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.ct:hover .ct-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.ct:hover .ct-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.ct:hover .ct-name { + left: 200%; + opacity: 1; +} +.ct:hover .ct-name:before { + width: 100%; +} +.ct-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.ct-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.ct-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.ct-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* t */ + +.t { + position: absolute; + top: 30%; + left: 70%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.t:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.t:hover .t-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.t:hover .t-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.t:hover .t-name { + left: 200%; + opacity: 1; +} +.t:hover .t-name:before { + width: 100%; +} +.t-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.t-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.t-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.t-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} + +/* t2 */ + +.t2 { + position: absolute; + top: 20%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + cursor: pointer; +} + +.t2:hover .imgMasked { + -webkit-clip-path: circle(400px at center); + clip-path: circle(400px at center); +} +.t2:hover .t2-hail { + width: 200px; + height: 200px; + border-radius: 200px; +} +.t2:hover .t2-hail2 { + width: 200px; + height: 200px; + border-radius: 200px; + border: 80px solid #fff4e6; + opacity: 0; +} +.t2:hover .t2-name { + left: 200%; + opacity: 1; +} +.t2:hover .t2-name:before { + width: 100%; +} +.t2-hail { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: none; + width: 40px; + height: 40px; + border-radius: 40px; + -webkit-transition: 0.5s; + transition: 0.5s; + opacity: 0.2; +} +.t2-hail2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-radius: 0; + -webkit-transition: 0.7s; + transition: 0.7s; + border: 22px solid #61a26a; + border-radius: 20px; + pointer-events: none; +} +.imgMasked { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + top: 50%; + height: 200px; + -webkit-clip-path: circle(20px at center); + clip-path: circle(20px at center); + -webkit-transition: 0.5s; + transition: 0.5s; + pointer-events: none; +} +.t2-name { + position: absolute; + max-width: 600px; + min-width: 150px; + left: 0; + top: 150%; + pointer-events: none; + -webkit-transition: 0.5s; + transition: 0.5s; + color: none; + padding: 3px 6px; + z-index: 2; + opacity: 0; +} +.t2-name:before { + content: ''; + width: 0; + height: 100%; + background-color: #61a26a; + position: absolute; + top: 0; + left: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + z-index: -1; +} \ No newline at end of file