Skip to content

Instantly share code, notes, and snippets.

@urielhdz

urielhdz/index.html

Created August 9, 2019 15:20
Show Gist options
  • Save urielhdz/e117f7d628bb5e4cfb0a3cd5a82f6ce3 to your computer and use it in GitHub Desktop.
Save urielhdz/e117f7d628bb5e4cfb0a3cd5a82f6ce3 to your computer and use it in GitHub Desktop.
Download ZIP
Instalar tu página web, base del tutorial
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="manifest" href="/manifest.json">
<title>Document</title>
<style>
body,html{margin:0;}
.app-container{
display:flex;
background-color: #eee;
height: 100vh;
flex-direction: column;
}
.app-container header{
height: 3em;
background-color: blue;
color:white;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 2em;
}
.app-container button{
background-color:pink;
color:black;
border-radius:4px;
/* border:0; */
font-size: 1em;
padding:5px 15px;
text-transform: uppercase;
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
cursor:pointer;
opacity: 0;
transform: scale(0);
transition: all 0.1s;
}
.app-container button.active{
opacity: 1;
transform: scale(1);
}
.app-container section{
flex:1;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="app-container">
<header>
<button>Instalar</button>
</header>
<section>
<p>Super App!</p>
<textarea placeholder="Escribe algo mientras te mostramos el paso de instalación"></textarea>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment