Texto a voz

1900 angrybird76

Abrir en el editor Publica tu código

Recomendado

27 November 2024

Control deslizante de imágenes adaptable

26 March 2025

Formulario de varios pasos con barra de progreso usando jQuery y CSS3

7 August 2025

diales de volumen

HTML

CSS

/    body {
  font-family: Arial, sans-serif;
  background-color: #0692a5;
  padding: 5rem;
}

main {
  width: 50%;
  margin: 0 auto;
  background-color: #bb4b00;
  padding: 5rem;
  border-radius: 5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.2rem;
  border-radius: 0.25rem;
  border: 3px solid #22e9ce;
  margin-bottom: 1rem;
}

button {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.2rem;
  background-color: #4caf50;
  color: #fcf7f7;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.flower {
    position: relative;
    width: 150px;
    height: 150px;
}

.petal {
    position: absolute;
    width: 80px;
    height: 150px;
    background-color: #FFD700;
    border-radius: 50%;
    left: 20%;
}

.petal:nth-child(1) {
    transform: rotate(45deg);
}

.petal:nth-child(2) {
    transform: rotate(135deg);
}

.petal:nth-child(3) {
    transform: rotate(225deg);
}

.petal:nth-child(4) {
    transform: rotate(315deg);
}

.center {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #FF69B4;
    border-radius: 50%;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}
* Replace with your CSS Code 
(Leave empty if not needed) */

Recomendado

Control deslizante de imágenes adaptable

Formulario de varios pasos con barra de progreso usando jQuery y CSS3

diales de volumen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS