Initial
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
/* App Contact Detail */
|
||||
.hp-contact-detail-content-list ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li span {
|
||||
display: block;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li span:nth-child(1) {
|
||||
min-width: 200px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-contact-detail-content-list ul li {
|
||||
display: block;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li span:nth-child(1) {
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-contact-detail-sidebar {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
.hp-contact-detail-sidebar .hp-footer-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* App Contact */
|
||||
.hp-contact-card .table > thead > tr > th {
|
||||
background: none;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.hp-contact-card .table > thead > tr > th:nth-child(2), .hp-contact-card .table > thead > tr > th:nth-child(6) {
|
||||
min-width: 200px;
|
||||
}
|
||||
.hp-contact-card .table > thead > tr > th,
|
||||
.hp-contact-card .table > tbody > tr > td {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* App Ecommerce */
|
||||
.hp-ecommerce-app {
|
||||
/* Shop Sidebar */
|
||||
/* Shop Header */
|
||||
/* Shop Content */
|
||||
/* Detail */
|
||||
/* Checkout */
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile {
|
||||
display: none;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile-btn {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-ecommerce-app-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile {
|
||||
width: 255px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile .hp-ecommerce-app-sidebar {
|
||||
display: block;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.hp-ecommerce-app-header .nav .btn.active svg > path {
|
||||
fill: #0010f7;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-header-search {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
.hp-ecommerce-app-header-select {
|
||||
-webkit-box-flex: 1 !important;
|
||||
-ms-flex: 1 0 0px !important;
|
||||
flex: 1 0 0 !important;
|
||||
}
|
||||
}
|
||||
.hp-ecommerce-app-content .hp-eCommerceCardOne img {
|
||||
max-height: auto;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider img {
|
||||
max-height: 600px;
|
||||
padding: 10px;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider-2 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider-2 .hp-slide-item > div {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider-2 .swiper-slide-active .hp-slide-item > div {
|
||||
border-color: #636e72 !important;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-detail-slider-2 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-checkout-item-img {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-checkout-item-text {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
.hp-ecommerce-app-checkout-title-table {
|
||||
padding-left: 190px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-checkout-title-table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/* Authentication */
|
||||
.hp-authentication-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-authentication-page .hp-auth-header-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-authentication-page .hp-logo-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.hp-authentication-page .hp-bg-item {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.hp-authentication-page .hp-text-item {
|
||||
margin-top: -250px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-authentication-page .hp-text-item {
|
||||
margin-top: -80px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hp-authentication-page .hp-or-line {
|
||||
position: relative;
|
||||
}
|
||||
.hp-authentication-page .hp-or-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
background-color: #dfe6e9;
|
||||
z-index: -1;
|
||||
}
|
||||
.hp-authentication-page .hp-other-links a + a {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.hp-authentication-page .hp-other-links a + a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 100%;
|
||||
background-color: #636e72;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/* Dashboard analytics */
|
||||
.hp-analytics-col-2 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 360px;
|
||||
flex: 0 0 360px;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-analytics-col-2 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-dashboard-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.content-width-boxed .hp-dashboard-line {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
body.content-width-boxed .hp-dashboard-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-dashboard-feature-card .hp-dashboard-feature-card-icon svg {
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-dashboard-feature-card:hover .hp-dashboard-feature-card-icon svg {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* Dashboard Ecommerce */
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 80%;
|
||||
}
|
||||
@media screen and (max-width: 1599px) {
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-ecommerce-detail-card img {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
right: -70px;
|
||||
max-width: 90%;
|
||||
}
|
||||
@media screen and (max-width: 1599px) {
|
||||
.hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-ecommerce-detail-card img {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-dashboard-ecommerce-product-slider .slick-slider {
|
||||
width: 100%;
|
||||
}
|
||||
.hp-dashboard-ecommerce-product-slider-button {
|
||||
position: absolute;
|
||||
top: -56px;
|
||||
right: 16px;
|
||||
}
|
||||
.hp-dashboard-ecommerce-product-slider-button.prev-button {
|
||||
right: 64px;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* Components */
|
||||
.hp-components-menu .swiper-slide {
|
||||
width: auto;
|
||||
}
|
||||
.hp-components-menu .nav {
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.hp-components-menu .nav-link.active {
|
||||
color: #fff !important;
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
.hp-components-item {
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-components-item-title {
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-components-item-img img {
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-components-item:hover {
|
||||
-webkit-box-shadow: 0px 16px 32px rgba(0, 16, 247, 0.04);
|
||||
box-shadow: 0px 16px 32px rgba(0, 16, 247, 0.04);
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.hp-components-item:hover .hp-components-item-img img {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.hp-components-item:hover .hp-components-item-title {
|
||||
color: #0010f7 !important;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/* Error */
|
||||
.hp-error-content {
|
||||
min-height: calc(100vh - 189px);
|
||||
}
|
||||
.hp-error-content-title {
|
||||
font-size: 22vw;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-error-content-title {
|
||||
font-size: 32vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-error-content-title {
|
||||
font-size: 45vw;
|
||||
}
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item {
|
||||
min-width: 200px;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(1) {
|
||||
font-size: 100px;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-error-content .hp-comingsoon-timer-item {
|
||||
min-width: 16vw;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(1) {
|
||||
font-size: 8vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-error-content .hp-comingsoon-timer-item {
|
||||
min-width: 18vw;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(1) {
|
||||
font-size: 11vw;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(2) {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* FAQ */
|
||||
.hp-collapse-arrow {
|
||||
display: inline-block;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.collapsed .hp-collapse-arrow {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-faq-tabs .nav-item {
|
||||
min-width: 190px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.hp-faq-tabs .nav-link i {
|
||||
-webkit-transition: 0.15s ease-in-out;
|
||||
transition: 0.15s ease-in-out;
|
||||
}
|
||||
.hp-faq-tabs .nav-link.active i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.hp-faq-tabs .nav-link.active:hover i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.hp-faq-tabs .nav-link:hover i {
|
||||
color: #0063f7 !important;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* Invoice */
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-invoice-table-desc {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-invoice-table-th {
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-invoice-card p {
|
||||
margin: 0;
|
||||
color: #636e72;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hp-sidebar,
|
||||
header,
|
||||
footer,
|
||||
.hp-print-none,
|
||||
.hp-exchange-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hp-invoice-card {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/* Knowledge Base */
|
||||
.hp-knowledge-basic-card {
|
||||
min-height: 200px;
|
||||
-ms-flex-line-pack: justify;
|
||||
align-content: space-between;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,426 @@
|
||||
.hp-landing-container {
|
||||
max-width: 1184px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
.hp-landing header .hp-landing-header-mobile-button {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing header .hp-landing-header-menu {
|
||||
display: none !important;
|
||||
}
|
||||
.hp-landing header .hp-landing-header-buttons {
|
||||
display: none;
|
||||
}
|
||||
.hp-landing header .hp-landing-header-mobile-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.hp-landing-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hp-landing-hero-title {
|
||||
max-width: 790px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-landing-hero-img {
|
||||
position: relative;
|
||||
max-width: 1100px;
|
||||
height: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-landing-hero-img-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: translate(0px, 10px);
|
||||
transform: translate(0px, 10px);
|
||||
}
|
||||
.hp-landing-hero-img-item {
|
||||
background-size: contain;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
-webkit-filter: drop-shadow(2px 4px 46px rgba(0, 0, 0, 0.1));
|
||||
filter: drop-shadow(2px 4px 46px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
.hp-landing-hero-img-left {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 6%;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
font-size: 40px;
|
||||
-webkit-transform: rotate(28deg);
|
||||
transform: rotate(28deg);
|
||||
margin-bottom: 80px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(2) {
|
||||
margin-left: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
font-size: 40px;
|
||||
-webkit-transform: rotate(28deg);
|
||||
transform: rotate(28deg);
|
||||
margin-bottom: 20px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.hp-landing-hero-img-right {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 6%;
|
||||
text-align: center;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(2) {
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
margin-bottom: 30px;
|
||||
margin-left: -220px;
|
||||
}
|
||||
.hp-landing-hero-rectangle {
|
||||
border-radius: 50px;
|
||||
-webkit-transform: rotate(-22deg);
|
||||
transform: rotate(-22deg);
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
left: 0;
|
||||
}
|
||||
.hp-landing-hero-circle {
|
||||
width: 282px;
|
||||
height: 282px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -40px;
|
||||
}
|
||||
@media screen and (max-width: 1450px) {
|
||||
.hp-landing-hero-img-left {
|
||||
left: 30px;
|
||||
}
|
||||
.hp-landing-hero-img-right {
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-hero-img {
|
||||
max-width: 80vw;
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-landing-hero-title {
|
||||
max-width: 580px;
|
||||
}
|
||||
.hp-landing-hero-img {
|
||||
max-width: 100%;
|
||||
height: 42vw;
|
||||
}
|
||||
.hp-landing-hero-img-left, .hp-landing-hero-img-right {
|
||||
-webkit-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
-webkit-transform-origin: bottom;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
.hp-landing-hero-img-left {
|
||||
left: 0;
|
||||
}
|
||||
.hp-landing-hero-img-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-hero-rectangle {
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.hp-landing-hero-circle {
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
right: 10px;
|
||||
top: -30px;
|
||||
}
|
||||
.hp-landing-hero-title {
|
||||
max-width: 100%;
|
||||
}
|
||||
.hp-landing-hero-title p {
|
||||
font-size: 18px;
|
||||
}
|
||||
.hp-landing-hero-img {
|
||||
max-width: 100%;
|
||||
height: 42vw;
|
||||
}
|
||||
.hp-landing-hero-img-left, .hp-landing-hero-img-right {
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
bottom: 10px;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 230px;
|
||||
}
|
||||
.hp-landing-features-slide:before, .hp-landing-features-slide:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 180px;
|
||||
background: -webkit-gradient(linear, right top, left top, from(#ffffff), to(rgba(255, 255, 255, 0)));
|
||||
background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-features-slide:before, .hp-landing-features-slide:after {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
.hp-landing-features-slide:before {
|
||||
left: 0;
|
||||
right: auto;
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.hp-landing-features-slide:after {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
@media screen and (max-width: 1370px) {
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 150px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hp-landing-content-1 {
|
||||
padding-top: 160px;
|
||||
}
|
||||
.hp-landing-content-1 .hp-landing-container {
|
||||
max-width: 75vw;
|
||||
}
|
||||
.hp-landing-content-1-circle {
|
||||
width: 612px;
|
||||
height: 612px;
|
||||
border-radius: 100%;
|
||||
margin-left: auto;
|
||||
}
|
||||
.hp-landing-content-1-img {
|
||||
position: absolute;
|
||||
right: -152px;
|
||||
top: 58%;
|
||||
-webkit-transform: translate(0px, -50%);
|
||||
transform: translate(0px, -50%);
|
||||
}
|
||||
.hp-landing-content-1-img img {
|
||||
max-width: 880px;
|
||||
}
|
||||
@media screen and (max-width: 1450px) {
|
||||
.hp-landing-content-1 .hp-landing-container {
|
||||
max-width: 83vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-content-1-img img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-landing-content-1 .hp-landing-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.hp-landing-content-1 .hp-landing-container > .row {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.hp-landing-content-1-circle {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
.hp-landing-content-1-img {
|
||||
right: -40px;
|
||||
text-align: right;
|
||||
}
|
||||
.hp-landing-content-1-img img {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-content-1-circle {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.hp-landing-content-1 h3 {
|
||||
font-size: 18px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
.hp-landing-content-2 {
|
||||
padding-top: 160px;
|
||||
}
|
||||
.hp-landing-content-2-circle {
|
||||
width: 504px;
|
||||
height: 504px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.hp-landing-content-2-circle img {
|
||||
max-width: 770px;
|
||||
top: 56%;
|
||||
left: 63%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-content-2-circle {
|
||||
width: 304px;
|
||||
height: 304px;
|
||||
margin: 0 auto 200px;
|
||||
}
|
||||
.hp-landing-content-2-circle img {
|
||||
max-width: 600px;
|
||||
top: 56%;
|
||||
left: 63%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-content-2-circle {
|
||||
margin: 0 auto 130px;
|
||||
}
|
||||
.hp-landing-content-2-circle img {
|
||||
max-width: 140%;
|
||||
left: 55%;
|
||||
}
|
||||
}
|
||||
.hp-landing-content-2-list {
|
||||
max-width: 360px;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-content-2 .hp-landing-container > .row {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
.hp-landing-people-circle {
|
||||
width: 542px;
|
||||
height: 542px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-transform: translate(50%, -60%);
|
||||
transform: translate(50%, -60%);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-people-circle {
|
||||
width: 342px;
|
||||
height: 342px;
|
||||
}
|
||||
}
|
||||
.hp-landing-people-item {
|
||||
min-height: 200px;
|
||||
}
|
||||
.hp-landing-people-item-twitter {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
}
|
||||
.hp-landing-people-item-img {
|
||||
margin-left: -10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-landing-people-item-title {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
.hp-landing-pricing-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
min-height: 450px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-pricing-item {
|
||||
min-height: initial;
|
||||
}
|
||||
}
|
||||
.hp-landing-footer-circle {
|
||||
width: 255px;
|
||||
height: 255px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-footer-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.hp-landing-footer-copyright {
|
||||
text-align: center;
|
||||
}
|
||||
.hp-landing-footer-copyright > .col {
|
||||
-webkit-box-flex: 100% !important;
|
||||
-ms-flex: 100% !important;
|
||||
flex: 100% !important;
|
||||
}
|
||||
.hp-landing-footer-copyright > .col .row {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/* Lock Screen */
|
||||
.hp-lock-screen {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 150px 30px;
|
||||
}
|
||||
.hp-lock-screen .hp-screen-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.hp-lock-screen-row {
|
||||
max-width: 390px;
|
||||
background: rgba(0, 16, 247, 0.3);
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-lock-screen-row {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-lock-screen {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* Pricing */
|
||||
.hp-pricing-billed-text.active {
|
||||
color: #0010f7 !important;
|
||||
}
|
||||
|
||||
.hp-pricing-item {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 19%;
|
||||
flex: 0 0 19%;
|
||||
max-width: 210px;
|
||||
}
|
||||
.hp-pricing-item-best-button {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
white-space: initial;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.hp-pricing-item-special {
|
||||
background-color: #0010f7;
|
||||
border-color: #0010f7 !important;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-title, .hp-pricing-item-special .hp-pricing-item-price {
|
||||
color: #ebfafa;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-subtitle {
|
||||
color: #00f7bf !important;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-billed, .hp-pricing-item-special .hp-pricing-item-list {
|
||||
color: #55b1f3 !important;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-list svg path {
|
||||
fill: #ebfafa;
|
||||
}
|
||||
.hp-pricing-item-special button.btn {
|
||||
color: #0010f7 !important;
|
||||
background-color: #ebfafa !important;
|
||||
}
|
||||
.hp-pricing-item-special button.btn:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-pricing-item {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 40%;
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-item-align: normal;
|
||||
align-self: normal;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-pricing-item {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
/* Profile */
|
||||
.hp-profile-menu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid #dfe6e9;
|
||||
min-height: 930px;
|
||||
}
|
||||
.hp-profile-menu-header .badge {
|
||||
bottom: -16px;
|
||||
right: -5px;
|
||||
top: auto;
|
||||
padding: 0px 4px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
z-index: 1;
|
||||
-webkit-transform: translate(0px, 0px);
|
||||
transform: translate(0px, 0px);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item {
|
||||
overflow: initial;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
right: -7px;
|
||||
bottom: -7px;
|
||||
background: conic-gradient(#0010f7, rgba(255, 255, 255, 0));
|
||||
border-radius: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background: #ffffff;
|
||||
border-radius: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.hp-profile-menu-body .active {
|
||||
background: #ebfafa;
|
||||
color: #0010f7 !important;
|
||||
}
|
||||
.hp-profile-menu-body .active .hp-menu-item-line {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-profile-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-content-list ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.hp-profile-content-list ul li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-profile-content-list ul li span {
|
||||
display: block;
|
||||
}
|
||||
.hp-profile-content-list ul li span:nth-child(1) {
|
||||
min-width: 200px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-profile-content-list ul li {
|
||||
display: block;
|
||||
}
|
||||
.hp-profile-content-list ul li span:nth-child(1) {
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-notifications {
|
||||
max-width: 424px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-profile-action-btn {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.hp-profile-action-btn button {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-connect-btn {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 360px;
|
||||
flex: 0 0 360px;
|
||||
}
|
||||
.hp-profile-connect-btn svg {
|
||||
min-width: 14px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-profile-connect-btn {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-mobile-menu-btn {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-profile-mobile-menu-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-mobile-menu {
|
||||
min-width: 256px;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.hp-profile-mobile-menu .hp-profile-menu {
|
||||
padding: 0 0 35px !important;
|
||||
display: block;
|
||||
min-height: initial;
|
||||
border: none;
|
||||
}
|
||||
.hp-profile-mobile-menu .hp-profile-menu .hp-menu-header-btn, .hp-profile-mobile-menu .hp-profile-menu-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hp-profile-activity .table-responsive::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.hp-select-box-item > input:checked ~ label .card {
|
||||
border-color: #0010f7 !important;
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
|
||||
box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
|
||||
}
|
||||
.hp-select-box-item ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
Reference in New Issue
Block a user