Untitled
unknown
html
3 years ago
2.5 kB
11
Indexable
* {
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%;
}
Editor is loading...