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"  name="viewport" content=" width=device-width; initial-scale=1.0; maximum-scale=1; minimum-scale=1;"/>
    <link rel="stylesheet" type="text/css" href="home.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="home.html">Home</a></li>
          <li><a href="actividad.html">Actividad</a></li>
          <li><a href="config.html">Configuración</a></li>
          <li><form action="/config.html"><button id="cerrar">Cerrar sesión</button></form></li>
          <li>
            <div class="logo"><img src="LOGO.png" alt="Imagen ejemplo"></div>
          </li>
        </ul>
      </div>
      <div class="informacion">
        <div class="leyendo">
          <h2>Actualmente leyendo:</h2>
          <ul>
            <li id="b">
              <div class="libroL">
                <a href="/">
                  Un buen gato
                  <div class="imagenL">
                    <img src="https://t1.uc.ltmcdn.com/images/6/1/6/img_por_que_mi_gato_maulla_mucho_26616_600.jpg" alt="Imagen ejemplo">
                  </div>
                </a>
              </div>
            </li>
            <li id="b">
              <div class="libroL">
                <a href="libro.html">
                  El señor de los anillos: La comunidad del Anillo
                  <div class="imagenL">
                    <img src="anillo.jpg" alt="Imagen ejemplo">
                  </div>
                </a>
              </div>
            </li>
          </ul>
        </div>
        <div class="recomendacion">
          <br/>
          <h2>Recomendaciones:</h2>
          <div class="libro">
            <div class="imagen">
              <img src="https://trabajosmasonicos.files.wordpress.com/2016/04/foto-pinocho.png?w=285&h=366" alt="Imagen ejemplo">
            </div>
            <div class="titulo">
              <h2> Las aventuras de Pinocho </h2>
            </div>
            <div class="autor">
              <p>Autor: Lorena Benedi Garcia </p>
            </div>
            <div class="puntuacion">
              <input type="radio" name="ratings[2]" id="Overall Rating_5" value="5" class="radio rating-radio rating-radio--5" disabled='disabled'>
              <label for="Overall Rating_5" title="1 star rating" class="star-rating star-rating--5" ></label>
              <input type="radio" name="ratings[2]" id="Overall Rating_4" value="4" class="radio rating-radio rating-radio--4" disabled='disabled' checked="checked">
              <label for="Overall Rating_4" title="2 star rating" class="star-rating star-rating--4"></label>
              <input type="radio" name="ratings[2]" id="Overall Rating_3" value="3" class="radio rating-radio rating-radio--3" disabled='disabled' >
              <label for="Overall Rating_3" title="3 star rating" class="star-rating star-rating--3"></label>
              <input type="radio" name="ratings[2]" id="Overall Rating_2" value="2" class="radio rating-radio rating-radio--2" disabled='disabled' >
              <label for="Overall Rating_2" title="4 star rating" class="star-rating star-rating--2"></label>
              <input type="radio" name="ratings[2]" id="Overall Rating_1" value="1" class="radio rating-radio rating-radio--1" disabled='disabled'>
              <label for="Overall Rating_1" title="5 star rating" class="star-rating star-rating--1"></label>
            </div>
          </div>
          <br/>
          <div class="libro">
            <div class="imagen">
              <img src="https://i.pinimg.com/736x/9f/b0/79/9fb079ad7fe2702afc6608b2c22401e8--comic-book-heroes-comic-books.jpg" alt="Imagen ejemplo">
            </div>
            <div class="titulo">
              <h2> Tintin y sus mágicas aventuras </h2>
            </div>
            <div class="autor">
              <p>Autor: Manuel Garcia Garrido </p>
            </div>
            <div class="puntuacion">
              <input type="radio" name="ratings[3]" id="Overall Rating_5" value="5" class="radio rating-radio rating-radio--5" disabled='disabled' checked="checked">
              <label for="Overall Rating_5" title="1 star rating" class="star-rating star-rating--5" ></label>
              <input type="radio" name="ratings[3]" id="Overall Rating_4" value="4" class="radio rating-radio rating-radio--4" disabled='disabled'>
              <label for="Overall Rating_4" title="2 star rating" class="star-rating star-rating--4"></label>
              <input type="radio" name="ratings[3]" id="Overall Rating_3" value="3" class="radio rating-radio rating-radio--3" disabled='disabled' >
              <label for="Overall Rating_3" title="3 star rating" class="star-rating star-rating--3"></label>
              <input type="radio" name="ratings[3]" id="Overall Rating_2" value="2" class="radio rating-radio rating-radio--2" disabled='disabled' >
              <label for="Overall Rating_2" title="4 star rating" class="star-rating star-rating--2"></label>
              <input type="radio" name="ratings[3]" id="Overall Rating_1" value="1" class="radio rating-radio rating-radio--1" disabled='disabled'>
              <label for="Overall Rating_1" title="5 star rating" class="star-rating star-rating--1"></label>
            </div>
          </div>
          <button type="button" class="aumentar"/>Mostrar mas</button>
        </div>
      </div>
    </div>
  </body>
</html>
  
  

</body>

</html>

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

/* Aspecto para moviles */

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

/* Menu navegacion */

.container {
  position: relative;
}

.navegacion {
  z-index:1;
  margin: 0;
  margin-bottom: 10%;
  width: 100%;
  height: 10%;
  top:0;
  position: fixed;
}


.navegacion li {
    float: left;
    display : inline;
    text-align: center;
    height: 100%;
    margin: 0% 1% 0% 3%;
    vertical-align: middle;
}

.navegacion ul{
    z-index: 2;
    position: fixed;
    list-style-type: none;
      display: inline;
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 6%;
    background-color: #f1f1f1;
    font-size: 2.45vw;
}

#busqueda{
  padding: 1%;
  width:70%;
  height: 70%;
  font-size: 100%;
  margin : 0%;
  float : left;
  background-color: #FFFFFF;
}

#lupa{
  position: relative;
  padding: 1%;
  float: left;
  cursor: pointer;
  height: 70%;
  font-size:1.4vw;
  width:20%;
}

 #bar{
      max-height: 100%;
      max-width: 30%;
      //overflow:auto;
      float : left;
      padding:0%;
      z-index:1;
      }

li a {
      display: inline;
    color: #000;
    padding: 4% 1% 1% 1%;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    height : 100%;
    width : 100%;

}

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

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

.logo img{
  position: right;
  width: 0%;
  height: 0%;
  margin: 0%;
}


/* 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;
   margin : 0;
}

.informacion {
  /* position is static by default */
  margin-left: 0%;
  width: 100%;
  z-index: 1;
  background: #FFFFFF;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 3%;
  padding-top:5%;
  padding-bottom: 23%;
  text-align: left;
  box-shadow: 0 0 20px 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;
  max-width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.informacion button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 45%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 90%;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
  position: absolute;
  float:left;
  padding: 1%;
  bottom:0%;
  right:25%;
}

#b{
    display: inline-block;
    text-decoration: none;
    max-width: 50%;
}

#b a:hover:not(.active) {
    background-color: #FFFFFF;
    color:black;
}

.recomendacion{
  margin-bottom:10%;
}
.libroL{
  margin-top:0%;
  margin-bottom:auto;
  width:auto;
  text-align:center;
  max-width: 100%;
}


.imagenL img{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
  width: 50px;
}

.libroL a:hover {
    border: 2px solid green; /* Añadimos un borde de 1px de color rojo */
}

.imagen img {
  position: absolute;
  max-width: 13%;
  max-height: 20%;
  margin: auto;
}

.titulo {
  margin-left: 20%;
  font-size: 90%;
}

.autor{
  margin-left: 20%;
  font-size: 90%;
  text-align : justify;
}

.libro{
  margin-top:5%;
  margin-bottom:5%;
}

.puntuacion{
  margin-left: 20%;
	clear: both;
	float: left;
 text-align : justify;
}
.puntuacion ~ .form-list {
	clear: both;
}
.rating-field {
	margin-bottom: 1em;
}


.star-rating {
  display: block;
  height: 23px;
  float: right;
  color: transparent;
  background: transparent url("https://i.imgur.com/BhJbWEJ.png") 0 100% no-repeat;
  position: relative;
  width: 25px;
}
.star-rating:before {
  z-index: 0;
  position: absolute;
  width: 0;
  height: 23px;
  content: "";
  background: transparent url("https://i.imgur.com/BhJbWEJ.png") 0 0 no-repeat;
  top: 0;
  left: 0;
}
.star-rating:hover:before {
  width: 100%;
}

input[type="radio"].rating-radio {
  position: absolute;
  margin: 0em 0 0 .9em;
  font-size: .5em;
  z-index: 0;
  visibility: hidden;
}

.rating-radio--1:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--2:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--3:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--4:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--5:checked ~ .star-rating:before {
  width: 100%;
}

.puntuacion .star-rating:hover:before,
.puntuacion .star-rating:hover ~ .star-rating:before {
  width: 100%;
}

}


/*  PARA ESCRITORIO*/


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

/* Menu navegacion */

.container {
  position: relative;
}

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

#busqueda{
    padding: 4.3%;
    position:absolute;
  max-width:80%;
  //height: inherit;
  font-size: 0.98vw;
}

#lupa{
  position: relative;
  padding: 1.4%;
  float: right;
  cursor: pointer;
  height: inherit;
  font-size:1.4vw;
  width:20%;
}

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

li a {
    display: block;
    color: #000;
    padding: 4.23% 0 4.23% 8.46%;
    text-decoration: none;
}
#cerrar {
  text-align:left;
  width:100%;
  height: 100%;
  padding: 4.23% 0 4.23% 8.46%;

border: none;
background: none;
  font-size: 1.177vw;
  cursor:pointer;
  color: #424242;
  padding: 4.23% 0 4.23% 8.46%;
  text-decoration: none;
}
#cerrar:hover:not(.active) {
    background-color: #555;
    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%;
  z-index: 1;
  background: #FFFFFF;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 3%;
  padding-bottom: 23%;
  text-align: left;
  box-shadow: 0 0 20px 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;
  max-width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
  .informacion button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 45%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 90%;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
    position: absolute;
    float:left;
    padding: 1%;
    bottom:0%;
    right:20%;
}

#b{
    display: inline-block;
    text-decoration: none;
    max-width: 50%;
}

#b a:hover:not(.active) {
    background-color: #FFFFFF;
    color:black;
}

.recomendacion{
  margin-bottom:10%;
}
.libroL{
  margin-top:0%;
  margin-bottom:auto;
  width:auto;
  text-align:center;
  max-width: 100%;
}


.imagenL img{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
  width: 50px;
}

.libroL a:hover {
    border: 2px solid green; /* Añadimos un borde de 1px de color rojo */
}

.imagen img {
  position: absolute;
  max-width: 13%;
  max-height: 20%;
  margin: auto;
}

.titulo {
  margin-left: 20%;
  font-size: 90%;
}

.autor{
  margin-left: 20%;
  font-size: 90%;
  text-align : justify;
}

.libro{
  margin-top:5%;
  margin-bottom:5%;
}

.puntuacion{
  margin-left: 20%;
	clear: both;
	float: left;
 text-align : justify;
}
.puntuacion ~ .form-list {
	clear: both;
}
.rating-field {
	margin-bottom: 1em;
}


.star-rating {
  display: block;
  height: 23px;
  float: right;
  color: transparent;
  background: transparent url("https://i.imgur.com/BhJbWEJ.png") 0 100% no-repeat;
  position: relative;
  width: 25px;
}
.star-rating:before {
  z-index: 0;
  position: absolute;
  width: 0;
  height: 23px;
  content: "";
  background: transparent url("https://i.imgur.com/BhJbWEJ.png") 0 0 no-repeat;
  top: 0;
  left: 0;
}
.star-rating:hover:before {
  width: 100%;
}

input[type="radio"].rating-radio {
  position: absolute;
  margin: 0em 0 0 .9em;
  font-size: .5em;
  z-index: 0;
  visibility: hidden;
}

.rating-radio--1:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--2:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--3:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--4:checked ~ .star-rating:before {
  width: 100%;
}

.rating-radio--5:checked ~ .star-rating:before {
  width: 100%;
}

.puntuacion .star-rating:hover:before,
.puntuacion .star-rating:hover ~ .star-rating:before {
  width: 100%;
}

}

Comments