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="libro.css">
			<script>
	     function seleccionar(){
	      	document.miFormulario.campo1.style.background = "green"
	      document.miFormulario.campo1.style.color = "white"
	     }
	     function quitar(){
	        document.miFormulario.campo1.style.background = "white"
	        document.miFormulario.campo1.style.color = "black"
	     }
	     function changeFunc() {
	        var selectBox = document.getElementById("selectBox");
	        var selectedValue = selectBox.options[selectBox.selectedIndex].text;
	        document.miFormulario.campo1.value= selectedValue;
	        document.miFormulario.campo1.style.background = "green"
	        document.miFormulario.campo1.style.color = "white"
	       if(selectedValue=="Leido"){
	         document.getElementById("leido").style="display:none";
	         document.getElementById("quieroleer").style="display:initial";
	         document.getElementById("leyendo").style="display:initial";
	       }
	       else if(selectedValue=="Leyendo"){
	         document.getElementById("leido").style="display:initial";
	         document.getElementById("quieroleer").style="display:initial";
	         document.getElementById("leyendo").style="display:none";
	       }
	       else{
	         document.getElementById("quieroleer").style="display:none";
	         document.getElementById("leido").style="display:initial";
	         document.getElementById("leyendo").style="display:initial";
	       }
	     }

	    </script>
	</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><a href="login.html">Cerrar sesión</a></li>
					<li><div class="logo"><img src="LOGO.png" alt="Imagen ejemplo"></div></li>
				</ul>
			</div>
			<div class="informacion">
				<div class="imagen">
					<img src="anillo.jpg" alt="Imagen ejemplo">
				</div>
				<div class="titulo">
					<h1> El señor de los anillos: La comunidad del Anillo </h1>
					<br/>
					<h2> J. R. R. Tolkien </h2>
				</div>
				<br/>

				<div class="puntuacion">
					<input type="radio" name="ratings[1]" id="Overall Rating_5" value="5" class="radio rating-radio rating-radio--5">
					<label for="Overall Rating_5" title="1 star rating" class="star-rating star-rating--5"></label>
					<input type="radio" name="ratings[1]" id="Overall Rating_4" value="4" class="radio rating-radio rating-radio--4">
					<label for="Overall Rating_4" title="2 star rating" class="star-rating star-rating--4"></label>
					<input type="radio" name="ratings[1]" id="Overall Rating_3" value="3" class="radio rating-radio rating-radio--3">
					<label for="Overall Rating_3" title="3 star rating" class="star-rating star-rating--3"></label>
					<input type="radio" name="ratings[1]" id="Overall Rating_2" value="2" class="radio rating-radio rating-radio--2">
					<label for="Overall Rating_2" title="4 star rating" class="star-rating star-rating--2"></label>
					<input type="radio" name="ratings[1]" id="Overall Rating_1" value="1" class="radio rating-radio rating-radio--1">
					<label for="Overall Rating_1" title="5 star rating" class="star-rating star-rating--1"></label>
				</div>

				<div class="descripcion">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et velit nec felis aliquet efficitur rhoncus convallis neque. In et sollicitudin ipsum. Sed bibendum in dui sit amet mattis. Nunc rutrum feugiat nunc, et vehicula lectus cursus eget. Nunc blandit sodales neque ac pretium. Praesent tristique in nulla non molestie. </p>
				</div>

				<div class="EnlacesVenta">
					<a href="https://www.amazon.com/El-Senor-Los-Anillos-Comunidad/dp/9505470673/ref=sr_1_2?ie=UTF8&qid=1508393199&sr=8-2&keywords=la+comunidad+del+anillo">
						<button>Comprar Libro	</button>
					</a>
				</div>

				<div class="ISBN"><p>ISBN : 9788445073728</p></div>

				<div class="fecha"><p>Publicación : 2002</p></div>

				<br>

				<ul id="estados"><li id="state"><div class="estado"> <form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
				<input type="button" id="mostrar" value="Quiero leer" name="campo1" onclick="seleccionar()" ondblclick="quitar()"> </div> </li>
				<li id="state"><select id="selectBox" onchange="changeFunc()";>
				<option style="display:none"></option>
				<option id="leido">Leído</option>
				<option id="leyendo">Leyendo</option>
				<option id="quieroleer" style="display:none">Quiero leer</option>
				</select></li>
				 </ul>

				<div class="comments">
					<div class="comment-wrap">
						<div class="photo">
							<div class="avatar" style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwmV1JDR2f-MW8vWts8a6dSxj9yVdjgOxDZa4SSR8c0R9t1u32')"></div>
						</div>
						<div class="comment-block">
							<form action="">
									<textarea name="textoComentario" id="comentario" cols="30" rows="3" placeholder="Add comment..."></textarea>
									<button type="submit" class="button button-block"/>Finalizar</button>
							</form>
						</div>
					</div>

					<div class="comment-wrap">
						<div class="photo">
							<div class="avatar" style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwmV1JDR2f-MW8vWts8a6dSxj9yVdjgOxDZa4SSR8c0R9t1u32')"></div>
						</div>
						<div class="comment-block">
							<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit quasi
								sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
							<div class="bottom-comment">
								<div class="comment-date">Aug 24, 2014 @ 2:35 PM</div>
								<ul class="comment-actions">
									<li class="complain">Complain</li>
									<li class="reply">Reply</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="comment-wrap">
						<div class="photo">
							<div class="avatar" style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwmV1JDR2f-MW8vWts8a6dSxj9yVdjgOxDZa4SSR8c0R9t1u32')"></div>
						</div>
						<div class="comment-block">
							<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam.</p>
							<div class="bottom-comment">
								<div class="comment-date">Aug 23, 2014 @ 10:32 AM</div>
								<ul class="comment-actions">
									<li class="complain">Complain</li>
									<li class="reply">Reply</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Impulso90/a-pen-by-fidel-KyWRmW */
@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: 96%;
  height: bottom;
  z-index: 1;
  background: #FFFFFF;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 3%;
  padding-top: 15%;
  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;
  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: 20%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.EnlacesVenta button:hover {
    background-color: green;
}

.imagen img {
	position: absolute;
	max-width: 12%;
	max-height: 20%;
	margin: 5px;
}


.titulo {
  margin-left: 25%;
  font-size: 15px;
}

.descripcion{
  margin-left: 25%;
  font-size: 15px;
  text-align : justify;
}

.puntuacion{
	clear: both;
	float: left;
	margin: 1.5rem;
	margin-left: 3em;
}
.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%;
}

input, textarea {
  outline: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: 1rem;
  color: #555f77;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ced2db;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #ced2db;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ced2db;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #ced2db;
}

p {
  line-height: 1.3125rem;
}

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
}

.comment-wrap {
  margin-bottom: 1.25rem;
  display: table;
  width: 100%;
  min-height: 5.3125rem;
}

.photo {
  padding-top: 0.625rem;
  display: table-cell;
  width: 3.5rem;
}
.photo .avatar {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background-size: contain;
}

.comment-block {
  padding: 1rem;
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
  width: 100%;
  resize: none;
}

.comment-text {
  margin-bottom: 1.25rem;
}

.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
}

.comment-date {
  float: left;
}

.comment-actions {
  float: right;
}
.comment-actions li {
  display: inline;
  margin: -2px;
  cursor: pointer;
}
.comment-actions li.complain {
  padding-right: 0.75rem;
  border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
  padding-left: 0.75rem;
  padding-right: 0.125rem;
}
.comment-actions li:hover {
  color: #0095ff;
}
}

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

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: bottom;
  z-index: 1;
  background: #FFFFFF;
 /* max-width: 1000px;*/
  /*margin: px 100px;*/
  padding: 3%;
  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;
  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: 20%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.EnlacesVenta button:hover {
    background-color: green;
}

.imagen img {
	position: absolute;
	max-width: 12%;
	max-height: 20%;
	margin: 5px;
}


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

.descripcion{
  margin-left: 25%;
  font-size: 15px;
  text-align : justify;
}

.puntuacion{
	clear: both;
	float: left;
	margin: 1.5rem;
	margin-left: 3em;
}
.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: -60em;
  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%;
}

input, textarea {
  outline: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: 1rem;
  color: #555f77;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ced2db;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #ced2db;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ced2db;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #ced2db;
}

p {
  line-height: 1.3125rem;
}

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
}

.comment-wrap {
  margin-bottom: 1.25rem;
  display: table;
  width: 100%;
  min-height: 5.3125rem;
}

.photo {
  padding-top: 0.625rem;
  display: table-cell;
  width: 3.5rem;
}
.photo .avatar {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background-size: contain;
}

.comment-block {
  padding: 1rem;
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
  width: 100%;
  resize: none;
}

.comment-text {
  margin-bottom: 1.25rem;
}

.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
}

.comment-date {
  float: left;
}

.comment-actions {
  float: right;
}
.comment-actions li {
  display: inline;
  margin: -2px;
  cursor: pointer;
}
.comment-actions li.complain {
  padding-right: 0.75rem;
  border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
  padding-left: 0.75rem;
  padding-right: 0.125rem;
}
.comment-actions li:hover {
  color: #0095ff;
}
}
.estado input {
  width:auto;
  border: solid;
  border-width:1px;
    font-size:60%;
}

#estados {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    font-size:150%;
}

#state {
    float: left;
  font-size:150%;
}

#estados:li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}


select {
  font-size: 100%;
  width:20px;
  -webkit-appearance: none;
  padding: 25%;
  margin-right:30px;
  max-height:58px;
  background: transparent
  url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
}

select::-ms-expand {
    display: none;
}

.ISBN{
  margin-left: 25%;
  font-size: 15px;
  margin-top:-50px;
  text-align : justify;
}
.fecha{
  margin-left: 25%;
  font-size: 15px;
  text-align : justify;
  margin-bottom:-15px;
}

Comments