In this tutorial, we will create a modern AI-themed website that leverages GSAP animations and responsive design principles. Whether you’re showcasing AI research, offering services, or sharing insights, this template will help you stand out with a polished, interactive experience.
🚀 Key Features
Responsive Design: The website is fully responsive, ensuring a great user experience across all devices.
GSAP Animations: Smooth, modern animations that engage users and make the content dynamic.
CSS Particle Animation: A subtle background animation adds a high-tech feel to the landing page.
Customizable Sections: Easily modify the sections to fit your brand or content.
🎯 Benefits of Using This Code
Attractive Design: The sleek, modern design aligns with AI themes, providing a professional appearance.
User Engagement: GSAP animations keep users engaged as they scroll through your content, increasing interaction time.
Easy Customization: The code is modular and well-organized, allowing easy customization of colors, content, and animations.
Responsive Layout: Optimized for mobile devices, ensuring your website looks great on any screen size.
📝 Code Explanation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern AI Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #272c58;
color: #fff;
overflow-x: hidden;
}
/* Navbar */
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(168deg, #272c58, #41245e);
position: fixed;
width: 100%;
z-index: 1000;
}
#navbar .logo {
font-size: 24px;
font-weight: bold;
}
#navbar .menu {
display: flex;
gap: 20px;
}
#navbar .menu a {
text-decoration: none;
color: #fff;
transition: color 0.3s;
}
#navbar .menu a:hover {
color: #00f5d4;
}
.hamburger {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: #fff;
}
/* Landing Section */
.landing {
height: 100vh;
background: linear-gradient(168deg, #272c58, #41245e);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
}
.landing h1 {
font-size: 48px;
margin-bottom: 20px;
}
.landing p {
font-size: 20px;
}
/* Sections */
section {
padding: 80px 20px;
text-align: center;
}
.about {
background: #272c58;
}
.services {
background: #2f315b;
}
.contact {
background: #353564;
}
.about-cards {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.about-card {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 8px;
width: 200px;
transition: transform 0.3s, background 0.3s;
display: flex;
flex-direction: column;
align-items: center;
}
.about-card i {
font-size: 40px;
margin-bottom: 10px;
color: #00f5d4;
}
.about-card h3 {
margin-bottom: 10px;
font-size: 18px;
}
.about-card p {
font-size: 14px;
opacity: 0.8;
}
.about-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
/* Services Section */
.service-cards {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
align-items: center;
}
.service-card {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 8px;
width: 100%;
transition: transform 0.3s, background 0.3s;
display: flex;
/* flex-direction: column-reverse; */
align-items: center;
text-align: center;
justify-content: center;
gap: 19px;
}
.service-card i {
font-size: 40px;
margin-bottom: 10px;
color: #00f5d4;
}
.service-card h3 {
font-size: 18px;
}
.service-card p {
font-size: 14px;
opacity: 0.8;
}
.service-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
/* Contact Us Form */
.contact form {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
max-width: 500px;
margin: 0 auto;
}
.contact input,
.contact textarea {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 16px;
}
.contact textarea {
resize: none;
height: 120px;
}
.contact button {
padding: 15px 30px;
border: none;
border-radius: 5px;
background: #00f5d4;
color: #272c58;
font-size: 18px;
cursor: pointer;
transition: background 0.3s;
}
.contact button:hover {
background: #00d0b4;
}
/* Footer */
footer {
background: #272c58;
padding: 20px;
text-align: center;
}
/* Particle Animation */
#particles {
position: absolute;
width: 100%;
height: 200%;
background: url('https://www.transparenttextures.com/patterns/cubes.png') repeat;
animation: moveParticles 20s infinite linear;
opacity: 0.2;
z-index: 0;
}
@keyframes moveParticles {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20%);
}
}
/* Responsive */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
#navbar .menu {
position: absolute;
top: 60px;
right: 0;
background: linear-gradient(168deg, #272c58, #41245e);
flex-direction: column;
gap: 10px;
padding: 20px;
display: none;
width: 200px;
}
#navbar .menu.active {
display: flex;
}
.service-cards,
.about-cards {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<div class="logo">AIWebsite</div>
<div class="menu" id="menu">
<a href="#section1">Home</a>
<a href="#section2">About</a>
<a href="#section3">Services</a>
<a href="#section4">Contact</a>
</div>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<!-- Landing Section -->
<section id="section1" class="landing">
<div class="content">
<h1>Welcome to the Future of AI</h1>
<p>Experience cutting-edge AI solutions.</p>
<button style="padding: 10px 50px; background: #00f5d4;
color: #272c58; margin: 30px; border-radius: 4px; border: none; font-weight: bold;">View
Information</button>
</div>
<div id="particles"></div>
</section>
<!-- About Section -->
<section id="section2" class="about">
<h2>About Us</h2>
<div class="about-cards">
<div class="about-card">
<i class="fas fa-brain"></i>
<h3>AI Research</h3>
<p>Pioneering research in artificial intelligence.</p>
</div>
<div class="about-card">
<i class="fas fa-robot"></i>
<h3>Robotics</h3>
<p>Innovative solutions in robotics and automation.</p>
</div>
<div class="about-card">
<i class="fas fa-chart-line"></i>
<h3>Data Science</h3>
<p>Advanced data analysis and machine learning.</p>
</div>
</div>
</section>
<!-- Services Section -->
<section id="section3" class="services">
<h2>Our Services</h2>
<div class="service-cards">
<div class="service-card">
<i class="fas fa-code"></i>
<h3>AI Development</h3>
</div>
<div class="service-card">
<i class="fas fa-cogs"></i>
<h3>System Integration</h3>
</div>
<div class="service-card">
<i class="fas fa-lock"></i>
<h3>Security Solutions</h3>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="section4" class="contact">
<h2>Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2024 AIWebsite. All rights reserved.</p>
</footer>
<!-- GSAP and ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script>
document.getElementById("hamburger").addEventListener("click", function () {
document.getElementById("menu").classList.toggle("active");
});
// GSAP Animations
gsap.from(".about-card", {
opacity: 0,
y: 50,
duration: 1,
stagger: 0.3,
scrollTrigger: {
trigger: ".about-cards",
start: "top 80%",
end: "bottom 20%",
scrub: 1
}
});
gsap.from(".service-card", {
opacity: 0,
x: -50,
duration: 1,
stagger: 0.3,
scrollTrigger: {
trigger: ".service-cards",
start: "top 80%",
end: "bottom 20%",
scrub: 1
}
});
</script>
</body>
</html>
📈 Conclusion
With this code, you can quickly build an engaging AI-themed website that is visually appealing, responsive, and feature-rich. By integrating GSAP animations and a responsive design, your website will offer a smooth and professional user experience. Customize the content and animations to fit your project, and start impressing your audience with a modern and dynamic web presence.
shop Link : https://buymeacoffee.com/pratik1110r/extras
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
Top comments (0)