<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--SCRIPTS FOR THE CREDIT CARD PROCESSING-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
$(document).ready(function(){
$("a.collapsed").click(function(){
$(this).find(".btn:contains('answer')").toggleClass("collapsed");
});
});
</script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="nav-side-menu">
<div class="brand"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/logo-white.png" height ="77.55" width ="230" class="img-responsive center-block" alt="Logo">
</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<br><br>
<div class="testimonials">
<blockquote class="quotation slajd1" style ="border-left: 0px;">
<center> <div class="logo">
<img src="http://34.217.69.61/wp-content/uploads/2019/02/18622522_10154410876632064_3225012751583686224_n.jpg" class="img-responsive center-block" alt="Logo">
</div> </center>
<br>
<p class = "testimonials" style ="font-family:'Open Sans', italic;"><i>Danny and the entire team at local Social Pro have been exceptional and very professional. I am very impressed with their quality of work their service. They are easy to reach and very responsive and are very accommodating. They make me feel like the success of my business is important to them and that is key for me. I really appreciate all you have done for my business and I look forward to a long term business relationship with you.</i></p>
<cite>- Alex N. <br> REALTOR®</cite>
</blockquote>
<blockquote class="quotation slajd2" style ="border-left: 0px;">
<center> <div class="logo">
<img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg" class="img-responsive center-block" alt="Logo">
</div> </center>
<br>
<p class = "testimonials" style ="border-left: 0px;"><i>Pro is right!! They are always cutting edge giving me the most and Current and amazing posts. When I’ve got something I need to share they are quick to design and meet deadlines to give me the best visibility. Thank you for always keeping me out front! </i></p>
<cite>- Valerie H. <br>REALTOR® </cite>
</blockquote>
<blockquote class="quotation slajd3" style ="border-left: 0px;">
<center> <div class="logo">
<img src="http://34.217.69.61/wp-content/uploads/2019/02/50707800_10157267398301318_3692869553194270720_n.jpg" class="img-responsive center-block" alt="Logo">
</div> </center>
<br>
<p class = "testimonials" style ="border-left: 0px;"> <i>Everyone at Local Social Pro are top notch. They are highly skilled marketing professionals who are dynamic, responsive, and always open to idea-sharing to cater to the customer’s want and needs. They have completely transformed my real estate business in just 2 short months.</i></p>
<cite>- Brian C. <br> REALTOR®</cite>
</blockquote>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-1">
<div class="row">
<!-- You can make it whatever width you want. I'm making it full width
on <= small devices and 4/12 page width on >= medium devices -->
<div class="col-xs-12 col-md-5">
</div>
<div class="col-xs-12 col-md-6" style="font-size: 12pt; line-height: 2em;">
<h2 class = "maintext"> Let’s finish powering you up!</h2>
<h3 class = "subtext">PRO PLAN IS RIGH FOR YOU</h3>
<div class="container" >
<div class="row">
<div class="col-md-12 ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-warning">
<div class="panel-heading" role="tab" id="headingOne">
<div class="col-sm-6" style="float:left; margin-left: -33px !important; padding-top:20px;"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseOne">
<h3 class = "maintext2"> Pro Plan <i class="fa fa-caret-down" aria-hidden="true"></i> </h3><i> <small> <span style = "color:#38BEEF; ">Saving $80 off Regular Price </span> </small> </i>
</a> </div>
<div class="col-sm-6" style="float: right;"> <h1 id="price3" class="x-price" style="float: right; text-align: right; font-family:Open Sans, Regular; font-size: 30px; font-weight: 400; padding-top: 20px;" >$49/mo</h1>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="col-sm-12" >
<div class="col-sm-5" id ="listitems" style="text-align: left; font-size: 10px; margin: 0; padding: 0;">
<ul>
<li> Facebook Design </li>
<li>20 Posts on Your Social Media</li>
<li> 4 Just-Listed Videos </li>
</ul>
</div>
<div class="col-sm-4" id ="listitems" style="text-align: left; font-size: 10px; margin: 0; padding: 0;">
<ul>
<li> Local and National Articles</li>
<li> Beautiful Designed Assets </li>
<li> Unlimited Open House Flyers </li>
</ul>
</div>
<div class="col-sm-3" id ="listitems" style="text-align: left; margin: 0; padding: 0;">
<h3 class="subtext2" >CHANGE PLAN:</h3>
<select id="enterprise" style=" color:#3B5998;text-align:right; font-family Open Sans, Bold; width: 100%;
" onchange="document.getElementById('price3').innerHTML='$'+this.value">
<option value="49<small>/mo<small>" >Pro Plan</option>
<option value="99<small>/mo<small>">Ultimate Plan </option>
<option value="199<small>/mo<small>"> Platinum plan </option>
</select>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<div class="col-sm-6" style="float: right;">
</div>
<div class="col-sm-12" >
<span> <hr/> </span>
</div>
<!-- the lenght of each colum will be the same lenght over all -->
<div class="col-sm-12" >
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-tab-card">
<form role="form">
<div class="form-group">
<label for="username" class ="creditcardtext">NAME ON CARD</label>
<input type="text" class="form-control" name="username" placeholder=" John Doe" required="">
</div> <!-- form-group.// -->
<div class="form-group">
<label for="cardNumber" class ="creditcardtext">CARD NUMBER</label>
<div class="input-group">
<input type="text" class="form-control" name="cardNumber" placeholder="0000 0000 0000 0000">
<div class="input-group-append">
<span class="input-group-text text-muted">
<i class="fab fa-cc-visa"></i> <i class="fab fa-cc-amex"></i>
<i class="fab fa-cc-mastercard"></i>
</span>
</div>
</div>
</div> <!-- form-group.// -->
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label ><span class="hidden-xs">EXPIRY DATE (MM YYYY)</span> </label>
<div class="input-group">
<input type="number" class="form-control" placeholder="MM" name="">
<input type="number" class="form-control" placeholder="YYYY" name="">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label data-toggle="tooltip" title="" class ="creditcardtext" placeholder =" 3 or 4 digits "data-original-title="3 digits code on back side of the card">CVC/CVV<i class="fa fa-question-circle"></i></label>
<input type="number" class="form-control" required="">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6"> <br><h3 class = "subtext"> CREATE YOUR ACCOUNT</h3>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-12" style ="padding-left: 0;
padding-right: 0;" >
<span> <hr/> </span>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class ="creditcardtext">EMAIL</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="email@address.com">
</div> <!-- form-group.// -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="Password" class ="creditcardtext">Password</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div> <!-- form-group.// -->
</div>
<br><br><br>
<div class="col-sm-6">
<button class="subscribe btn btn-primary btn-block" type="button" style = "border-radius: 35px 35px 35px 35px;
background-color: #F0843C;
height: 57px;
width: 256px;
font-family: Roboto Condensed, Regular;
border: none;
font-size: 22px;
font-weight: 100; "> SUBMIT PAYMENT </button>
</div> <div class="col-sm-6">
</div> <!-- form-group.// -->
</div>
</div>
<!-- row.// -->
</form>
</div> <!-- tab-pane.// -->
</div> <!-- tab-content .// -->
</div>
</div>
</div>
</div>
</div>
<!--Main content code to be written here -->
.col-sm-3{
/* height: 150px;
background-color:#01549b;*/
}
.col-sm-9{
height: 160px;
opacity: 0.9;
}
.nav-side-menu {
overflow: hidden;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #3A5998;
position: fixed;
top: 0px;
width: 24%;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #3A5998;
line-height: 50px;
display: block;
text-align: center;
padding-top: 20px;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
.logo {
max-height: 190px;
}
.logo>img {
height: 190px;
width: 190px;
margin-top: 30px;
padding: 3px;
border: 3px solid white;
border-radius: 100%;
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');
.panel-warning>.panel-heading+.panel-collapse>.panel-body {
margin-left: -29px;
}
h1 {
color: #ffffff;
text-align: center;
margin-top: 50px;
line-height: 36px;
font-size: 30px;
text-transform: uppercase;
}
.testimonials {
width: 100%;
height: 100vh;
text-align: center;
overflow: hidden;
font-size: 20px;
}
.quotation {
display: block;
position: absolute;
width: 77%;
}
p {
color: #ffffff;
font-family: Open Sans, Regular;
font-size: 10px;
font-weight: 300;
line-height: 31px;
}
blockquote p::before,
blockquote p::after {
color: #66a2c3;
content: "“";
font-size: 11rem;
font-family: Georgia;
margin: 20px 0 0 -50px;
position: absolute;
opacity: 0.22;
}
blockquote p::after {
content: "”";
margin: 40px 0 0 10px;
opacity: 0.22;
}
blockquote cite {
font-size: 14px;
font-weight: 400;
text-align: left;
}
.slajd1 {
animation: opinionchange1 20s ease-in-out 0s infinite;
}
.slajd2 {
animation: opinionchange2 20s ease-in-out 0.1s infinite;
}
.slajd3 {
animation: opinionchange3 20s ease-in-out 0.2s infinite;
}
@keyframes opinionchange1 {
0%, 10% { right: 100%; opacity: 0; }
10%,25% { right: 7%; opacity: 1; }
35%, 100% { right: -15%; opacity: 0; }
}
@keyframes opinionchange2 {
0%, 35% { right: 100%; opacity: 0; }
40%, 55% { right: 7%; opacity: 1; }
65%, 100% { right: -10%; opacity: 0; }
}
@keyframes opinionchange3 {
0%, 65% { right: 100%; opacity: 0; }
70%, 75% { right: 7%; opacity: 1; }
80%, 100% { right: -10%; opacity: 0; }
}
/*Check list style*/
ul {
list-style: none;
}
ul li:before {
content: '✓';
color: #F0843C;
}
#listitems ul, #listitems li {
margin: 0; padding: 0;
}
/*text styling*/
.subtext{
color: #F0843C;
font-size: 14px;
text-align: left;
font-family: Open Sans, Semibold;
}
.subtext2{
color: #3B5998;
font-size: 14px;
text-align: left;
padding-top: 9px;
font-family: Open Sans, Semibold;
}
small {
font-size: 14%;
color: #3B5998;
}
.maintext{
color:#3B5998;
text-align: left;
font-weight: 700;
font-size: 35px;
padding-bottom: 1px;
font-family: Open Sans, Bold;
}
.maintext2{
color:#3B5998;
text-align: left;
font-weight: 700;
font-size: 25px;
padding-bottom: 1px;
font-family: Open Sans, Bold;
}
.hidden-xs{
font-family: "Open Sans"; font-size: 14px !important; font-style: normal; font-variant: normal; font-weight: 600; line-height: 26.4px;
color: #3B5998;
}
/* credit card text*/
.creditcardtext{
color: #3B5998;
font-family: "Open Sans"; font-size: 14px !important; font-style: normal; font-variant: normal; font-weight: 600; line-height: 26.4px;
}
/*button styling*/
.x-price{
float: right;
font-family: Open Sans, Regular;
font-size: 30px;
font-weight: 300;
color: #3B5998;
}
/*form styling */
.input-group-addon {
background-color: transparent;
border-left: none !important;
}
.cc-number.identified {
background-repeat: no-repeat;
background-position-y: 3px;
background-position-x: 99%;
}
.quotation slajd1{
border-left: none;
}
.hr{margin:5px 0;}
.accordion-group{margin-bottom:10px;border-radius:0;}
.accordion-toggle{
background:rgb(248, 251, 252);
}
.accordion-toggle:hover{
text-decoration: none;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
}
.selectStyle{
width:46%; float: left; margin-right: 8%;
}
.accordion-group{
margin-bottom:20px;
}
.card{
bot
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
}
.panel-warning {
border-style: none !important;
background-color: #ffffff !important;
}
.panel-warning > .panel-heading {
background-color: #ffffff !important;
border-style: none !important;
}
.panel-title > a.collapsed:before {
content: "\f067";
}
.panel-title > a {
text-decoration: none;
}
