ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 18:45:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #165 from teaxyz/klaviyo-form

Browse source 
Fixed footer subscribe form
This commit is contained in:
Chris Waters 2022-11-02 19:08:00 -04:00 committed by GitHub
commit 87ecca0240
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

262
src/layouts/partials/klaviyo-form.html
View file

@ -1,254 +1,56 @@
<hr>
<form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST">
<input type="hidden" name="g" value="XGq3MT">
<input class="footer-email" type="email" value="" name="email" id="k_id_email" placeholder="Add your email_" />
<button class="email-btn" type="submit">SEND</button>
</form>
<div class="klaviyo-form-RqTcUf"></div>
<hr>
<p class="small mt-4" style="color:#949494;"><strong>Privacy Policy:</strong> We will never share, sell, or otherwise distribute your information to third-parties. We take a minimalistic approach to email marketing–meaning we'll only send you stuff when there's something you <em>absolutely</em> need to know about. You can read more about our privacy policies <a href="/privacy-policy/">here</a>.</p>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<style>
/* Email Form Styling */
@media only screen and (min-width: 1200px) {
#email_signup{
display: flex;
justify-content: space-between;
}
.footer-email{
font-family: "pp-neue-machina", sans-serif;
#email_52016048{
background-color: #1a1a1a !important;
border: none !important;
font-family: "pp-neue-machina", sans-serif !important;
outline: none !important;
font-size: 28px !important;
padding-left: 0px !important;
color: #949494 !important;
font-weight: 400 !important;
text-transform: uppercase;
font-size: 2.121vw;
line-height: 2.121vw;
padding: 1.953vw 0vw;
background: none;
border: none;
width: 80%;
padding-top:5px !important;
}
.footer-email::placeholder {
color: #949494;
#email_52016048::placeholder{
font-size: 28px !important;
font-family: "pp-neue-machina", sans-serif !important;
color: #949494 !important;
font-weight: 400 !important;
}
.footer-email:focus{
background-color: #1a1a1a;
color: #fff;
#email_52016048:focus{
outline: none !important;
box-shadow: none !important;
}
.email-btn{
width: 16%;
border-left: 2px solid #949494;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0px;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
background-color: #1a1a1a;
color: #949494;
}
.email-btn:hover{
background-color: #00ffd0;
color: #1a1a1a;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
#email_signup{
display: flex;
justify-content: space-between;
button.needsclick.go3894874857.kl-private-reset-css-Xuajs1{
background-color: #1a1a1a !important;
padding-left: 2.5vw !important;
font-family: "pp-neue-machina", sans-serif !important;
font-size: 28px !important;
font-weight: 400 !important;
color: #949494 !important;
padding-right: 2.5vw !important;
border-left: 2px solid #949494 !important;
transition: 0.2s ease-in-out !important;
padding-top:5px !important;
}
.footer-email{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
line-height: 2.121vw;
padding: 1.953vw 0vw;
background: none;
border: none;
width: 80%;
button.needsclick.go3894874857.kl-private-reset-css-Xuajs1:hover{
box-shadow: inset 0px 0px 0px 5px #1a1a1a !important;
background-color: #00ffd0 !important;
color: #1a1a1a !important;
}
.footer-email:focus{
background-color: #1a1a1a;
color: #fff;
outline: none !important;
box-shadow: none !important;
}
.email-btn{
width: 16%;
border-left: 2px solid #949494;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0px;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
background-color: #1a1a1a;
color: #949494;
}
.email-btn:hover{
background-color: #00ffd0;
color: #1a1a1a;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
#email_signup{
display: flex;
justify-content: space-between;
}
.footer-email{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
line-height: 2.121vw;
padding: 1.953vw 0vw;
background: none;
border: none;
width:: 80%
}
.footer-email:focus{
background-color: #1a1a1a;
color: #fff;
outline: none !important;
box-shadow: none !important;
}
.email-btn{
width: 16%;
border-left: 2px solid #949494;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0px;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
background-color: #1a1a1a;
color: #949494;
}
.email-btn:hover{
background-color: #00ffd0;
color: #1a1a1a;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px){
#email_signup{
display: flex;
justify-content: space-between;
}
.footer-email{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
line-height: 2.121vw;
padding: 1.953vw 0vw;
background: none;
border: none;
width: 80%;
}
.footer-email:focus{
background-color: #1a1a1a;
color: #fff;
outline: none !important;
box-shadow: none !important;
}
.email-btn{
width: 16%;
border-left: 2px solid #949494;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0px;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 2.121vw;
background-color: #1a1a1a;
color: #949494;
}
.email-btn:hover{
background-color: #00ffd0;
color: #1a1a1a;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
}
}
@media only screen and (max-width: 576px) {
#email_signup{
display: flex;
justify-content: space-between;
}
.footer-email{
font-family: "pp-neue-machina", sans-serif;
width: 70%;
text-transform: uppercase;
font-size: 4vw;
line-height: 2.121vw;
padding: 6vw 0vw;
background: none;
border: none;
}
.footer-email:focus{
background-color: #1a1a1a;
color: #fff;
outline: none !important;
box-shadow: none !important;
}
.email-btn{
width: 25%;
border-left: 2px solid #949494;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
border-radius: 0px;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 4vw;
background-color: #1a1a1a;
color: #949494;
}
.email-btn:hover{
background-color: #00ffd0;
color: #1a1a1a;
box-shadow: inset 0vw 0vw 0vw 1vw #1a1a1a !important;
}
}
</style>