diff --git a/html/Axeon.ttf b/html/Axeon.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..1d9377951436f873a520b65ae39ec1faefd23166
Binary files /dev/null and b/html/Axeon.ttf differ
diff --git a/html/contents/borda.min.svg b/html/contents/borda.min.svg
new file mode 100644
index 0000000000000000000000000000000000000000..96fed46540689a8607514d7ab670693228a48b75
--- /dev/null
+++ b/html/contents/borda.min.svg
@@ -0,0 +1,35 @@
+<svg width="100" height="100" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @keyframes stroke {
+ 0% {
+ stroke-dasharray: 60, 340;
+ stroke-dashoffset: 0
+ }
+
+ 5% {
+ stroke-dasharray: 50, 340;
+ stroke-dashoffset: 0
+ }
+
+ 10% {
+ stroke-dasharray: 30, 340;
+ stroke-dashoffset: 0
+ }
+
+ 15% {
+ stroke-dasharray: 15, 340;
+ stroke-dashoffset: 0
+ }
+
+ to {
+ stroke-dashoffset: 776
+ }
+ }
+ </style>
+ <linearGradient id="prefix__g" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#058d59" stop-opacity=".5" />
+ <stop offset="100%" stop-color="#6726ff" stop-opacity=".8" />
+ </linearGradient>
+ <path d="M1.5 1.5h97v97h-97v-97" stroke-linecap="square" stroke="url(#prefix__g)" stroke-width="2"
+ stroke-dasharray="30 776" style="animation:stroke 1s 1s linear infinite" />
+</svg>
\ No newline at end of file
diff --git a/html/contents/borda.svg b/html/contents/borda.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1dd90d6d9a64ce7dacfc0330badfb2908e8faf6b
--- /dev/null
+++ b/html/contents/borda.svg
@@ -0,0 +1,49 @@
+<!-- Tem que copiar como image data URI e colocar na classe "borda"-->
+<svg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
+ <style>
+ path {
+ stroke-dasharray: 50, 776;
+ stroke-width: 10px;
+
+ animation: stroke 1.5s linear infinite;
+ }
+
+ @keyframes stroke {
+ 0% {
+ stroke-dasharray: 70, 350;
+ stroke-dashoffset: 0;
+ }
+
+ 1% {
+
+ stroke-dasharray: 55, 350;
+ stroke-dashoffset: 0;
+
+ }
+
+ 5% {
+
+ stroke-dasharray: 50, 350;
+ stroke-dashoffset: 0;
+
+ }
+
+ 9% {
+
+ stroke-dasharray: 15, 350, 30;
+ stroke-dashoffset: 0;
+
+ }
+
+ 100% {
+ stroke-dashoffset: 776;
+ }
+ }
+ </style>
+ <linearGradient id='g' x1='0%' y1='0%' x2='0%' y2='100%'>
+ <stop offset="0%" style="stop-color: rgb(5, 141, 89); stop-opacity: 0.5" />
+ <stop offset="100%" style="stop-color: rgb(103, 38, 255); stop-opacity: 0.8" />
+ </linearGradient>
+ <path d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(#g)' stroke-width='3'
+ stroke-dasharray='388' />
+</svg>
diff --git a/html/index.html b/html/index.html
index 1612104d9c811c1c23f9368cbd0fbf38eb26a324..99cfe57cff3a41285c2205ddbe5bbf85cdd0f658 100644
--- a/html/index.html
+++ b/html/index.html
@@ -52,7 +52,7 @@
</span>
<span
style="z-index: 5"
- class="stacker-font text-9xl font-light stacker-font text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-green-200"
+ class="text-9xl font-light stacker-font text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-green-200"
>ABER</span
>
</h1>
@@ -73,14 +73,14 @@
<ul
class="flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400"
>
- <li class="mr-2">
+ <li class="mx-2">
<a
href="#"
- class="inline-block py-3 px-4 text-white fundo-pill rounded-lg active"
+ class="z-20 borda-colorida inline-block py-3 px-4 text-white rounded-lg active"
aria-current="page"
>
- O que é</a
- >
+ O que é
+ </a>
</li>
<li class="mr-2">
<a
diff --git a/html/s.svg b/html/s.svg
index c0809218d8e945fad694ff36e33352d98bfc2876..6d5e9f40e81d8a10c8194ba89419ab8b6d0275af 100644
--- a/html/s.svg
+++ b/html/s.svg
@@ -110,7 +110,7 @@
id="path5777"
sodipodi:nodetypes="cccccccccccc" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6"
cx="63.453964"
cy="211.04291"
@@ -158,61 +158,61 @@
id="path45917-6" />
</g>
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27"
cx="127.29717"
cy="140.3421"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-6-1"
cx="152.89384"
cy="181.6106"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2"
cx="103.27363"
cy="221.83873"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0"
cx="72.843147"
cy="189.16362"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9"
cx="119.06103"
cy="158.82912"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0"
cx="96.981491"
cy="148.30331"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6"
cx="104.96471"
cy="199.97664"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-6"
cx="143.23297"
cy="208.99345"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3"
cx="127.4573"
cy="185.37035"
r="6.108057" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-6-1-8"
cx="148.13943"
cy="154.60216"
@@ -223,77 +223,77 @@
id="path5777-5"
sodipodi:nodetypes="cccccccccccc" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-3"
cx="-152.06973"
cy="-65.544937"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-1"
cx="-88.226517"
cy="-136.24574"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-6-1-6"
cx="-62.629845"
cy="-94.977249"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-2"
cx="-112.25006"
cy="-54.749115"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-0"
cx="-142.68054"
cy="-87.424225"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-1"
cx="-96.462662"
cy="-117.75873"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-7"
cx="-110.55898"
cy="-76.611206"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-6-5"
cx="-72.290718"
cy="-67.594391"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-9"
cx="-88.066391"
cy="-91.217499"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-27-0-9-3-6-0-6-2-6-1-8-3"
cx="-67.384254"
cy="-121.98569"
r="6.108057"
transform="rotate(-179.88854)" />
<circle
- style="fill:#FFFFFF;fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
+ style="fill:rgba(200, 200, 200,0.8);fill-opacity:1;stroke: url(#gradienteBolas);stroke-width:1.4;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:markers stroke fill"
id="path1004-3-6-7-5-1"
cx="118.29242"
cy="128.50301"
diff --git a/html/style.css b/html/style.css
index c370c85f3617c17c93d5c4cb3ba8638ff3fcec0b..4c74a9e3092490da1ae0656ac2e67ff0c9cf0b20 100644
--- a/html/style.css
+++ b/html/style.css
@@ -2,6 +2,10 @@
font-family: Stacker;
src: url("Stacker.otf");
}
+@font-face {
+ font-family: Axeon;
+ src: url("Axeon.ttf");
+}
.imagem-fundo {
background-image: url("fundo.jpg") !important;
background-repeat: no-repeat;
@@ -11,7 +15,7 @@
background-attachment: fixed;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.6);
}
-
+
.svg-header {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
@@ -19,16 +23,32 @@
left: 0;
width: 100%;
height: 100%;
-}
+}
.stacker-font {
- font-family: "Stacker";
+ font-family: "Axeon";
+ font-size: 4em;
/* font-weight: 600; */
}
-.fundo-pill {
- border: 2px solid black;
- color: black !important;
- background-color: white;
+/* .fundo-pill {
+
+ border: 0.15rem solid;
+ padding: 1.5vw;
+ border-image: conic-gradient(
+ from var(--angle),
+ var(--c2),
+ var(--c1) 0.1turn,
+ var(--c1) 0.15turn,
+ var(--c2) 0.25turn
+ )
+ 30;
+ animation: borderRotate var(--d) linear infinite forwards;
+} */
+
+.borda-colorida {
+ border:3px solid black;
+ resize: both;
+ border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+QGtleWZyYW1lcyBzdHJva2V7MCV7c3Ryb2tlLWRhc2hhcnJheTo3MCwzNTA7c3Ryb2tlLWRhc2hvZmZzZXQ6MH0xJXtzdHJva2UtZGFzaGFycmF5OjU1LDM1MDtzdHJva2UtZGFzaG9mZnNldDowfTUle3N0cm9rZS1kYXNoYXJyYXk6NTAsMzUwO3N0cm9rZS1kYXNob2Zmc2V0OjB9OSV7c3Ryb2tlLWRhc2hhcnJheToxNSwzNTAsMzA7c3Ryb2tlLWRhc2hvZmZzZXQ6MH10b3tzdHJva2UtZGFzaG9mZnNldDo3NzZ9fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSJwcmVmaXhfX2ciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4ZDU5IiBzdG9wLW9wYWNpdHk9Ii41Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjcyNmZmIiBzdG9wLW9wYWNpdHk9Ii44Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMS41IDEuNWg5N3Y5N2gtOTd2LTk3IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2U9InVybCgjcHJlZml4X19nKSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iNTAgNzc2IiBzdHlsZT0iYW5pbWF0aW9uOnN0cm9rZSAxLjVzIGxpbmVhciBpbmZpbml0ZSIvPjwvc3ZnPg==") 1;
}
.full_element {
background-image: url("circuit.svg");
diff --git a/teste.svg b/teste.svg
new file mode 100644
index 0000000000000000000000000000000000000000..84aa8a4d8ab56072762cee0430b43bb159b89dee
--- /dev/null
+++ b/teste.svg
@@ -0,0 +1,6 @@
+<div class="svg-wrapper">
+ <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
+ <rect class="shape" height="60" width="320" />
+ <div class="text">ZACH SAUCIER</div>
+ </svg>
+</div>
\ No newline at end of file