Untitled
unknown
plain_text
2 years ago
4.2 kB
5
Indexable
body{ background-color:#191917; position: absolute; background-image: url(../Portafolio/resources/images/fondo2.png); background-repeat: no-repeat; background-size: 580px 680px; background-position-x: center; background-position-y: 20px; } .container1{ display: flex; justify-content: space-between; margin: 250px; background-position: center; background-size: cover; text-align: center; position: relative; } .h1{ color: #141dc7; font-family: 'Blank River'; /*Decipher PERSONAL USE*/ font-size: 6em; left: 0px; top: 444px; transform: translateY(-70%) translateX(0%); text-align: center; text-shadow: -2px 0 #ff0000, 2px 0 #00ff00, 0 2px #0000ff, 0 -2px #ffff00; animation: glitch 2s infinite; } @keyframes glitch { 0% { text-shadow: -2px 0 #ff0000, 2px 0 #FFFFFF, 0 2px #0000ff, 0 -2px #ffff00; } 20% { text-shadow: 2px 0 #ff0000, -2px 0 #FFFFFF, 0 -2px #0000ff, 0 2px #ffff00; } 40% { text-shadow: -2px 0 #ff0000, 2px 0 #FFFFFF, 0 2px #0000ff, 0 -2px #ffff00; } 60% { text-shadow: 2px 0 #ff0000, -2px 0 #FFFFFF, 0 -2px #0000ff, 0 2px #ffff00; } 80% { text-shadow: -2px 0 #ff0000, 2px 0 #FFFFFF, 0 2px #0000ff, 0 -2px #ffff00; } 100% { text-shadow: -2px 0 #ff0000, 2px 0 #FFFFFF, 0 2px #0000ff, 0 -2px #ffff00; } } .h3{ color: #141dc7; font-family: 'a dripping marker'; font-size: 4.5em; left: 0px; top: 444px; transform: translateY(-230%) translateX(0%); text-align: center; margin-bottom: -150px; } .h4{ color: #F6FC57; font-family: 'a dripping marker'; font-size: 4.3em; left: 0px; transform: translateY(-230%) translateX(0%); text-align: center; margin-top: 50px; margin-bottom: -150px; } .h5{ color: #ffffff; font-family: 'Streetart Demo'; /*cambiar tipografia, 05052e*/ font-size: 11.5em; transform: translateY(-110%) translateX(0%); text-align: center; margin-bottom: -650px; z-index: 2; position: absolute; top: 0; left: 0; z-index: -1; } @keyframes graffiti { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .h6{ color: #FF0080; font-family: 'a dripping marker'; font-size: 4.4em; left: 0px; transform: translateY(-230%) translateX(0%); text-align: center; margin-top: 50px; margin-bottom: -150px; } .h2{ color: #141dc7; font-family: 'Comico'; left: 200px; top: 200px; font-size: 2em; margin-left: 30px; letter-spacing: 5px; } .Primer{ position: relative; width: 450px; height: 110px; top: 40px; left: 0px; } .Logo{ position: relative; top: -550px; left: -600px; width: 250px; height: 110px; } .textura{ position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px; } .button{ text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #00EF00; outline: 2px solid #00EF00; padding: 30px 60px; position: relative; overflow: hidden; transition: color 1s; top: 10px; bottom: 10px; left: 10px; right: 10px; font-family: 'Cascadia Code Regular', sans-serif; text-align: center; font-size: 12px; } .button:hover{ color: #191917; } .button::before{ content: ''; top: 0; left: -50px; width: 0; height: 100%; background-color: #8236E5; transform: skewX(30deg); z-index: -1; position: absolute; transition: width 1s; } .button:hover::before{ width: 150%; } .grid-container{ display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; justify-content: center; gap: 20px; margin-top: 50px; } footer{ background-color: #8236E5; width: 1475px; height: 100px; } /*NEGRO OSCURO: 060807
Editor is loading...