This content originally appeared on DEV Community and was authored by Pratik Tamhane
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
This content originally appeared on DEV Community and was authored by Pratik Tamhane
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Pratik Tamhane | Sciencx (2024-08-25T15:26:20+00:00) Create a Modern AI-Themed Website with GSAP Animations. Retrieved from https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/
" » Create a Modern AI-Themed Website with GSAP Animations." Pratik Tamhane | Sciencx - Sunday August 25, 2024, https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/
HARVARDPratik Tamhane | Sciencx Sunday August 25, 2024 » Create a Modern AI-Themed Website with GSAP Animations., viewed ,<https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/>
VANCOUVERPratik Tamhane | Sciencx - » Create a Modern AI-Themed Website with GSAP Animations. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/
CHICAGO" » Create a Modern AI-Themed Website with GSAP Animations." Pratik Tamhane | Sciencx - Accessed . https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/
IEEE" » Create a Modern AI-Themed Website with GSAP Animations." Pratik Tamhane | Sciencx [Online]. Available: https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/. [Accessed: ]
rf:citation » Create a Modern AI-Themed Website with GSAP Animations | Pratik Tamhane | Sciencx | https://www.scien.cx/2024/08/25/create-a-modern-ai-themed-website-with-gsap-animations/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.