Skip to content

Instantly share code, notes, and snippets.

@mpro9x
Last active September 21, 2023 03:37
Show Gist options
  • Save mpro9x/92c0d7433af3836fb9f3b83af9ef80b4 to your computer and use it in GitHub Desktop.
Save mpro9x/92c0d7433af3836fb9f3b83af9ef80b4 to your computer and use it in GitHub Desktop.
FAQ
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<style>
button.accordion {
background-color: transparent;
color: #000;
cursor: pointer;
width: 100%;
text-align: left;
outline: none;
font-size: 16px;
transition: 0.4s;
font-family: 'DIN1451';
line-height: 24px;
border: none;
border-top: 1px solid #2E3C3D;
border-bottom: 1px solid #2E3C3D;
margin-top: 0px;
padding-left: 5px;
padding-top: 21px;
padding-bottom: 21px;
margin-bottom: 20px;
}
button.accordion.active, button.accordion:hover {
background-color: #B7BAB0;
}
button.accordion:after {
content: '\002B';
color: #2E3C3D;
font-weight: bold;
float: right;
margin-left: 5px;
font-size: 30px;
font-weight: 100 !important;
margin-top: -3px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 5px;
background-color: transparent;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
div.panel p, div.panel ul li {
font-size: 16px;
font-family: "Georgia", sans-serif;
font-weight: 400;
padding-left: 5px;
padding-right: 5px;
}
div.panel ul li {
padding-left: 0px;
margin-left: -28px;
}
button.accordion.active {
background-color: transparent;
}
.panel ul {
margin: 0px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<button class="accordion">WHAT IS A PROPOSAL PLANNER? WHAT DOES A PROPOSAL PLANNER DO?</button>
<div class="panel">
<p>
A proposal planner helps with every step of planning a proposal, up until the day you pop the question. They make your life easier by saving you time, stress, and creativity that often needs to go into planning a proposal your partner is looking for.
<br><br>
When you work with team Amore Austin, for example, we'll scout venues, hire vendors, create detailed timelines, give you expert proposal tips, and most importantly: help keep your proposal a surprise.
<br><br>
If you're short on time, stumped by logistics, don't know where or how to get started, you'll definitely want to look into hiring a proposal planner!
</p>
</div>
<button class="accordion">WHAT'S THE DIFFERENCE BETWEEN A CUSTOM AND PRE-SET PROPOSAL EXPERIENCE?</button>
<div class="panel">
<p>
Our Custom Proposal Experience is for those who want ultimate flexibility and who want to make their proposal extra special, but need guidance on how to bring their idea to life. (Or, come up with an idea in the first place!)
<br><br>
Everything -- from the venue to the decor to even the small details -- is 100% personalized just for you and your partner. It's our signature offer and what our clients prefer the most because they can plan a truly unparalleled proposal experience for their significant other.
<br><br>
Our Pre-Set Proposal Experience is for those who want maximum ease. Everything is already pre-planned (the venue, the decor, the set-up, and the services), so all you have to worry about is showing up. All proposals in this experience still come with expert proposal tips, so you know exactly what to do and what to expect when you arrive.
<br><br>
Looking for that personalized component? You can make any Pre-Set Proposal Experience personalized by adding on special requests (photographer, specific color scheme, food requests, etc.) for an additional fee.
</p>
</div>
<button class="accordion">HOW MUCH TIME DO I NEED TO PLAN A PROPOSAL?</button>
<div class="panel">
<p>
Pre-Set Proposals can be planned within 7 days, and Custom Proposals require a minimum of 6 weeks lead time. However, the sooner you reach out, the better!
<br><br>
Planning in advance allows our team more time to coordinate with vendors and venues, plan a Custom Proposal Experience or work out any special requests, and it will be a smoother process overall.
<br><br>
That being said, we have performed magic and planned proposals within a matter of days. Please contact us with all urgent inquiries, and we'll do our best to accommodate you.
</p>
</div>
<button class="accordion">WILL MY SIGNIFICANT OTHER CARE IF I USE A PROPOSAL PLANNER?</button>
<div class="panel">
<p>
Quite the contrary! Hiring a professional to make your proposal absolutely unique demonstrates thoughtfulness and consideration. In our years of experience, we've seen couple after couple fall in love just that much more when they realize how much effort their fiances put into planning the perfect proposal for them.
<br><br>
Plus, we'll collaborate with you throughout the entire proposal planning process, so you're never left in the dark about the plan and we can craft a proposal that's authentic to you and your partner.
<br><br>
A little hard to believe still? Here are reviews from partners-turned-fiances:
<br><br>
<p style="text-align: center;">
"I had my dream proposal!" - Marina Z.
<br><br>
"I am absolutely blown away. I had NO idea he was planning this. Everything was incredible." - Maria D.
<br><br>
"Best night ever! Thank you so much. Everyone is raving to me about how this is the most romantic proposal they've even seen." - Jen L.
<br><br>
"I'm so lucky Daniel found Amore Austin, thank you so much for making this milestone so special." - Amanda S.
</p>
</div>
<button class="accordion">WHAT MAKES AMORE AUSTIN DIFFERENT FROM OTHER ENGAGEMENT PROPOSAL SERVICES?</button>
<div class="panel">
<p>
We have over a decade of experience planning events, and we are the first event planning company in Austin to specialize in marriage proposal planning.
<br><br>
Being expert and professional planners, we know the exactly what goes into executing a flawless proposal, we are a team of extremely creative individuals, we've developed strong relationships with high-quality and local vendors in Austin, we understand how to create picture-perfect (and yes, Instagram worthy) photos, and we have access to exclusive locations in Austin and the surrounding area.
</p>
</div>
<button class="accordion">WHAT MAKES AMORE AUSTIN DIFFERENT FROM OTHER ENGAGEMENT PROPOSAL SERVICES?</button>
<div class="panel">
<p>
Every client is different, so in the end, it comes down to personal budget and proposal goals.
<br><br>
Our Pre-Set Proposal Experiences offer beautiful proposal experiences ranging from $500 to $1,000. If you're interested in our one-of-a-kind proposal and want to reserve our Custom Proposal Experience, you can expect to spend around $4,000, which is the average our past clients have spent.
<br><br>
On our complimentary Discovery Call, we can discuss your budget in detail.
</p>
</div>
<script>
// W3C's JS Code
var acc = document.getElementsByClassName("accordion");
var i;
// Add onclick listener to every accordion element
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
// For toggling purposes detect if the clicked section is already "active"
var isActive = this.classList.contains("active");
// Close all accordions
var allAccordions = document.getElementsByClassName("accordion");
for (j = 0; j < allAccordions.length; j++) {
// Remove active class from section header
allAccordions[j].classList.remove("active");
// Remove the max-height class from the panel to close it
var panel = allAccordions[j].nextElementSibling;
var maxHeightValue = getStyle(panel, "maxHeight");
if (maxHeightValue !== "0px") {
panel.style.maxHeight = null;
}
}
// Toggle the clicked section using a ternary operator
isActive ? this.classList.remove("active") : this.classList.add("active");
// Toggle the panel element
var panel = this.nextElementSibling;
var maxHeightValue = getStyle(panel, "maxHeight");
if (maxHeightValue !== "0px") {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
// Cross-browser way to get the computed height of a certain element. Credit to @CMS on StackOverflow (http://stackoverflow.com/a/2531934/7926565)
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment