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
  • JavaScript
    <html>
	<head>
		<meta charset="UTF-8"name="viewport" content="width=device-width, initial-scale=1.0"/>
  		<link rel="stylesheet" type="text/css" href="login.css">
	</head>
	<body>
		<div class="informacion">
			<ul>
				<li id="b">
				<div class="logoC">
		            <img src="LOGO.png" alt="Logo openbooks">
		          	<br/>
		        	  <h1>Bienvenido a Openbooks, la red social donde puedes compartir tu pasión por leer.</h1>
		          	<h3>Para poder recomendarte libros <a href="registro.html">registrate</a> o inicia sesión.</h3>
								<form id="search" action="/">
		              <label for="busqueda"></label><input id="busqueda" type="text" name="name" placeholder="Buscar libros"/>
									<!--<input type="submit" id="lupa" value="&#128269;"/> -->
									<input type="button" class="button_active" id="lupa" onclick="location.href='busquedaAnonima.html';" value="&#128269;" />
								</form>
				</div></li>

	  		<li id="b"><div class="form">
	  			<h1>Iniciar sesión</h1>
	  			<form action="/" method="post">
		  			<label>Correo electrónico<span    class="req">*</span></label>
		  			<input type="email"required autocomplete="off"/ id="mail">

		  			<label>Contraseña<span class="req">*</span></label>
		  			<input type="password"required autocomplete="off"/ id="contra">
					<button type="submit" class="button button-block"/>Entrar</button>
				 </form>
			 </div></li>
		 </ul>
	 </div>
	</body>
</html>


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

/* Aspecto para moviles */

@media only screen and (max-width: 768px) {

/* Menu navegacion */

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;
  max-width: 100%
}

.form {
  /* position is static by default */
  margin-top: 3%;
  max-width : 55%;
  margin-right: 25%;
  z-index: 1;
  background: #FFFFFF;
  padding: 5%;
  text-align: left;
  float:right;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form 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;}

  .form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 49%;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid #088A08;
}

form button:hover {
    background-color: green;
}


.logoC{
  background : #FFFFFF;
  margin-top: 2%;
  max-width : 63%;
  height: auto;
  z-index: 1;
  padding: 4%;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  color:  #808080;

}

.logoC img{
	position: relative;
	max-width: 35%;
	max-height: 35%;
	margin: 5px;

}


li {
    display: block;

}

#b{
    display: inline-block;
    text-decoration: none;
    max-width: 100%;
    margin-right: -30%;
    vertical-align: top;
}



.informacion {
  /* position is static by default */
  margin-left:0%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: ##76b852;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 0%;
  text-align: left;
}

#busqueda{
    padding: 1%;
  max-width:80%;
  font-size: 100%;
  height: auto;
  width: 300px;
}

#lupa{
  position: absolute;
  padding: 0.40%;
  float: right;
  cursor: pointer;
  height: inherit;
  font-size: 100%;
}

#search{
     max-height: 100%;
     max-width: 100%;
     height: auto;
     width: auto;
     overflow:auto;
}
}

/*  PARA ESCRITORIO*/

@media only screen and (min-width: 768px) {

/* Menu navegacion */

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;
}

.form {
  /* position is static by default */
  margin-top: 3%;
  max-width : 55%;
  z-index: 1;
  background: #FFFFFF;
  padding: 5%;
  text-align: left;
  //float:right;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form 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;}

  .form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 49%;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid #088A08;
}

form button:hover {
    background-color: green;
}


.logoC{
  background : #FFFFFF;
  margin-top: 2%;
  max-width : 50%;
  height: auto;
  z-index: 1;
  padding: 4%;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  color:  #808080;

}

.logoC img{
	position: relative;
	max-width: 35%;
	max-height: 35%;
	margin: 5px;

}


.informacion li {
    display: inline-block;

}

#b {
    display: inline-block;
    text-decoration: none;
    max-width: 100%;
    vertical-align: top;
}
#b ul {
    float: left;
    display : inline;
    text-align: center;
    height: 100%;
    margin: 0% 1% 0% 3%;
    vertical-align: middle;
}


.informacion {
  /* position is static by default */
  margin-left:0%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: ##76b852;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 0%;
  text-align: left;
}

#busqueda{
    padding: 1%;
  max-width:80%;
  font-size: 100%;
  height: auto;
  width: 300px;
}

#lupa{
  position: absolute;
  padding: 0.40%;
  float: right;
  cursor: pointer;
  height: inherit;
  font-size: 100%;
}

#search{
     max-height: 100%;
     max-width: 100%;
     height: auto;
     width: auto;
}
}



/*Downloaded from https://www.codeseek.co/Impulso90/a-pen-by-fidel-RLdLqa */
    

Comments