Skip to content
Snippets Groups Projects
Commit d6cf4e1d authored by bfsc19's avatar bfsc19 :flushed:
Browse files

bordinha colorida hehehe

parent 55ac110c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
html/Axeon.ttf 0 → 100644
+ 0
− 0
View file @ d6cf4e1d
File added
html/contents/borda.min.svg 0 → 100644
+ 35
− 0
View file @ d6cf4e1d
<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
html/contents/borda.svg 0 → 100644
+ 49
− 0
View file @ d6cf4e1d
<!-- 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>
html/index.html
+ 5
− 5
View file @ d6cf4e1d
......@@ -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
......
html/s.svg
+ 22
− 22
View file @ d6cf4e1d
......@@ -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"
......
html/style.css
+ 27
− 7
View file @ d6cf4e1d
......@@ -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");
......
teste.svg 0 → 100644
+ 6
− 0
View file @ d6cf4e1d
<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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment