search

LuisGarridoOgalla / WEB-PAGE-INFTEL-

First INFTEL project
MIT License
0 stars 2 forks source link

HTML INICIAL #4

Open PabloINFTEL opened 6 years ago

PabloINFTEL commented 6 years ago 
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sharing Tweet Books
</title>
<style>
  body { width: 90%; height: 90%; }
  input[type=text] {
    width: 130px;

    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('pic_search.png');
    background-size: 20%;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 150%;
}
</style>
</head>
<body style="background: url('Portada 2.jpg')">
              <img src="logo3.png" alt="Sharing Tweet Books">
<form>
<input type="text" name="search" placeholder="Buscar libro...">
</form>

</body>
</html>

Este es el html que he llegado hasta ahora pero no el definitivo. Me gustaría poder cambiar algunos detalles: como centrar y hacer mas grande mas la barra de busqueda, colocar alguna frase o añadir una barra con el logo de la aplicación. He adjuntado varios logos que he generado a traves a de paginas webs. LOGOS logo logo2 logo3 logo4

IMAGENES DEL CODIGO

pic_search portada 2