Rizwan.Shaikh/goodtimes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

subscribe

Browse Source
This commit is contained in:
rizwanisready
2024-03-19 12:40:13 +05:30
parent 5651bae4fb
commit 6e76d699e1
2 changed files with 117 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
static/src/assets/css/payment/style.css
View File

@@ -264,6 +264,64 @@ header nav ul li a:hover:after {
margin-top: 24px;
}
/* plan */
.modal-body .your-plan {
margin-top: 15px;
}
.modal-body .your-plans-main {
padding: 0px 10px 30px;
}
.modal-body .your-plans-main .head {
font-size: 25px;
color: black;
font-weight: 500;
}
.modal-body .your-plans-main .monthly-div-main {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 15px 20px;
border-radius: 8px;
}
.modal-body .your-plans-main .monthly-div-main .monthly-div {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgb(215 169 72 / 28%);
}
.modal-body .your-plans-main .your-heading {
color: var(--main-yellow);
font-size: 24px;
font-weight: 500;
}
.modal-body .your-plans-main .your-subheading {
font-size: 24px;
font-weight: 500;
color: black;
}
.modal-body .your-plans-main .your-subheading span {
font-size: 18px;
font-weight: 400;
}
.modal-body .your-plans-btn {
text-align: center;
margin-top: 20px;
}
.modal-body .your-plans-btn .common-btn {
width: 100%;
}
/* plan end */
.common-btn {
background: linear-gradient(90.02deg, #CDA34C 0.02%, #F1D6A0 52%, #D1A956 98.68%);
width: 252px;

87
templates/stripe_html/index.html
View File

@@ -70,8 +70,39 @@
</a>
</div>
<!-- Button trigger modal -->
<div class="baner-btn">
<button class="common-btn" id="submitBtn">Join now</button>
<button id="toggleButton" class="common-btn" data-bs-toggle="modal"
data-bs-target="#exampleModal">Join now</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Your Plans</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="your-plan">
<div class="your-plans-main">
<div class="monthly-div-main">
<div class="monthly-div">
<p class="your-heading">Monthly</p>
<p class="your-subheading">$5.55 /<span> month</span></p>
</div>
</div>
<div class="your-plans-btn">
<button class="common-btn" id="submitBtn">Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -251,15 +282,15 @@
<div class="accordion-body">
<strong>This is the second item's accordion
body.</strong> It is hidden by default,
until the collapse plugin adds the
appropriate classes that we use to style
each element. These classes control the
overall appearance, as well as the showing
and hiding via CSS transitions. You can
modify any of this with custom CSS or
overriding our default variables. It's also
worth noting that just about any HTML can go
within the transition does limit overflow.
until the collapse plugin adds the
appropriate classes that we use to style
each element. These classes control the
overall appearance, as well as the showing
and hiding via CSS transitions. You can
modify any of this with custom CSS or
overriding our default variables. It's also
worth noting that just about any HTML can go
within the transition does limit overflow.
</div>
</div>
</div>
@@ -275,15 +306,15 @@
<div class="accordion-body">
<strong>This is the third item's accordion
body.</strong> It is hidden by default,
until the collapse plugin adds the
appropriate classes that we use to style
each element. These classes control the
overall appearance, as well as the showing
and hiding via CSS transitions. You can
modify any of this with custom CSS or
overriding our default variables. It's also
worth noting that just about any HTML can go
within the transition does limit overflow.
until the collapse plugin adds the
appropriate classes that we use to style
each element. These classes control the
overall appearance, as well as the showing
and hiding via CSS transitions. You can
modify any of this with custom CSS or
overriding our default variables. It's also
worth noting that just about any HTML can go
within the transition does limit overflow.
</div>
</div>
</div>
@@ -299,15 +330,15 @@
<div class="accordion-body">
<strong>This is the third item's accordion
body.</strong> It is hidden by default,
until the collapse plugin adds the
appropriate classes that we use to style
each element. These classes control the
overall appearance, as well as the showing
and hiding via CSS transitions. You can
modify any of this with custom CSS or
overriding our default variables. It's also
worth noting that just about any HTML can go
within the transition does limit overflow.
until the collapse plugin adds the
appropriate classes that we use to style
each element. These classes control the
overall appearance, as well as the showing
and hiding via CSS transitions. You can
modify any of this with custom CSS or
overriding our default variables. It's also
worth noting that just about any HTML can go
within the transition does limit overflow.
</div>
</div>
</div>