krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

update: upgrade groups sign up page (slightly)

Browse Source
This commit is contained in:
CuriousMagpie
2022-08-08 16:36:14 -04:00
parent cff6c5674f
commit 5d81c63897
1 changed files with 45 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
website/client/src/components/groups/groupPlan.vue
View File

@@ -108,7 +108,7 @@
>
<div class="row">
<h1 class="col-12 text-center purple-header">
Create your Group today!
Create Your Group Today!
</h1>
</div>
<div class="row">
@@ -117,39 +117,33 @@
class="btn btn-primary create-group"
@click="launchModal('create-page')"
>
Create Your New Group
Create Your New Group!
</button>
</div>
</div>
<div class="row pricing">
<div class="col-5">
<div class="dollar">
$
</div>
<div class="number">
9
</div>
<div class="name">
<div>Group Owner</div>
<div>Subscription</div>
</div>
<div class="row pricing justify-content-center align-items-center">
<div class="dollar">
$
</div>
<div class="col-1">
<div class="plus">
+
</div>
<div class="number">
9
</div>
<div class="col-6">
<div class="dollar">
$
</div>
<div class="number">
3
</div>
<div class="name">
<div>Each Additional</div>
<div>Member</div>
</div>
<div class="name">
<div>Group Owner</div>
<div>Subscription</div>
</div>
<div class="plus">
+
</div>
<div class="dollar">
$
</div>
<div class="number">
3
</div>
<div class="name">
<div>Each Additional</div>
<div>Member</div>
</div>
</div>
</div>
@@ -165,8 +159,8 @@
.dollar {
position: absolute;
left: -1em;
top: 1em;
left: -16px;
top: 16px;
}
.purple-box {
@@ -191,9 +185,9 @@
background: #432874;
background: linear-gradient(180deg, #4F2A93 0%, #432874 100%);
color: #fff;
padding: 2em;
padding: 32px;
height: 340px;
margin-bottom: 2em;
margin-bottom: 32px;
margin-left: -12px;
margin-right: -12px;
@@ -217,6 +211,7 @@
.box {
height: 416px;
border-radius: 8px;
}
h2 {
@@ -259,17 +254,19 @@
button.create-group {
width: 330px;
height: 96px;
border-radius: 8px;
font-size: 1.5rem;
}
.purple-header {
color: #6133b4;
font-size: 48px;
margin-top: 1em;
margin-top: 16px;
}
.pricing {
margin-top: 2em;
margin-bottom: 4em;
margin-top: 32px;
margin-bottom: 64px;
.dollar, .number, .name {
display: inline-block;
@@ -278,35 +275,37 @@
}
.plus {
font-size: 34px;
font-size: 2.125rem;
color: #a5a1ac;
margin-left: 16px;
margin-right: 16px;
}
.dollar {
margin-bottom: 1.5em;
font-size: 32px;
margin-bottom: 24px;
font-size: 2rem;
font-weight: bold;
}
.name {
font-size: 24px;
margin-bottom: .8em;
margin-left: .5em;
font-size: 1.5rem;
margin-left: 8px;
margin-right: 8px;
}
.number {
font-size: 72px;
font-size: 4.5rem;
font-weight: bolder;
}
}
.payment-options {
margin-bottom: 4em;
margin-bottom: 64px;
.purple-box {
background-color: #4f2a93;
color: #fff;
padding: .5em;
padding: 8px;
border-radius: 8px;
width: 200px;
height: 215px;
@@ -320,7 +319,7 @@
.name {
width: 100px;
margin-left: .3em;
margin-left: 4.8px;
}
.plus {