Skip to content

Instantly share code, notes, and snippets.

@elricco
Created November 3, 2018 17:43
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save elricco/343c9e0888020548624cf087736733af to your computer and use it in GitHub Desktop.
Responsive layout for OOOPS Page for REDAXO
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ooops, something went wrong!</title>
<style type="text/css">
body, html {
heigt: 100%;
margin: 0;
padding: 0;
background-color: #3d99d5;
}
.body-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.ooops-badge {
display: block;
max-width: 300px;
margin: 10vh auto 20px;
}
.ooops-badge-svg {
display: block;
width: 280px;
height: 280px;
}
.rex-logo {
display: block;
max-width: 200px;
margin: auto auto 0px;
}
.brand-svg {
max-width: 200px;
max-height: 30px;
}
.help-button {
display: block;
margin: 20px auto 20px;
}
.btn-white {
display: inline-block;
background-color: #FFFFFF;
color: #262f42;
border-radius: 25px;
padding: 15px 25px;
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: 300;
font-size: 24px;
line-height: 1;
text-decoration: none;
}
.btn-white:hover,
.btn-white:active,
.btn-white:focus {
background-color: #9ccaed;
}
</style>
</head>
<body>
<div class="body-wrapper">
<div class="ooops-badge">
<svg class="ooops-badge-svg"><title>Ooops, something went wrong</title><use xlink:href="#ooops-badge"></use></svg>
</div>
<div class="rex-logo">
<svg class="brand-svg"><title>REDAXO</title><use xlink:href="#redaxo-logo"></use></svg>
</div>
<div class="help-button">
<a href="#" class="btn-white">Get help!</a>
</div>
</div>
<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ooops-badge" viewBox="0 0 472.66 512.85">
<defs>
<style>.cls-1 {
font-size: 24px;
font-family: Arial, Arial;
letter-spacing: 0.1em;
}
.cls-1, .cls-6 {
fill: #fff;
}
.cls-2 {
letter-spacing: 0.09em;
}
.cls-3 {
fill: #262f42;
}
.cls-4 {
fill: #3998d4;
}
.cls-5 {
fill: #9ccaed;
}
.cls-7, .cls-8 {
fill: #394355;
stroke: #394355;
stroke-miterlimit: 10;
}
.cls-7 {
stroke-width: 21px;
}
.cls-8 {
stroke-width: 20px;
}</style>
</defs>
<title>ooops-badge</title>
<g id="error">
<text class="cls-1" transform="translate(31.37 504.92)">SOMETHING WENT WRONG...</tspan>
</text>
</g>
<g id="rex-badge">
<path id="badge" class="cls-3"
d="M433.3,260.92c0,109.9-89.1,199-199,199s-199-89.1-199-199,89.1-199,199-199,199,89.1,199,199"/>
<path id="head-base" class="cls-4"
d="M180.78,304.21l-30.37,43.28,90.19,10ZM364,192.45l3.48-34.72-53.56-40.26-73.17,10.62-59.41-11.17,7.4,22.24-31.21,16.22-9.06,3-18-1.45-50.38,15L81.71,183l-1.55,8.78-3.86,15.9,6,10.95,4.53,15.89L81.64,272.4l53.84,9.08,201.06,73.7,45.9-85.11Z"/>
<path id="shades" class="cls-5"
d="M335.29,246.25l28.82-53.84,18.36,77.75ZM136.17,230.78l13-17.81,59.57,15.33Zm198.31-18.6-47.69.51-16,6.39L206,221.53,217.56,175l80.79,18.61-38.88-23,41.42-.21,63.2,22.09ZM155.7,207.86,217.56,175,152.44,161.4l1.67,23.78-28.57,18.14,3.8-19.83-39,6.6-14,17.64ZM255,162l22.09-18.87-36.17-15.09-59.55-11.13,39.24,26.37L217.56,175ZM105.43,210.47l-19.88,2.76,1.24,21.25,2.42,6.4,7.08,19.33L119,264.78l17.19-34Zm141,102.16,67.64-25.26-14.95-40.52Zm30.88,37,59.27,5.62-15.64-59.06Z"/>
<path id="shadows" class="cls-3"
d="M96.26,260.14,81.61,272.43l48.45,15.68,34.61,39.11,16.15-22.54,59.82,52.86,36.67-7.92L321,296.17l14.33-49.9-21.1,41.07L246.54,312.6,141.1,269.21ZM80.19,191.75l10.11-1.66L80.19,172ZM160,206.09l-34.51-2.64-49.15,4.3,10.49,26.73L85.7,213.19l22.64-.84,27.86,18.44-8.86-18.85,22.17,1.14,59.36,15.18L265.48,225l28.13-5.11,19.33,2.49L299.22,246.8,334.77,212l-47.88.66-23.47-26.92,7.46,33.34-33.23-3-31.49,5.52Zm-7.36-44.62-23.19,22.09,24.77,1.59Zm-22-4.51,87,18.1-59.86-19.69Zm180.64-17.87L314,117.47l-36.86,25.68-31.75-2.94L255,162l-37.44,13,41.91-4.43,41.42-.21L349,172.27Z"/>
<path id="white-highlights" class="cls-6"
d="M136.15,230.8l13-17.79-22-1.24ZM265.34,225l-56.6,3.27,11.44,26.47,18.47-28.15,12.68,25.07,14-26.65,12.7,25.12,15.43-30.21Zm16.11-54.53,19.33-.1L289.07,157Zm36,.55-9.75-20.83-6.83,20.18Z"/>
</g>
<g id="rrrrr">
<path class="cls-7"
d="M60.39,10.5H20.15L12.47,87H31.94l2.33-23.12H53.05L63.31,87h21.2L73,61C83.55,55.1,87.18,47,88.05,37.1,89.16,24.53,78.47,10.5,60.39,10.5Zm-1.47,34H36.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-7"
d="M153.39,10.5H113.15L105.47,87h19.47l2.33-23.12h18.78L156.31,87h21.2L166,61c10.59-5.85,14.22-14,15.09-23.85C182.16,24.53,171.47,10.5,153.39,10.5Zm-1.47,34H129.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-7"
d="M246.39,10.5H206.15L198.47,87h19.47l2.33-23.12h18.78L249.31,87h21.2L259,61c10.59-5.85,14.22-14,15.09-23.85C275.16,24.53,264.47,10.5,246.39,10.5Zm-1.47,34H222.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-7"
d="M339.39,10.5H299.15L291.47,87h19.47l2.33-23.12h18.78L342.31,87h21.2L352,61c10.59-5.85,14.22-14,15.09-23.85C368.16,24.53,357.47,10.5,339.39,10.5Zm-1.47,34H315.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-7"
d="M432.39,10.5H392.15L384.47,87h19.47l2.33-23.12h18.78L435.31,87h21.2L445,61c10.59-5.85,14.22-14,15.09-23.85C461.16,24.53,450.47,10.5,432.39,10.5Zm-1.47,34H408.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-6"
d="M60.39,10.5H20.15L12.47,87H31.94l2.33-23.12H53.05L63.31,87h21.2L73,61C83.55,55.1,87.18,47,88.05,37.1,89.16,24.53,78.47,10.5,60.39,10.5Zm-1.47,34H36.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-6"
d="M153.39,10.5H113.15L105.47,87h19.47l2.33-23.12h18.78L156.31,87h21.2L166,61c10.59-5.85,14.22-14,15.09-23.85C182.16,24.53,171.47,10.5,153.39,10.5Zm-1.47,34H129.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-6"
d="M246.39,10.5H206.15L198.47,87h19.47l2.33-23.12h18.78L249.31,87h21.2L259,61c10.59-5.85,14.22-14,15.09-23.85C275.16,24.53,264.47,10.5,246.39,10.5Zm-1.47,34H222.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-6"
d="M339.39,10.5H299.15L291.47,87h19.47l2.33-23.12h18.78L342.31,87h21.2L352,61c10.59-5.85,14.22-14,15.09-23.85C368.16,24.53,357.47,10.5,339.39,10.5Zm-1.47,34H315.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-6"
d="M432.39,10.5H392.15L384.47,87h19.47l2.33-23.12h18.78L435.31,87h21.2L445,61c10.59-5.85,14.22-14,15.09-23.85C461.16,24.53,450.47,10.5,432.39,10.5Zm-1.47,34H408.23l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
</g>
<g id="ooops">
<path class="cls-8"
d="M57.71,380.16H40.13c-16.52,0-27.53,14.56-29.76,36.83C8,440.5,16.94,457.44,38.68,457.5H54.1C72.65,457.5,82,444.39,84.56,419,87.12,393.33,75.16,380.16,57.71,380.16ZM65,419.35C63.49,434,60,437.88,52.87,437.88H39.19c-6.56.14-11-3.45-9.41-18.63,1.41-13.63,5.23-19.54,11.75-19.54H57.26c7.12,0,9.19,4.39,7.75,19.64Z"/>
<path class="cls-8"
d="M150.38,380.16H132.8c-16.52,0-27.53,14.56-29.76,36.83-2.36,23.51,6.57,40.45,28.31,40.51h15.42c18.55,0,27.91-13.11,30.46-38.54C179.79,393.33,167.83,380.16,150.38,380.16Zm7.31,39.19c-1.53,14.69-5.07,18.53-12.15,18.53H131.86c-6.56.14-11-3.45-9.41-18.63,1.41-13.63,5.23-19.54,11.75-19.54h15.73c7.12,0,9.19,4.39,7.75,19.64Z"/>
<path class="cls-8"
d="M243,380.16H225.46c-16.52,0-27.53,14.56-29.76,36.83-2.36,23.51,6.57,40.45,28.31,40.51h15.42c18.55,0,27.91-13.11,30.46-38.54C272.45,393.33,260.49,380.16,243,380.16Zm7.31,39.19c-1.53,14.69-5.07,18.53-12.15,18.53H224.52c-6.56.14-11-3.45-9.41-18.63,1.41-13.63,5.23-19.54,11.75-19.54h15.73c7.12,0,9.19,4.39,7.75,19.64Z"/>
<path class="cls-8"
d="M348.12,431c9.51-5,14.22-14,15.09-23.85,1.11-12.57-9.58-26.6-27.66-26.6H295.31L287.63,457H307.1l2.33-23.12h18.78A74.29,74.29,0,0,0,348.12,431Zm-14-16.45H311.39l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-8"
d="M435.79,401.32H404.93c-8,0-7.49,9.49-1.2,9.49h13c31.28,0,29.23,46.11-2.47,46.11H377.08L379,438.08h36c7.25,0,7.17-10.1,1.11-10.1H403.73c-31.49,0-29.87-45.5,2.42-45.5h31.52l-1.88,18.84Z"/>
<path class="cls-6"
d="M69.42,380.16H51.84c-16.52,0-27.53,14.56-29.76,36.83-2.36,23.51,6.57,40.45,28.31,40.51H65.81c18.55,0,27.91-13.11,30.46-38.54C98.83,393.33,86.87,380.16,69.42,380.16Zm7.31,39.19C75.2,434,71.66,437.88,64.58,437.88H50.9c-6.56.14-11-3.45-9.41-18.63,1.41-13.63,5.23-19.54,11.75-19.54H69c7.12,0,9.19,4.39,7.75,19.64Z"/>
<path class="cls-6"
d="M162.09,380.16H144.51C128,380.16,117,394.72,114.75,417c-2.36,23.51,6.57,40.45,28.31,40.51h15.42c18.55,0,27.91-13.11,30.46-38.54C191.5,393.33,179.54,380.16,162.09,380.16Zm7.31,39.19c-1.53,14.69-5.07,18.53-12.15,18.53H143.57c-6.56.14-11-3.45-9.41-18.63,1.41-13.63,5.23-19.54,11.75-19.54h15.73c7.12,0,9.19,4.39,7.75,19.64Z"/>
<path class="cls-6"
d="M254.76,380.16H237.18c-16.52,0-27.53,14.56-29.76,36.83-2.36,23.51,6.57,40.45,28.31,40.51h15.42c18.55,0,27.91-13.11,30.46-38.54C284.17,393.33,272.21,380.16,254.76,380.16Zm7.31,39.19c-1.53,14.69-5.07,18.53-12.15,18.53H236.24c-6.56.14-11-3.45-9.41-18.63,1.41-13.63,5.23-19.54,11.75-19.54h15.73c7.12,0,9.19,4.39,7.75,19.64Z"/>
<path class="cls-6"
d="M359.83,431c9.51-5,14.22-14,15.09-23.85,1.11-12.57-9.58-26.6-27.66-26.6H307L299.34,457h19.47l2.33-23.12h18.78A74.29,74.29,0,0,0,359.83,431Zm-14-16.45H323.1l1.48-14.65c8.46,0,19.31.1,23.17.1,5,0,7.74,3.41,7.74,7,0,4.65-4,7.5-9.7,7.5Z"/>
<path class="cls-6"
d="M447.5,401.32H416.64c-8,0-7.49,9.49-1.19,9.49h13c31.28,0,29.23,46.11-2.47,46.11H388.79l1.89-18.84h36c7.25,0,7.17-10.1,1.12-10.1H415.45c-31.5,0-29.87-45.5,2.42-45.5h31.51l-1.88,18.84Z"/>
</g>
</symbol>
<symbol id="redaxo-logo" viewBox="202.64 375.948 190 29"><path fill="#FFF" d="M220.283 376.362l-14.812.006-2.832 28.14h7.17l.858-8.513h6.91l3.775 8.513h7.804l-4.252-9.587c3.902-2.129 5.238-5.124 5.56-8.77.409-4.625-3.525-9.789-10.181-9.789zm-.542 12.499h-8.354l.544-5.394c3.114.016 7.11.038 8.53.038 1.833 0 2.85 1.255 2.85 2.571 0 1.736-1.466 2.785-3.57 2.785zM238.429 393.322h14.316l.638-6.33H239.11c.598-2.541 1.827-3.527 3.569-3.527l13.481.002.71-7.101-14.199-.003c-6.501 0-10.315 3.946-11.29 13.47-.923 9.02 3.089 14.675 10.343 14.675h12.303l.733-7.164c-4.086-.021-10.754-.119-12.812-.128-2.451-.008-3.407-.968-3.519-3.894zM272.084 376.366h-13.562l-2.841 28.142 14.93-.001c13.873 0 16.278-28.141 1.473-28.141zm2.974 13.435c-.491 5.17-2.383 7.572-4.602 7.572h-6.885l1.399-13.877h6.83c2.092 0 3.614 2.55 3.258 6.305z"/><path fill="#2A3542" d="M300.14 376.366h-5.529c-6.216 0-9.932 4.109-10.666 10.567l-1.773 17.598h7.17l.897-8.907h11.947l-.919 8.907h7.172l1.74-16.87c.688-6.804-3.688-11.274-10.039-11.295zm2.943 10.575l-.242 2.351h-11.963l.166-1.644c.319-3.144 1.359-4.117 3.586-4.192h5.503c2.374.009 3.216 1.247 2.95 3.485z"/><path fill="#2A3542" d="M317.4 376.433l5.222 8.611 5.52-8.611h8.929l-10.11 15.25 8.768 12.801h-8.397l-4.245-6.678-4.444 6.678h-9.245l9.151-13.417-9.139-14.634h7.99z"/><path fill="#2A3542" d="M350.776 376.237l-6.472.003c-6.083 0-10.135 5.361-10.957 13.559-.868 8.657 2.417 14.89 10.42 14.913l5.678-.017c6.83.013 10.275-4.826 11.215-14.188.945-9.419-3.461-14.27-9.884-14.27zm2.689 14.426c-.562 5.407-1.865 6.823-4.471 6.823-.606 0-5.037.017-5.037.017-2.415.053-4.041-1.272-3.464-6.859.519-5.018 1.927-7.192 4.326-7.192l5.792-.003c2.62-.001 3.399 1.59 2.854 7.214z"/><path fill="#FFF" d="M370.768 397.044h-3.95c-.948 0-1.504.337-1.766 2.58-.23 1.99.404 2.5 1.353 2.5.74 0 2.439.015 3.851.007l-.264 2.609c-1.438.007-3.057-.009-3.765-.009-2.719 0-4.049-2.074-3.769-5.369.26-3.047 1.598-4.926 4.118-4.926h4.456l-.264 2.608zm21.406-.04l-4.273.001c-1.096 0-1.039 1.313-.165 1.313l1.805.003c4.334 0 4.034 6.387-.342 6.387l-5.157-.008.264-2.608 4.987.008c1.005 0 .994-1.398.156-1.398l-1.713-.001c-4.362 0-4.14-6.302.334-6.302l4.367-.002-.263 2.607zm-13.135.037l-.776 7.705h-2.622l.777-7.705-1.828-.017-.719 7.722h-2.619l.964-10.364 7.591.052c2.322.008 3.921 1.658 3.67 4.145l-.636 6.167h-2.622l.664-6.431c.094-.933-.279-1.27-1.078-1.274h-.766z"/><path fill="#2A3542" d="M368.855 376.15a5.295 5.295 0 0 1 5.292 5.306 5.293 5.293 0 0 1-10.584 0 5.297 5.297 0 0 1 5.292-5.306zm-2.792 8.169a3.918 3.918 0 0 0 5.599 0 4.08 4.08 0 0 0 0-5.74 3.917 3.917 0 0 0-5.599 0 4.062 4.062 0 0 0 0 5.74zm3.727-2.395l1.464 2.676h-1.8l-1.135-2.246-.274 2.246h-1.533l.788-6.397h1.923c1.574 0 2.399.935 1.938 2.395-.205.681-.687 1.127-1.371 1.326zm-1.084-.962c.539 0 .831-.221.944-.583.189-.534-.035-.864-.659-.864h-.321l-.177 1.447h.213z"/></symbol>
</svg>
</div>
<body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment