Skip to content

Instantly share code, notes, and snippets.

@mecmartini
Created April 26, 2019 14:11
Show Gist options
  • Save mecmartini/cb4fd7aa75db827d38a5b0a2724f4c9d to your computer and use it in GitHub Desktop.
Save mecmartini/cb4fd7aa75db827d38a5b0a2724f4c9d to your computer and use it in GitHub Desktop.
Jesus Fernandez - Boogle buscador
#principal{
position: absolute;
left: 0;
top: 200px;
width: 100%;
}
.principal-inner {
width: 800px;
margin: 0 auto;
text-align: center;
}
#logo{
margin-bottom: 10px;
width: 300px;
height: 150px;
}
#buscar{
border-radius: 80px;
width: 550px;
left: 30px;
height: 35px;
margin-top: 10px;
}
.botones{
height: 40px;
margin: 30px 10px 0;
color: grey;
background-color: #f2f2f2;
border-radius: 8px;
display: inline-block;
vertical-align: middle;
}
#footer {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
}
.pie{
background: grey;
width: 100%;
background: #f2f2f2;
padding: 10px 20px;
border-bottom: 1px solid #e4e4e4;
}
.pie-link {
padding-right: 10px;
color: rgba(0,0,0,.54);
display: inline-block;
vertical-align: middle;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="buscador.css">
<title>www.boogle.es</title>
</head>
<body>
<section id="principal">
<div class="principal-inner">
<img id="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Boogle">
</div>
<div class="principal-inner">
<input id="buscar" type="text">
</div>
<div class="principal-inner">
<input class="botones" type="submit" value="Buscar con Boogle">
<input class="botones" type="submit" value="Voy a tener potra" height="60">
</div>
</div>
</section>
<footer id="footer">
<div class="pie">
<a class="pie-link" href="#">
España
</a>
</div>
<div class="pie">
<a class="pie-link" href="#">
Publicidad
</a>
<a class="pie-link" href="#">
Empresa
</a>
<a class="pie-link" href="#">
Acerca de
</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment