CB911 Webinar Hubspot Landing Page

Developer
Travis Wagner
Size
14,269 Kb
Views
18,216
  1. CB911 Webinar Hubspot Landing Page Previews
  2. CB911 Webinar Hubspot Landing Page HTML Codes
  3. CB911 Webinar Hubspot Landing Page CSS Codes

How do I make an cb911 webinar hubspot landing page?

What is a cb911 webinar hubspot landing page? How do you make a cb911 webinar hubspot landing page? This script and codes were developed by Travis Wagner on 11 September 2022, Sunday.

CB911 Webinar Hubspot Landing Page Previews
IQ Test

CB911 Webinar Hubspot Landing Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CB911 Webinar Hubspot Landing Page</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]--> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/rvjmob.css'>
<link rel='stylesheet prefetch' href='css/vzbxyb.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ // @import url('https://fonts.googleapis.com/css?family=Hind:400,700|Source+Sans+Pro:300,400,600');
// @import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
$radius: 3px;
* { box-sizing: border-box;
}
body { font-family: 'Hind', Arial, sans-serif; color: #1f2024; background-color: $white; width: auto; height: auto; font-weight: 400; min-height: 1200px; margin: 0;
}
img { max-width: 100%; display: block;
}
.hs-webinar-hero { position: relative; top: 0; left: 0; width: 100%; color: white; overflow: hidden; background: #565964; background: linear-gradient(to top left, #1f2024, lighten(#1f2024, 30%)); padding: $unit 0 55px; margin-bottom: 21px; @include mq('tablet') { padding: 32px 0 40px; } &__container { width: 90%; margin: 0 auto; } &__top { z-index: 2; position: relative; margin-bottom: 156px; &:after { display: table; content: ''; clear: both; } } &__top-left { float: left; width: 298px; max-width: 300px; min-width: 250px; } &__top-right { float: right; @include vert-center; right: 0; } &__social-container { margin: 0 -10px; @include mq('phone') { display: none; } } &__social-icon { float: left; padding: 0 12px; } &__screen { position: absolute; left: 0; right: 0; margin: 0 auto; top: 112px; width: 95%; max-width: 1000px; height: 800px; background: black; border: 38px solid #121212; border-radius: 30px; box-shadow: 0 0 3px 2px #fff; @include mq('tablet') { border-left-width: 12px; border-right-width: 12px; border-top-width: 60px; border-color: $white; box-shadow: 0 0 3px 3px #ffbe95; } &:after { content: ''; background: #58e258; border: 1px solid #26926d; box-shadow: 0 0 1px 2px black; width: 5px; height: 5px; @include align(false, true, absolute); top: -20px; border-radius: 50%; box-sizing: content-box; @include mq('tablet') { background: #111111; border-color: $black; box-shadow: none; width: 50px; border-radius: 2px; height: 3px; top: -30px; } } &:before { content: ''; background: #000000; border: 1px solid #101010; box-shadow: 0 0 0 2px black; width: 5px; height: 5px; @include align(false, true, absolute); top: -20px; left: calc(50% - 18px); border-radius: 50%; box-sizing: content-box; @include mq('tablet') { left: calc(50% - 50px); top: -31px; } } } &__text { margin-bottom: 32px; text-align: left; } &__heading { position: relative; // font-family: 'Source Sans Pro'; color: #ffffff; // margin-bottom: 21px; // margin-top: 0; // font-size: 36px; font-weight: 200; } &__heading-label { position: absolute; left: 1px; top: -34px; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; color: $white; text-transform: uppercase; @include mq('tablet') { color: $gold; } &:after { position: absolute; left: -60px; top: 12px; width: 50px; height: 50px; background: url(https://chargebacks911.com/wp-content/uploads/2017/04/webinar-icon.gif) no-repeat; background-size: contain; content: ''; @include mq('tablet') { display: none; } } } &__subheading { color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1.333333; margin-bottom: $unit; font-weight: 300; } &__date { float: left; margin-right: $unit*2; &:before { position: relative; font-family: FontAwesome; content: '\f073'; margin-right: $unit_half; } &:empty { display: none; &:before { display: none; } } } &__time { &:before { position: relative; font: normal normal normal 14px/1 FontAwesome; content: '\f017'; margin-right: $unit_half; font-size: 18px; } } &__form-container { position: relative; z-index: 2; width: 75%; max-width: 700px; margin: 0 auto; @include mq('tablet') { width: 90%; } } &__form { width: 100%; } &__form-row { width: auto; margin: 0 -12px; @include mq('tablet') { margin: 0 -6px; } &:after { content: ''; display: table; clear: both; } } &__img { width: 100%; margin-bottom: 32px; img { margin: 0 auto; } } &__form-field { float: left; width: 50%; overflow: hidden; padding: 0 12px; @include mq('tablet') { width: 100%; padding: 0 6px; } &-half { @extend .hs-webinar-hero__form-field; @include mq('tablet') { width: 50% } } } &__label { margin-bottom: 0.5em; display: none; } &__input { border: none; border-radius: $radius; font-family: 'Hind'; font-size: 14px; font-weight: 400; height: 48px; line-height: 48px; margin: 0 0 24px; padding: 0 12px; width: 100%; -webkit-font-smoothing: subpixel-antialiased; @include mq('tablet') { margin: 0 0 12px; } &:focus { outline: none; } } &__submit { padding: 0 12px; @include mq('tablet') { padding: 0 6px; } a { display: block; box-sizing: border-box; border-radius: $radius; width: 100%; height: 48px; font-size: 14px; line-height: 50px; text-align: center; background: $color_primary; padding: 0; color: #ffffff; text-decoration: none; transition: background 0.1s ease-in-out; &:hover { background: darken($color_primary, 5%); transition: background 0.15s ease-in-out; } } }
}
// IE Sucks
.ie7, .ie8, .ie9 { .hs-webinar-hero__label { display: block; //no placeholders in IE so show labels } .hs-webinar-hero__heading-label:after { display: none; }
}
body:after { // display: none;
}
.hs-webinar-content { &__container { @extend %clearfix; width: 95%; max-width: 1000px; margin: 0 auto; @include mq('tablet') { width: 100%; padding: 0 16px; } } &__primary { width: 75%; float: left; padding: 0 $unit $unit 0; } &__secondary { text-align: center; width: 25%; float: left; padding: 0 0 $unit $unit; img { margin-bottom: 6px; margin-top: 21px; border-radius: 50%; padding: 4px; background: white; border: 1px solid $grey_lightest; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15); } h4 { margin-bottom: 0; } } &__panelists { text-align: center; &-single { margin-bottom: $unit; } &-title { margin-bottom: 23px; } &-image { margin-bottom: 5px; } }
}
$color_slate: #3f4149;
h2 { color: $color_slate;
}
h3 { color: darken($color_slate,5%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="hs-webinar-hero"> <div class="hs-webinar-hero__container"> <div class="hs-webinar-hero__top"> <div class="hs-webinar-hero__top-left"> <div class="hs-webinar-hero__logo"><a href="#"><img src="https://chargebacks911.com/wp-content/uploads/2017/05/cb911-logo-white-web-png.png"/></a></div> </div> <div class="hs-webinar-hero__top-right"> <div class="hs-webinar-hero__social-container"> <div class="hs-webinar-hero__social-icon"><a href="#"><i class="fa fa-lg fa-facebook fa-inverse"></i></a></div> <div class="hs-webinar-hero__social-icon"><a href="#"><i class="fa fa-lg fa-twitter fa-inverse"></i></a></div> <div class="hs-webinar-hero__social-icon"><a href="#"><i class="fa fa-lg fa-linkedin fa-inverse"></i></a></div> </div> </div> </div> <div class="hs-webinar-hero__screen"></div> <div class="hs-webinar-hero__form-container"> <div class="hs-webinar-hero__text"> <h1 class="hs-webinar-hero__heading h2">Convert Obstacles into Opportunities. <i class="hs-webinar-hero__heading-label">Webinar Series:</i></h1> <h4 class="hs-webinar-hero__subheading">Sign up to download a recording of this webinar featuring exclusive chargeback information. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4> <div class="hs-webinar-hero__info"> <div class="hs-webinar-hero__date">Wednesday, June 17th, 2017</div> <div class="hs-webinar-hero__time">1:00 PM EST / 10:00 AM PST</div> </div> </div> <form class="hs-webinar-hero__form"> <div class="hs-webinar-hero__form-row"> <div class="hs-webinar-hero__form-field-half"> <label class="hs-webinar-hero__label">First Name</label> <input class="hs-webinar-hero__input" type="text" placeholder="First Name"/> </div> <div class="hs-webinar-hero__form-field-half"> <label class="hs-webinar-hero__label">Last Name</label> <input class="hs-webinar-hero__input" type="text" placeholder="Last Name"/> </div> <div class="hs-webinar-hero__form-field"> <label class="hs-webinar-hero__label">Email</label> <input class="hs-webinar-hero__input" type="email" placeholder="Email"/> </div> <div class="hs-webinar-hero__form-field"> <label class="hs-webinar-hero__label">Company</label> <input class="hs-webinar-hero__input" type="text" placeholder="Company"/> </div> </div> <div class="hs-webinar-hero__form-row"> <div class="hs-webinar-hero__submit"><a href="#">DOWNLOAD WEBINAR</a></div> </div> </form> </div> </div>
</div>
<div class="hs-webinar-content__container"> <div class="hs-webinar-content__primary"> <h2>Implement the strategies discussed in this webinar to prevent chargebacks and friendly fraud.</h2> <p>Friendly fraud is estimated to cost $30 billion annually. What’s worse, it’s increasing at the rate of 41% per year. A big reason for this: chargeback regulations were developed before the Internet existed, and never really intended to handle today’s technologies and threats. The good news? There are simple steps you can take to protect against friendly fraud chargebacks.</p> <p>Attend this webinar to learn about untapped chargeback management methods that increase revenue retention. We’ll discuss:</p> <ul> <li>Identifying the source of easily-preventable chargebacks</li> <li>Reducing operational expenses associated with chargeback management</li> <li>The value of chargeback data</li> <li>Benefits of the Kount and Chargebacks911 partnership</li> </ul> </div> <div class="hs-webinar-content__secondary"> <div class="hs-webinar-content__panelists"> <h3 class="hs-webinar-content__panelists-title">Panelists:</h3> <div class="hs-webinar-content__panelists-single"> <div class="hs-webinar-content__panelists-image"><img src="http://ad.chargebacks911.com/hs-fs/hubfs/monica_eaton.jpg?t=1496263482940&amp;width=240&amp;name=monica_eaton.jpg"/></div> <h4 class="hs-webinar-content__panelists-name"><strong>Monica Eaton-Cardone</strong><br>COO & Co-Founder of Chargebacks911</h4> </div> <div class="hs-webinar-content__panelists-single"> <div class="hs-webinar-content__panelists-image"><img src="http://ad.chargebacks911.com/hs-fs/hubfs/monica_eaton.jpg?t=1496263482940&amp;width=240&amp;name=monica_eaton.jpg"/></div> <h4 class="hs-webinar-content__panelists-name"><strong>Monica Eaton-Cardone</strong><br>COO & Co-Founder of Chargebacks911</h4> </div> </div> </div>
</div>
</body>
</html>

CB911 Webinar Hubspot Landing Page - Script Codes CSS Codes

// @import url('https://fonts.googleapis.com/css?family=Hind:400,700|Source+Sans+Pro:300,400,600');
// @import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
$radius: 3px;
* { box-sizing: border-box;
}
body { font-family: 'Hind', Arial, sans-serif; color: #1f2024; background-color: $white; width: auto; height: auto; font-weight: 400; min-height: 1200px; margin: 0;
}
img { max-width: 100%; display: block;
}
.hs-webinar-hero { position: relative; top: 0; left: 0; width: 100%; color: white; overflow: hidden; background: #565964; background: linear-gradient(to top left, #1f2024, lighten(#1f2024, 30%)); padding: $unit 0 55px; margin-bottom: 21px; @include mq('tablet') { padding: 32px 0 40px; } &__container { width: 90%; margin: 0 auto; } &__top { z-index: 2; position: relative; margin-bottom: 156px; &:after { display: table; content: ''; clear: both; } } &__top-left { float: left; width: 298px; max-width: 300px; min-width: 250px; } &__top-right { float: right; @include vert-center; right: 0; } &__social-container { margin: 0 -10px; @include mq('phone') { display: none; } } &__social-icon { float: left; padding: 0 12px; } &__screen { position: absolute; left: 0; right: 0; margin: 0 auto; top: 112px; width: 95%; max-width: 1000px; height: 800px; background: black; border: 38px solid #121212; border-radius: 30px; box-shadow: 0 0 3px 2px #fff; @include mq('tablet') { border-left-width: 12px; border-right-width: 12px; border-top-width: 60px; border-color: $white; box-shadow: 0 0 3px 3px #ffbe95; } &:after { content: ''; background: #58e258; border: 1px solid #26926d; box-shadow: 0 0 1px 2px black; width: 5px; height: 5px; @include align(false, true, absolute); top: -20px; border-radius: 50%; box-sizing: content-box; @include mq('tablet') { background: #111111; border-color: $black; box-shadow: none; width: 50px; border-radius: 2px; height: 3px; top: -30px; } } &:before { content: ''; background: #000000; border: 1px solid #101010; box-shadow: 0 0 0 2px black; width: 5px; height: 5px; @include align(false, true, absolute); top: -20px; left: calc(50% - 18px); border-radius: 50%; box-sizing: content-box; @include mq('tablet') { left: calc(50% - 50px); top: -31px; } } } &__text { margin-bottom: 32px; text-align: left; } &__heading { position: relative; // font-family: 'Source Sans Pro'; color: #ffffff; // margin-bottom: 21px; // margin-top: 0; // font-size: 36px; font-weight: 200; } &__heading-label { position: absolute; left: 1px; top: -34px; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; color: $white; text-transform: uppercase; @include mq('tablet') { color: $gold; } &:after { position: absolute; left: -60px; top: 12px; width: 50px; height: 50px; background: url(https://chargebacks911.com/wp-content/uploads/2017/04/webinar-icon.gif) no-repeat; background-size: contain; content: ''; @include mq('tablet') { display: none; } } } &__subheading { color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1.333333; margin-bottom: $unit; font-weight: 300; } &__date { float: left; margin-right: $unit*2; &:before { position: relative; font-family: FontAwesome; content: '\f073'; margin-right: $unit_half; } &:empty { display: none; &:before { display: none; } } } &__time { &:before { position: relative; font: normal normal normal 14px/1 FontAwesome; content: '\f017'; margin-right: $unit_half; font-size: 18px; } } &__form-container { position: relative; z-index: 2; width: 75%; max-width: 700px; margin: 0 auto; @include mq('tablet') { width: 90%; } } &__form { width: 100%; } &__form-row { width: auto; margin: 0 -12px; @include mq('tablet') { margin: 0 -6px; } &:after { content: ''; display: table; clear: both; } } &__img { width: 100%; margin-bottom: 32px; img { margin: 0 auto; } } &__form-field { float: left; width: 50%; overflow: hidden; padding: 0 12px; @include mq('tablet') { width: 100%; padding: 0 6px; } &-half { @extend .hs-webinar-hero__form-field; @include mq('tablet') { width: 50% } } } &__label { margin-bottom: 0.5em; display: none; } &__input { border: none; border-radius: $radius; font-family: 'Hind'; font-size: 14px; font-weight: 400; height: 48px; line-height: 48px; margin: 0 0 24px; padding: 0 12px; width: 100%; -webkit-font-smoothing: subpixel-antialiased; @include mq('tablet') { margin: 0 0 12px; } &:focus { outline: none; } } &__submit { padding: 0 12px; @include mq('tablet') { padding: 0 6px; } a { display: block; box-sizing: border-box; border-radius: $radius; width: 100%; height: 48px; font-size: 14px; line-height: 50px; text-align: center; background: $color_primary; padding: 0; color: #ffffff; text-decoration: none; transition: background 0.1s ease-in-out; &:hover { background: darken($color_primary, 5%); transition: background 0.15s ease-in-out; } } }
}
// IE Sucks
.ie7, .ie8, .ie9 { .hs-webinar-hero__label { display: block; //no placeholders in IE so show labels } .hs-webinar-hero__heading-label:after { display: none; }
}
body:after { // display: none;
}
.hs-webinar-content { &__container { @extend %clearfix; width: 95%; max-width: 1000px; margin: 0 auto; @include mq('tablet') { width: 100%; padding: 0 16px; } } &__primary { width: 75%; float: left; padding: 0 $unit $unit 0; } &__secondary { text-align: center; width: 25%; float: left; padding: 0 0 $unit $unit; img { margin-bottom: 6px; margin-top: 21px; border-radius: 50%; padding: 4px; background: white; border: 1px solid $grey_lightest; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15); } h4 { margin-bottom: 0; } } &__panelists { text-align: center; &-single { margin-bottom: $unit; } &-title { margin-bottom: 23px; } &-image { margin-bottom: 5px; } }
}
$color_slate: #3f4149;
h2 { color: $color_slate;
}
h3 { color: darken($color_slate,5%);
}
CB911 Webinar Hubspot Landing Page - Script Codes
CB911 Webinar Hubspot Landing Page - Script Codes
Home Page Home
Developer Travis Wagner
Username trvswgnr
Uploaded September 11, 2022
Rating 3
Size 14,269 Kb
Views 18,216
Do you need developer help for CB911 Webinar Hubspot Landing Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Travis Wagner (trvswgnr) Script Codes
Name
Behance Portfolio
Centered Nav
FlexBox Polyfill
Jhilex App Responsive
Materialize CSS
A Pen by Travis Wagner
FlexBox Holy Grail
RecPro Grid System
Secondary bar for resource pages test
Dice Game JS
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!