Untitled

mail@pastecode.io avatar
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%;
	  }