गुम हो जाने का डर

695 byby.createsite

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

अनुशंसित

23 July 2025

न्यूमॉर्फिक प्रोफ़ाइल कार्ड HTML CSS टेम्पलेट

16 October 2025

CSS सिलेंडर लोडर HTML स्निपेट

5 August 2025

कंपनी कार्ड सूची: HTML और CSS उदाहरण

HTML

CSS

* {
  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; }
}

अनुशंसित

न्यूमॉर्फिक प्रोफ़ाइल कार्ड HTML CSS टेम्पलेट

CSS सिलेंडर लोडर HTML स्निपेट

कंपनी कार्ड सूची: HTML और CSS उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS