|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Grand Challenge Technologies - Solving Tomorrow's Problems Today</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
:root { |
|
|
--primary: #1a237e; |
|
|
--primary-light: #534bae; |
|
|
--primary-dark: #000051; |
|
|
--secondary: #00b0ff; |
|
|
--accent: #ff4081; |
|
|
--light: #f5f5f7; |
|
|
--dark: #212121; |
|
|
--success: #4caf50; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--light); |
|
|
color: var(--dark); |
|
|
overflow-x: hidden; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 2rem; |
|
|
} |
|
|
|
|
|
section { |
|
|
padding: 6rem 0; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
margin-bottom: 1.5rem; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 3.5rem; |
|
|
font-weight: 800; |
|
|
background: linear-gradient(45deg, var(--primary), var(--secondary)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
font-size: 2.5rem; |
|
|
color: var(--primary); |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
h2::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 0; |
|
|
width: 60%; |
|
|
height: 4px; |
|
|
background: linear-gradient(90deg, var(--secondary), var(--accent)); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
p { |
|
|
margin-bottom: 1.5rem; |
|
|
font-size: 1.1rem; |
|
|
color: #555; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 0.8rem 1.8rem; |
|
|
background: linear-gradient(45deg, var(--primary), var(--primary-light)); |
|
|
color: white; |
|
|
border-radius: 50px; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); |
|
|
background: linear-gradient(45deg, var(--primary-light), var(--primary)); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: linear-gradient(45deg, var(--secondary), #00e5ff); |
|
|
} |
|
|
|
|
|
.btn-accent { |
|
|
background: linear-gradient(45deg, var(--accent), #ff80ab); |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
z-index: 1000; |
|
|
padding: 1.5rem 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
header.scrolled { |
|
|
background-color: rgba(255, 255, 255, 0.95); |
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); |
|
|
padding: 1rem 0; |
|
|
} |
|
|
|
|
|
nav { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
color: var(--primary); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
margin-right: 0.5rem; |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-links li { |
|
|
margin-left: 2rem; |
|
|
} |
|
|
|
|
|
.nav-links a { |
|
|
color: var(--dark); |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links a::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: var(--secondary); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links a:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
display: none; |
|
|
cursor: pointer; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
background: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center; |
|
|
background-size: cover; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hero::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, rgba(26, 35, 126, 0.8) 0%, rgba(0, 176, 255, 0.7) 100%); |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
color: white; |
|
|
max-width: 800px; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
color: white; |
|
|
-webkit-background-clip: initial; |
|
|
background-clip: initial; |
|
|
background: transparent; |
|
|
margin-bottom: 1.5rem; |
|
|
font-size: 4rem; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 2.5rem; |
|
|
} |
|
|
|
|
|
.hero-btns { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.particles { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background-color: rgba(255, 255, 255, 0.3); |
|
|
border-radius: 50%; |
|
|
animation: float 15s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { |
|
|
transform: translateY(0) rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-1000px) rotate(720deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.services { |
|
|
background-color: white; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.services-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
margin-top: 4rem; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
background-color: white; |
|
|
border-radius: 10px; |
|
|
padding: 2.5rem 2rem; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.service-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 5px; |
|
|
background: linear-gradient(90deg, var(--secondary), var(--accent)); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.service-card:hover::before { |
|
|
height: 10px; |
|
|
} |
|
|
|
|
|
.service-icon { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.service-card h3 { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.about { |
|
|
background-color: var(--light); |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 4rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
position: relative; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.about-image img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
display: block; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.about-image:hover img { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.stats { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 1.5rem; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background-color: white; |
|
|
padding: 1.5rem; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stat-number { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 700; |
|
|
color: var(--primary); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 1rem; |
|
|
color: #777; |
|
|
} |
|
|
|
|
|
|
|
|
.projects { |
|
|
background-color: white; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.projects-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
margin-top: 4rem; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.project-image { |
|
|
height: 250px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.project-image img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.project-card:hover .project-image img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.project-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to top, rgba(26, 35, 126, 0.8) 0%, transparent 100%); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: flex-end; |
|
|
padding: 2rem; |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.project-card:hover .project-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.project-overlay h3 { |
|
|
color: white; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.project-overlay p { |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
|
|
|
.team { |
|
|
background-color: var(--light); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.team-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 2rem; |
|
|
margin-top: 4rem; |
|
|
} |
|
|
|
|
|
.team-card { |
|
|
background-color: white; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.team-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.team-image { |
|
|
height: 300px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.team-image img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.team-card:hover .team-image img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.team-info { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.team-info h3 { |
|
|
color: var(--primary); |
|
|
margin-bottom: 0.3rem; |
|
|
} |
|
|
|
|
|
.team-info p { |
|
|
color: var(--secondary); |
|
|
font-weight: 500; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.team-social { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.team-social a { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--light); |
|
|
color: var(--primary); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.team-social a:hover { |
|
|
background-color: var(--secondary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.testimonials { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.testimonials h2 { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.testimonials h2::after { |
|
|
background: linear-gradient(90deg, var(--accent), white); |
|
|
} |
|
|
|
|
|
.testimonial-slider { |
|
|
max-width: 800px; |
|
|
margin: 4rem auto 0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.testimonial-slide { |
|
|
padding: 0 2rem; |
|
|
display: none; |
|
|
animation: fade 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fade { |
|
|
from { opacity: 0.4; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.testimonial-slide.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.testimonial-content { |
|
|
font-size: 1.2rem; |
|
|
font-style: italic; |
|
|
margin-bottom: 2rem; |
|
|
line-height: 1.8; |
|
|
} |
|
|
|
|
|
.testimonial-author { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.author-avatar { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
border-radius: 50%; |
|
|
overflow: hidden; |
|
|
margin-bottom: 1rem; |
|
|
border: 3px solid white; |
|
|
} |
|
|
|
|
|
.author-avatar img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.author-info h4 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 0.3rem; |
|
|
} |
|
|
|
|
|
.author-info p { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
} |
|
|
|
|
|
.slider-nav { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-top: 2rem; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.slider-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(255, 255, 255, 0.3); |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.slider-dot.active { |
|
|
background-color: white; |
|
|
transform: scale(1.2); |
|
|
} |
|
|
|
|
|
|
|
|
.contact { |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.contact-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 4rem; |
|
|
} |
|
|
|
|
|
.contact-info { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.contact-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.contact-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--light); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.2rem; |
|
|
color: var(--primary); |
|
|
margin-right: 1rem; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.contact-form .form-group { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.contact-form input, |
|
|
.contact-form textarea { |
|
|
width: 100%; |
|
|
padding: 0.8rem 1rem; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 5px; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.contact-form input:focus, |
|
|
.contact-form textarea:focus { |
|
|
border-color: var(--secondary); |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(0, 176, 255, 0.2); |
|
|
} |
|
|
|
|
|
.contact-form textarea { |
|
|
min-height: 150px; |
|
|
resize: vertical; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background-color: var(--primary-dark); |
|
|
color: white; |
|
|
padding: 4rem 0 1.5rem; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 3rem; |
|
|
margin-bottom: 3rem; |
|
|
} |
|
|
|
|
|
.footer-logo { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
color: white; |
|
|
margin-bottom: 1.5rem; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.footer-logo i { |
|
|
color: var(--secondary); |
|
|
margin-right: 0.5rem; |
|
|
} |
|
|
|
|
|
.footer-about p { |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.footer-social { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.footer-social a { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
color: white; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-social a:hover { |
|
|
background-color: var(--secondary); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.footer-links h3 { |
|
|
color: white; |
|
|
margin-bottom: 1.5rem; |
|
|
font-size: 1.3rem; |
|
|
} |
|
|
|
|
|
.footer-links ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-links li { |
|
|
margin-bottom: 0.8rem; |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
color: white; |
|
|
padding-left: 5px; |
|
|
} |
|
|
|
|
|
.footer-newsletter p { |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.newsletter-form { |
|
|
display: flex; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.newsletter-form input { |
|
|
flex: 1; |
|
|
padding: 0.8rem 1rem; |
|
|
border: none; |
|
|
border-radius: 5px 0 0 5px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.newsletter-form button { |
|
|
padding: 0 1.5rem; |
|
|
background-color: var(--secondary); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 0 5px 5px 0; |
|
|
cursor: pointer; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.newsletter-form button:hover { |
|
|
background-color: var(--accent); |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
text-align: center; |
|
|
padding-top: 2rem; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.footer-bottom p { |
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.back-to-top { |
|
|
position: fixed; |
|
|
bottom: 2rem; |
|
|
right: 2rem; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background-color: var(--secondary); |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.2rem; |
|
|
cursor: pointer; |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 999; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.back-to-top.active { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.back-to-top:hover { |
|
|
background-color: var(--primary); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 992px) { |
|
|
h1 { |
|
|
font-size: 2.8rem; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.about-content, |
|
|
.contact-content { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 3rem; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
order: -1; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.menu-toggle { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: calc(100vh - 80px); |
|
|
background-color: white; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 2rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
section { |
|
|
padding: 4rem 0; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 576px) { |
|
|
h1 { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
.hero-btns { |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
} |
|
|
|
|
|
.stats { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
grid-template-columns: 1fr; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.footer-social { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.newsletter-form { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.newsletter-form input, |
|
|
.newsletter-form button { |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.newsletter-form button { |
|
|
padding: 0.8rem; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header id="header"> |
|
|
<div class="container"> |
|
|
<nav> |
|
|
<a href="#" class="logo"><i class="fas fa-atom"></i>Grand Challenge</a> |
|
|
<div class="menu-toggle" id="mobile-menu"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</div> |
|
|
<ul class="nav-links"> |
|
|
<li><a href="#home">Home</a></li> |
|
|
<li><a href="#services">Services</a></li> |
|
|
<li><a href="#about">About</a></li> |
|
|
<li><a href="#projects">Projects</a></li> |
|
|
<li><a href="#team">Team</a></li> |
|
|
<li><a href="#contact">Contact</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero" id="home"> |
|
|
<div class="particles" id="particles"></div> |
|
|
<div class="container"> |
|
|
<div class="hero-content"> |
|
|
<h1>Solving Tomorrow's Problems Today</h1> |
|
|
<p>We tackle the world's most complex challenges through innovative technology solutions and interdisciplinary approaches to create a better future.</p> |
|
|
<div class="hero-btns"> |
|
|
<a href="#services" class="btn">Our Services</a> |
|
|
<a href="#contact" class="btn btn-secondary">Get Started</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="services" id="services"> |
|
|
<div class="container"> |
|
|
<h2>Our Services</h2> |
|
|
<p>We offer cutting-edge solutions across multiple industries to address critical global challenges.</p> |
|
|
|
|
|
<div class="services-grid"> |
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3>AI Solutions</h3> |
|
|
<p>Advanced artificial intelligence systems to solve complex problems, optimize processes, and drive innovation across industries.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-biohazard"></i> |
|
|
</div> |
|
|
<h3>Biotech Research</h3> |
|
|
<p>Pioneering biological technologies to address healthcare, agriculture, and environmental sustainability challenges.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-solar-panel"></i> |
|
|
</div> |
|
|
<h3>Clean Energy</h3> |
|
|
<p>Revolutionary energy solutions to combat climate change and create sustainable power systems for the future.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<h3>Cyber Security</h3> |
|
|
<p>Next-generation security frameworks to protect digital assets and maintain privacy in an increasingly connected world.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-space-shuttle"></i> |
|
|
</div> |
|
|
<h3>Space Tech</h3> |
|
|
<p>Innovative space technologies enabling exploration, satellite systems, and interplanetary resource utilization.</p> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3>Robotics</h3> |
|
|
<p>Advanced robotics systems that augment human capabilities and automate complex tasks across industries.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="about" id="about"> |
|
|
<div class="container"> |
|
|
<div class="about-content"> |
|
|
<div class="about-text"> |
|
|
<h2>About Our Company</h2> |
|
|
<p>Founded in 2015, Grand Challenge Technologies began with a mission to solve the world's most pressing problems through technological innovation. What started as a small team of passionate scientists and engineers has grown into a global leader in advanced solutions.</p> |
|
|
<p>Our interdisciplinary approach combines expertise across multiple domains to create solutions that are greater than the sum of their parts. We believe that the greatest challenges of our time require bold thinking and unconventional approaches.</p> |
|
|
<div class="stats"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">150+</div> |
|
|
<div class="stat-label">Experts</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">28</div> |
|
|
<div class="stat-label">Countries</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">75</div> |
|
|
<div class="stat-label">Patents</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">10+</div> |
|
|
<div class="stat-label">Industries</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="about-image"> |
|
|
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1352&q=80" alt="Our Team Working"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="projects" id="projects"> |
|
|
<div class="container"> |
|
|
<h2>Featured Projects</h2> |
|
|
<p>Explore some of our groundbreaking projects that are making a real difference in the world.</p> |
|
|
|
|
|
<div class="projects-grid"> |
|
|
<div class="project-card"> |
|
|
<div class="project-image"> |
|
|
<img src="https://images.unsplash.com/photo-1677442135203-9aab5f4a5868?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="AI Medical Diagnosis"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3>AI Medical Diagnosis</h3> |
|
|
<p>Revolutionizing healthcare with AI-powered diagnostic tools that provide accurate assessments in remote areas.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-image"> |
|
|
<img src="https://images.unsplash.com/photo-1508514177221-188e1eaf7083?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Carbon Capture System"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3>Carbon Capture System</h3> |
|
|
<p>Developing scalable solutions to remove CO2 from the atmosphere and combat climate change.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-image"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Quantum Communication"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3>Quantum Communication</h3> |
|
|
<p>Building unhackable communication networks using quantum entanglement principles.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-image"> |
|
|
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Vertical Farming"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3>Vertical Farming</h3> |
|
|
<p>Creating sustainable urban agriculture systems to feed growing populations with minimal resources.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-image"> |
|
|
<img src="https://images.unsplash.com/photo-1579621970563-71ec1da78dc6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Neural Interface"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3>Neural Interface</h3> |
|
|
<p>Developing brain-computer interfaces to help paralyzed patients communicate and control devices.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-image"> |
|
|
<img src="https://images.unsplash.com/photo-1507238697042-40356e5e5fd8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Autonomous Drones"> |
|
|
</div> |
|
|
<div class="project-overlay"> |
|
|
<h3>Autonomous Drones</h3> |
|
|
<p>AI-powered drone networks for logistics, disaster response, and environmental monitoring.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="team" id="team"> |
|
|
<div class="container"> |
|
|
<h2>Our Leadership Team</h2> |
|
|
<p>The brilliant minds driving our mission forward with expertise across multiple disciplines.</p> |
|
|
|
|
|
<div class="team-grid"> |
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Sarah Chen"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3>Dr. Sarah Chen</h3> |
|
|
<p>CEO & Founder</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Priya Patel"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3>Dr. Priya Patel</h3> |
|
|
<p>CTO - Artificial Intelligence</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1542178243-bc20204b769f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Marcus Johnson"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3>Dr. Marcus Johnson</h3> |
|
|
<p>Chief Biotechnologist</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Elena Popova"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3>Dr. Elena Popova</h3> |
|
|
<p>Director of Quantum Research</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="testimonials"> |
|
|
<div class="container"> |
|
|
<h2>What Our Partners Say</h2> |
|
|
|
|
|
<div class="testimonial-slider"> |
|
|
<div class="testimonial-slide active"> |
|
|
<div class="testimonial-content"> |
|
|
"Working with Grand Challenge Technologies has transformed our approach to sustainability. Their innovative carbon capture solution allowed us to reduce our emissions by 78% in just one year." |
|
|
</div> |
|
|
<div class="testimonial-author"> |
|
|
<div class="author-avatar"> |
|
|
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=250&q=80" alt="Michael Johnson"> |
|
|
</div> |
|
|
<div class="author-info"> |
|
|
<h4>Michael Johnson</h4> |
|
|
<p>CEO, GreenFuture Industries</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-slide"> |
|
|
<div class="testimonial-content"> |
|
|
"The AI diagnostic system developed by Grand Challenge has increased our diagnostic accuracy by 40% while reducing waiting times for patients. This is exactly the kind of healthcare innovation we were looking for." |
|
|
</div> |
|
|
<div class="testimonial-author"> |
|
|
<div class="author-avatar"> |
|
|
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=250&q=80" alt="Dr. Aisha Nkrumah"> |
|
|
</div> |
|
|
<div class="author-info"> |
|
|
<h4>Dr. Aisha Nkrumah</h4> |
|
|
<p>Medical Director, Global Health Initiative</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-slide"> |
|
|
<div class="testimonial-content"> |
|
|
"As an investor, I'm constantly looking for companies that push boundaries. Grand Challenge Technologies is tackling problems others consider impossible with solutions that are both innovative and commercially viable." |
|
|
</div> |
|
|
<div class="testimonial-author"> |
|
|
<div class="author-avatar"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=250&q=80" alt="James Rodriguez"> |
|
|
</div> |
|
|
<div class="author-info"> |
|
|
<h4>James Rodriguez</h4> |
|
|
<p>Managing Partner, Frontier Ventures</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slider-nav"> |
|
|
<div class="slider-dot active" data-slide="0"></div> |
|
|
<div class="slider-dot" data-slide="1"></div> |
|
|
<div class="slider-dot" data-slide="2"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="contact" id="contact"> |
|
|
<div class="container"> |
|
|
<h2>Get In Touch</h2> |
|
|
<p>Ready to tackle your grand challenge? Contact our team to discuss how we can collaborate.</p> |
|
|
|
|
|
<div class="contact-content"> |
|
|
<div class="contact-info"> |
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4>Our Headquarters</h4> |
|
|
<p>123 Innovation Drive, San Francisco, CA 94107</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4>Contact Us</h4> |
|
|
<p>+1 (415) 555-0199</p> |
|
|
<p>[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4>Working Hours</h4> |
|
|
<p>Monday - Friday: 9am - 6pm PST</p> |
|
|
<p>Weekends: By appointment</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="contact-form"> |
|
|
<form id="contactForm"> |
|
|
<div class="form-group"> |
|
|
<input type="text" id="name" placeholder="Your Name" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<input type="email" id="email" placeholder="Your Email" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<input type="text" id="subject" placeholder="Subject" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<textarea id="message" placeholder="Your Message" required></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-accent">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer> |
|
|
<div class="container"> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-about"> |
|
|
<a href="#" class="footer-logo"><i class="fas fa-atom"></i>Grand Challenge</a> |
|
|
<p>Solving the world's most complex problems through groundbreaking technology and interdisciplinary collaboration.</p> |
|
|
<div class="footer-social"> |
|
|
<a href="#"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-links"> |
|
|
<h3>Quick Links</h3> |
|
|
<ul> |
|
|
<li><a href="#home">Home</a></li> |
|
|
<li><a href="#services">Services</a></li> |
|
|
<li><a href="#about">About Us</a></li> |
|
|
<li><a href="#projects">Projects</a></li> |
|
|
<li><a href="#team">Team</a></li> |
|
|
<li><a href="#contact">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-links"> |
|
|
<h3>Services</h3> |
|
|
<ul> |
|
|
<li><a href="#">AI Solutions</a></li> |
|
|
<li><a href="#">Biotech Research</a></li> |
|
|
<li><a href="#">Clean Energy</a></li> |
|
|
<li><a href="#">Cyber Security</a></li> |
|
|
<li><a href="#">Space Tech</a></li> |
|
|
<li><a href="#">Robotics</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-newsletter"> |
|
|
<h3>Newsletter</h3> |
|
|
<p>Subscribe to our newsletter to receive updates on our latest projects and innovations.</p> |
|
|
<form class="newsletter-form"> |
|
|
<input type="email" placeholder="Your Email" required> |
|
|
<button type="submit"><i class="fas fa-paper-plane"></i></button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-bottom"> |
|
|
<p>© 2023 Grand Challenge Technologies. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="back-to-top"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuToggle = document.querySelector('.menu-toggle'); |
|
|
const navLinks = document.querySelector('.nav-links'); |
|
|
|
|
|
menuToggle.addEventListener('click', () => { |
|
|
navLinks.classList.toggle('active'); |
|
|
menuToggle.innerHTML = navLinks.classList.contains('active') ? |
|
|
'<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-links a').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
navLinks.classList.remove('active'); |
|
|
menuToggle.innerHTML = '<i class="fas fa-bars"></i>'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const header = document.getElementById('header'); |
|
|
if (window.scrollY > 100) { |
|
|
header.classList.add('scrolled'); |
|
|
} else { |
|
|
header.classList.remove('scrolled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTop = document.querySelector('.back-to-top'); |
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTop.classList.add('active'); |
|
|
} else { |
|
|
backToTop.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTop.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const slides = document.querySelectorAll('.testimonial-slide'); |
|
|
const dots = document.querySelectorAll('.slider-dot'); |
|
|
let currentSlide = 0; |
|
|
|
|
|
function showSlide(n) { |
|
|
slides.forEach(slide => slide.classList.remove('active')); |
|
|
dots.forEach(dot => dot.classList.remove('active')); |
|
|
|
|
|
currentSlide = (n + slides.length) % slides.length; |
|
|
slides[currentSlide].classList.add('active'); |
|
|
dots[currentSlide].classList.add('active'); |
|
|
} |
|
|
|
|
|
dots.forEach(dot => { |
|
|
dot.addEventListener('click', function() { |
|
|
showSlide(parseInt(this.getAttribute('data-slide'))); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
showSlide(currentSlide + 1); |
|
|
}, 8000); |
|
|
|
|
|
|
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 8 + 2; |
|
|
const posX = Math.random() * 100; |
|
|
const delay = Math.random() * 15; |
|
|
const duration = Math.random() * 20 + 10; |
|
|
|
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}%`; |
|
|
particle.style.bottom = `-${size}px`; |
|
|
particle.style.animationDelay = `${delay}s`; |
|
|
particle.style.animationDuration = `${duration}s`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contactForm'); |
|
|
contactForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
const subject = document.getElementById('subject').value; |
|
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
|
|
|
|
alert(`Thank you, ${name}! Your message has been sent. We'll contact you at ${email} soon.`); |
|
|
|
|
|
|
|
|
contactForm.reset(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
