koneko/laravel-vuexy-website-layout-porto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Arturo Corro
2025-05-30 03:09:08 -06:00
parent 99d54737de
commit 1932509066
6221 changed files with 298434 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
resources/assets/css/demos/demo-sass.css Normal file
View File

@ -0,0 +1,230 @@
body {
min-width: 100%;
width: 100vw;
}
.custom-secondary-font {
font-family: "Poppins", sans-serif;
}
.custom-box-shadow-1 {
box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.15);
}
/* Header */
@media (min-width: 992px) {
#header .header-nav-main nav > ul:not(:hover) > li > a.active {
color: var(--light) !important;
}
#header .header-nav-main nav > ul:not(:hover) > li > a.active:before {
background: #FFF !important;
}
#header .header-nav-main nav > ul > li:hover > a {
color: var(--light) !important;
}
#header .header-nav-main nav > ul > li:hover > a:before {
background: #FFF !important;
}
html.sticky-header-active #header .header-nav-main nav > ul:not(:hover) > li > a.active {
color: var(--dark) !important;
}
html.sticky-header-active #header .header-nav-main nav > ul:not(:hover) > li > a.active:before {
background: var(--dark) !important;
}
html.sticky-header-active #header .header-nav-main nav > ul > li > a {
color: var(--dark) !important;
}
html.sticky-header-active #header .header-nav-main nav > ul > li:hover > a {
color: var(--dark) !important;
}
html.sticky-header-active #header .header-nav-main nav > ul > li:hover > a:before {
background: var(--dark) !important;
}
}
/* Header Social Icons */
html.sticky-header-active #header .header-social-icons > li > a:hover > i {
color: var(--light) !important;
}
html.sticky-header-active #header .header-social-icons > li > a > i {
color: var(--dark) !important;
}
/* Animated Circles */
.custom-animated-circles {
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 500px;
transform: translate3d(-55%, 25%, 0);
}
.custom-animated-circles .circle {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
border-radius: 100%;
border: 1px solid #FFF;
transform: translate3d(-50%, -50%, 0);
animation-name: customAnimatedCircles;
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-timing-function: linear;
animation-duration: 2.5s;
animation-delay: 500ms;
}
.custom-animated-circles .circle:nth-child(2) {
width: 70%;
height: 70%;
animation-delay: 1000ms;
}
.custom-animated-circles .circle:nth-child(3) {
width: 90%;
height: 90%;
animation-delay: 1500ms;
}
.custom-animated-circles .circle:nth-child(4) {
width: 110%;
height: 110%;
animation-delay: 2000ms;
}
.custom-animated-circles.custom-animated-circles-pos-2 {
bottom: auto;
top: 0;
transform: translate3d(-55%, -25%, 0);
}
.custom-animated-circles.custom-animated-circles-pos-3 {
bottom: auto;
left: auto;
right: 0;
transform: translate3d(65%, -50%, 0);
top: 0;
}
@keyframes customAnimatedCircles {
0% {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.8);
}
50% {
opacity: 0.5;
transform: translate3d(-50%, -50%, 0);
}
100% {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(1.1);
}
}
/* Custom Screens */
.custom-screens-carousel {
position: relative;
z-index: 30;
margin-top: -250px;
}
@media (max-width: 991px) {
.custom-screens-carousel {
margin-top: -90px;
}
}
/* Carousel Ipad */
.carousel-ipad {
border-radius: 35px;
border: 1px solid #FFF;
padding: 50px;
background: #F9F9F9;
box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.1);
position: relative;
}
@media (max-width: 991px) {
.carousel-ipad {
padding: 25px;
border-radius: 17px;
}
}
.carousel-ipad img {
border: 1px solid #FFF;
}
.carousel-ipad .carousel-ipad-camera {
background: #3c3d3d;
width: 8px;
height: 8px;
position: absolute;
left: 0;
margin-left: 20px;
bottom: 50%;
margin-bottom: -5px;
border-radius: 100%;
}
.carousel-ipad .carousel-ipad-home {
background: #F9F9F9;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
border-radius: 28px;
width: 40px;
height: 40px;
position: absolute;
right: 0;
margin-right: 5px;
bottom: 50%;
margin-bottom: -20px;
}
.carousel-ipad .carousel-ipad-home:after {
width: 15px;
height: 15px;
margin-top: -8px;
margin-left: -8px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: var(--border-radius);
position: absolute;
display: block;
content: '';
top: 50%;
left: 50%;
}
@media (max-width: 991px) {
.carousel-ipad .carousel-ipad-camera, .carousel-ipad .carousel-ipad-home {
display: none;
}
}
.carousel-ipad.carousel-ipad-sm {
padding: 40px;
border-radius: 25px;
}
@media (max-width: 991px) {
.carousel-ipad.carousel-ipad-sm {
padding: 20px;
border-radius: 12px;
}
}
/* Custom Form Style */
.custom-form-style-1 .form-control {
padding: 20.8px;
padding: 1.3rem;
height: 45px;
}
/* Skin */
/* Animated Circles */
.custom-animated-circles-primary .circle {
border-color: var(--primary) !important;
}