A Pen by Fidel

Thumbnail
This awesome code was written by Impulso90, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Impulso90 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Fidel</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head> <meta charset="UTF-8"/>
  <link rel="stylesheet" type="text/css" href="homeAnonimo.css">
</head>
<body>
  <div class="container">
<div class="navegacion">
<ul>

     <li id="bar">
       <form id="search" action="/">
       <label for="busqueda"></label><input id="busqueda" type="text" name="name" placeholder="Búsqueda"/>
       <input type="submit" id="lupa" value="&#128269;"/>
       </form>
       </li>
  <li><a href="login.html">Iniciar sesión</a></li>
  <li><a href="registro.html">Registrarse</a></li>
  <li><div class="logo"><img src="LOGO.png" alt="Imagen ejemplo"></div></li>
</ul>
</div>
<div class="informacion">
  <div class="logoC">
    <ul><li id="b">
      <div><h1>OPENBOOKS</h1></div></li>
      <li id="b"><div><img src="LOGO.png" alt="Imagen ejemplo"></div></li></ul>
  </div>
<br/><h1>Bienvenido a Openbooks la red social donde puedes compartir tu pasión por leer</h1>
  <div class="par">
    <p/><h2>Para poder recomendarte libros <a href="registro.html">registrate</a> o <a href="login.html">inicia sesión</a>.</h2></div>
    </div>

</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Impulso90/a-pen-by-fidel-NaEbzE */
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

/* Menu navegacion */

.container {
  position: relative;
}

.navegacion ul{
    position: fixed;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 14%;
    background-color: #f1f1f1;
}

#busqueda{
    padding: 8px 0 8px 8px;
    position:absolute;
  width:80%
}

#lupa{
  position: relative;
  float: right;
  cursor: pointer;
  height: 35px;
  font-size:19px;
  width:20%;
}

 #bar{
      height: auto;
  overflow:auto;
}
li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.logo img{
  position:absolute;
width: 100%;
height: auto;
  margin: auto;
}

/* Contenido */

body {
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.informacion {
  /* position is static by default */
  margin-left: 15%;
  width: 78%;
  height: 99%;
  z-index: 1;
  background: #FFFFFF;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 3%;
  padding-bottom: 10%;
  text-align: left;
  //box-shadow: 0 0 px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.informacion input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.par {
  margin-left: 20%;
  font-size: 100%;
  text-align : justify;
}

#b {
  display: block;
  text-align:center;
}
.logoC img{
  position:relative;
width: 25%;
height: auto;

}

Comments