mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-24 09:50:39 +00:00
- homepage illustrations part 1
This commit is contained in:
Peter Papp
Vendored
+2
-343
@@ -5,54 +5,7 @@
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.oasis-navigation {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.oasis-header {
|
||||
margin-top: -110px;
|
||||
padding-top: 250px;
|
||||
background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
|
||||
|
||||
.main-title {
|
||||
max-width: 890px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-features {
|
||||
background: $theme-bg-dark;
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
|
||||
.main-title-sm {
|
||||
color: white;
|
||||
max-width: 690px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sub-title-sm {
|
||||
margin: 0 auto;
|
||||
color: $text-dark-subtitle;
|
||||
}
|
||||
|
||||
.features-box {
|
||||
margin-bottom: -175px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
top: 245px;
|
||||
position: relative;
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oasis-pricing {
|
||||
@@ -73,42 +26,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-about-us {
|
||||
|
||||
.sub-title-sm {
|
||||
max-width: 890px;
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-contact {
|
||||
background: $theme-bg-dark;
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
.main-title-sm {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sub-title-sm {
|
||||
color: $text-dark-subtitle;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
gap: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-footer {
|
||||
background: white;
|
||||
display: flex;
|
||||
@@ -129,36 +46,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
padding: 5px 0;
|
||||
z-index: 10;
|
||||
@include transition(150ms);
|
||||
backdrop-filter: blur(18px);
|
||||
margin-top: 35px;
|
||||
|
||||
&.white {
|
||||
background: rgba(white, 0.95);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.log-in, .logo {
|
||||
width: 235px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.log-in {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@@ -179,197 +66,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.features-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 60px;
|
||||
|
||||
.box {
|
||||
background: $theme-bg-light;
|
||||
box-shadow: 0 22px 34px -20px #232142;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
padding: 40px 25px 45px;
|
||||
display: block;
|
||||
|
||||
.box-title {
|
||||
color: white;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 25px;
|
||||
@include font-size(32);
|
||||
}
|
||||
|
||||
.box-description {
|
||||
color: $text-dark-secondary;
|
||||
@include font-size(19);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.box-more-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-left: 5px;
|
||||
|
||||
polyline {
|
||||
color: $theme;
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
color: $theme;
|
||||
font-weight: 700;
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span, polyline {
|
||||
color: lighten($theme, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
|
||||
.box-icon {
|
||||
rect, path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
|
||||
.box-icon {
|
||||
line, polyline, path {
|
||||
color: $cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
|
||||
.box-icon {
|
||||
path {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
max-width: 1325px;
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
box-shadow: 0 5px 333px -22px #1B253935;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
padding: 38px 40px 35px;
|
||||
z-index: 1;
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: 2;
|
||||
padding: 55px 40px 20px;
|
||||
background: $theme-bg-light;
|
||||
margin-top: -40px;
|
||||
margin-bottom: -40px;
|
||||
|
||||
.pricing-name, .pricing-data {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pricing-description {
|
||||
color: $text-dark-secondary;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.pricing-data {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pricing-vat {
|
||||
color: $text-dark-subtitle;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-icon {
|
||||
margin-bottom: 45px;
|
||||
|
||||
path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-data {
|
||||
@include font-size(50);
|
||||
font-weight: 900;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pricing-name {
|
||||
@include font-size(24);
|
||||
font-weight: 800;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pricing-description {
|
||||
@include font-size(19);
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.pricing-vat {
|
||||
@include font-size(12);
|
||||
color: $text-secondary;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
opacity: 0.45;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
margin: 65px 0;
|
||||
|
||||
.info-list-item {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 5px;
|
||||
margin-right: 15px;
|
||||
|
||||
polyline {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 700px;
|
||||
@include font-size(24);
|
||||
color: $text-primary;
|
||||
font-weight: 800;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: block;
|
||||
|
||||
@@ -435,41 +131,4 @@
|
||||
max-width: 320px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
width: 100%;
|
||||
|
||||
.block-wrapper {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: $pink;
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background: $theme-bg-light;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
color: $text-dark-secondary;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
|
||||
&.is-error {
|
||||
border-color: $pink;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $text-dark-subtitle;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user