diff options
Diffstat (limited to 'divine/styles.css')
| -rw-r--r-- | divine/styles.css | 144 |
1 files changed, 143 insertions, 1 deletions
diff --git a/divine/styles.css b/divine/styles.css index 7ca4ce5..418988e 100644 --- a/divine/styles.css +++ b/divine/styles.css @@ -11,7 +11,6 @@ html { scroll-behavior: smooth;
}
-/* Header Styles */
header {
background: linear-gradient(90deg, #007BFF, #FF6F00);
color: white;
@@ -161,6 +160,7 @@ header .nav a:hover { flex: 1;
min-width: 250px;
transition: transform 0.3s;
+ will-change: transform;
}
.feature-item:hover {
@@ -171,6 +171,7 @@ header .nav a:hover { .courses {
background-color: white;
padding: 60px 10%;
+ will-change: transform;
}
.courses h2 {
@@ -184,6 +185,7 @@ header .nav a:hover { justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
+
}
.course-item {
@@ -194,6 +196,7 @@ header .nav a:hover { flex: 1;
min-width: 250px;
transition: transform 0.3s;
+ will-change: transform;
}
.course-item a {
@@ -202,6 +205,7 @@ header .nav a:hover { color: #007BFF;
text-decoration: none;
font-weight: bold;
+ will-change: transform;
}
.course-item:hover {
@@ -214,10 +218,12 @@ header .nav a:hover { color: white;
text-align: center;
padding: 60px 20px;
+ will-change: transform;
}
.testimonials h2 {
margin-bottom: 30px;
+
}
.testimonial {
@@ -228,6 +234,7 @@ header .nav a:hover { border-radius: 10px;
max-width: 600px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ will-change: transform;
}
/* FAQ Section Styles */
@@ -235,6 +242,7 @@ header .nav a:hover { background-color: #f4f4f4;
padding: 60px 10%;
text-align: center;
+ will-change: transform;
}
.faq h2 {
@@ -253,6 +261,7 @@ header .nav a:hover { border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
+ will-change: transform;
}
.faq-item:hover {
@@ -266,6 +275,7 @@ header .nav a:hover { color: #007BFF;
cursor: pointer;
transition: color 0.3s ease;
+ will-change: transform;
}
.faq-answer {
@@ -274,6 +284,7 @@ header .nav a:hover { margin-top: 10px;
display: none;
line-height: 1.6;
+ will-change: transform;
}
/* Hover effect on question */
@@ -479,3 +490,134 @@ footer { +
+/* Animations */
+@keyframes slideInRight {
+ 0% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideInLeft {
+ 0% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+/* Default hidden state for animations */
+.features, .courses, .testimonials, .faq {
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+}
+
+/* Trigger animations */
+.features.animate {
+ animation: slideInLeft 1s ease-in-out;
+ opacity: 1;
+}
+
+.courses.animate {
+ animation: slideInRight 1s ease-in-out;
+ opacity: 1;
+}
+
+.testimonials.animate {
+ animation: fadeIn 1.5s ease-in-out;
+ opacity: 1;
+}
+
+.faq.animate {
+ animation: slideInLeft 1s ease-in-out;
+ opacity: 1;
+}
+
+
+
+
+
+
+
+
+
+
+
+/* Animations */
+@keyframes slideInRight {
+ 0% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideInLeft {
+ 0% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+/* Default hidden state for animations */
+.feature-item,
+.course-item,
+.testimonial,
+.faq-item {
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+}
+
+/* Trigger animations */
+.feature-item.animate {
+ animation: slideInLeft 1s ease-in-out;
+ opacity: 1;
+}
+
+.course-item.animate {
+ animation: slideInRight 1s ease-in-out;
+ opacity: 1;
+}
+
+.testimonial.animate {
+ animation: fadeIn 1.5s ease-in-out;
+ opacity: 1;
+}
+
+.faq-item.animate {
+ animation: slideInLeft 1s ease-in-out;
+ opacity: 1;
+}
|