init
This commit is contained in:
240
static/Vvvebjs/demo/landing/scss/sections/hero/hero-1.scss
Normal file
240
static/Vvvebjs/demo/landing/scss/sections/hero/hero-1.scss
Normal file
@@ -0,0 +1,240 @@
|
||||
.hero-1 {
|
||||
padding: 0px 2rem 0;
|
||||
text-align: center;
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//min-height: 60rem;
|
||||
position: relative;
|
||||
padding: 5rem 2rem 2rem;
|
||||
background-image: linear-gradient(179deg,var(--bs-body-bg) 49%,var(--bs-body-bg) 77%, rgba(var(--bs-body-bg-rgb), 0.8) 100%);
|
||||
/*
|
||||
&::before {
|
||||
background: url(../img/background.svg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
pointer-events:none;
|
||||
opacity:0.1;
|
||||
background-size: 100%;
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
background-position: bottom 0px center;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: luminosity;
|
||||
}
|
||||
*/
|
||||
h1 {
|
||||
//line-height: 1.2;
|
||||
//font-size: 4.2rem;
|
||||
|
||||
color: var(--bs-body-color);
|
||||
font-weight:700;
|
||||
z-index: 2;
|
||||
text-shadow: 1px 1px 2px var(--bs-body-bg);
|
||||
letter-spacing:-0.04em;
|
||||
//letter-spacing: 0.014em;
|
||||
//line-height: 64px;
|
||||
}
|
||||
/*
|
||||
@media (max-width: 1601px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1281px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 961px) {
|
||||
h1 {
|
||||
font-size: 4.5rem;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 661px) {
|
||||
h1 {
|
||||
font-size: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 481px) {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
*/
|
||||
h2 {
|
||||
//font-size: 1.5rem;
|
||||
//line-height: 1.5;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
margin: 1.4rem auto 0rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
text-shadow: 1px 1px 2px var(--bs-body-bg);
|
||||
//letter-spacing: 0.03em;
|
||||
max-width: 750px;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: var(--width-xl);
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
|
||||
padding: 2rem 0 0rem;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top:4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
b {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
font-family:system-ui;
|
||||
}
|
||||
|
||||
//min-width:250px;
|
||||
display: inline-block;
|
||||
//width: 200px;
|
||||
//height: 49px;
|
||||
border-radius: 2px;
|
||||
//background-color: #419bf9;
|
||||
//background-color: rgb(65, 155, 249);
|
||||
//padding: 12px 20px;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
//color: var(--bs-body-color);
|
||||
margin-right: 7px;
|
||||
margin-left: 7px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 6px;
|
||||
//font-weight: 600;
|
||||
//box-shadow:0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07);
|
||||
//letter-spacing: 0.01em;
|
||||
|
||||
&:hover {
|
||||
//background: var(--bs-dark);
|
||||
//background: #2781df;
|
||||
}
|
||||
span {
|
||||
//font-size: 24px;
|
||||
//line-height: 24px;
|
||||
//vertical-align: text-top;
|
||||
margin-left: 0.2rem;
|
||||
//display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-outline-primary {
|
||||
b {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
//background-color: transparent;
|
||||
//background-color: rgba(65, 155, 249, 0.07);
|
||||
//background-color: #f1f8ff;
|
||||
box-shadow: -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.2) inset;
|
||||
box-shadow: 0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07);
|
||||
//border: 1px solid var(--bs-border-color);
|
||||
//background:var(--bs-body-bg);
|
||||
//color: var(--bs-blue);
|
||||
&:hover {
|
||||
//background-color: rgba(65, 155, 249, 0.14);
|
||||
background: rgba(var(--bs-primary-rgb), 0.07);
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
&:after {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-outline-secondary {
|
||||
border: 1px solid var(--bs-dark-border-subtle);
|
||||
--bs-secondary: var(--bs-border-color);
|
||||
color:var(--bs-body-color);
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
//box-shadow: -1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.2) inset;
|
||||
//box-shadow: 0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07);
|
||||
//padding: 1rem 2.5rem;
|
||||
border:none;
|
||||
span {
|
||||
//font-size: 28px;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
&:hover {
|
||||
//color: var(--bs-body-color);
|
||||
//background: var(--bs-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
.dropdown-menu {
|
||||
min-width: 240px;
|
||||
z-index:3;
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
margin-top: 2rem;
|
||||
max-width: 100%;
|
||||
//opacity: 0;
|
||||
transition: opacity 3s;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid var(--bs-border-color);
|
||||
|
||||
background: #f0f4f9;
|
||||
box-shadow: 0 0 1px 0 rgba(var(--bs-body-color-rgb), 0.2), 0 3px 4px 0 rgba(87, 87, 87, 0.1), 0 10px 15px 0 rgba(5, 4, 10, 0.06%);
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-top: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.show {
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.btn {
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background:var(--bs-body-bg);
|
||||
}
|
||||
|
||||
}
|
||||
84
static/Vvvebjs/demo/landing/scss/sections/hero/hero-2.scss
Normal file
84
static/Vvvebjs/demo/landing/scss/sections/hero/hero-2.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.hero-2 {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
padding-top: 15rem;
|
||||
padding-bottom: 15rem;
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 30px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .1rem;
|
||||
|
||||
&.btn-white {
|
||||
background:rgba(var(--bs-body-bg-rgb), 0.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
>.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.heading {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-light);
|
||||
}
|
||||
.subheading {
|
||||
font-size: 1.4rem;
|
||||
color: var(--bs-light);
|
||||
}
|
||||
.svg-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color:rgba(var(--bs-primary-rgb), 1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.video-wrap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
-webkit-transition: .2s all ease;
|
||||
-o-transition: .2s all ease;
|
||||
transition: .2s all ease;
|
||||
|
||||
.play-button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bs-success);
|
||||
color: var(--bs-white);
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
img {
|
||||
border-radius: 7px;
|
||||
-webkit-box-shadow: 0 15px 30px 0 rgba(var(--bs-body-color-rgb), 0.2);
|
||||
box-shadow: 0 15px 30px 0 rgba(var(--bs-body-color-rgb), 0.2);
|
||||
}
|
||||
&:hover {
|
||||
-webkit-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
113
static/Vvvebjs/demo/landing/scss/sections/hero/hero-3.scss
Normal file
113
static/Vvvebjs/demo/landing/scss/sections/hero/hero-3.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
.hero-3 {
|
||||
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
//background-image:url("../img/demo/hero-3.jpg");
|
||||
|
||||
//height:100vh;
|
||||
//min-height:960px;
|
||||
/*
|
||||
> .container > .row {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
}*/
|
||||
|
||||
|
||||
.btn {
|
||||
padding: 1rem 3rem;
|
||||
margin: 0rem 1rem 1rem 0;
|
||||
//border-radius: 30px;
|
||||
//text-transform: uppercase;
|
||||
//font-size: 16px;
|
||||
//font-weight: 600;
|
||||
//letter-spacing: .1rem;
|
||||
box-shadow: rgba(var(--bs-body-color-rgb), 0.25) 0px 5px 15px -5px;
|
||||
/*
|
||||
&.btn-white {
|
||||
background:rgba(var(--bs-white-rgb), 0.2);
|
||||
color: var(--bs-light);
|
||||
}
|
||||
*/
|
||||
&.btn-primary {
|
||||
//background:#006cff;
|
||||
}
|
||||
}
|
||||
|
||||
>.container, > .container-fluid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height:960px;
|
||||
min-height:calc(100vh - 200px);
|
||||
min-height:calc(max(100vh - 200px, 1080px));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
//font-size: 60px;
|
||||
font-weight: 700;
|
||||
//color: var(--bs-light);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
//font-size: 32px;
|
||||
color: var(--bs-light);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight:normal;
|
||||
}
|
||||
.svg-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top:5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
&.overlay {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
//background: rgba(var(--bs-body-color-rgb), 0.6);
|
||||
background: rgba(var(--bs-body-color-rgb), 0.6);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
||||
>.container, > .container-fluid {
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height:100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 300px;
|
||||
//width: 90%;
|
||||
margin:0 0 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
64
static/Vvvebjs/demo/landing/scss/sections/hero/hero-4.scss
Normal file
64
static/Vvvebjs/demo/landing/scss/sections/hero/hero-4.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.hero-4 {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
//background-image:url("../img/demo/hero-3.jpg");
|
||||
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
|
||||
> .container > .row {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 30px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .1rem;
|
||||
|
||||
&.btn-white {
|
||||
background:rgba(var(--bs-body-bg-rgb), 0.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
>.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.heading {
|
||||
//font-size: 50px;
|
||||
font-weight: 700;
|
||||
color: var(--bs-light);
|
||||
}
|
||||
.subheading {
|
||||
font-family:var(--bs-font-body);
|
||||
//font-size:2rem;
|
||||
margin-bottom:3rem;
|
||||
color: var(--bs-light);
|
||||
}
|
||||
.svg-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top:3rem;
|
||||
font-family:var(--bs-font-body);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0,0,0, 1);
|
||||
opacity:0.5;
|
||||
}
|
||||
}
|
||||
18
static/Vvvebjs/demo/landing/scss/sections/hero/hero-5.scss
Normal file
18
static/Vvvebjs/demo/landing/scss/sections/hero/hero-5.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.hero-5 {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
|
||||
> .container > .row {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0,0,0, 1);
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
h1, p.lead {
|
||||
color: var(--bs-light);
|
||||
}
|
||||
}
|
||||
32
static/Vvvebjs/demo/landing/scss/sections/hero/hero-6.scss
Normal file
32
static/Vvvebjs/demo/landing/scss/sections/hero/hero-6.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.hero-6 {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
|
||||
> .container > .row {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
>.container, > .container-fluid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height:960px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0,0,0, 1);
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: var(--bs-light);
|
||||
}
|
||||
}
|
||||
32
static/Vvvebjs/demo/landing/scss/sections/hero/hero-7.scss
Normal file
32
static/Vvvebjs/demo/landing/scss/sections/hero/hero-7.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.hero-7 {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
|
||||
> .container > .row {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
>.container, > .container-fluid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height:960px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0,0,0, 1);
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: var(--bs-light);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
header.hero-slider {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
|
||||
> .container > .row {
|
||||
height:100vh;
|
||||
min-height:800px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(0,0,0, 1);
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
|
||||
.swiper-slide {
|
||||
|
||||
> img + .content {
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
>.container, > .container-fluid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height:960px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: var(--bs-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user