html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1 0 auto;
}
.header {
background: rgba(0,0,0,.3);
text-align:center;
font-size:18px;
padding-top:0.5em;
}
.content {
background: #d3d3d3;
min-height:15%;
}
.footer {
background: #061D25;
padding: 10px 0;
margin-top:-20px;
position:relative;
height:7%;
}
.footer a {
color: #70726F;
font-size: 20px;
padding: 10px;
border-right: 1px solid #70726F;
transition: all .5s ease;
}
.footer a:first-child {
border-left: 1px solid #70726F;
}
.footer a:hover {
color: white;
}
p {
padding:1em;
font-size:18px;
color:inherit;
font-family: Arial, serif;
}
<!DOCTYPE html>
<html lang="rus">
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="80%" viewBox="0 0 1254 639" preserveAspectRatio="xMinYmin meet" style="border:0px solid" >
<defs>
<mask id="cp">
<rect width="100%" height="100%" fill="red" />
<path fill="white" stroke="black" stroke-width="1" d="M 24.931997,548.48601 V 21.12007 H 1182.6439 v 450.94395 c 0,0 -61.0932,16.05611 -92.14,21.68 -44.806,8.11626 -90.1116,13.69079 -135.5,17.34399 -54.05529,4.35077 -108.37179,4.96588 -162.59999,5.42 -65.40801,0.54774 -130.80712,-1.92529 -196.20397,-3.252 -45.17038,-0.91637 -90.32076,-3.05219 -135.49999,-3.252 -47.701,-0.21096 -95.42949,0.14354 -143.08798,2.168 -41.43616,1.76015 -82.53642,5.39964 -124.11799,8.672 -52.03726,4.0952 -168.561983,27.642 -168.561983,27.642 z" >
<animate
attributeName="d"
begin="0s"
dur="6s"
fill="freeze"
repeatCount="indefinite"
restart="whenNotActive"
values="
M 24.931997,548.48601 V 21.12007 H 1182.6439 v 450.94395 c 0,0 -61.0932,16.05611 -92.14,21.68 -44.806,8.11626 -90.1116,13.69079 -135.5,17.34399 -54.05529,4.35077 -108.37179,4.96588 -162.59999,5.42 -65.40801,0.54774 -130.80712,-1.92529 -196.20397,-3.252 -45.17038,-0.91637 -90.32076,-3.05219 -135.49999,-3.252 -47.701,-0.21096 -95.42949,0.14354 -143.08798,2.168 -41.43616,1.76015 -82.53642,5.39964 -124.11799,8.672 -52.03726,4.0952 -168.561983,27.642 -168.561983,27.642 z;
M 24.931997,548.48601 V 21.12007 H 1182.6439 v 450.94395 c 0,0 -29.6572,26.89611 -60.704,32.52 -44.806,8.11626 -117.2116,21.27879 -162.6,24.93199 -54.05529,4.35077 -112.70779,-13.46212 -166.93599,-13.008 -65.40801,0.54774 -119.96712,14.33471 -185.36397,13.008 -45.17038,-0.91637 -101.16076,-19.31219 -146.33999,-19.512 -47.701,-0.21096 -148.54549,21.82354 -196.20398,23.848 -41.43616,1.76015 -154.08041,-29.28836 -195.66198,-26.016 -52.03726,4.0952 -43.901993,40.65 -43.901993,40.65 z;
M 24.931997,548.48601 V 21.12007 H 1182.6439 v 450.94395 c 0,0 -61.0932,16.05611 -92.14,21.68 -44.806,8.11626 -90.1116,13.69079 -135.5,17.34399 -54.05529,4.35077 -108.37179,4.96588 -162.59999,5.42 -65.40801,0.54774 -130.80712,-1.92529 -196.20397,-3.252 -45.17038,-0.91637 -90.32076,-3.05219 -135.49999,-3.252 -47.701,-0.21096 -95.42949,0.14354 -143.08798,2.168 -41.43616,1.76015 -82.53642,5.39964 -124.11799,8.672 -52.03726,4.0952 -168.561983,27.642 -168.561983,27.642 z"
/>
</path>
</mask>
</defs>
<rect width="100%" height="100%" fill="#939393" />
<rect x="92" y="25" width="1070" height="618" fill="#FFDA98" stroke="#230414" stroke-width="0"/>
<image mask="url(#cp)" xlink:href="https://i.stack.imgur.com/khBVk.gif" width="100%" height="100%" />
<text x="300" y="200" fill="#F0F0F0" font-family="sans-serif" font-size="20px">Ресторанная анимация
<tspan x="300" y="220"> и мастер классы </tspan>
<tspan x="300" y="240" font-size="16px"> от Ирины Мироновой </tspan>
</text>
<text x="500" y="600" fill="#564933" font-family="sans-serif" font-size="18px">О компании в цифрах </text>
</svg>
</div>
<div class="content">
<p>Ресторанная анимация – это новая досуговая деятельность, предлагаемая в ресторанах, кафе и других предприятия общественного питания, которая в той или иной форме существовала также ранее, но имела иные способы выражения.
</p>
</div>
<div class="footer">
<div class="container text-center">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-skype"></i></a>
</div>
</div>
</div>
</body>
</html>