Subscribe

Developer
Sreekanth Are
Size
3,321 Kb
Views
22,264
  1. Subscribe Previews
  2. Subscribe HTML Codes
  3. Subscribe CSS Codes

How do I make an subscribe?

What is a subscribe? How do you make a subscribe? This script and codes were developed by Sreekanth Are on 21 November 2022, Monday.

Subscribe Previews
IQ Test

Subscribe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subscribe</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#My-Subscribe">Subscribe</a>
<div id="My-Subscribe" class="modal fade m-modal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!--header--> <div class="modal-header m-header"> <button class="close" data-dismiss="modal">&times;</button> <h1> Enter Billing Information<br> <small>Please enter your credit card information bellow to continue after your free trial expires</small> </h1> </div> <!--body--> <div class="modal-body m-body"> <h3>Choose subscription plan</h3> <div class="row plans"> <div class="col-sm-4"> <div class="monthly"> <h2>$ 39 <br/><small>per month</small></h2> </div> </div> <div class="col-sm-4"> <div class="monthly"> <h2>$ 39 <br/><small>per month</small></h2> </div> </div> <div class="col-sm-4"> <div class="monthly"> <h2>$ 39 <br/><small>per month</small></h2> </div> </div> </div> <div class="row plans"> <div class="col-sm-4"> <div class="yearly"> <h1><strong>$ 398</strong> <br/><small>per annum</small></h1> <h5><strong>Save over 15%</strong></h5> </div> </div> <div class="col-sm-4"> <div class="yearly"> <h1><strong>$ 398</strong> <br/><small>per annum</small></h1> <h5><strong>Save over 15%</strong></h5> </div> </div> <div class="col-sm-4"> <div class="yearly"> <h1><strong>$ 398</strong> <br/><small>per annum</small></h1> <h5><strong>Save over 15%</strong></h5> </div> </div> </div> </div> <!--footer--> <div class="modal-footer m-footer"> <button class="btn btn-dark btn-lg"> Proceed <i class="fa fa-chevron-right"></i> </button> </div> </div> </div>
</div>
<!-- Another design -->
<a href="" class="btn btn-success btn-lg" data-toggle="modal" data-target="#My-Buy">Buy Plan</a>
<div id="My-Buy" class="modal fade b-modal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!--header--> <div class="modal-header b-header"> <button class="close" data-dismiss="modal">&times;</button> <h1> Enter Billing Information<br> <small>Please enter your credit card information bellow to continue after your free trial expires</small> </h1> </div> <!--body--> <div class="modal-body b-body"> <div class="row"> <div class="col-sm-4"> <div class="b-plan"> <h1><strong>Individuals</strong></h1> <p> <span>US $</span> <span>9</span> <span>99</span> <span>/ mo</span> </p> <p>Billed annually at US$119.88/yr</p> <select class="form-control b-form"> <option>yearly</option> <option>monthly</option> </select> </div> </div> <div class="col-sm-4"> <div class="b-plan"> <h1><strong>Individuals</strong></h1> <p> <span>US $</span> <span>9</span> <span>99</span> <span>/ mo</span> </p> <p>Billed annually at US$119.88/yr</p> <select class="form-control b-form"> <option>yearly</option> <option>monthly</option> </select> </div> </div> <div class="col-sm-4"> <div class="b-plan"> <h1><strong>Individuals</strong></h1> <p> <span>US $</span> <span>9</span> <span>99</span> <span>/ mo</span> </p> <p>Billed annually at US$119.88/yr</p> <select class="form-control b-form"> <option>yearly</option> <option>monthly</option> </select> </div> </div> </div> </div> <!--footer--> <div class="modal-footer m-footer"> <button class="btn btn-dark btn-lg"> Proceed <i class="fa fa-chevron-right"></i> </button> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

Subscribe - Script Codes CSS Codes

.m-modal .m-header small { font-size: large;
}
.m-modal .m-body .plans { padding: 10px;
}
.m-modal .m-body .plans .monthly { background: #23c6c8; color: #fff; border: 1px solid #fff; border-radius: 5px; text-align: center; cursor: pointer; box-shadow: 0 0 10px 1px transparent; transition: all .2s ease-in-out;
}
.m-modal .m-body .plans .monthly:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3); transform: scale(1.1);
}
.m-modal .m-body .plans .monthly small { color: rgba(255, 255, 255, 0.6);
}
.m-modal .m-body .plans .yearly { background: #ff5555; color: #fff; border: 1px solid #fff; border-radius: 5px; text-align: center; cursor: pointer; box-shadow: 0 0 10px 1px transparent; transition: all .2s ease-in-out;
}
.m-modal .m-body .plans .yearly:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3); transform: scale(1.1);
}
.m-modal .m-body .plans .yearly small { color: rgba(255, 255, 255, 0.6); font-size: large;
}
.m-modal .m-footer .btn-dark { background: #ddd;
}
.b-modal .b-header small { font-size: large;
}
.b-modal .b-body { color: #444; padding: 40px 30px;
}
.b-modal .b-body .b-plan { border: 1px solid #e5e5e5; text-align: center; padding: 20px; cursor: pointer; box-shadow: 0 0 10px 1px transparent; transition: all .2s ease-in-out;
}
.b-modal .b-body .b-plan:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3); transform: scale(1.1);
}
.b-modal .b-body .b-plan h1 { margin-bottom: 40px;
}
.b-modal .b-body .b-plan p span:nth-of-type(1) { vertical-align: top; font-size: 25px;
}
.b-modal .b-body .b-plan p span:nth-of-type(2) { font-size: 80px;
}
.b-modal .b-body .b-plan p span:nth-of-type(3) { font-size: 25px; vertical-align: top;
}
.b-modal .b-body .b-plan p span:nth-of-type(4) { font-size: 25px; margin-left: -35px;
}
.b-modal .b-body .b-plan p:nth-of-type(2) { color: #aaa; padding-bottom: 20px; font-size: 18px;
}
.b-modal .b-body .b-plan .b-form { height: 45px;
}
.b-body .row .col-sm-4:nth-of-type(2) .b-plan { border: 3px solid #89bece; transform: scale(1.1);
}
.b-body .row .col-sm-4:hover .b-plan { border: 3px solid #89bece;
}
Subscribe - Script Codes
Subscribe - Script Codes
Home Page Home
Developer Sreekanth Are
Username srees
Uploaded November 21, 2022
Rating 3
Size 3,321 Kb
Views 22,264
Do you need developer help for Subscribe?

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!

Sreekanth Are (srees) Script Codes
Name
Step Wizard
Bootstrap 3 carousel multi div slider
A Pen by Sreekanth Are
Add or Edit modal UI
Template
We-Sign-Up
KU
INS - Template
VolunteerMark Checkout
Store Assist - 7eleven login
Create amazing blog posts 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!