<div class="logo-footer">
<div class="logo-wrapper">
<a class="logo-link" href="#">
<img class="logo-image" src="image.png">
</a>
</div>
</div>
<style type="text/css">
.logo-footer {
overflow: hidden;
text-align: center;
}
.logo-wrapper {
position: relative;
display: inline-block;
vertical-align: top;
}
.logo-wrapper:before,
.logo-wrapper:after {
content: '';
position: absolute;
width: 5000px;
height: 1px;
background-color: #ccc;
}
.logo-wrapper:before {
right: 110%;
}
.logo-wrapper:after {
left: 110%;
}
</style>@media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Медиа-запросы
// отпадет необходимость в этом коде
$('#navMenu span').hover(function(){
$(this).css({
"transform": "translate(-30px,0px)",
"-webkit-transform": "translate(-30px,0px)",
"-o-transform": "translate(-30px,0px)",
"-moz-transform": "translate(-30px,0px)"
});
}, function(){
$(this).css({
"transform": "translate(0px,0px)",
"-webkit-transform": "translate(0px,0px)",
"-o-transform": "translate(0px,0px)",
"-moz-transform": "translate(0px,0px)"
});
}
);