Spaces:
Running
Running
Love the booking system feature at more colors yet maintain the Green Team . Enjoyed to add a more intense Parallax affect them more related images to the actual types of work as an energy and insulation company
Browse files- index.html +39 -1
index.html
CHANGED
|
@@ -12,6 +12,23 @@
|
|
| 12 |
background-position: center;
|
| 13 |
background-repeat: no-repeat;
|
| 14 |
background-size: cover;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 15 |
}
|
| 16 |
|
| 17 |
.service-card:hover {
|
|
@@ -20,7 +37,11 @@
|
|
| 20 |
}
|
| 21 |
|
| 22 |
.gradient-bg {
|
| 23 |
-
background: linear-gradient(135deg, #
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
}
|
| 25 |
|
| 26 |
@keyframes float {
|
|
@@ -32,6 +53,23 @@
|
|
| 32 |
.floating {
|
| 33 |
animation: float 6s ease-in-out infinite;
|
| 34 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
</style>
|
| 36 |
</head>
|
| 37 |
<body class="font-sans antialiased">
|
|
|
|
| 12 |
background-position: center;
|
| 13 |
background-repeat: no-repeat;
|
| 14 |
background-size: cover;
|
| 15 |
+
position: relative;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
.parallax::before {
|
| 19 |
+
content: '';
|
| 20 |
+
position: absolute;
|
| 21 |
+
top: 0;
|
| 22 |
+
left: 0;
|
| 23 |
+
right: 0;
|
| 24 |
+
bottom: 0;
|
| 25 |
+
background: linear-gradient(45deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
|
| 26 |
+
z-index: 1;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
.parallax-content {
|
| 30 |
+
position: relative;
|
| 31 |
+
z-index: 2;
|
| 32 |
}
|
| 33 |
|
| 34 |
.service-card:hover {
|
|
|
|
| 37 |
}
|
| 38 |
|
| 39 |
.gradient-bg {
|
| 40 |
+
background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.booking-gradient {
|
| 44 |
+
background: linear-gradient(135deg, #059669 0%, #10b981 25%, #34d399 50%, #6ee7b7 75%, #a7f3d0 100%);
|
| 45 |
}
|
| 46 |
|
| 47 |
@keyframes float {
|
|
|
|
| 53 |
.floating {
|
| 54 |
animation: float 6s ease-in-out infinite;
|
| 55 |
}
|
| 56 |
+
|
| 57 |
+
.intense-parallax {
|
| 58 |
+
background-attachment: fixed;
|
| 59 |
+
background-position: center;
|
| 60 |
+
background-repeat: no-repeat;
|
| 61 |
+
background-size: cover;
|
| 62 |
+
transform: translateZ(0);
|
| 63 |
+
will-change: transform;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.energy-gradient {
|
| 67 |
+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 25%, #b45309 50%, #92400e 75%, #78350f 100%);
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
.insulation-gradient {
|
| 71 |
+
background: linear-gradient(135deg, #6b7280 0%, #4b5563 25%, #374151 50%, #1f2937 75%, #111827 100%);
|
| 72 |
+
}
|
| 73 |
</style>
|
| 74 |
</head>
|
| 75 |
<body class="font-sans antialiased">
|