Día de la Madre - Tarjeta interactiva

Día de la Madre - Tarjeta interactiva

by didacticode

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Tarjeta interactiva para el día de la madre</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<section id="card">
		<header>
			<h1>¡Feliz día de la madre!</h1>
		</header>
		<main>
			<p>Escribe aquí tu mensaje</p>
			<textarea id="mensaje" rows="10" cols="30"></textarea><br />
			<p>Elige tu postre favorito</p>
			<select id="postre">
				<option value="chocolate">Chocolate</option>
				<option value="frambuesas">Frambuesas</option>
				<option value="helado">Helado</option>
			</select>
		</main>
		<footer>
			<button id="preview-btn">Previsualizar</button>
      </footer>
	</section>
</body>

</html>

CSS

body {
    background-image: url("images/acuarela.jpg");
    background-position: center;
    background-size: cover;
    background-color: darkviolet;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}
section#card {
	width: 400px;
	background-color: #fff;
	border: 2px solid #ccc;
	border-radius: 10px;
	margin: auto;
	margin-top: 50px;
	padding: 20px;
	box-shadow: 2px 2px 2px #ccc;
}

header {
	text-align: center;
	margin-bottom: 20px;
}

main {
	margin-bottom: 20px;
}

#mensaje {
	width: 100%;
}

footer {
	text-align: center;
}

button {
	background-color: #69b4ff;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 18px;
	margin-right: 10px;
	cursor: pointer;
}

button:hover {
	background-color: darkviolet;
}