La sinfonía de la sintaxis

36 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

22 June 2025

Ejemplo de formulario de inicio de sesión HTML

14 January 2025

Ejemplo de página web de portafolio

25 April 2025

Un código de Metehan

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: 20px;
      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);
      
    }

.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;
    }
    /* 
     * Animação: Elementos ASCII
     * Deixar os elementos ASCII animados quando acessa a página

*/
    .element {
      position: relative;
      width: 20px;
      height: 20px;
      margin: 130px;
      font-size: 50px;
      display: inline-block;
      animation: syntaxNote 2s infinite alternate;
    }
   :root {
      --color1: #81d3f9;
      --color2: #f37683;
      --color3: #ffe305; 
      --color4: #00d27d; 
      --color5: #1dd482;

}
    @keyframes syntaxNote {
      0% {
        transform: scale(1);
        color: var(--color1);
      }
      50% {
        transform: scale(1.2);
        color: var(--color2);
      }
      100% {
        transform: scale(1);
        color: var(--color3);
      }
    }

/*
    * Animação: Line - Expressão Audiovisuua
     */

.container{

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;

}

.line{
  position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
background: linear-gradient(to right, var(--color4), var(--color5));
opacity: 0; 
animation: lineAnimation 2s ease-in-out infinite alternate; 
}
.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; }
/* 
* Animação: Syntax note animado 
*/
.note{ 
  position: relative; 
  display: block;
  color: white;
  font-size: 50px;
  animation:  noteAnimate 0.5s linear infinite alternate-reverse;

}

@keyframes noteAnimate { 
  0% { 
    transform: rotate(0deg); 
  }
  50% { 
    transform: rotate(10deg); 
  }  
  100% { 
    transform: rotate(0deg); 
  } 
}

Recomendado

Ejemplo de formulario de inicio de sesión HTML

Ejemplo de página web de portafolio

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS