Skip to content
This repository was archived by the owner on Sep 11, 2025. It is now read-only.

Update pricing page #66

Closed
francisschmaltz wants to merge 6 commits into from
Closed

Update pricing page #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
184d6be
Update pricing page
Dec 5, 2018
6c4da43
Prettier
Dec 5, 2018
0879f85
Update SSO line
Dec 5, 2018
30bb87d
Update copy
Dec 7, 2018
926b477
Change HA copy and clean design on mobile:
Dec 7, 2018
fb393c4
Update padding on mobile btn
Dec 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 34 additions & 45 deletions website/src/css/pages/_pricing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@
transition: all 300ms ease;
box-shadow: 0px 0px 4px 1px rgba(13, 69, 255, 0.4);
}
@media screen and (max-width: $media-md) {
margin-bottom: 1rem;
width: 100%;
}
}
.btn-github {
margin-left: 1.5rem;
Expand All @@ -80,10 +84,10 @@
transition: all 300ms ease;
box-shadow: 0px 0px 4px 1px rgba(178, 0, 248, 0.4);
}
@media screen and (max-width: $media-md) {
margin-left: 0rem;
margin-top: 1rem;
}
@media screen and (max-width: $media-md) {
margin-left: 0;
width: 100%;
}
}
.hero-image {
width: 100%;
Expand All @@ -98,53 +102,27 @@
display: inline-block;
padding: 0 0;
.pricing-section {
padding-top: 15vh;
padding-top: calc(15vh - 20px);
.row {
justify-content: space-evenly;
}
}

.pricing-card-col {

&:nth-child(2) {
transform: translateX(-100%);
animation: slide1 650ms ease-in-out 750ms forwards;
@keyframes slide1 {
from {
transform: matrix3d(0.87, 0, 0.7, 0, 0, 1, 0, 0, -0.5, 0, 0.87, 0, -100%, 0, 0, 1);
}
to {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}

}
&:nth-child(3) {
transform: translateX(-35%);
animation: slide2 650ms ease-in-out 750ms forwards;
@keyframes slide2 {
from {
transform: matrix3d(0.87, 0, 0.7, 0, 0, 1, 0, 0, -0.5, 0, 0.87, 0, -35%, 0, 0, 1);
}
to {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}

}
&:first-of-type {
.card-body {
h2 {
// color: #0d97ff
}
}
opacity: 0;
transform: translateX(-50px);
animation: display 650ms ease-in-out 1100ms forwards;
@keyframes display {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}

.btn {
background-color: #0d97ff;
color: #fafcff;
Expand Down Expand Up @@ -199,6 +177,11 @@
&:hover {
box-shadow: 0px 0px 8px 1px rgba(13, 151, 255, 0.45);
}
@media screen and (max-width: $media-md) {
width: calc(100% - 8px);
margin-left: 0;

}
}
.features {
line-height: 24px;
Expand All @@ -225,14 +208,15 @@
}

.contact {
@media (max-width: $media-md) {
padding-left: 1rem;
width: 100%;
max-width: 100%;
}
margin-right: 0px;
text-align: center;
padding-top: 4rem;
padding-top: 3rem;
@media (max-width: $media-md) {
padding-left: 1rem;
width: 100%;
max-width: 100%;
padding-top: 1rem;
}
}
&-list {
margin-bottom: 0;
Expand Down Expand Up @@ -306,6 +290,7 @@
margin-bottom: 0;
@media screen and (max-width: $media-md) {
padding: 10vh 0;
overflow: hidden;
}
h1 {
padding-bottom: 4rem;
Expand All @@ -325,6 +310,10 @@
display: inline-flex;
margin-right: 2rem;
margin-top: 1rem;
@media screen and (max-width: $media-md) {
width: 100%;
margin-right: 0;
}
}
}
.table-section {
Expand All @@ -342,7 +331,7 @@
}
.feature-table-header,
.feature-table-row {
.col-6:first-of-type {
.col-8:first-of-type {
text-align: left;
}

Expand Down
Loading