Hola tengo una muestra de imágenes en la que de primeras se ve una y al poner el ratón sobre ella, se abre como si fuera un cubo quedando cinco imágenes en cruz.
El problema es que al añadirlo a la web se oculta debajo de siguiente sección. Le quite un top: 18em;
en div#emma
que es el div donde van las imagenes, porque me bajaba la muestra hasta el footer
.
Las imágenes vienen a continuación de la frase: TODO SOBRE LA HUERTA, que es el div donde van, pero se esconden debajo de la siguiente, donde pone: GGGGGG.
Faltan estilos, por lo que no tiene buena presencia, pero el error se distingue, poniendo el ratón sobre la imagen se ve el efecto, bueno, lo que no queda debajo. El css va en html porque se supone que no funciona. A ver si con el poco código que muestro se puede arreglar.
Gracias.
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('http://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');
*{
padding:0;
margin:0;
}
#logo{
padding: 0 ;
margin: 0 ;
width: 80px;
height: 80px;
margin: -0.6em 0;
}
html nav.navbar.navbar-custom{
padding: 0;
margin:0;
}
body {
width: 100%;
height: 100%;
font-family: 'Ek Mukta', sans-serif;
font-weight: 300;
color: #666;
background-color: #fff;
font-size: 16px;
line-height: 1.6em;
font-weight: 400;
overflow-x: hidden;
}
html {
width: 100%;
height: 100%;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 20px;
}
h1,
h2,
h4,
h5,
h6 {
margin: 0 0 30px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #111;
}
h3{
margin: 0 0 30px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #008000 !important;
}
h1.h-xlight,h2.h-xlight,h3.h-xlight ,h4.h-xlight ,h5.h-xlight ,h6.h-xlight {
font-weight: 200;
}
h1.h-light,h2.h-light,h3.h-light ,h4.h-light ,h5.h-light ,h6.h-light {
font-weight: 300;
}
h1.h-bold,h2.h-bold,h3.h-bold ,h4.h-bold ,h5.h-bold ,h6.h-bold {
font-weight: 600;
}
h1.font-light,h2.font-light,h3.font-light,h4.font-light,h5.font-light,h6.font-light {
color: #fff;
}
.big-heading {
font-size: 48px;
font-weight: 700;
}
p {
margin: 0 0 10px;
}
.text-center{
font-size: 20px;
}
.service-desc p{
font-size: 16px;
}
p.lead {
font-weight: 600;
}
.highlight-light {
background-color: rgba(255,255,255,.5);
padding: 20px;
display: inline-block;
color: #111;
}
.highlight-dark {
background-color: rgba(0,0,0,.5);
padding: 20px;
display: inline-block;
color: #fff;
}
.highlight-color {
padding: 20px;
display: inline-block;
}
a {
color: #666;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 24px;
line-height: 1.5em;
font-weight: 300;
color: #999;
}
blockquote.bg-light {
background-color: rgba(255,255,255,.8);
padding: 20px;
color: #222;
}
blockquote.bg-dark {
background-color: rgba(0,0,0,.8);
padding: 20px;
}
blockquote strong {
font-weight: 700;
}
.light {
font-weight: 400;
}
.site-logo {
display: flex;
}
.site-logo a.brand {
color: #111;
text-transform: uppercase;
font-size: 32px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
margin-top: 20px;
}
#navigation {
background: #fff;
z-index: 9999;
width:100%;
box-sizing:border-box;
border-bottom: 1px solid #eee;
box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1);
}
/* codigo de Alvaro Montoro */
div#navigation-sticky-wrapper {
position: relative;
z-index: 121;
}
.navbar {
margin-bottom: 0;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.nav.navbar-nav {
background-color: rgba(255,255,255,.6);
}
.navbar-custom.top-nav-collapse .nav.navbar-nav {
background-color: rgba(0,0,0,0);
}
.navbar-custom ul.nav li a {
font-size: 16px;
letter-spacing: 1px;
color: #444;
text-transform: uppercase;
font-weight: 700;
}
.navbar-custom.top-nav-collapse ul.nav li a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #fff;
}
.navbar-custom ul.nav ul.dropdown-menu {
border-radius: 0;
margin-top: 21px;
border-top: none;
}
.navbar-custom ul.nav li a:hover ul.dropdown-menu {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #f5f5f5;
}
.navbar-custom ul.nav ul.dropdown-menu li:last-child{
border-bottom: none;
}
.navbar-custom ul.nav ul.dropdown-menu li a {
padding: 10px 20px;
}
.navbar-custom ul.nav ul.dropdown-menu li a:hover {
background: #fefefe;
}
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
color: #666;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 14px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}
hr {
margin-top: 10px;
}
hr.bold {
border-top: 3px solid #eee;
}
.divider-header {
display: block;
width: 40px;
height: 2px;
margin: 0 auto;
margin-bottom: 10px;
}
.divider-short {
display: block;
width: 60px;
height: 5px;
margin: 0 auto;
margin-bottom: 10px;
}
.marginbot-0{margin-bottom:0 !important;}
.marginbot-10{margin-bottom:10px !important;}
.marginbot-20{margin-bottom:20px !important;}
.marginbot-30{margin-bottom:30px !important;}
.marginbot-40{margin-bottom:40px !important;}
.marginbot-50{margin-bottom:50px !important;}
.marginbot-60{margin-bottom:60px !important;}
.marginbot-70{margin-bottom:70px !important;}
.marginbot-80{margin-bottom:80px !important;}
.marginbot-90{margin-bottom:90px !important;}
.marginbot-100{margin-bottom:100px !important;}
.margintop-0{margin-top:0 !important;}
.margintop-10{margin-top:10px !important;}
.margintop-20{margin-top:20px !important;}
.margintop-30{margin-top:30px !important;}
.margintop-40{margin-top:40px !important;}
.margintop-45{margin-top:45px !important;}
.margintop-50{margin-top:50px !important;}
#container-2{
background-color: #EBB250;
}
.home-section {
padding-top: 20px;
padding-bottom: 20px;
display:block;
position:relative;
z-index:120;
}
.home-section2 {
padding-top: 0px;
padding-bottom: 20px;
display:block;
position:relative;
z-index:120;
}
.inner-section {
padding-top: 110px;
padding-bottom: 110px;
}
.home-section.nopadd-bot {
padding-bottom: 0;
}
.section-heading h2 {
font-size: 24px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}
.section-heading p {
font-weight: 300;
font-size: 20px;
line-height: 1.6em;
}
.color-dark .section-heading h2 {
color: #111;
}
.color-dark .section-heading p {
color: #444;
}
.color-dark .divider-short {
background: #666;
}
.color-dark .divider-header {
background: #666;
}
.color-light .divider-short {
background: #666;
}
.color-light .divider-header {
background: #666;
}
.color-light .section-heading h2 {
color: #fff;
}
.color-light .section-heading p {
color: #fefefe;
}
.color-light blockquote,.color-light p {
color: #fefefe;
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #f9f9f9;
}
.bg-dark {
background: #404040;
}
.text-light {
color: #fff;
}
.intro {
width:100%;
position:relative;
padding:0;
}
.intro-inner {
width:100%;
position:relative;
padding:120px 0 20px;
}
.brand-heading {
font-size: 40px;
}
.intro-text {
font-size: 18px;
}
/* Carousel Styles */
.carousel-inner img {
width: 100%;
max-height: 650px;
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 0;
}
.carousel-control.right span {
padding: 0;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 30px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 30px;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
.carousel-inner > .item {
margin-left:0;
margin-top:0;
margin-bottom:0;
padding-left: 0;
width: 100%;
height: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
margin-left:0;
padding-left: 0;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}
.service-box {
background: #fff;
border-bottom: 2px solid #f7f7f7;
padding: 40px 20px;
}
.service-box:hover {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin-top: -20px;
}
.service-icon {
margin-bottom: 20px;
}
.service-desc h5 {
text-transform: uppercase;
font-weight: 700;
color: #666;
font-size: 18px;
margin-bottom: 10px;
}
.service-desc .divider-header {
margin-bottom: 30px;
}
.item {
margin: 10px;
}
.item img {
display: block;
width: 100%;
height: auto;
}
.btn-lg,
.btn-group-lg > .btn {
border-radius: 2px;
}
.input-group-addon {
background-color: #fefefe;
border: 1px solid #eee;
}
.widget-contact {
text-align: left;
}
.sidebar .widget h5 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.sidebar .widget {
margin-bottom: 50px;
}
.widget ul {
list-style: none;
margin-left:0;
padding-left:0;
}
.sidebar .widget ul li {
margin-left:0;
padding-left:0;
margin-bottom: 10px;
}
.sidebar .widget ul li a {
color: #666;
}
.widget.widget_categories ul li:before {
display: inline-block;
font-family: 'Pe-icon-7-stroke';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e684";
margin-right: 10px;
}
.widget.widget_recent_post ul li figure {
float: left;
margin: 0 20px 0 0;
}
.widget.widget_recent_post ul li {
margin-bottom: 25px;
}
.widget.widget_recent_post ul li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.widget.widget_recent_post ul li h6 {
margin-bottom: 10px;
}
.widget.widget_recent_post ul li span {
font-size: 14px;
}
.widget .tagcloud a {
padding: 4px 10px;
color: #fff;
display:inline-block;
margin: 0 10px 10px 0;
font-size: 14px;
border-radius: 2px;
}
.widget .tagcloud a:hover {
color: #fff;
background: #333;
}
footer{
background-image: url(../img/footer.gif);
background-position: center bottom;
background-size: 100% auto;
background-repeat: repeat-x;
min-height: 50vh;
}
footer {
text-align: center;
padding: 40px 0 30px ;
}
ul.footer-menu {
list-style: none;
}
ul.footer-menu li {
float: left;
margin: 0 0 0 10px;
}
ul.footer-menu li a {
color: #fff;
font-size: 16px;
padding-left: 9px;
line-height: 1.1em;
}
ul.footer-menu li:first-child a {
border-left: none;
padding-left: 0;
}
.social-widget {
margin-top: 20px;
margin-bottom: 30px;
}
.social-widget ul li a:hover {
color: #fff;
}
footer .social-widget ul.team-social li a {
margin: 0 5px;
}
.testimonialslide {
margin-top:0;
padding-top: 0;
}
.testimonialslide ul li blockquote {
color: #fff;
border-left: none;
}
.testimonialslide ul li h4 {
color: #fff;
font-weight: 900;
}
.testimonialslide ul li h4 span {
color: #fff;
font-weight: 400;
}
.btn {
border-radius: 2px;
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 14px;
}
.btn.btn-noradius {
border-radius: 0;
}
a.btn:focus{
outline: 0;
}
.btn-red {
color: #fff;
background-color: #c83539;
border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
color: #fff;
background-color: #666;
border-color: #666;
}
.btn-red:active {
background-image: none;
}
.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
color: #fff;
background-color: #666;
border-color: #666;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #28c3ab;
outline: 0;
color: #000;
background-color: #28c3ab;
}
.btn-huge {
padding: 25px;
font-size: 26px;
}
.banner-social-buttons {
margin-top: 0;
}
.progress {
height: 40px;
}
.progress-bar {
font-size: 14px;
line-height: 40px;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
.intro {
height: 100%;
padding: 0;
}
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 25px;
}
}
@media (max-width:768px) {
#navigation {
padding: 20px 0;
}
.site-logo{
margin: 0 0 0 30px;
float:none;
}
.navbar-custom ul.nav li a {
color: #eee;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #aaa;
}
.navbar-header {
margin-top:-40px;
padding:0;
}
.navbar-header button {
background: #111;
}
.navbar-header button.navbar-toggle {
padding: 4px 15px;
font-size: 14px;
color: #fff;
}
.navbar-custom .nav {
background: #444;
}
.service-box {
margin-bottom: 50px;
}
.team-wrap {
margin-bottom: 30px;
}
form#contact-form {
margin-bottom: 50px;
}
.xs-marginbot-20 {
margin-bottom: 20px;
}
}
@media (max-width:480px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
}
.navbar .navbar-custom {
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style type="text/css">
div#emma {
width: 20%;
position: relative;
perspective: 1500px;
margin-left: 33%;
top:10px;
/*top: 18em;*/
}
div#emma img {
position: absolute;
max-width: 100%;
transform: rotate3d(0, 0, 0, 0deg);
-webkit-filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.6));
outline: 1px solid transparent;
filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.6));
transition-duration: 1s;
}
div#emma img#right {
transform-origin: top right;
transition-delay: 3s;
}
div#emma:hover img#right {
transform: rotate3d(0, 1, 0, 180deg);
transition-delay: 0s;
}
div#emma img#bottom {
transform-origin: center bottom;
transition-delay: 2.5s;
}
div#emma:hover img#bottom {
transform: rotate3d(1, 0, 0, -178deg);
transition-delay: .5s;
}
div#emma img#left {
transform-origin: left top;
transition-delay: 2s;
}
div#emma:hover img#left {
transform: rotate3d(0, 1, 0, -178deg);
transition-delay: 1s;
}
div#emma img#top {
transform-origin: top center;
transition-delay: 1.5s;
}
div#emma:hover img#top {
transform: rotate3d(1, 0, 0, 179deg);
transition-delay: 1.5s;
}
</style>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<div id="navigation">
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="site-logo">
<img id="logo" src="img/logo.png" />
</div>
</div>
<div class="col-md-10">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="index.html">Casa</a>
</li>
<li>
<a href="index.html#about">Sobre mi</a>
</li>
<li>
<a href="#service">Servicios</a>
</li>
<li>
<a href="#">Trabajos</a>
</li>
<li>
<a href="form/formpage.html">Precios</a>
</li>
<li>
<a href="form/formpage.html#works">Contacto</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<section id="about" class="home-section color-dark bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="animatedParent">
<div class="section-heading text-center animated bounceInDown">
<h2 class="h-bold">Expertos en jardines...</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 animatedParent">
<div class="text-center">
<p>Agrochema </p>
</div>
</div>
</div>
</div>
<div id="container-3">
<div>
<img src="#" />
<span></span>
</div>
<div>
<img src="#" />
<span></span>
</div>
<div>
<img src="#" />
<span></span>
</div>
</div>
</section>
<section id="service" class="home-section color-dark bg-gray">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="section-heading text-center">
<h2 class="h-bold">Trabajos</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<section>
<div id="container-2">v>
<div onclick="galery(this)">
<img src="http://i42.tinypic.com/2nsmd0y.jpg" />
</div>
<div onclick="galery(this)">
<img src="http://i42.tinypic.com/2nsmd0y.jpg" />
</div>
<div onclick="galery(this)">
<img src="http://i42.tinypic.com/2nsmd0y.jpg" />
</div>
</div>
</section>
</section>
<section id="works" class="home-section2 color-dark text-center bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="animatedParent">
<div class="section-heading text-center">
<h2 class="h-bold animated bounceInDown">Limpieza y desbroces...</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="works" class="home-section2 color-dark text-center bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="animatedParent">
<div class="section-heading text-center">
<h2 class="h-bold animated bounceInDown">Todo sobre la huerta...!!</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="emma">
<img src="http://i42.tinypic.com/2nsmd0yemma-center.jpg" alt>
<img id="top" src="http://i42.tinypic.com/2nsmd0y.jpg" alt>
<img id="left" src="http://i42.tinypic.com/2nsmd0y.jpg" alt>
<img id="bottom" src="http://i42.tinypic.com/2nsmd0y.jpg" alt>
<img id="right" src="http://i42.tinypic.com/2nsmd0y.jpg" alt>
</div>
</section>
<section id="contact" class="home-section nopadd-bot color-dark bg-gray text-center">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="animatedParent">
<div class="section-heading text-center">
<h2 class="h-bold animated bounceInDown">ggggg</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="FSContainer">
<div class="FSShareAction FSmall">
<ul>
<li>
<span class="FSShareBtn Facebook" data-count="0" data-social="fb">
<svg width="32" height="32" viewBox="0 0 32 32">
<path d=""/>
</svg>
<span>Share on
<abbr>Facebook</abbr>
</span>
</span>
</li>
<li>
<span class="FSShareBtn Twitter" data-count="0" data-social="tw">
<svg width="32" height="32" viewBox="0 0 32 32">
<path d=""/>
</svg>
<span>Share on
<abbr>Twitter</abbr>
</span>
</span>
</li>
<li>
<span class="FSShareBtn Google" data-count="0" data-social="gp">
<svg width="32" height="32" viewBox="0 0 32 32">
<path d=""/>
</svg>
<span>Share on
<abbr>Google</abbr>
</span>
</span>
</li>
<li>
<span class="FSShareBtn Linkedin" data-count="0" data-social="ln">
<svg width="32" height="32" viewBox="0 0 32 32">
<path d=""/>
</svg>
<span>Share on
<abbr>Linkedin</abbr>
</span>
</span>
</li>
<li>
<span class="FSShareBtn Whatsapp" data-count="0" data-social="ws">
<svg width="32px" height="32px" viewBox="0 0 32 32">
<path d="#" />
</svg>
<span>Share on
<abbr>Whatsapp</abbr>
</span>
</span>
</li>
<li>
<span class="FSShareBtn VKontakte" data-count="0" data-social="vk">
<svg width="32" height="32" viewBox="0 0 32 32">
<path d="#"/>
</svg>
<span>Share on
<abbr>VKontakte</abbr>
</span>
</span>
</li>
</ul>
</div>
</div>
</section>
<footer>
<div id="container">
</div>
</footer>
</body>
</html>