mrboost commited on
Commit
e2d1097
·
verified ·
1 Parent(s): cf1bd40

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
Files changed (1) hide show
  1. 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, #4facfe 0%, #00f2fe 100%);
 
 
 
 
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">