Initial presentable version of landing page.

This commit is contained in:
jkaplon 2023-08-23 11:18:21 -04:00
commit 19cff813e1
6 changed files with 646 additions and 0 deletions

BIN
GA-FAVICON.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
GLIDEWELL-LOGO.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

24
calendar.html Normal file
View File

@ -0,0 +1,24 @@
<h1>calendar testing...</h1>
<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
(function() {
var target = document.currentScript;
window.addEventListener('load', function() {
calendar.schedulingButton.load({
url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ3FXNQ60dgF-soqKcdyBUaC3N5AJCn_zuBjZMKBdo1B2z450W69kWbmayzrETjrQSxwjRKy-7oj?gv=true',
color: '#039BE5',
label: 'Book an appointment',
target,
});
});
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->
<h2>use the button above, or book on this page below</h2>
<!-- Google Calendar Appointment Scheduling begin -->
<iframe src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3FXNQ60dgF-soqKcdyBUaC3N5AJCn_zuBjZMKBdo1B2z450W69kWbmayzrETjrQSxwjRKy-7oj?gv=true" style="border: 0" width="100%" height="600" frameborder="0"></iframe>
<!-- end Google Calendar Appointment Scheduling -->

BIN
glidewell-sig-crop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

96
index.html Normal file
View File

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="GA-FAVICON.png">
<link rel="stylesheet" href="./mvp.css">
<meta charset="utf-8">
<meta name="description" content="Glidewell Advisors, Medical Insurance">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glidewell Advisors</title>
</head>
<body>
<header>
<nav>
<a href="/"><img alt="Glidewell Advisors Logo" src="GLIDEWELL-LOGO.png" height="100"></a>
<ul>
<li><a href="mailto:glidewelladvisors@gmail.com">glidewelladvisors@gmail.com</a></li>
<li><a href="tel:863-409-6581">863-409-6581</a></li>
<li><a href="https://www.planenroll.com/?purl=kHlGVkUv">Medicare Enrollment</a></li>
<li><a href="https://www.healthsherpa.com/?_agent_id=phillip-glidewell-w8zrfq">ACA Enrollment</a></li>
</ul>
</nav>
<h1>Medicare Enrollment Assistance and ACA Advice</h1>
<p>
<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
(function() {
var target = document.currentScript;
var buttonBgColor = getComputedStyle(document.documentElement,null).getPropertyValue('--color-link');
window.addEventListener('load', function() {
calendar.schedulingButton.load({
url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ3FXNQ60dgF-soqKcdyBUaC3N5AJCn_zuBjZMKBdo1B2z450W69kWbmayzrETjrQSxwjRKy-7oj?gv=true',
color: buttonBgColor,
label: 'Book an appointment',
target,
});
});
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->
</p>
<hr>
</header>
<main>
<section>
<header><h2>Glidewell Advisors Core values:</h2></header>
<aside>
<h3>Treat every client like family</h3>
<p>We are interested in getting to know each clients specific needs and the best way to do that is to listen. Thru conversation we can find the right plan for you.</p>
</aside>
<aside>
<h3>Service before, during, and after enrollment</h3>
<p>We have a full service mindset and we deliver by being with you every step of the way. Follow ups and check ins to see how you are doing is part of our culture.</p>
</aside>
<aside>
<h3>Exceed expectations</h3>
<p>It is our goal to go above and beyond for our clients and deliver exceptional service.</p>
</aside>
</section>
<hr>
<article>
<header> <h2>Get to Know Our Team</h2> </header>
<h3>Phil Glidewell</h3>
<p>
<ul>
<li>Birthplace: Lakewood, California</li>
<li>Hometown: Lakeland, Florida</li>
<li>Education: Bachelors in Business, Louisiana State University</li>
<li>Licenses: 2-15 Health, Life and variable annuities</li>
<li>Community Involvement:
<ul>
<li><a href="https://www.uptownchamber.org/">Uptown Chamber of Commerce</a></li>
<li><a href="https://portal.clubrunner.ca/4893/">Plant City Rotarian</a></li>
<li><a href="https://spiritualhome.org/society-of-st-vincent-de-paul">Volunteer St. Vincent DePaul, Temple Terrace</a></li>
</ul>
</li>
</ul>
</p>
</article>
</main>
<footer>
<hr>
<p>
<small>
<a href="mailto:glidewelladvisors@gmail.com">glidewelladvisors@gmail.com</a> |
<a href="tel:863-409-6581">863-409-6581</a>
</small>
</p>
</footer>
</body>
</html>

526
mvp.css Normal file
View File

@ -0,0 +1,526 @@
/* MVP.css v1.13 - https://github.com/andybrewer/mvp */
:root {
--active-brightness: 0.85;
--border-radius: 5px;
--box-shadow: 2px 2px 10px;
--color-accent: #118bee15;
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
/* --color-link: #118bee; */
--color-link: #61a2d7;
--color-secondary: #920de9;
--color-secondary-accent: #920de90b;
--color-shadow: #f4f4f4;
--color-table: #118bee;
--color-text: #000;
--color-text-secondary: #999;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--hover-brightness: 1.2;
--justify-important: center;
--justify-normal: left;
--line-height: 1.5;
--width-card: 285px;
--width-card-medium: 460px;
--width-card-wide: 800px;
--width-content: 1080px;
}
@media (prefers-color-scheme: dark) {
:root[color-mode="user"] {
--color-accent: #0097fc4f;
--color-bg: #333;
--color-bg-secondary: #555;
--color-link: #0097fc;
--color-secondary: #e20de9;
--color-secondary-accent: #e20de94f;
--color-shadow: #bbbbbb20;
--color-table: #0097fc;
--color-text: #f7f7f7;
--color-text-secondary: #aaa;
}
}
/* Layout */
article aside {
background: var(--color-secondary-accent);
border-left: 4px solid var(--color-secondary);
padding: 0.01rem 0.8rem;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family);
line-height: var(--line-height);
margin: 0;
overflow-x: hidden;
padding: 0;
}
footer,
header,
main {
margin: 0 auto;
max-width: var(--width-content);
padding: 3rem 1rem;
}
hr {
background-color: var(--color-bg-secondary);
border: none;
height: 1px;
margin: 4rem 0;
width: 100%;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: var(--justify-important);
}
section img,
article img {
max-width: 100%;
}
section pre {
overflow: auto;
}
section aside {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
margin: 1rem;
padding: 1.25rem;
width: var(--width-card);
}
section aside:hover {
box-shadow: var(--box-shadow) var(--color-bg-secondary);
}
[hidden] {
display: none;
}
/* Headers */
article header,
div header,
main header {
padding-top: 0;
}
header {
text-align: var(--justify-important);
}
header a b,
header a em,
header a i,
header a strong {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
header nav img {
margin: 1rem 0;
}
section header {
padding-top: 0;
width: 100%;
}
/* Nav */
nav {
align-items: center;
display: flex;
font-weight: bold;
justify-content: space-between;
margin-bottom: 7rem;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 0.5rem;
position: relative;
text-align: left;
}
/* Nav Dropdown */
nav ul li:hover ul {
display: block;
}
nav ul li ul {
background: var(--color-bg);
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
display: none;
height: auto;
left: -2px;
padding: .5rem 1rem;
position: absolute;
top: 1.7rem;
white-space: nowrap;
width: auto;
z-index: 1;
}
nav ul li ul::before {
/* fill gap above to make mousing over them easier */
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.5rem;
height: 0.5rem;
}
nav ul li ul li,
nav ul li ul li a {
display: block;
}
/* Typography */
code,
samp {
background-color: var(--color-accent);
border-radius: var(--border-radius);
color: var(--color-text);
display: inline-block;
margin: 0 0.1rem;
padding: 0 0.5rem;
}
details {
margin: 1.3rem 0;
}
details summary {
font-weight: bold;
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: var(--line-height);
}
mark {
padding: 0.1rem;
}
ol li,
ul li {
padding: 0.2rem 0;
}
p {
margin: 0.75rem 0;
padding: 0;
width: 100%;
}
pre {
margin: 1rem 0;
max-width: var(--width-card-wide);
padding: 1rem 0;
}
pre code,
pre samp {
display: block;
max-width: var(--width-card-wide);
padding: 0.5rem 2rem;
white-space: pre-wrap;
}
small {
color: var(--color-text-secondary);
}
sup {
background-color: var(--color-secondary);
border-radius: var(--border-radius);
color: var(--color-bg);
font-size: xx-small;
font-weight: bold;
margin: 0.2rem;
padding: 0.2rem 0.3rem;
position: relative;
top: -2px;
}
/* Links */
a {
color: var(--color-link);
display: inline-block;
font-weight: bold;
text-decoration: underline;
}
a:active {
filter: brightness(var(--active-brightness));
}
a:hover {
filter: brightness(var(--hover-brightness));
}
a b,
a em,
a i,
a strong,
button,
input[type="submit"] {
border-radius: var(--border-radius);
display: inline-block;
font-size: medium;
font-weight: bold;
line-height: var(--line-height);
margin: 0.5rem 0;
padding: 1rem 2rem;
}
button,
input[type="submit"] {
font-family: var(--font-family);
}
button:active,
input[type="submit"]:active {
filter: brightness(var(--active-brightness));
}
button:hover,
input[type="submit"]:hover {
cursor: pointer;
filter: brightness(var(--hover-brightness));
}
a b,
a strong,
button,
input[type="submit"] {
background-color: var(--color-link);
border: 2px solid var(--color-link);
color: var(--color-bg);
}
a em,
a i {
border: 2px solid var(--color-link);
border-radius: var(--border-radius);
color: var(--color-link);
display: inline-block;
padding: 1rem 2rem;
}
article aside a {
color: var(--color-secondary);
}
/* Images */
figure {
margin: 0;
padding: 0;
}
figure img {
max-width: 100%;
}
figure figcaption {
color: var(--color-text-secondary);
}
/* Forms */
button:disabled,
input:disabled {
background: var(--color-bg-secondary);
border-color: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: not-allowed;
}
button[disabled]:hover,
input[type="submit"][disabled]:hover {
filter: none;
}
form {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
display: block;
max-width: var(--width-card-wide);
min-width: var(--width-card);
padding: 1.5rem;
text-align: var(--justify-normal);
}
form header {
margin: 1.5rem 0;
padding: 1.5rem 0;
}
input,
label,
select,
textarea {
display: block;
font-size: inherit;
max-width: var(--width-card-wide);
}
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
font-weight: normal;
position: relative;
top: 1px;
}
input[type="range"] {
padding: 0.4rem 0;
}
input,
select,
textarea {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
}
input[type="text"],
textarea {
width: calc(100% - 1.6rem);
}
input[readonly],
textarea[readonly] {
background-color: var(--color-bg-secondary);
}
label {
font-weight: bold;
margin-bottom: 0.2rem;
}
/* Popups */
dialog {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
z-index: 999;
}
/* Tables */
table {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
border-spacing: 0;
display: inline-block;
max-width: 100%;
overflow-x: auto;
padding: 0;
white-space: nowrap;
}
table td,
table th,
table tr {
padding: 0.4rem 0.8rem;
text-align: var(--justify-important);
}
table thead {
background-color: var(--color-table);
border-collapse: collapse;
border-radius: var(--border-radius);
color: var(--color-bg);
margin: 0;
padding: 0;
}
table thead th:first-child {
border-top-left-radius: var(--border-radius);
}
table thead th:last-child {
border-top-right-radius: var(--border-radius);
}
table thead th:first-child,
table tr td:first-child {
text-align: var(--justify-normal);
}
table tr:nth-child(even) {
background-color: var(--color-accent);
}
/* Quotes */
blockquote {
display: block;
font-size: x-large;
line-height: var(--line-height);
margin: 1rem auto;
max-width: var(--width-card-medium);
padding: 1.5rem 1rem;
text-align: var(--justify-important);
}
blockquote footer {
color: var(--color-text-secondary);
display: block;
font-size: small;
line-height: var(--line-height);
padding: 1.5rem 0;
}
/* Scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: rgb(202, 202, 232) auto;
}
*::-webkit-scrollbar {
width: 5px;
height:5px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color:rgb(202, 202, 232);
border-radius: 10px;
}