हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

658 byby.createsite

संपादक में खोलें अपना कोड प्रकाशित करें

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

अनुशंसित

30 November 2025

HTML लॉगिन फ़ॉर्म: उपयोगकर्ता नाम/ईमेल और पासवर्ड

22 November 2024

लैंडिंग पेज - युद्ध के देवता

25 November 2025

Yandex गेम्स SDK के साथ HTML5 गेम लोडर

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #141C26; /* Tons de preto para combinar com a estética digital */
  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: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}

.heart {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 80px solid #F82672; /* Cor vermelha vibrante */
  animation: heartbeat 2s linear infinite; 
}
@keyframes heartbeat {
  0% {
    transform: scale(1); opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(10deg); opacity: 0.3; 
  }
  100% {
    transform: scale(1); opacity: 1;
  }
}

.error-message {
  font-family: 'Arial', sans-serif;
  font-size: 32px;
  color: #F92672;
  position: absolute; 
  transform: rotate(-15deg);
  opacity: 0;
  animation: fade-in 0.5s ease-in-out forwards;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #F8F8F2; 
  border-radius: 50%;
  animation: pulsate 1.5s ease-in-out infinite; 
}
@keyframes pulsate {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); 
  }
}

अनुशंसित

HTML लॉगिन फ़ॉर्म: उपयोगकर्ता नाम/ईमेल और पासवर्ड

लैंडिंग पेज - युद्ध के देवता

Yandex गेम्स SDK के साथ HTML5 गेम लोडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS