HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Laimprentaverde.com</title>
<meta content="text/html; charset=iso-8859-1">
<meta name="Description" content="descripción de la página">
<LINK REL="stylesheet" HREF="imprentafinal.css" TYPE="text/css">
<link rel="shortcut icon" href="cursor.cur" />
</head>
<body>
<a name="arriba"></a>
<img class="pergamino" src="pergamino3transparente.png" alt="" />
<img class="logo" src="logocagao.png" alt="" />
<div id="caja">
<ul class="art-hmenu"><li><a href="" class="active">Inicio</a></li><li><a href="">Quienes somos</a></li><li><a href="">Contacto</a></li><li><a href="">Qué hacemos</a></li></ul>
</nav>
<div class="art-layout-wrapper clearfix">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-sidebar1 clearfix"><div class="art-vmenublock clearfix">
</div>
</div>
</div>
</div>
<div class="galeria">
<div class="imagen"></div>
<div class="imagen"></div>
<div class="imagen"></div>
<div class="imagen"></div>
</div>
</div>
<div style="position:fixed;right:3%;top:20px;"><a href="#arriba"><img src="pluma ancla.png" /></a></div>
<p> C/Leonardo Rucabado nº27</p>
<p>Polideportivo Patxi Torre 1ª planta </p>
<p>Tel:942 44 44 44 </p>
</body>
</html>
CSS:
body{
background-image: url("fondo_madera.jpg");
background-size: cover;
background-repeat: no-repeat;
height:1000px;
cursor: url("cursor.cur"), pointer;
}
.pergamino {
position:absolute;
left:27%;
}
.logo {
position:relative;
top:85px;
left:32%;
opacity:0.6;
}
table, ul.art-hmenu
{
font-size: 13px;
font-weight: normal;
font-style: normal;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
padding-left: 12px;
padding-right: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.art-nav:before
{
content:' ';
}
.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu
{
float: left;
}
.art-menuitemcontainer
{
margin:0 auto;
}
ul.art-hmenu>li {
margin-left: 5px;
}
ul.art-hmenu>li:first-child {
margin-left: 2px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 2px;
}
ul.art-hmenu>li>a
{
background: #E4C195 url('images/menuitem.png') scroll;
background: linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), -webkit-linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), -moz-linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
background: -o-linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), -o-linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), -ms-linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
background: linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(240, 221, 198, 0.25) 0, rgba(215, 164, 101, 0.1) 100%) no-repeat, url('images/menuitem.png'), linear-gradient(top, #ECD4B6 0, #DBAD75 100%) no-repeat;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:1px solid #CD8C3C;
padding:0 22px;
margin:0 auto;
position: relative;
display: block;
height: 32px;
cursor: url("cursor.cur"), pointer;
text-decoration: none;
color: #202726;
line-height: 32px;
text-align: center;
}
.art-hmenu a,
.art-hmenu a:link,
.art-hmenu a:visited,
.art-hmenu a.active,
.art-hmenu a:hover
{
font-size: 16px;
font-family: Hanuman, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #B4AC8E url('images/menuactiveitem.png') scroll;
background: linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), -webkit-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), -moz-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -o-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), -o-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), -ms-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuactiveitem.png'), linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:1px solid #7E7553;
padding:0 22px;
margin:0 auto;
color: #232A29;
text-decoration: none;
}
ul.art-hmenu>li>a:visited,
ul.art-hmenu>li>a:hover,
ul.art-hmenu>li:hover>a {
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
background: #B4AC8E url('images/menuhovereditem.png') scroll;
background: linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), -webkit-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), -moz-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -o-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), -o-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), -ms-linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
background: linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(203, 198, 178, 0.23) 0, rgba(158, 148, 109, 0.11) 100%) no-repeat, url('images/menuhovereditem.png'), linear-gradient(top, #C4BEA6 0, #A59C78 100%) no-repeat;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:1px solid #7E7553;
padding:0 22px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop-nav ul.art-hmenu>li:hover>a {
color: #000000;
text-decoration: none;
}
ul.art-hmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
left: -5px;
width:5px;
height: 32px;
background: url('images/menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li:first-child:before{
display:none;
}
ul.art-hmenu li li a
{
background: #BCC8C7;
background: transparent;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:0 8px;
margin:0 auto;
}
ul.art-hmenu li li
{
float: none;
width: auto;
margin-top: 0;
margin-bottom: 0;
}
.desktop-nav ul.art-hmenu li li ul>li:first-child
{
margin-top: 0;
}
ul.art-hmenu li li ul>li:last-child
{
margin-bottom: 0;
}
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 28px;
min-width: 7em;
border: 0 solid transparent;
text-align: left;
line-height: 28px;
color: #171C1B;
font-size: 16px;
font-family: Hanuman, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
.art-hmenu ul a:link,
.art-hmenu ul a:visited,
.art-hmenu ul a.active,
.art-hmenu ul a:hover
{
text-align: left;
line-height: 28px;
color: #171C1B;
font-size: 16px;
font-family: Hanuman, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
.desktop-nav ul.art-hmenu>li>ul>li
{
margin-top: 0;
margin-bottom: 0;
}
.desktop-nav .art-hmenu>li>ul>li>a
{
font-weight: bold !important;
}
.desktop-nav .art-hmenu>li>ul>li
{
float: left;
}
.desktop-nav .art-hmenu>li>ul>li>ul
{
position: relative;
left: 0 !important;
right: auto !important;
padding: 0 !important;
margin: 0 !important;
}
.desktop-nav .art-hmenu>li:hover>ul>li>ul
{
visibility: visible;
}
.desktop-nav .art-hmenu>li>ul>li>ul:before
{
visibility: hidden;
}
ul.art-hmenu ul li a:hover
{
background: #A5B5B4;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0 auto;
}
.art-hmenu ul a:hover
{
text-decoration: underline;
}
.art-hmenu ul li a:hover
{
color: #000000;
}
.desktop-nav .art-hmenu ul li:hover>a
{
color: #000000;
}
ul.art-hmenu ul:before
{
background: #D9A669;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
border:1px solid #7B9390;
margin:0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}
.desktop-nav ul.art-hmenu li:hover>ul {
visibility: visible;
top: 100%;
}
.desktop-nav ul.art-hmenu li li:hover>ul {
top: 0;
left: 100%;
}
ul.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('images/spacer.gif');
}
.desktop-nav ul.art-hmenu>li>ul
{
padding: 12px 32px 32px 32px;
margin: -10px 0 0 -30px;
}
.desktop-nav ul.art-hmenu ul ul
{
padding: 32px 32px 32px 14px;
margin: -32px 0 0 -9px;
}
.desktop-nav ul.art-hmenu ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
.desktop-nav ul.art-hmenu ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
.desktop-nav ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
right: auto;
left: 100%;
}
.desktop-nav ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
left: auto;
right: 100%;
}
.desktop-nav ul.art-hmenu ul ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
padding: 32px 32px 32px 14px;
margin: -32px 0 0 -9px;
}
.desktop-nav ul.art-hmenu ul ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
padding: 32px 14px 32px 32px;
margin: -32px -9px 0 0;
}
.desktop-nav ul.art-hmenu li ul>li:first-child {
margin-top: 0;
}
.desktop-nav ul.art-hmenu li ul>li:last-child {
margin-bottom: 0;
}
.desktop-nav ul.art-hmenu ul ul:before
{
border-radius: 3px;
top: 30px;
bottom: 30px;
right: 30px;
left: 12px;
}
.desktop-nav ul.art-hmenu>li>ul:before
{
top: 10px;
right: 30px;
bottom: 30px;
left: 30px;
}
.desktop-nav ul.art-hmenu>li>ul.art-hmenu-left-to-right:before {
right: 30px;
left: 30px;
}
.desktop-nav ul.art-hmenu>li>ul.art-hmenu-right-to-left:before {
right: 30px;
left: 30px;
}
.desktop-nav ul.art-hmenu ul ul.art-hmenu-left-to-right:before {
right: 30px;
left: 12px;
}
.desktop-nav ul.art-hmenu ul ul.art-hmenu-right-to-left:before {
right: 12px;
left: 30px;
}
#caja {
position:relative;
top:110px;
left:33%;
width: 700px;
}
.galeria {
position: relative;
width: 65%;
overflow: hidden;
margin: 40px auto;
background-color: #000;
box-shadow: 1px 1px 6px #000;
top:150px;
right:73%;
}
.galeria:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(1.jpg); /* Fondo por defecto */
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
opacity: .6;
}
.imagen {
position: relative;
width: 15%;
padding-bottom: 15%;
background-position: 50% 50%;
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
cursor: pointer;
}
.imagen:nth-of-type(1) {
background-image: url(2.jpg);
}
.imagen:nth-of-type(2) {
background-image: url(3.jpg);
}
.imagen:nth-of-type(3) {
background-image: url(4.jpg);
}
.imagen:nth-of-type(4) {
background-image: url(5.jpg);
}
.imagen:before {
content: "";
position: absolute;
top: -700%; /* ((Nºimágenes*2)-1)*100*/
left: 100%;
width: 566%; /* Lo siento... esto es por tanteo */
height: 400%; /* Nºimagenes*100 */
background-image: inherit;
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
-moz-transition: all .8s ;-webkit-transition: all .8s ;transition: all .8s ;
}
.imagen:hover:nth-of-type(1):before {
top: 0%;
}
.imagen:hover:nth-of-type(2):before {
top: -100%;
}
.imagen:hover:nth-of-type(3):before {
top: -200%;
}
.imagen:hover:nth-of-type(4):before {
top: -300%;
}
p{
position:relative;
text-decoration:none;
top:170px;
font-family:JaneAusten;
font-size:15pt;
right:1%;
}
@font-face
{
font-family: 'JaneAusten';
src: url('JaneAust.ttf');
}
