Untitled
unknown
html
2 years ago
2.5 kB
4
Indexable
Never
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.935); } .header { width: 100vw; height: 50px; background: linear-gradient(black, transparent); } button { width: 120px; color: lime; background: transparent; border: transparent; font-family: 'Courier New', courier, monospace; font-weight: 600; font-size: 30px; text-shadow: 0px 0px 9px; transition: .5s; } .header button { position: relative; top: 30%; button: 2%; } .home { position: absolute; top: 0%; left: 0%; transform: translate(60%, 0%); } .contact { width: 170px; position: absolute; top: 0%; left: 0%; transform: translate(60%, 0%); } button:hover { text-shadow: none; font-size: 35px; transition: .5s; box-shadow: 0px 0px 20px; background-color: rgba(0, 0, 0, 0.303); border-radius: 10px; } .card { position: absolute; top: 50%; left: 75%; transform: translate(-50%, -50%); width: 550px; height: 400px; border-radius: 20px; display: flex; transition: .5s; } .card .circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; } .card .circle::before { content: ' '; position: absolute; top: 0; left: 0; width: 100%; height: 100%; bacground: rgba(0, 255, 0, 0.742); clip-patch: circle(170px at center); transition: .5s; } .card .circle:before { background: linear-gradient(lime, transparent); clip-path: circle(400px at center); } .card img { position: absolute; top: 55%; left: 49.5%; transform: translate(-50%, -50%); width: 300px; height: 300px; pointer-events: none; transition: .5s; border-radius: 50%; } .card:hover img { left: 72%; top: 70%; width: 250px; height: 250px; border-radius: none; } .card .content { position: relative; width: 50%; left 20%; padding: 20px 20px 20px 40px; transition: .5s; opacity: 0; visibility: hidden; } .card:hover .content { left: 0; opacity: 1; visibility: visible; } .card .content h2 { font-size: 3em; font-family: sans-serif; font-weight: bolder; } .card .content p { color: white; font-size: 20px; font-family: 'Trebunchet MS', 'Lucida Sans Unicode', 'Lucida Grande'; position: absolute; top: 95%; }