Skip to content

Instantly share code, notes, and snippets.

@codigoconjuan
Last active January 12, 2024 14:49
Show Gist options
  • Save codigoconjuan/663717efcd8df89d66fea0c727409e98 to your computer and use it in GitHub Desktop.
Save codigoconjuan/663717efcd8df89d66fea0c727409e98 to your computer and use it in GitHub Desktop.
Gist para API de Clima con Context
body {
font-family: 'Hubballi', cursive;
background-color: #f1f5f9;
font-size: 1.6rem;
}
header {
background-color: #0ea5e9;
padding: 1.5rem;
border-bottom: 1rem solid #0284c7;
}
header h1 {
text-align: center;
color: white;
font-family: 'Inter', sans-serif;
font-size: 3rem;
margin:0;
}
.dos-columnas {
display: grid;
gap: 4rem;
}
@media (min-width: 768px) {
.dos-columnas {
grid-template-columns: repeat(2, 1fr);
}
}
main {
margin: 4rem auto;
max-width: 1200px;
}
.contenedor {
margin: 0 auto 2rem auto;
border-radius: .5rem;
background-color: white;
padding: 4rem;
-webkit-box-shadow: 0px 10px 33px -17px rgba(173,173,173,1);
-moz-box-shadow: 0px 10px 33px -17px rgba(173,173,173,1);
box-shadow: 0px 10px 33px -17px rgba(173,173,173,1);
width: 100%;
}
form {
width: 100%;
}
.campo {
max-width: 400px;
margin: 0 auto 1rem auto;
}
.campo label {
display: block;
}
.campo input,
.campo select {
all: unset;
border: 1px solid #cbd5e1;
width: 100%;
border-radius: 1rem;
padding: .5rem;
}
input[type="submit"] {
background-color: #0ea5e9;
margin: 2rem auto 0 auto;
display: block;
padding: 1rem 3rem;
color: white;
text-transform: uppercase;
font-family: 'Inter', sans-serif;
font-size: 1rem;
border: none;
width: 100%;
transition: background-color .3s ease;
}
@media (min-width: 768px) {
input[type="submit"] {
max-width: 400px;
}
}
input[type="submit"]:hover {
background-color: #0369a1;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clima App - Context</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hubballi&family=Inter:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
@ovi-dev
Copy link

ovi-dev commented Nov 2, 2023

gracias

@Gitbertod
Copy link

Agradecido crack! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment