Webleb - Snippets de Código -

2091 Andev.web

Abrir no Editor Video Publique Seu Código

Recomendado

24 October 2024

Exemplo de Landing Page de Site de Filme

HTML

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #e8e8e8;
  }
  .l {
    display: block;
    margin-bottom: 1.5em;
    font-size: 1em;
  }
  
  .l {
    background-color: rgba(0,0,0,0.7);
    border-radius: 0.75em;
    box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
    color: #fdea7b;
    display: inline-flex;
    align-items: center;
    margin: auto;
    padding: 0.15em;
    width: 3em;
    height: 1.5em;
    transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .l:before, .l:after {
    content: "";
    display: block;
  }
  
  .l:before {
    background-color: #d7d7d7;
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    z-index: 1;
  }
  
  .l:after {
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
          repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
          radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
    background-repeat: no-repeat;
    border: 0.25em solid transparent;
    border-left: 0.4em solid #d8d8d8;
    border-right: 0 solid transparent;
    transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    transform: translateX(-22.5%);
    transform-origin: 25% 50%;
    width: 1.2em;
    height: 1em;
    box-sizing: border-box;
  }
  .l:checked {
    background-color: rgba(0,0,0,0.45);
    box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;
  }
  
  .l:checked:before {
    background-color: currentColor;
    transform: translateX(125%)
  }
  
  .l:checked:after {
    border-left-color: currentColor;
    transform: translateX(-2.5%) rotateY(180deg);
  }
  .l:focus {
    outline: 0;
  }

Recomendado

Pássaro Flappy

ki ok, dia de Nova Jersey

Exemplo de Landing Page de Site de Filme

HTML

CSS

JS

Recomendado

Pássaro Flappy

ki ok, dia de Nova Jersey

Exemplo de Landing Page de Site de Filme

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS