shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
shafin-r
2025-07-03 01:43:25 +06:00
commit 5dc53b896e
279 changed files with 28956 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
newspaper/assets/css/membership.css Normal file
View File

@ -0,0 +1,290 @@
.membership-hero .text-card {
padding-bottom: 0px !important;
}
custom-membership {
display: none;
}
.membership-buttons {
padding-top: 27px;
padding-bottom: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.membership-button {
border: 1px solid var(--text-color);
min-width: calc(13vw * var(--scale));
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.membership-button:hover {
opacity: 1 !important;
}
.membership-button[data-inactive="true"]{
background-color: var(--background-color);
color: var(--text-color);
}
.membership-tiers {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 42px;
}
.membership-tiers[data-inactive="true"] {
display: none;
}
.tier-card {
width: calc(26vw * var(--scale));
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid var(--text-color);
padding: 57px 38px;
text-align: center;
}
.tier-card .big-text {
font-family: var(--font2);
text-transform: unset;
font-weight: 400;
line-height: 80%;
}
.tier-price {
margin-top: 27px;
margin-bottom: 33px;
position: relative;
display: flex;
align-items: flex-end;
}
.tier-currency {
position: absolute;
top: 11px;
left: 0px;
font-size: 42px;
line-height: 80%;
font-family: var(--font2);
transform: translateX(-100%);
}
.tier-price-span {
font-family: var(--font2);
line-height: 80%;
font-size: 124px;
font-weight: 400;
}
.tier-card .medium-text {
font-family: var(--font2);
text-transform: unset;
font-weight: 400;
line-height: 120%;
}
.tier-time {
position: absolute;
bottom: 3px;
right: 5px;
transform: translateX(100%);
}
.benefits-outer {
margin-top: 33px;
border-top: 1px solid var(--text-color);
width: 100%;
padding-top: 41px;
padding-bottom: 57px;
}
.benefits-container {
display: flex;
flex-direction: column;
gap: 19px;
}
.benefits-item {
text-align: left;
display: flex;
gap: 14px;
}
.benefit-square {
margin-top: 2px;
height: 20px;
min-height: 20px;
width: 20px;
min-width: 20px;
background-color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
}
.benefit-icon {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
}
.membership-subscribe-button {
margin-top: auto;
display: flex;
}
/* Styles for large desktop */
@media (min-width: 1439px) {
.membership-buttons {
padding-top: calc(1.88vw * var(--scale));
padding-bottom: calc(2.43vw * var(--scale));
}
.membership-button {
height: calc(2.92vw * var(--scale));
}
.membership-tiers {
gap: 2.92vw;
}
.tier-card {
padding: calc(3.96vw * var(--scale)) calc(2.64vw * var(--scale));
}
.tier-price {
margin-top: calc(1.88vw * var(--scale));
margin-bottom: calc(2.29vw * var(--scale));
}
.tier-currency {
font-size: calc(2.92vw * var(--scale));
top: calc(0.78vw * var(--scale));
}
.tier-price-span {
font-size: calc(8.61vw * var(--scale));
}
.tier-time {
bottom: calc(0.21vw * var(--scale));
right: calc(0.35vw * var(--scale));
}
.benefits-outer {
margin-top: calc(2.29vw * var(--scale));
padding-top: calc(2.85vw * var(--scale));
padding-bottom: calc(3.96vw * var(--scale));
}
.benefits-container {
gap: calc(1.32vw * var(--scale));
}
.benefits-item {
gap: calc(0.97vw * var(--scale));
}
.benefit-square {
margin-top: calc(0.14vw * var(--scale));
height: calc(1.39vw * var(--scale));
min-height: calc(1.39vw * var(--scale));
width: calc(1.39vw * var(--scale));
min-width: calc(1.39vw * var(--scale));
}
.benefit-icon {
height: calc(1.11vw * var(--scale));
width: calc(1.11vw * var(--scale));
}
}
/* Styles for tablet */
@media (max-width: 991px) {
.membership-tiers {
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 38px;
}
.membership-button {
min-width: 160px;
}
.tier-card {
max-width: 400px;
width: 100%;
}
}
/* Styles for mobile */
@media (max-width: 479px) {
.membership-buttons {
padding-top: 25px;
padding-bottom: 32px;
}
.membership-button {
min-width: 126px;
height: 38px;
}
.membership-tiers {
gap: 32px;
}
.tier-card {
max-width: 340px;
padding: 57px 24px;
}
.tier-price {
margin-top: 26px;
margin-bottom: 28px;
}
.tier-currency {
font-size: 32px;
top: 9px;
}
.tier-price-span {
font-size: 96px;
}
.benefits-outer {
margin-top: 28px;
padding-top: 28px;
}
.benefits-item {
text-align: left;
display: flex;
gap: 10px;
}
.benefit-square {
margin-top: 2px;
height: 18px;
min-height: 18px;
width: 18px;
min-width: 18px;
}
.benefit-icon {
height: 14px;
width: 14px;
}
}