Upgrade Page Responsive

mastersly · May 27, 2020

Preview

[hide]
[size=xx-large]HTML

Code:

<html>
<head>
<title>Upgrade</title>

</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<br>
<!-- BEGIN 1 GROUP -->
<div style="display: flex;flex-wrap: wrap;">
<div style="flex: 0 1 33%;" class="mobilevrs1">
<div style="margin: 7px;">
<div style="box-shadow: 2px 2px 2px #1b1a1a;">

<div class="Firstgroupthead"><div class="firstgroupprice">FREE</div>GOLDEN</div>
<div class="periodtimeg">Period:<span style="float: right;">Lifetime</span></div>
<div class="usernamebg"><span class="goldenclassstyle">{$mybb->user['username']}</span></div><div class="groupimagebg"><img src="/images/carbon1/ranks/NewGifRanks/GoldenGifBar.gif"></div>
<div class="userperksbf">Upgrade Perks</div>


<div class="perklistbg">PM Space<span style="float: right;">1000</span></div>
<div class="perklistbg">Reputation Ability<span style="float: right;"><strong><span style="color: #4eb339;">+3</span>/<span style="color: #cc3333;">-3</span></strong></span></div>
<div class="perklistbg">Maximum Reputation Per Day<span style="float: right;">50</span></div>
<div class="perklistbg">Access to premium-only section<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Delete & edit own threads<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Profile Music<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Ability to change username<span style="float: right;"><li class="fa fa-times upgrade-red"></li></span></div>
<div class="perklistbg">Colorful Usertitle<span style="float: right;"><li class="fa fa-times upgrade-red"></li></span></div>
<div class="perklistbg">Unlock content without credits/reply<span style="float: right;"><li class="fa fa-times upgrade-red"></li></span></div>
<div class="perklistbg">Access to Postbit Background Changer<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">2x Credits Income Rate<span style="float: right;"><li class="fa fa-times upgrade-red"></li></span></div>
<div class="purchasebutt">500 Threads to upgrade</div>
</div>
</div>
</div>
<!-- END 1 GROUP -->

<!-- BEGIN 2 GROUP -->
<div style="flex: 0 1 33%;" class="mobilevrs1">
<div style="margin: 7px;">
<div style="box-shadow: 2px 2px 2px #1b1a1a;">

<div class="Secondgroupthead"><div class="secondgroupprice">4.99 ?</div>VIP</div>
<div class="periodtimeg">Period:<span style="float: right;">Lifetime</span></div>
<div class="usernamebg"><span class="vipclassstyle">{$mybb->user['username']}</span></div><div class="groupimagebg"><img style="" src="/images/carbon1/ranks/NewGifRanks/VipGifBar.gif"></div>
<div class="userperksbf">Upgrade Perks</div>


<div class="perklistbg">PM Space<span style="float: right;">3000</span></div>
<div class="perklistbg">Reputation Ability<span style="float: right;"><strong><span style="color: #4eb339;">+5</span>/<span style="color: #cc3333;">-5</span></strong></span></div>
<div class="perklistbg">Maximum Reputation Per Day<span style="float: right;">90</span></div>
<div class="perklistbg">Access to premium-only section<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Delete & edit own threads<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Profile Music<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Ability to change username<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Colorful Usertitle<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Unlock content without credits/reply<span style="float: right;"><li class="fa fa-times upgrade-red"></li></span></div>
<div class="perklistbg">Access to Postbit Background Changer<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">2x Credits Income Rate<span style="float: right;"><li class="fa fa-times upgrade-red"></li></span></div>
<a href="/private.php?action=send&uid=1"><div class="purchasebutt"> PM Admin</div></a>
</div>
</div>
</div>
<!-- END 2 GROUP -->

<!-- BEGIN 3 GROUP -->
<div style="flex: 0 1 33%;" class="mobilevrs1">
<div style="margin: 7px;">
<div style="box-shadow: 2px 2px 2px #1b1a1a;">
<div class="thirdgroupthead"><div class="thirdgroupprice">7.99 ?</div>DIAMOND</div>
<div class="periodtimeg">Period:<span style="float: right;">Lifetime</span></div>
<div class="usernamebg"><span class="diamondclassstyle">{$mybb->user['username']}</span></div><div class="groupimagebg"><img style="" src="/images/carbon1/ranks/NewGifRanks/DiamondGifBar.gif"></div>
<div class="userperksbf">Upgrade Perks</div>


<div class="perklistbg">PM Space<span style="float: right;">5000</span></div>
<div class="perklistbg">Reputation Ability<span style="float: right;"><strong><span style="color: #4eb339;">+7</span>/<span style="color: #cc3333;">-7</span></strong></span></div>
<div class="perklistbg">Maximum Reputation Per Day<span style="float: right;">150</span></div>
<div class="perklistbg">Access to premium-only section<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Delete & edit own threads<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Profile Music<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Ability to change username<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Colorful Usertitle<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Unlock content without credits/reply<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">Access to Postbit Background Changer<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<div class="perklistbg">2x Credits Income Rate<span style="float: right;"><li class="fa fa-check upgrade-green"></li></span></div>
<a href="/private.php?action=send&uid=1"><div class="purchasebutt"> PM Admin</div></a>

</div>
</div>
</div>
<!-- END 3 GROUP -->



</div>


<br><br>
</body>
</html>

CSS

Code:

@media only screen and (max-width: 925px) {
.mobilevrs1 {
? ? flex: none!important;
? ? width: 100%;
}
}

.Username-1-style{
?? color: #FFDF00 ;
	font-size: 16px;
}

.Username-2-style{
?? color: #c8378d;
	font-size: 16px; 
	background-image: url(/images/Carbonblue/bg1.gif);
}

.Username-3-style{
?? color: #57a1d4;
	font-size: 16px;
	background-image: url(/images/Carbonblue/bg1.gif);
}

.groupimagebg{
?? background-color: #222222; 
	padding: 12px;
	text-align: center;
}

.redeemcodethead{
? ? color: #fff;? ? 
? ? padding: 12px;
? ? border-radius: 2px; 
? ? background-color: #2f2f2f !important;
? ? background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
? ? box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
? ? text-shadow: rgba(0,0,0,0.4) 0px -1px 0px;
? ? border-radius: 3px;
? ? text-align: center;
? ? font-size: 1.2rem;
? ? font-weight: bold;
}

.redeemcodeinputbg{
? ? background-color: #282828;
	padding: 12px;
	border-bottom: 1px solid #303030;
	color: #fff;
}

.paymentsbg{
? ? background-color: #2f2f2f; 
	padding: 10px;color: grey;
	text-align: center;
}

.paymentslistbg{
? ? background-color: #282828; 
	padding: 12px;
	text-align: center;
}

.userperksbf{
?? background-color: #2f2f2f; 
?? padding: 10px;color: grey;
?? text-align: center;
}

.perklistbg{
?? background-color: #242424;
?? padding: 12px;
?? border-top: 1px solid #2a2a2a;
?? border-bottom: 1px solid #1B1B1B;
}

.Firstgroupthead{
? ? color: #fff;
? ? padding: 12px;
? ? border-radius: 2px; 
? ? background: linear-gradient(90deg,rgba(43,44,50,1) 0%,rgba(255, 235, 59, 0.27) 40%,#FFEB3B 100%)!important;
? ? background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
? ? box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
? ? text-shadow: rgba(0,0,0,0.4) 0px -1px 0px;
? ? border-radius: 3px;
? ? font-size: 1.2rem;
? ? font-weight: bold;
}

.firstgroupprice{
? ? background-color: rgba(0, 0, 0, 0.2);
	padding: 12px;float: right;
	margin: -12px;
}

.periodtimeg{
background-color: #242424; 
	padding: 12px;
	border-bottom: 1px solid #303030;
	color: #fff;
}

.Secondgroupthead{
? ? color: #fff;? ? 
? ? padding: 12px;
? ? border-radius: 2px; 
? ? background: linear-gradient(90deg,rgba(43,44,50,1) 0%,rgba(255, 59, 249, 0.44) 40%,#ea3bff 100%)!important;
? ? background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
? ? box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
? ? text-shadow: rgba(0,0,0,0.4) 0px -1px 0px;
? ? border-radius: 3px;
? ? font-size: 1.2rem;
? ? font-weight: bold;
}

.secondgroupprice{
? ? background-color: rgba(0, 0, 0, 0.2);
	padding: 12px;
	float: right;
	margin: -12px;
}


.thirdgroupthead{
? ? color: #fff;? ? 
? ? padding: 12px;
? ? border-radius: 2px; 
? ? background: linear-gradient(90deg,rgba(43,44,50,1) 0%,rgba(59, 137, 255, 0.41) 40%,#3b89ff 100%)!important;
? ? background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
? ? box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
? ? text-shadow: rgba(0,0,0,0.4) 0px -1px 0px;
? ? border-radius: 3px;
? ? font-size: 1.2rem;
? ? font-weight: bold;
}

.thirdgroupprice{
? ? background-color: rgba(0, 0, 0, 0.2);
	padding: 12px;
	float: right;
	margin: -12px;
}

.usernamebg{
? ? background-color: #242424;
	padding: 10px;color: grey;
	text-align: center;
}

.fa-check:before{
color: #03c123;
}

.fa-times:before{
color: #ff2626;
}

.purchasebutt{
? ? padding: 13px;
? ? background-color: #282828;
? ? text-align: center;
? ? font-size: 17px;
}

.purchasebutt:hover{
? ? padding: 13px;
? ? background-color: #8d3838;
? ? text-align: center;
? ? font-size: 17px;
? ? color: #fff;
}

Html doesnt include header and footer, Use page manager.
[/hide]

cloug · May 27, 2020

Lets see what you have here

8guawong · May 27, 2020

i'm here to learn

crackingforum · May 30, 2020

Thanks a lot for this one.

Takash · Jun 2, 2020

thanksss

Mariela · Jun 2, 2020

thank you!

Geo · Jun 26, 2020

thank you

WINBOY · Jul 3, 2020

Looks interesting...let's see.

_B_ · Aug 1, 2020

Nice share. Will try it out too.

xzen404 · Sep 26, 2020

Thanks a lot for this one.

Thanks bro)

streock · Nov 11, 2020

aferin

denemecekelemene · Nov 15, 2020

thank you

Sobi · Dec 24, 2020

Thanks Mate, its really helpful

pirateszone · Apr 24, 2021

Nice one bro thanks for sharing

Cyberpvnk · May 22, 2021

Thank you for this man.

Yagami1 · Jun 24, 2021

Seems like a pretty neat code!

pacopai · Sep 1, 2021

Lets see what you have here

Welcome to Admin Junkies, Guest — join our community!

Upgrade Page Responsive

Addicted member

Addicted member

Member

New Member

Reputable member

Renowned member

Well-known member

Active member

Addicted member

Active member

Recognized member

Member

Well-known member

Member

Member

Member

New Member

Log in or register to unlock full forum benefits!

Similar threads

Start a forum in a popular but highly competitive niche

Initiate a forum within a limited-known niche with zero competition

Theme editor

Theme customizations

Dark mode

Wider view

Grid view

Illustrated grid view

Open/Close sidebar

Sticky sidebar

Header area animation

Graphic Backgrounds

Granite Backgrounds

Welcome to Admin Junkies