Add styling to page
This commit is contained in:
Chloe Herd
parent
e22f66eb83
commit
9375b6b2a6
4 changed files with 86 additions and 8 deletions
BIN
public/static/assets/Urbanist-Regular.woff
Normal file
BIN
public/static/assets/Urbanist-Regular.woff
Normal file
Binary file not shown.
BIN
public/static/assets/Urbanist-SemiBold.woff
Normal file
BIN
public/static/assets/Urbanist-SemiBold.woff
Normal file
Binary file not shown.
3
public/static/assets/logo.svg
Normal file
3
public/static/assets/logo.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 439.8 73.6" viewBox="0 0 439.8 73.6">
|
||||
<path d="M47.2 22.8c-.8 0-1.4-.6-1.4-1.4v-1.5c0-4.1-2.6-7.5-8.1-7.5-6.1 0-8.8 4.3-8.8 7.4 0 13.7 46.4 7 46.4 32.3 0 14.7-13.6 21.3-38.6 21.3C13.1 73.4 0 68.2 0 53.9v-1c0-.8.6-1.4 1.4-1.4H26c.8 0 1.4.6 1.4 1.4v1.5c0 5.9 3.8 8 9.3 8 5.8 0 9.2-4.2 9.2-8 0-13.7-44.5-6.9-44.5-31.4C1.4 9 13.1 1.4 37.1 1.4c23.8 0 34.5 6 35.2 19.8 0 .8-.6 1.5-1.4 1.5l-23.7.1zm106.4-7.1c0-9.8 6-13.4 23.8-13.4 3.3 0 7.3.1 11 .4.7.1 1.3.7 1.3 1.4v6c0 .8-.7 1.5-1.6 1.4-.8-.1-1.6-.1-2.7-.1-3.1 0-6.1 1-6.1 3.4v6.9c0 .8.6 1.4 1.4 1.4h7.6c.8 0 1.4.6 1.4 1.4v8.1c0 .8-.6 1.4-1.4 1.4h-7.6c-.8 0-1.4.6-1.4 1.4v35.2c0 .8-.6 1.4-1.4 1.4h-22.8c-.8 0-1.4-.6-1.4-1.4l-.1-54.9zM218 50.6c-.8 0-1.4.6-1.4 1.4v6.3c0 5.3 3.4 6.6 7 6.6 4.3 0 6.9-2.7 7.2-8.5 0-.7.7-1.3 1.4-1.3h20.2c.9 0 1.5.7 1.4 1.6-1 10.9-9.9 16.9-30.2 16.9-24.8 0-32.8-7.1-32.8-25.8 0-18.8 9.7-25.9 32.8-25.9 20.5 0 31 5.8 31 23.6v3.6c0 .8-.6 1.4-1.4 1.4l-35.2.1zm12.6-12.4c0-5.2-1.7-7.5-7.1-7.5-5.3 0-7 2.4-7 7.5v2.1c0 .8.6 1.4 1.4 1.4h11.3c.8 0 1.4-.6 1.4-1.4v-2.1zM265.2 0H288c.8 0 1.4.6 1.4 1.4v69.5c0 .8-.6 1.4-1.4 1.4h-22.8c-.8 0-1.4-.6-1.4-1.4V1.4c-.1-.8.6-1.4 1.4-1.4zM302 23.2h22.8c.8 0 1.4.6 1.4 1.4v46.3c0 .8-.6 1.4-1.4 1.4H302c-.8 0-1.4-.6-1.4-1.4V24.6c-.1-.8.6-1.4 1.4-1.4zM302 0h22.8c.8 0 1.4.6 1.4 1.4v12.1c0 .8-.6 1.4-1.4 1.4L302 15c-.8 0-1.4-.6-1.4-1.4V1.5c-.1-.9.6-1.5 1.4-1.5zm101.2 50.6c-.8 0-1.4.6-1.4 1.4v6.3c0 5.3 3.4 6.6 7 6.6 4.2 0 6.9-2.7 7.2-8.5 0-.7.7-1.3 1.4-1.3h20.2c.9 0 1.5.7 1.4 1.6-1 10.9-9.9 16.9-30.1 16.9-24.8 0-32.8-7.1-32.8-25.8 0-18.8 9.7-25.9 32.8-25.9 20.5 0 31 5.8 31 23.6v3.6c0 .8-.6 1.4-1.4 1.4l-35.3.1zm12.7-12.4c0-5.2-1.7-7.5-7.1-7.5-5.3 0-7 2.4-7 7.5v2.1c0 .8.6 1.4 1.4 1.4h11.3c.8 0 1.4-.6 1.4-1.4v-2.1zm-271.5-.5C144.3 25 131.8 22 113.9 22c-11.2 0-28.2 2.3-29.5 14.9-.1.8.6 1.6 1.4 1.6h19.4c.7 0 1.3-.6 1.4-1.3.5-4.3 2.8-6.5 7.2-6.5s6.5 1.5 6.5 4.5v4.4c0 .7-.5 1.3-1.2 1.4-1.2.2-2.9.4-6.3.9l-10.1 1.5c-16.4 2.4-21.4 6.7-21.4 15.8 0 8.4 6 14.4 21.4 14.4 7.3 0 13.9-2.2 17-6.2.2-.2.6-.2.6.1.3 1 .9 2.9 1.2 3.9.2.6.7.9 1.3.9h20c.8 0 1.4-.6 1.4-1.4l.2-33.2zm-32 26.3c-3.9 0-6.3-3.4-6.3-6.7 0-3.3 1.5-5.3 5.3-6.3 2.4-.7 5.5-1.1 7.4-1.4.9-.1 1.6.5 1.6 1.4v4.9c0 5.3-2.2 8.1-8 8.1zm251.8-29.7h7.3c.8 0 1.4-.6 1.4-1.4v-8.1c0-.8-.6-1.4-1.4-1.4h-7.3c-.8 0-1.4-.6-1.4-1.4l-.1-20.4v-.4c0-.6-.5-1.1-1.1-1.1-.2 0-.3 0-.4.1h-.1l-22.6 13.4c-1 .6-1.4.7-1.4 1.4v45.4c0 10.9 6.1 12.5 21.8 12.5 3.9 0 8.3-.2 12.7-.4.7-.1 1.3-.7 1.3-1.4v-6.8c0-.8-.6-1.4-1.4-1.4h-2.6c-4.1 0-6.1-1-6.1-3.8V35.8c0-.9.6-1.5 1.4-1.5z" style="fill:#dc1f26"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,18 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url("/fmg/static/assets/Urbanist-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: UrbanistSemiBold;
|
||||
src: url("/fmg/static/assets/Urbanist-SemiBold.woff") format("woff");
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Urbanist', Roboto, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header, .copy, .cta {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.header .header-image {
|
||||
width: 165px;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
border-radius: 50rem;
|
||||
background-color: #db0020;
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.diagnostic-info {
|
||||
color: #db0020;
|
||||
font-family: 'UrbanistSemiBold', Roboto, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<title>Error - Safelite</title>
|
||||
<link rel="icon" href="/fmg/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
EXCEPTION PAGE
|
||||
</h1>
|
||||
<hr />
|
||||
<h2>
|
||||
BAILOUT INFO:
|
||||
</h2>
|
||||
<div id="bailout-info-container">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<img class="header-image" src="/fmg/static/assets/logo.svg" />
|
||||
</div>
|
||||
<div class="copy">
|
||||
<h2 class="subheader">
|
||||
We're not able to schedule at this time. We apologize for the inconvenience
|
||||
</h2>
|
||||
<p>
|
||||
We encountered an error while processing your appointment. You can return to our site and try scheduling again below.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<a href="/">
|
||||
<button class="cta-button">
|
||||
Continue to Safelite.com
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="diagnostic-info" id="diagnostic-container">
|
||||
<hr />
|
||||
<h2 class="subheader">
|
||||
Bailout Information:
|
||||
</h2>
|
||||
<div id="bailout-info-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Helpers
|
||||
|
|
@ -36,6 +109,8 @@
|
|||
|
||||
// If no info exists, exit.
|
||||
if(!existingVuexData) {
|
||||
const diagnosticContainer = document.getElementById('diagnostic-container');
|
||||
diagnosticContainer.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue