Construye un Newsletter para el blog

Clase 11 de 35 • Curso de Desarrollo Web con Svelte y Sapper

Kenny Emmanuel Lajara Aquino

student•

Te ahorraré casi 10 minutos de CSS.

<style>
	input {
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #d9d9d9;
		color: rgba(0, 0, 0, 0.75);
		display: inline-block;
		font-feature-settings: "tnum";
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		list-style: none;
		margin: 0;
		outline: 0;
		padding: 4px 12px;
		width: 100%;
		box-sizing: border-box;
	}

	h4 {
		font-size: 16px;
	}

	p {
		font-weight: 300;
		color: #333;
		font-size: 15px;
		margin-bottom: 10px;
	}

	form {
		position: relative;
		width: 100%;
	}

	.btn {
		box-shadow: inset 0px 1px 0px 0px #bee2f9;
		background: linear-gradient(to bottom, #63b9ee 5%, #468ccf 100%);
		background-color: #63b9ee;
		border-radius: 1px solid #3866a3;
		display: inline-block;
		cursor: pointer;
		color: #14396a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 6px 24px;
		text-decoration: none;
		text-shadow: 0px 1px 0px #7cacde;
		width: 100%;
	}

	.btn:hover {
		background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
		background-color: #468ccf;
	}
	.btn:active {
		position: relative;
		top: 1px;
	}
	label {
		font-size: 12px;
	}
</style>

Juan Pablo Celiz

student•

¡Capo! Hermoso poner la velocidad 2x y relajarme en la silla mientras lo codea. :D

John Cardenas

student•

Una pequeña correción en las clases del botón (.btn), el border-radius es de aproximandamente unos 5px. En cambio el border si es el que tiene la propiedad border-radius en este comentario. Aquí el CSS del botón:

.btn {
		box-shadow: inset 0px 1px 0px 0px #bee2f9;
		background: linear-gradient(to bottom, #63b9ee 5%, #468ccf 100%);
		background-color: #63b9ee;
		border: 1px solid #3866a3;
		border-radius: 4px;
		display: inline-block;
		cursor: pointer;
		color: #14396a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 6px 24px;
		text-decoration: none;
		text-shadow: 0px 1px 0px #7cacde;
		width: 100%;
	}

Carlos Rolando Quispe Quispe

student•

Les comparto una publicación que encontre en internet sobre Tinyletter aquí, ya que tinyletter esta en inglés puede que esta publicación les ayude a personalizar mejor sus newsletters.

Gonzalo Pimentel

student•

Wuaoooow que loco esta clase! Que emoción que se puedan subscribir!

Wilkins Bernardo Brito Serrano

student•

cuál es ese plugin que te ordena el código automáticamente??

John Cardenas

student•

¡Hola! El plugin se llama Prettier.

Naldo Duran

student•

👌

<style>
	input {
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #d9d9d9;
		color: rgba(0, 0, 0, 0.75);
		display: inline-block;
		font-feature-settings: "tnum";
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		list-style: none;
		margin: 0;
		outline: 0;
		padding: 4px 12px;
		width: 100%;
		box-sizing: border-box;
	}

	h4 {
		font-size: 16px;
	}

	p {
		font-weight: 300;
		color: #333;
		font-size: 15px;
		margin-bottom: 10px;
	}

	form {
		position: relative;
		width: 100%;
	}

	.btn {
		box-shadow: inset 0px 1px 0px 0px #bee2f9;
		background: linear-gradient(to bottom, #63b9ee 5%, #468ccf 100%);
		background-color: #63b9ee;
		border-radius: 1px solid #3866a3;
		display: inline-block;
		cursor: pointer;
		color: #14396a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 6px 24px;
		text-decoration: none;
		text-shadow: 0px 1px 0px #7cacde;
		width: 100%;
	}

	.btn:hover {
		background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
		background-color: #468ccf;
	}
	.btn:active {
		position: relative;
		top: 1px;
	}
	label {
		font-size: 12px;
	}
</style>

.btn {
		box-shadow: inset 0px 1px 0px 0px #bee2f9;
		background: linear-gradient(to bottom, #63b9ee 5%, #468ccf 100%);
		background-color: #63b9ee;
		border: 1px solid #3866a3;
		border-radius: 4px;
		display: inline-block;
		cursor: pointer;
		color: #14396a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 6px 24px;
		text-decoration: none;
		text-shadow: 0px 1px 0px #7cacde;
		width: 100%;
	}