Escuela de Robótica

In this example below you will see how to do a Escuela de Robótica with some HTML / CSS and Javascript

Ejemplo para la clase: Fundamentos del desarrollo Web - parte 1

Thumbnail
This awesome code was written by luisco, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright luisco ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Escuela de Robótica</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="logo">
	<img src="https://i.imgur.com/9d5AqPF.png">
	<h1>ESCUELA DE ROBÓTICA</h1>
</div>

<div class="estudiantes">
	<p class="titulo">Estudiantes inscritos</p>
	<p id="numero" class="numero">0</p>
	<button id="boton">INSCRIBIRME</button>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/luisco/escuela-de-robandxf3tica-OXxRWp */
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,700i');

html {
	height: 100%;
}

body {
	min-height: 100%;
	background-image: url("https://i.imgur.com/RR0b96K.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.logo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50%;
	text-align: center;
}

.estudiantes {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
	width: 50%;
	text-align: center;
}

h1 {
	font-family: "Fira Sans", sans-serif;
	font-size: 35px;
	font-weight: 300;
	color: white;
	margin-top: 20px;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

p {
	font-family: "Fira Sans", sans-serif;
}

.titulo {
	font-size: 36px;
	font-weight: 700;
	font-style: italic;
	color: white;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

.numero {
	font-size: 124px;
	font-weight: 700;
	font-style: italic;
	color: white;
	margin-top: 30px;
	margin-bottom: 40px;
}

button {
	font-family: "Fira Sans", sans-serif;
	font-size: 28px;
	font-weight: 700;
	font-style: italic;
	color: white;
	padding: 20px;
	background-color: #ff3f00;
	border: none;
}


/*Downloaded from https://www.codeseek.co/luisco/escuela-de-robandxf3tica-OXxRWp */
var numero = document.getElementById('numero');
var boton = document.getElementById('boton');

boton.addEventListener('click', cambiarNumero);

function cambiarNumero() {
	numero.innerHTML = parseInt(numero.innerHTML) + 1;
};

Comments