Pratik Tamhane
Creating a modern and interactive landing page can be an exciting project, especially when it involves leveraging CSS for responsive design and smooth animations. In this post, I'll walk you through a landing page design that features an AI theme, detailing the thought process behind the design and the code implementation.
Design Overview
The landing page we're discussing is sleek, modern, and designed with AI-themed aesthetics in mind. The key features of the design include:
Dark Themed Color Palette: The primary colors used are deep blues and blacks (#0e141b, #1c1c24, and #31313b) with bright highlights in yellow (#e7f91a). These colors give the page a futuristic, tech-focused vibe, which is fitting for an AI theme.
Typography: We use the 'Roboto' font family, known for its clean and modern look, which complements the tech-driven theme.
Responsive Design: The design adapts seamlessly across different screen sizes, ensuring a consistent user experience.
Animations and Transitions: Smooth hover effects and sidebar animations enhance interactivity, making the page feel dynamic.
Design Focus: Innovation, forward-thinking aesthetics, and clear communication of complex ideas.
Key Features: Interactive elements, modern visuals, clear content, and high-performance features.
How to Reach: Implement cutting-edge design trends, use animations or interactive features to explain tech concepts, and maintain a modern, minimalist aesthetic.
Navbar
The navbar is fixed at the top, ensuring it's always accessible. It includes a logo, navigation links, and a call-to-action button. On smaller screens, the navigation links are hidden, and a hamburger menu appears, allowing the user to toggle the sidebar.
Flexbox: The navbar is built using Flexbox, allowing easy alignment and spacing of elements.
Responsive Hamburger Menu: A hamburger icon is hidden on larger screens but appears on smaller ones, offering an intuitive way to access the sidebar.
Sidebar
The sidebar slides in from the right when triggered by the hamburger menu. This feature is particularly useful on mobile devices where screen real estate is limited.
CSS Transition: The right property is animated to slide the sidebar in and out smoothly. This effect enhances user experience by providing visual feedback when the sidebar is toggled.
Z-Index and Box-Shadow: The sidebar is given a high z-index to ensure it appears above other content. A box-shadow is added to create depth, making the sidebar stand out against the rest of the page.
Gradient Background: The background of the hero section uses a linear gradient to create a smooth transition between two dark shades, adding depth to the design.
Typography and Button Design: The heading uses a large, bold font, while the call-to-action buttons stand out with their contrasting colors and rounded shapes.
Code :
HTML :-
<!-- Navbar -->
<div class="navbar">
<div class="logo">Brand</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="btn">Get Started</div>
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="close-btn">
<i class="fas fa-times"></i>
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#get-started" class="btn">Get Started</a></li>
</ul>
</div>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Welcome to <span class="highlight">Your AI-Powered Future</span></h1>
<p>Explore the next generation of technology with our cutting-edge AI solutions.</p>
<div class="hero-buttons">
<a href="#how-it-works" class="btn btn-primary">Learn More</a>
<a href="#features" class="btn btn-secondary">Explore Features</a>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="how-it-works" id="how-it-works">
<div class="section-header">
<h2>How It Works</h2>
<p>Discover how our AI technology works to bring you the best experience.</p>
</div>
<div class="process-steps">
<div class="step">
<div class="step-icon"><i class="fas fa-brain"></i></div>
<h3>Analyze</h3>
<p>We use AI to analyze your needs and create tailored solutions.</p>
</div>
<div class="step">
<div class="step-icon"><i class="fas fa-cogs"></i></div>
<h3>Develop</h3>
<p>Our team develops the most efficient and effective AI models.</p>
</div>
<div class="step">
<div class="step-icon"><i class="fas fa-rocket"></i></div>
<h3>Implement</h3>
<p>We implement AI solutions that drive your business forward.</p>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="card">
<div class="icon"><i class="fas fa-chart-line"></i></div>
<h3>AI-Driven Insights</h3>
<p>Get insights that help you stay ahead of the competition.</p>
</div>
<div class="card">
<div class="icon"><i class="fas fa-shield-alt"></i></div>
<h3>Secure Solutions</h3>
<p>Our AI solutions are secure and protect your data at all costs.</p>
</div>
<div class="card">
<div class="icon"><i class="fas fa-clock"></i></div>
<h3>Real-Time Analytics</h3>
<p>Monitor and analyze data in real-time with our AI tools.</p>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="section-header">
<h2>Our Services</h2>
<p>We offer a wide range of AI services to meet your business needs.</p>
</div>
<div class="main-service">
<div class="service-card">
<div class="service-card-inner">
<div class="service-card-front">
<div class="service-icon"><i class="fas fa-robot"></i></div>
<h3>AI Consulting</h3>
</div>
<div class="service-card-back">
<p class="service-card-back-para">Our experts provide guidance on how to leverage AI to improve
your business processes.</p>
</div>
</div>
</div>
<div class="service-card">
<div class="service-card-inner">
<div class="service-card-front">
<div class="service-icon"><i class="fas fa-robot"></i></div>
<h3>AI Consulting</h3>
</div>
<div class="service-card-back">
<p class="service-card-back-para">Our experts provide guidance on how to leverage AI to improve
your business processes.</p>
</div>
</div>
</div>
<div class="service-card">
<div class="service-card-inner">
<div class="service-card-front">
<div class="service-icon"><i class="fas fa-robot"></i></div>
<h3>AI Consulting</h3>
</div>
<div class="service-card-back">
<p class="service-card-back-para">Our experts provide guidance on how to leverage AI to improve
your business processes.</p>
</div>
</div>
</div>
<div class="service-card">
<div class="service-card-inner">
<div class="service-card-front">
<div class="service-icon"><i class="fas fa-code"></i></div>
<h3>Custom AI Development</h3>
</div>
<div class="service-card-back">
<p class="service-card-back-para">We develop custom AI models tailored to your specific needs
and requirements.</p>
</div>
</div>
</div>
<div class="service-card">
<div class="service-card-inner">
<div class="service-card-front">
<div class="service-icon"><i class="fas fa-network-wired"></i></div>
<h3>AI Integration</h3>
</div>
<div class="service-card-back">
<p class="service-card-back-para">Integrate AI seamlessly into your existing systems for maximum
efficiency.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="section-header">
<h2>What Our Clients Say</h2>
<p>Our clients love the impact our AI solutions have made on their businesses.</p>
</div>
<div class="testimonial">
<p>"The AI solutions provided by this company have transformed our business processes."</p>
<h4>John Doe, CEO</h4>
</div>
<div class="testimonial">
<p>"I was blown away by the insights we gained using their AI-driven analytics tools."</p>
<h4>Jane Smith, CTO</h4>
</div>
<div class="testimonial">
<p>"Their AI consulting services helped us identify and solve key issues quickly."</p>
<h4>James Wilson, COO</h4>
</div>
</section>
<!-- Pricing Section -->
<section class="pricing" id="pricing">
<div class="section-header">
<h2>Pricing Plans</h2>
<p>Choose a pricing plan that fits your needs and budget.</p>
</div>
<div class="pricing-card">
<div class="pricing-plan">Basic</div>
<div class="pricing-cost">$29/month</div>
<ul class="pricing-features">
<li>AI Consulting</li>
<li>Basic Analytics</li>
<li>Email Support</li>
</ul>
<a href="#" class="btn btn-secondary">Get Started</a>
</div>
<div class="pricing-card">
<div class="pricing-plan">Pro</div>
<div class="pricing-cost">$59/month</div>
<ul class="pricing-features">
<li>Custom AI Development</li>
<li>Advanced Analytics</li>
<li>Phone Support</li>
</ul>
<a href="#" class="btn btn-secondary">Get Started</a>
</div>
<div class="pricing-card">
<div class="pricing-plan">Enterprise</div>
<div class="pricing-cost">$99/month</div>
<ul class="pricing-features">
<li>AI Integration</li>
<li>Dedicated Support</li>
<li>All Features</li>
</ul>
<a href="#" class="btn btn-secondary">Get Started</a>
</div>
</section>
<!-- Footer -->
<footer class="footer" id="contact">
<h3>Contact Us</h3>
<p>We'd love to hear from you! Reach out to us via our social media channels or email.</p>
<div class="social-links">
<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>
</div>
<a href="mailto:contact@mywebsite.com" class="btn btn-secondary">Email Us</a>
</footer>
CSS :-
Building a modern landing page involves more than just making it look good; it also needs to be responsive and interactive. By using CSS techniques like Flexbox, Grid, and transitions, we can create a page that not only looks sleek but also provides a smooth user experience.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Global Styles */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
color: #fff;
background-color: #0e141b;
}
a {
text-decoration: none;
color: inherit;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #1c1c24;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.navbar ul {
list-style: none;
display: flex;
gap: 20px;
}
.navbar ul li a {
color: #cfcfcf;
font-weight: 500;
}
.navbar .btn {
padding: 10px 20px;
background-color: #31313b;
border-radius: 50px;
font-weight: 500;
}
.logo {
font-size: 1.5em;
font-weight: 700;
}
.hamburger {
display: none;
font-size: 1.5em;
cursor: pointer;
}
.sidebar {
position: fixed;
top: 0;
right: -250px;
width: 250px;
height: 100vh;
background-color: #1c1c24;
transition: right 0.3s ease;
z-index: 1001;
padding: 20px;
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
}
.sidebar.active {
right: 0;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 20px;
}
.sidebar ul li a {
color: #cfcfcf;
font-weight: 500;
font-size: 1.2em;
}
.sidebar .btn {
padding: 10px 20px;
background-color: #31313b;
border-radius: 50px;
font-weight: 500;
display: block;
margin-top: 20px;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(135deg, #1c1c24, #31313b);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 80px;
}
.hero-content h1 {
font-size: 3rem;
margin: 20px 0;
}
.hero-content .highlight {
color: #e7f91a;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.hero-buttons {
display: flex;
gap: 20px;
}
.btn {
padding: 15px 30px;
border-radius: 50px;
font-weight: 500;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #e7f91a;
color: #0e141b;
}
.btn-secondary {
background-color: #31313b;
color: #cfcfcf;
}
/* How It Works Section */
.how-it-works {
background-color: #1c1c24;
padding: 60px 20px;
text-align: center;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.section-header p {
font-size: 1.2rem;
color: #cfcfcf;
margin-bottom: 40px;
}
.process-steps {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.step {
width: 200px;
padding: 20px;
background-color: #31313b;
border-radius: 15px;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.step-icon {
font-size: 3rem;
color: #e7f91a;
margin-bottom: 15px;
}
.step h3 {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 500;
}
.step p {
color: #cfcfcf;
}
.step:hover {
transform: translateY(-10px);
}
/* Features Section */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 50px;
text-align: center;
}
.card {
background-color: #31313b;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
.icon {
font-size: 2rem;
color: #e7f91a;
margin-bottom: 15px;
}
.card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 500;
}
.card p {
color: #cfcfcf;
font-weight: 400;
}
/* Services Section */
.services {
background-color: #1c1c24;
padding: 60px 20px;
text-align: center;
}
.service-card {
width: 300px;
height: 400px;
background-color: #31313b;
border-radius: 15px;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
perspective: 1000px;
}
.service-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.service-card:hover .service-card-inner {
transform: rotateY(180deg);
}
.service-card-front,
.service-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.service-card-front {
background-color: #31313b;
}
.service-card-back {
background-color: #e7f91a;
color: #0e141b;
transform: rotateY(180deg);
padding: 20px;
border-radius: 15px;
}
.service-icon {
font-size: 3rem;
color: #e7f91a;
margin-bottom: 15px;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 500;
}
.service-card p {
color: #31313b;
font-weight: 400;
}
/* Testimonials Section */
.testimonials {
background-color: #1c1c24;
padding: 60px 20px;
text-align: center;
}
.testimonial {
margin-bottom: 30px;
}
.testimonial p {
font-size: 1.2rem;
margin-bottom: 10px;
}
.testimonial h4 {
font-size: 1rem;
color: #e7f91a;
font-weight: 500;
}
/* Pricing Section */
.pricing {
background-color: #1c1c24;
padding: 60px 20px;
text-align: center;
}
.pricing-card {
background-color: #31313b;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin-bottom: 20px;
}
.pricing-card:hover {
transform: scale(1.05);
}
.pricing-plan {
font-size: 2rem;
font-weight: 700;
color: #e7f91a;
margin-bottom: 20px;
}
.pricing-cost {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0;
color: #cfcfcf;
margin-bottom: 20px;
}
.pricing-features li {
margin-bottom: 10px;
}
/* Footer */
.footer {
background-color: #1c1c24;
padding: 60px 20px;
text-align: center;
}
.footer h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.footer p {
font-size: 1rem;
margin-bottom: 20px;
color: #cfcfcf;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.social-links a {
font-size: 1.5rem;
color: #e7f91a;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #fff;
}
.footer .btn {
margin-top: 20px;
background-color: #31313b;
color: #cfcfcf;
border-radius: 50px;
padding: 15px 30px;
}
.main-service {
display: flex;
justify-content: center;
}
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #1c1c24;
position: fixed;
top: 0;
z-index: 1000;
}
.navbar ul {
list-style: none;
display: flex;
gap: 20px;
}
.navbar ul li a {
color: #cfcfcf;
font-weight: 500;
text-decoration: none;
}
.navbar .btn {
padding: 10px 20px;
background-color: #31313b;
border-radius: 50px;
font-weight: 500;
color: #cfcfcf;
text-decoration: none;
}
.logo {
font-size: 1.5em;
font-weight: 700;
color: #cfcfcf;
}
.hamburger {
display: none;
font-size: 1.5em;
color: #cfcfcf;
cursor: pointer;
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
right: -250px;
width: 250px;
height: 100vh;
background-color: #1c1c24;
transition: right 0.3s ease;
z-index: 1001;
padding: 20px;
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
}
.sidebar.active {
right: 0;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 20px;
}
.sidebar ul li a {
color: #cfcfcf;
font-weight: 500;
font-size: 1.2em;
text-decoration: none;
}
.sidebar .btn {
padding: 10px 20px;
background-color: #31313b;
border-radius: 50px;
font-weight: 500;
color: #cfcfcf;
text-decoration: none;
display: block;
margin-top: 20px;
}
/* Close Button */
.close-btn {
position: absolute;
top: 20px;
right: 20px;
font-size: 1.5em;
color: #cfcfcf;
cursor: pointer;
}
/* Optional: Adjust the sidebar to ensure close button does not overlap */
.sidebar {
position: fixed;
top: 0;
right: -250px;
width: 250px;
height: 100vh;
background-color: #1c1c24;
transition: right 0.3s ease;
z-index: 1001;
padding: 20px;
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
}
.sidebar.active {
right: 0;
}
.sidebar ul {
list-style: none;
padding: 0;
margin-top: 50px;
/* Adjust margin to avoid overlap with close button */
}
/* Responsive Styles */
@media (max-width: 700px) {
.navbar ul {
display: none;
}
.navbar .btn {
display: none;
}
.hamburger {
display: block;
}
.features {
display: flow-root
}
.card {
margin: 1rem;
}
}
@media (max-width: 1200px) {
.main-service {
display: grid;
}
}
</style>
</head>
JavaScript and GSAP
_Use Modern Animation using GSAP create engaging, responsive, and dynamic web experiences that can enhance the user experience and make your designs more interactive and appealing.
Code Available in Shop _
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
