Skip to content

Instantly share code, notes, and snippets.

@Sorvereign

Sorvereign/index.html

Created April 15, 2021 17:02
Show Gist options
  • Save Sorvereign/b86bf6d60eaaa0c65ea601f0a4cc5ca4 to your computer and use it in GitHub Desktop.
Save Sorvereign/b86bf6d60eaaa0c65ea601f0a4cc5ca4 to your computer and use it in GitHub Desktop.
Download ZIP
XWNxMgo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="">
<title>Untitled</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;800&family=Roboto:ital,wght@1,300&display=swap"><link rel="stylesheet" href="https://d1pnnwteuly8z3.cloudfront.net/sites/chopper-feather-1615209076/css/main.min.css?t=15209388">
<link rel="canonical" href="https://chopper-feather-1615209076.versoly.page" />
<meta name="description" content="">
<style>body {font-family: "Roboto","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}.cm3-responsive {
width: 94%;
max-width: 680px
}
.cm3-responsive-2 {
min-height: 200px;
height: 115vw
}
.cm3-responsive-2>* {
width: 100%
}
@media(min-width:992px) {
.cm3-responsive {
width: calc(100% - 4vw);
margin-right: 0;
padding-right: 6vw
}
.cm3-responsive-2 {
height: auto;
min-height: 100vh
}
.cm3-responsive-2>* {
height: 100%;
width: auto
}
}
@media(min-width:800px) {
.cm3-responsive {
width: 80%
}
}
@media(min-width:1200px) {
.cm3-responsive {
padding-right: 4vw
}
}
@media(min-width:1600px) {
.cm3-responsive {
margin: 0 auto;
max-width: 600px;
padding-right: 0
}
}.top-25 {top: 25%!important}html{scroll-behavior: smooth;}[data-toggle="modal"] {cursor: pointer;}.madeIn {
position: fixed;
left: 10px;
bottom: 10px;
z-index: 10;
}
.madeInRight {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 10;
}
.madeInImg {
margin-top: -5px;
margin-right: 5px;
width: 20px;
}</style>
</head>
<body>
<section class="position-relative h-100" id="main">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-7 col-xl-6 pt-lg-2 pr-xl-6 pb-6">
<div class="cm3-responsive mx-auto mr-lg-0 text-center text-lg-left pt-4 h-100">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<span class="h3 mb-0 ml-2 d-inline font-weight-bold text-capitalize" style="background:-webkit-linear-gradient(#3498DB,var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent">KYIUBA</span>
</div>
<div class="d-flex align-items-center ml-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item py-1 pl-1">
<a href="#">
<i class="font-weight-bold text-capitalize" style="color:#3498DB; background:-webkit-linear-gradient(#3498DB,var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Price</i>
</a>
</li>
<li class="list-inline-item py-1 pl-1">
<a href="#">
<i class="fab d-block fa-lg py-2 fa-twitter" style="background:-webkit-linear-gradient(var(--secondary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent"></i>
</a>
</li>
<li class="list-inline-item py-1 pl-1">
<a href="#">
<i class="fab d-block fa-lg py-2 fa-youtube" style="background:-webkit-linear-gradient(var(--secondary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent"></i>
</a>
</li>
<li class="list-inline-item py-1 pl-1">
<a href="#">
<i class="fab d-block fa-lg py-2 fa-instagram" style="background:-webkit-linear-gradient(var(--secondary),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<h1 class="font-weight-bold text-capitalize mt-5 mt-md-7 display-3 mb-4">Get Curated SaaS Ideas + Advices + Starter Projects
</h1>
<p class="font-weight-bold font-weight-bold opacity-50 text-lg"> Subscribe to the list and get your first look of great the opportunities ahead of you.
<br />
</p>
<div class="mt-6 mx-auto mx-lg-0" style="max-width:530px">
<form action="https://gmail.us1.list-manage.com/subscribe/post?u=5bd44dbf43c77c9f8d7616de7&amp;id=6b3a8e3c4e" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="input-group shadow">
<input type="email" name="EMAIL" class="form-control form-control-lg border-right-1" id="emailInput" placeholder="Your email address" id="mce-EMAIL" aria-describedby="basic-addon2" />
<div class="input-group-append position-relative z-10" style="flex:0 0 35%">
<button class="btn btn-primary btn-lg position-absolute text-nowrap w-100 px-0 border-0 h-100 d-flex justify-content-center align-items-center text-uppercase font-weight-bold" type="submit" style="background:linear-gradient(to right,#3498DB,var(--primary))" id="mc-embedded-subscribe">GET IT!</button>
</div>
</div>
</form>
<h6 class="mt-3 pt-2 mb-0 text-center opacity-50">Subscribe and get your free receipt</h6>
</div>
</div>
</div>
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=AU4BUWdG0XQKvhSKpvMkowppvk_QqLW34PjjPzQkdZQ2DM9I_3_7dnJ02bvlCyKoiWrkPtbkaQa0BqJS&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<h6 class="w-100 text-center position-absolute my-0 opacity-40" style="left:0;bottom:24px">© CUBA by S0vere1gn | <span data-date-year="">2021</span>, All Rights Reserved</h6>
</div>
<div class="col-12 col-lg-5 col-xl-6 bg-dark overflow-hidden position-relative cm3-responsive-2">
<img class="position-absolute" style="bottom:0;right:0" src="https://source.unsplash.com/1600x900/?tech" />
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
var style = document.createElement('style');
if (document.getElementById("navbar")) {
style.innerHTML =
'section, div {scroll-margin-top: ' + document.getElementById("navbar").offsetHeight + 'px}';
var ref = document.querySelector('script');
ref.parentNode.insertBefore(style, ref);
}(function() {
var css = document.createElement('link');
css.href = '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css';
css.rel = 'stylesheet';
css.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(css);})();document.querySelectorAll('[data-date-year=""]').forEach((e) => e.innerHTML = new Date().getFullYear());
document.querySelectorAll('[data-toggle="modal"]').forEach(element => {
let t = element.dataset.options
let modalOptions = t ? JSON.parse(t.split(`'`).join(`"`)) : {};
modalOptions = {
id: 'vModal',
modalContent: '',
...modalOptions
}
if (modalOptions.imgSrc) {
modalOptions.modalContent = `<img src="${modalOptions.imgSrc}">`
}
if (modalOptions.iframeSrc) {
modalOptions.modalContent = `<div class="embed-responsive embed-responsive-16by9">
<iframe allow="autoplay" class="embed-responsive-item" src="${modalOptions.iframeSrc}" allowfullscreen="" autoplay=""></iframe>
</div>`
}
if (modalOptions.globalBlockId) {
modalOptions.modalContent = blocks[modalOptions.globalBlockId]
}
let modalHTML = `<div class="modal fade" id="${modalOptions.id}" tabindex="-1" aria-hidden="true">
<button type="button" class="close postion-absolute text-white float-right mr-4 mt-n2" data-dismiss="modal" aria-label="Close">
<span class="display-3" aria-hidden="true" >&times;</span>
</button>
<div class="modal-dialog modal-${modalOptions.size} ${modalOptions.verticallyCentered && "modal-dialog-centered"}">
<div class="modal-content">
${modalOptions.modalContent}
</div>
</div>
</div>`;
element.addEventListener('click', function(){
document.getElementsByTagName('body')[0].insertAdjacentHTML('beforeend', modalHTML)
$('#'+modalOptions.id).modal('show')
$('body').on('hidden.bs.modal', e => $('#'+modalOptions.id).remove())
const forms = document.querySelectorAll('[data-formid]');
for (const form of forms) {
if (!form.getAttribute('data-has-form-eventlistener')) {
form.addEventListener("submit", function (e) {
sendFormData(e, form)
});
form.setAttribute('data-has-form-eventlistener', 'true')
}
}
})
});</script>
</body>
</html>
Raw
script.js
$(document).ready( function () {
// I only have one form on the page but you can be more specific if need be.
var $form = $('form');
if ( $form.length > 0 ) {
$('form input[type="submit"]').bind('click', function ( event ) {
if ( event ) event.preventDefault();
// validate_input() is a validation function I wrote, you'll have to substitute this with your own.
register($form);
});
}
});
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
// Something went wrong, do something to notify the user. maybe alert(data.msg);
} else {
// It worked, carry on...
}
}
});
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Raw
style.css
col-12 col-lg-7 col-xl-6 pt-lg-2 pr-xl-6 pb-6
col-12 col-lg-5 col-xl-6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment