Skip to content

Instantly share code, notes, and snippets.

@SGarcia710

SGarcia710/template.html

Last active October 10, 2019 00:23
Show Gist options
  • Save SGarcia710/1c4a7184182427be531deb5a21372d57 to your computer and use it in GitHub Desktop.
Save SGarcia710/1c4a7184182427be531deb5a21372d57 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
template.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://bootswatch.com/4/lux/bootstrap.min.css"
/>
<!-- Estilos -->
<style>
body {
background: linear-gradient(to right, #2f80ed, #56ccf2);
}
</style>
<!-- Título -->
<title>Weather App</title>
</head>
<body>
<div class="container p-4">
<div class="row">
<div class="col-md-4 mx-auto text-center">
<!-- Bloque de Información -->
<div class="card mb-3">
<div class="card-body">
<h1 class="h3">Cali / CO</h1>
<h3 class="h4">NUBES ROTAS</h3>
<h3 >29°C</h3>
<ul class="list-group mt-3">
<li class="list-group-item">
Humedad: 51%
</li>
<li class="list-group-item">
Velocidad del viento: 2.1m/s
</li>
</ul>
</div>
</div>
<!--Bloque de busqueda -->
<div class="card">
<div class="card-body">
<!-- Formulario de busqueda -->
<form action="" id="w-form">
<!-- Input nombre ciudad -->
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Nombre ciudad"
autofocus
/>
</div>
<!-- Input código país -->
<div class="form-group">
<input
type="text"
placeholder="Código país"
class="form-control"
/>
</div>
<!-- Botón de busqueda -->
<div class="form-group">
<button class="btn btn-primary btn-block" id="w-change-btn">
Buscar
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment