Make page mobile responsive, use styleguide font

This commit is contained in:
Matt Rider 2019-07-29 09:13:38 +02:00
parent 733d3333c9
commit 6ba550f198

View File

@ -1,17 +1,59 @@
<body style="background-color: #F5F4F6;">
<div style="margin: 3em;vertical-align: middle;text-align: center;">
<h1 style="float: left;width: 25%;margin-right: 1em;">
<head>
<style>
.body {
background-color: #f5f4f6;
}
.left-header,
.right-header {
font-family: "LatoWeb", sans-serif;
line-height: 1.3;
}
@media only screen and (min-width: 960px) {
.outer-div {
margin: 3em;
vertical-align: middle;
text-align: center;
}
.left-header {
float: left;
width: 25%;
margin-right: 1em;
}
.image {
width: 35em;
}
.right-header {
float: right;
width: 25%;
margin: 12em 1em 5em 2em;
}
.email-link {
margin-left: -5em;
}
}
@media only screen and (max-width: 960px) {
.outer-div {
margin: 3em;
vertical-align: middle;
text-align: center;
}
.image {
margin: 2em 0em;
}
}
</style>
</head>
<body class="body">
<div class="outer-div">
<h1 class="left-header">
At the moment we are doing some scheduled maintenance, please try again
later.
</h1>
<img
src="./onourjourney.svg"
alt="Maintenance mode image"
style="width: 35em;"
/>
<h1 style="float: right;width: 25%;margin: 12em 1em 5em 2em;">
<img src="./onourjourney.svg" alt="Maintenance mode image" class="image" />
<h1 class="right-header">
Any Questions or concerns, send an email to <br />
<a href="mailto:info@human-connection.org" style="margin-left: -5em;"
<a href="mailto:info@human-connection.org" class="email-link"
>info@human-connection.org</a
>
</h1>