<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="container">
<aside class="icons">
<nav class="tc">
<a class="icon-heart" onmousedown="return false" onselectstart="return false">
<header class="heart-line"></header>
</a>
<a class="icon-clock" onmousedown="return false" onselectstart="return false">
<header class="clock-line"></header>
</a>
<a class="icon-label" onmousedown="return false" onselectstart="return false">
<header class="label-line"></header>
</a>
</nav>
</aside>
<section class="main">
<section class="column-l">
<header class="button" onmousedown="return false" onselectstart="return false">
<article class="tc">
Lorem ipsum dolor sit amet
</article>
</header>
<article class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</article>
</section>
<section class="column-r">
<section class="message">
<header>Excepteur sint</header>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</article>
</section>
</section>
<div class="clear"></div>
</section>
<footer>
<section class="column-l"></section>
<section class="column-r"></section>
<section class="column-c">
<article>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
</section>
<div class="clear"></div>
</footer>
</section>
</body>
</html>
// Code goes here
html {
width: 100%;
height: 100%;
display: table; }
body {
background: url(http://fs44.www.ex.ua/get/105050838/background.png);
font-family: Tahoma; }
.clear {
clear: both; }
.icons, .main .column-r, footer .column-r {
float: right; }
.icon, .icons .icon-heart, .icons .icon-clock, .icons .icon-label, .main .column-l, footer .column-l {
float: left; }
.icons, .icon, .icons .icon-heart, .icons .icon-clock, .icons .icon-label, .icon-line, .icons .icon-heart .heart-line, .icons .icon-clock .clock-line, .icons .icon-label .label-line, .main .column-r .message {
position: relative; }
.icon-line:after, .icons .icon-heart .heart-line:after, .icons .icon-clock .clock-line:after, .icons .icon-label .label-line:after, .main .column-r .message:before, .main .column-r .message:after {
position: absolute; }
.icons, .main .column-l .button, .main .column-r .message {
text-align: center; }
.tc, body, .icons {
vertical-align: middle;
display: table-cell;
width: inherit;
height: inherit; }
.main .column, .main .column-l, .main .column-r, .main .column-l .button {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
.container {
width: 746px;
border: 3px solid white;
padding: 20px;
background-color: #fcfcfc;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 3px 0px inset;
-moz-box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 3px 0px inset;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 3px 0px inset; }
@media screen and (max-width: 876px) {
.container {
width: auto;
margin-left: 30px;
margin-right: 30px; } }
.icons {
width: 128px;
height: 60px;
background: url(http://fs43.www.ex.ua/get/105050857/border1.png) repeat-x bottom center;
top: -20px;
margin-left: 20px; }
.icons .icon-heart {
background: url(http://fs43.www.ex.ua/get/105050919/icons.png) no-repeat bottom left; }
.icons .icon-heart .heart-line {
margin-left: -10px;
background-color: #ffd2e9; }
.icons .icon-heart .heart-line:after {
border-color: #ffabd6; }
.icons .icon-heart:active .heart-line {
height: 30px;
top: -45px; }
.icons .icon-clock {
background: url(http://fs43.www.ex.ua/get/105050919/icons.png) no-repeat bottom center; }
.icons .icon-clock .clock-line {
margin-left: -9px;
background-color: #9ed3f9; }
.icons .icon-clock .clock-line:after {
border-color: #4badf3; }
.icons .icon-clock:active .clock-line {
height: 15px;
top: -30px; }
.icons .icon-label {
background: url(http://fs43.www.ex.ua/get/105050919/icons.png) no-repeat bottom right; }
.icons .icon-label .label-line {
margin-left: -8px;
background-color: #cad4d9; }
.icons .icon-label .label-line:after {
border-color: #9dafb8; }
.icons .icon-label:active .label-line {
height: 10px;
top: -25px; }
.icons .icon-heart, .icons .icon-clock, .icons .icon-label {
cursor: pointer;
height: 30px;
width: 30px;
margin-left: 19px; }
.icons .icon-heart:first-child, .icons .icon-clock:first-child, .icons .icon-label:first-child {
margin-left: 0px; }
.icons .icon-heart .heart-line, .icons .icon-clock .clock-line, .icons .icon-label .label-line {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.18) 1px 0px 3px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.18) 1px 0px 3px 0px;
box-shadow: rgba(0, 0, 0, 0.18) 1px 0px 3px 0px;
border-width: 6px;
border-style: solid;
border-color: white;
width: 7px;
left: 50%;
bottom: 16px; }
.icons .icon-heart .heart-line:after, .icons .icon-clock .clock-line:after, .icons .icon-label .label-line:after {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
content: "";
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
border-width: 4px;
border-style: solid; }
.main {
margin-left: 0;
margin-right: 148px; }
.main .column-l, .main .column-r {
max-width: 50%; }
.main .column-l {
padding-right: 10px; }
.main .column-l .button {
background-image: -moz-linear-gradient(bottom, #0075a6 0%, #56b5ff 100%);
background-image: -webkit-linear-gradient(bottom, #0075a6 0%, #56b5ff 100%);
background-image: -o-linear-gradient(bottom, #0075a6 0%, #56b5ff 100%);
background-image: -ms-linear-gradient(bottom, #0075a6 0%, #56b5ff 100%);
background-image: linear-gradient(bottom, #0075a6 0%, #56b5ff 100%);
-webkit-box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 3px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 3px 0px;
box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 3px 0px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-ms-border-radius: 22px;
-o-border-radius: 22px;
border-radius: 22px;
cursor: pointer;
height: 41px;
border: 2px solid white;
font-size: 18px;
color: #f1f1f1;
width: 100%;
padding: 5px 15px;
display: table;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); }
.main .column-l .content {
font-size: 18px;
padding: 20px 10px;
margin: 30px 0;
text-align: justify;
background: url(http://fs43.www.ex.ua/get/105050857/border1.png) repeat-x center top, url(http://fs43.www.ex.ua/get/105050857/border1.png) repeat-x center bottom; }
.main .column-r {
padding-left: 10px; }
.main .column-r .message {
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-ms-border-radius: 22px;
-o-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow: gainsboro 0px 1px 1px 0px;
-moz-box-shadow: gainsboro 0px 1px 1px 0px;
box-shadow: gainsboro 0px 1px 1px 0px;
padding: 25px;
background-color: white;
border: 1px solid gainsboro;
font-size: 14px;
color: #666666;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
margin-bottom: 25px; }
.main .column-r .message header {
color: #dd567f;
font-size: 24px;
text-shadow: none;
margin-bottom: 10px; }
.main .column-r .message:before {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
content: "";
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
border: 1px dashed #c6d5e6; }
.main .column-r .message:after {
content: "";
width: 32px;
height: 25px;
bottom: -25px;
right: 13%;
background-image: url(http://fs44.www.ex.ua/get/105050930/ms.png); }
footer {
margin-top: 25px;
display: block; }
footer .column-l {
width: 90px;
height: 45px;
background-image: url(http://fs44.www.ex.ua/get/105050846/barcode.png); }
footer .column-c {
margin-left: 110px;
margin-right: 122px;
font-size: 12px;
background: url(http://fs43.www.ex.ua/get/105050857/border1.png) repeat-x bottom center;
padding-bottom: 30px;
color: #666666;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); }
footer .column-r {
width: 102px;
height: 102px;
background-image: url(http://fs43.www.ex.ua/get/105050938/QRcode.png); }