The fear of missing

Open In Editor Publish Your Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} 
.selector       { color: #F92672; } 
.property       { color: #66D9EF; } 
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; } 
.value-color    { color: #A6E22E; } 
.brace          { color: #F8F8F2; } 
.comment        { color: #75715E; } 
.function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

.notification {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #FF7F50;
  border-radius: 50%;
  animation: notify 1s linear infinite;
  transform-origin: center center;
}

@keyframes notify {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.code-block {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #191A22;
  border-radius: 10px;
  opacity: 0.7;
  animation: code-flash 1s ease-in-out infinite alternate;
}

@keyframes code-flash { 
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

The fear of missing

Recommended

the enigma of time

Weather website

The code whisperer

HTML

CSS

JS

Recommended

the enigma of time

Weather website

The code whisperer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS