Bingles – Landingpage eines IT-Bildungsunternehmens

1276 zegarkidawida

Im Editor öffnen Veröffentlichen Sie Ihren Code

Bingles – Landingpage eines IT-Bildungsunternehmens

Empfohlen

29 May 2025

Teams-Seite – Futuristisches Design

15 September 2024

CodePen – Blumen zeichnen mit Greensock

23 August 2025

Kreativdesigner-Portfolio – Alex

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bingles - Educational Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <link rel="shortcut icon" href="https://i.postimg.cc/9M8zkG6w/logo.png">
</head>
<body>
    <header class="header" id="header">
        <nav class="nav container">
            <a href="#" class="nav-logo"><img src="https://i.postimg.cc/9M8zkG6w/logo.png" alt="logo image" class="nav-logo-img">Bingles.</a>

<div class="nav-menu" id="nav-menu">
                <ul class="nav-list">
                    <li class="nav-list"><a href="#home" class="nav-link active-link">Home</a></li>
                    <li class="nav-list"><a href="#features" class="nav-link">Features</a></li>
                    <li class="nav-list"><a href="#pricing" class="nav-link">Pricing</a></li>
                    <li class="nav-list"><a href="#team" class="nav-link">Team</a></li>
                    <li class="nav-list"><a href="#faq" class="nav-link">FAQ</a></li>
                    <li class="nav-list"><a href="#contact" class="nav-link">Contact</a></li>
                </ul>         
                <div class="nav-close" id="nav-close">
                    <i class="fas fa-times"></i>
                </div>  
            </div>
            <div class="nav-toggle" id="nav-toggle">
                <i class="fas fa-th-large"></i>
            </div>
        </nav>
    </header>

<section class="home" id="home">
        <div class="home-container container grid">
            <div class="home-data">
                <h1 class="home-title"><span>Start</span> your IT skills <span>career</span></h1>
                <p class="home-description">Choose your career. We'll teach you the skills to get job-ready</p>
                <a href="#" class="button button-flex">Explore<i class="ri-arrow-right-down-line button-icon"></i></a>
            </div>

<section class="features section" id="features">
        <h2 class="section-title">Career Skills Features</h2>
        <div class="feature-container container grid">
            <div class="feature-img image">
                <div class="banner-app-mock">
                    <img src="https://i.postimg.cc/fWFWGWrF/mobile-mock.png" class="mockup" alt="mobile image">
                    <img src="https://i.postimg.cc/52LWbPyt/work3.jpg" class="main-img" alt="home image">
                </div>
                <div class="mobile-graphic">
                    <img src="https://i.postimg.cc/50DBQdst/mobile-graphic.png" alt="mobile graphic">
                </div>
            </div>

<div class="feature-inside">
                <ul>
                    <li>
                        <img src="https://i.postimg.cc/bJfYZmQh/feature1.png" alt="feature image">
                        <h3>Practice on our mobile app</h3>
                        <p>Our mobile app puts the power of practice at your fingertips. Whether you're on the bus, waiting in line, or simply taking a break, you can level up your skills with engaging exercises and interactive lessons</p>
                    </li>

<li>
                        <img src="https://i.postimg.cc/9X1SSHGs/feature2.png" alt="feature image">
                        <h3>Best Skill Paths</h3>
                        <p>In today's rapidly evolving digital landscape, choosing the right IT skill path can set you on a trajectory for success. Whether you're a seasoned professional or just starting your journey, exploring the best IT skill paths is essential</p>
                    </li>

<li>
                        <img src="https://i.postimg.cc/02TCXVHL/feature3.png" alt="feature image">
                        <h3>Choose your Career Path</h3>
                        <p>A career path prepares you for a job in tech. Choose from a variety of careers — including Data Scientist, Front-End Engineer, Back-End Engineer, Full-Stack Engineer, or iOS Developer. We'll guide you through everything you need to know to land a job</p>
                    </li>
                </ul>

<div class="btn-group">
                    <a href="#" class="button"><i class="fab fa-apple fa-2x"></i>Available in <br>Apple</a>
                    <a href="#" class="button"><i class="fab fa-google-play fa-2x"></i>Available in <br>Android</a>
                </div>
            </div>
        </div>
    </section>

<section class="pricing section" id="pricing">
        <h2 class="section-title">Our Pricing Plans</h2>
        <div class="pricing-container container grid">
            <div class="pricing-plan">
                <div class="pricing-header">
                    <h3>Basic</h3>
                </div>
            
                <div class="pricing-price">
                    <span class="currency"></span>
                    <span class="price">Free</span>
                    <span class="period"></span>
                </div>

<div class="pricing-body">
                    <ul>
                        <li><i class="fa fa-check"></i>Access to Free Courses</li>
                        <li><i class="fa fa-check"></i>Limited Number of Quizzes</li>
                        <li><i class="fa fa-check"></i>Community Support</li>
                        <li><i class="fa fa-check"></i>Limited Number of Real World Projects</li>
                        <li><i class="fa fa-check"></i>Limited Practice on Mobile App</li>
                    </ul>
                </div>

<div class="pricing-footer">
                    <a href="#" class="button button-flex">Explore <i class="ri-arrow-right-down-line button-icon"></i></a>
                </div>
            </div>

<div class="pricing-plan">
                <div class="pricing-header">
                    <h3>Premium</h3>
                    <h3 class="best-value">best value</h3>
                </div>
            
                <div class="pricing-price">
                    <span class="currency">$</span>
                    <span class="price">10</span>
                    <span class="period">/monthly</span>
                </div>

<div class="pricing-body">
                    <ul>
                        <li><i class="fa fa-check"></i>Access to Free Courses</li>
                        <li><i class="fa fa-check"></i>Unlimited Number of Quizzes</li>
                        <li><i class="fa fa-check"></i>Community Support</li>
                        <li><i class="fa fa-check"></i>Unlmited Number of Real World Projects</li>
                        <li><i class="fa fa-check"></i>Unlimited Practice on Mobile App</li>
                        <li><i class="fa fa-check"></i>Access to Skill Paths</li>
                    </ul>
                </div>
                
                <div class="pricing-footer">
                    <a href="#" class="button button-flex">Explore <i class="ri-arrow-right-down-line button-icon"></i></a>
                </div>
            </div>

<div class="pricing-plan">
                <div class="pricing-header">
                    <h3>Professional</h3>
                </div>
            
                <div class="pricing-price">
                    <span class="currency">$</span>
                    <span class="price">15</span>
                    <span class="period">/monthly</span>
                </div>

<div class="pricing-body">
                    <ul>
                        <li><i class="fa fa-check"></i>Access to Free Courses</li>
                        <li><i class="fa fa-check"></i>Unlimited Number of Quizzes</li>
                        <li><i class="fa fa-check"></i>Community Support</li>
                        <li><i class="fa fa-check"></i>Unlmited Number of Real World Projects</li>
                        <li><i class="fa fa-check"></i>Unlimited Practice on Mobile App</li>
                        <li><i class="fa fa-check"></i>Access to Skill Paths</li>
                        <li><i class="fa fa-check"></i>Access to Career Paths</li>
                        <li><i class="fa fa-check"></i>Access to Professional Certifications</li>
                    </ul>
                </div>
                
                <div class="pricing-footer">
                    <a href="#" class="button button-flex">Explore <i class="ri-arrow-right-down-line button-icon"></i></a>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials section" id="team">
        <h2 class="section-title">Meet the Team</h2>
        <div class="testimonials-container container">
            <div class="swiper testimonials-swiper">
                <div class="swiper-wrapper">
                    <div class="testimonial-item swiper-slide">
                        <div class="img-box"><img src="https://i.postimg.cc/Pf6GJVXG/team1.jpg" alt="team member"></div>
                        <h3>John Doe</h3>
                        <span>UI Designer</span>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>

<div class="testimonial-item swiper-slide">
                        <div class="img-box"><img src="https://i.postimg.cc/TwCsyhXj/team2.jpg" alt="team member"></div>
                        <h3>Laura Moore</h3>
                        <span>Ux Designer</span>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>

<div class="testimonial-item swiper-slide">
                        <div class="img-box"><img src="https://i.postimg.cc/YCNBrrjR/team3.jpg" alt="team member"></div>
                        <h3>Oliver Stone</h3>
                        <span>UI Designer</span>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="accordion section" id="faq">
        <h2 class="section-title">Frequently Asked Questions</h2>
        <div class="accordion-container container grid">
            <div class="accordion-img image">
                <div class="banner-app-mock">
                    <img src="https://i.postimg.cc/fWFWGWrF/mobile-mock.png" class="mockup" alt="mobile image">
                    <img src="https://i.postimg.cc/52LWbPyt/work3.jpg" class="main-img" alt="home image">
                </div>
                <div class="mobile-graphic">
                    <img src="https://i.postimg.cc/50DBQdst/mobile-graphic.png" alt="mobile graphic">
                </div>
            </div>

<div class="accordion-content">
                <div class="accordion-item">
                    <div class="accordion-header">
                        <h3>100% Responsive - Fits any device peefectly</h3>
                    </div>
                    <div class="accordion-body">
                        <p>Forget squinting at tiny text or struggling to navigate a website on your phone</p>
                    </div>
                </div>

<div class="accordion-item collapsed">
                    <div class="accordion-header">
                        <h3>Join Skill Paths of your preference</h3>
                    </div>
                    <div class="accordion-body">
                        <p>Skill paths are structured curriculum roadmaps that show you exactly where to start and what to learn next</p>
                    </div>
                </div>

<div class="accordion-item">
                    <div class="accordion-header">
                        <h3>Suitable for Children</h3>
                    </div>
                    <div class="accordion-body">
                        <p>Coding is just like learning a new language or studying math. Children who learn to code when they're young can set themselves up for a lifetime of opportunities for success</p>
                    </div>
                </div>

<div class="accordion-item">
                    <div class="accordion-header">
                        <h3>Earn Professional Certifications</h3>
                    </div>
                    <div class="accordion-body">
                        <p>To earn a professional certification, you need to pass a series of exams. These exams assess proficiency in the concepts you're learning</p>
                    </div>
                </div>
            </div
        </div>
    </section>

<section class="contact section container" id="contact">
        <div class="contact-container grid">
            <div class="contact-box">
                <h2 class="section-title">Reach out us today <br> via any of the given <br> information</h2>
                <div class="contact-data">
                    <div class="contact-information">
                        <h3 class="contact-subtitle">Call us for instant support</h3>
                        <span class="contact-description">
                            <i class="ri-phone-line contact-icon"></i>+1 (702) 487 3678
                        </span>
                    </div>

<div class="contact-information">
                        <h3 class="contact-subtitle">Write us an email</h3>
                        <span class="contact-description">
                            <i class="ri-mail-line contact-icon"></i>user@gmail.com
                        </span>
                    </div>
                </div>

</div>
            <form action="" class="contact-form">
                <div class="contact-inputs">
                    <div class="contact-content">
                        <input type="email" placeholder="" class="contact-input">
                        <label for="" class="contact-label">Email</label>
                        <span></span>
                    </div>

<div class="contact-content">
                        <input type="text" placeholder="" class="contact-input">
                        <label for="" class="contact-label">Subject</label>
                        <span></span>
                    </div>

<div class="contact-content contact-area">
                        <input name="message" id="" cols="30" rows="10" class="contact-input" />
                        <label for="" class="contact-label">Message</label>
                        <span></span>
                    </div>
                </div>
                <button class="button button-flex">
                    Send Message
                    <i class="ri-arrow-right-up-line button-icon"></i>
                </button>
            </form>
        </div>
    </section>

<footer class="footer section">
        <div class="footer-container container grid">
            <div class="footer-content">
                <a href="#" class="footer-logo"><img src="" alt=""><img src="https://i.postimg.cc/9M8zkG6w/logo.png" alt="logo image" class="footer-logo-img">Bingles.</a>
                <h3 class="footer-title">Subscribe to our newsletter <br> to stay update</h3>

<div class="footer-subscribe">
                    <input type="email" placeholder="Enter your email" class="footer-input">
                    <button class="button button-flex footer-button">
                        Subscribe
                        <i class="ri-arrow-right-up-line button-icon"></i>
                    </button>
                </div>
            </div>
            <div class="footer-content">
                <h3 class="footer-title">Our Address</h3>
                <ul class="footer-data">
                    <li class="footer-information">United States of America</li>
                    <li class="footer-information">815 Porto Mio Way</li>
                    <li class="footer-information">Las Vegas, NV</li>
                </ul>
            </div>
            <div class="footer-content">
                <h3 class="footer-title">Contact Us</h3>
                <ul class="footer-data">
                    <li class="footer-information">+1 (702) 487 3678</li>
                    <div class="footer-social">
                        <a href="#" class="footer-social-link"><i class="ri-facebook-fill"></i></a>
                        <a href="#" class="footer-social-link"><i class="ri-instagram-line"></i></a>
                        <a href="#" class="footer-social-link"><i class="ri-twitter-x-line"></i></a>
                    </div>
                </ul>
            </div>
            <div class="footer-content">
                <h3 class="footer-title">Our Services</h3>
                <ul class="footer-data">
                    <li class="footer-information-link"><a href="#">Pricing</a></li>
                    <li class="footer-information-link"><a href="#">Features</a></li>
                    <li class="footer-information-link"><a href="#">FAQ</a></li>
                </ul>
            </div>
        </div>
        <p class="footer-copy">© <span>ULTRA CODE</span>. All rights reserved</p>
    </footer>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

:root {
    --header-height: 3.5rem;

/* Colors */
    --dark-color: #191D28;
    --dark-color-alt: #1E222D;
    --main-color: #F0082F;
    --main-color-alt: #FF164C;
    --title-color: #FFFFFF;
    --text-color: #E9E9E9;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --gradient-main: linear-gradient(135deg, #F0082F, #FF164C);
    --shadow-neu: 8px 8px 16px rgba(0, 0, 0, 0.2), -8px -8px 16px rgba(60, 60, 60, 0.1);
    --shadow-soft: 0 8px 32px rgba(31, 38, 135, 0.15);
    --shadow-hover: 0 12px 40px rgba(240, 8, 47, 0.25);

/* Fonts */
    --body-font: 'Poppins', sans-serif;
    --logo-font: 'Turret Road', sans-serif;
    --big-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;

/* Font weights */
    --font-medium: 500;
    --font-semi-bold: 600;

/* Margins */
    --mb0-5: .5rem;
    --mb0-75: .75rem;
    --mb1: 1rem;
    --mb1-5: 1.5rem;
    --mb2: 2rem;
    --mb2-5: 2.5rem;

/* Z-index */
    --z-fixed: 100;
}

@media screen and (max-width: 992px) {
    :root {
        --big-font-size: 2.25rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
}

/* Base styles */
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body, button, textarea { font-family: var(--body-font); font-size: var(--normal-font-size); }
body { background-color: var(--dark-color); color: var(--text-color); line-height: 1.6; }
button { cursor: pointer; border: none; outline: none; }
h1, h2, h3 { color: var(--title-color); font-weight: var(--font-semi-bold); }
ul { list-style-type: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin-left: auto; margin-right: auto; overflow: hidden; }
.grid { display: grid; }
.home-container, .feature-container, .accordion-container, .contact-container { 
    grid-template-columns: repeat(2, 1fr); 
    column-gap: 2.5rem; 
}
.button { 
    display: inline-flex; 
    align-items: center; 
    background: var(--gradient-main); 
    color: var(--title-color); 
    padding: 1rem 2rem; 
    border-radius: 2rem; 
    font-weight: var(--font-medium); 
    box-shadow: var(--shadow-soft); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.button:hover { 
    transform: translateY(-4px); 
    box-shadow: var(--shadow-hover); 
}
.button-icon { 
    margin-left: 0.5rem; 
    transition: transform 0.3s ease; 
}
.button:hover .button-icon { 
    transform: scale(1.2) rotate(15deg); 
}
.button-flex { display: inline-flex; align-items: center; column-gap: .5rem; }
.section { padding: 8rem 0 2rem; }
.section-title { 
    font-size: var(--h1-font-size); 
    margin-bottom: 4rem; 
    font-weight: var(--font-semi-bold); 
    text-align: center; 
    background: var(--gradient-main); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
    text-shadow: 0 4px 12px rgba(240, 8, 47, 0.3); 
    animation: fadeIn 1s ease-in-out; 
}
.image { position: relative; display: flex; justify-content: center; align-items: center; }
.banner-app-mock { 
    position: relative; 
    width: 272px; 
    filter: drop-shadow(0 10px 20px rgba(240, 8, 47, 0.2)); 
}
.banner-app-mock .main-img { 
    margin-top: 20px; 
    margin-left: 15px; 
    width: 240px; 
    height: 520px; 
    border-radius: 20px; 
}
.banner-app-mock .mockup { 
    width: 277px; 
    height: 552px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 5; 
}
.mobile-graphic { 
    width: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: -2; 
    opacity: 0.8; 
}

/* Header */
.header { 
    width: 100%; 
    background: rgba(25, 29, 40, 0.9); 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: var(--z-fixed); 
}
.nav { 
    height: calc(var(--header-height) + 1.5rem); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    column-gap: 3rem; 
}
.nav-logo { 
    display: flex; 
    align-items: center; 
    font-family: var(--logo-font); 
    font-size: 1.5rem; 
    font-weight: var(--font-medium); 
    column-gap: .5rem; 
    color: var(--main-color); 
    text-shadow: 0 2px 10px rgba(240, 8, 47, 0.3); 
}
.nav-logo-img { 
    width: 1.5rem; 
    filter: brightness(0) invert(1); 
}
.nav-list { 
    display: flex; 
    column-gap: 3rem; 
}
.nav-link, .nav-toggle { SEEKINGcolor: var(--title-color); 
}
.nav-toggle { font-size: 1.2rem; cursor: pointer; }
.nav-link { 
    font-weight: var(--font-medium); 
    padding: 0.5rem 1rem; 
    border-radius: 1rem; 
    transition: background 0.3s ease, color 0.3s ease; 
}
.nav-link:hover, .active-link { 
    background: var(--glass-bg); 
    color: var(--main-color); 
}
.nav-close { 
    font-size: 1.2rem; 
    position: absolute; 
    top: 1rem; 
    right: 1.25rem; 
    cursor: pointer; 
}
.nav-toggle, .nav-close { display: none; }
.scroll-header { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }

/* Home */
.home { 
    padding: 12rem 0 5rem; 
    background: radial-gradient(circle at top left, rgba(240, 8, 47, 0.15), transparent 70%); 
}
.home-data { align-self: center; }
.home-title { 
    font-size: var(--big-font-size); 
    line-height: 120%; 
    margin-bottom: var(--mb1-5); 
    animation: slideIn 0.8s ease-out; 
}
.home-title span { 
    background: var(--gradient-main); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
}
.home-description { 
    margin-bottom: var(--mb2-5); 
    line-height: 2.2rem; 
    font-weight: 300; 
    color: #D1D5DB; 
    max-width: 600px; 
}

/* Features */
.features {
    position: relative;
    padding: 8rem 0 4rem;
    overflow: hidden;
}
.features-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(240, 8, 47, 0.15), transparent 70%);
    z-index: -1;
}
.feature-container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    align-items: center;
}
.feature-img {
    position: relative;
    padding: 2rem;
    background: rgba(25, 29, 40, 0.9);
    border-radius: 2rem;
    box-shadow: var(--shadow-neu);
    transition: transform 0.3s ease;
}
.feature-img:hover {
    transform: scale(1.05);
}
.banner-app-mock {
    transform: rotate(5deg);
    transition: transform 0.3s ease;
}
.feature-img:hover .banner-app-mock {
    transform: rotate(0deg);
}
.feature-inside {
    align-self: center;
}
.feature-inside ul {
    display: grid;
    gap: 1.5rem;
}
.feature-inside ul li {
    background: var(--dark-color-alt);
    border-radius: 1.5rem;
    padding: 1.5rem 1.5rem 1.5rem 80px;
    position: relative;
    box-shadow: var(--shadow-neu);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-inside ul li:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}
.feature-inside ul li img {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    transition: transform 0.3s ease;
}
.feature-inside ul li:hover img {
    transform: translateY(-50%) scale(1.1) rotate(10deg);
}
.feature-inside h3 {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb0-75);
    color: var(--title-color);
    transition: color 0.3s ease;
}
.feature-inside ul li:hover h3 {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.feature-inside p {
    font-size: var(--small-font-size);
    font-weight: 300;
    color: #D1D5DB;
    line-height: 1.6;
}
.btn-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: var(--mb2);
}
.btn-group .button {
    background: var(--dark-color-alt);
    padding: 1rem 2rem;
    border-radius: 2rem;
    box-shadow: var(--shadow-neu);
    font-size: var(--normal-font-size);
    transition: all 0.3s ease;
}
.btn-group .button:hover {
    background: var(--gradient-main);
    transform: translateY(-4px);
}
.btn-group .button i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

/* Pricing */
.pricing-container { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pricing-plan { 
    background: var(--dark-color-alt); 
    border-radius: 2rem; 
    overflow: hidden; 
    box-shadow: var(--shadow-neu); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.pricing-plan:hover { 
    transform: translateY(-10px) rotate(1deg); 
    box-shadow: var(--shadow-hover); 
}
.pricing-header { 
    padding: 1.5rem; 
    background: var(--gradient-main); 
    position: relative; 
}
.pricing-header h3 { font-size: var(--h3-font-size); text-transform: uppercase; letter-spacing: 1px; }
.best-value { 
    position: absolute; 
    right: -50px; 
    top: 20px; 
    width: 200px; 
    background: #FFD700; 
    color: #191D28; 
    text-transform: uppercase; 
    transform: rotate(45deg); 
    font-size: var(--small-font-size); 
    text-align: center; 
    padding: 0.5rem 0; 
}
.pricing-price { 
    padding: 40px 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.pricing-price .currency { font-size: var(--normal-font-size); margin-right: 5px; }
.pricing-price .price { 
    font-size: 3rem; 
    font-weight: var(--font-semi-bold); 
    color: var(--main-color); 
    text-shadow: 0 4px 12px rgba(240, 8, 47, 0.4); 
}
.pricing-price .period { font-size: var(--small-font-size); margin-left: 5px; color: #D1D5DB; }
.pricing-body ul li { 
    font-size: var(--small-font-size); 
    font-weight: 300; 
    padding: 12px 0 12px 40px; 
    position: relative; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}
.pricing-body ul li i { 
    color: var(--main-color); 
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
}
.pricing-footer { padding: 40px; text-align: center; }

/* Testimonials */
.testimonials { 
    padding: 8rem 0 4rem; 
    position: relative; 
}
.team-image-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: var(--mb2-5); 
}
.team-image { 
    max-width: 600px; 
    width: 100%; 
    border-radius: 1.5rem; 
    box-shadow: var(--shadow-soft); 
    transition: transform 0.3s ease; 
}
.team-image:hover { 
    transform: scale(1.05); 
}
.testimonials-container { 
    padding-bottom: 2rem; 
}
.testimonial-item { 
    padding: 2rem; 
    background: var(--dark-color-alt); 
    width: 340px; 
    border-radius: 1.5rem; 
    text-align: center; 
    box-shadow: var(--shadow-neu); 
    transition: transform 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.testimonial-item:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-hover); 
}
.testimonial-item .img-box { 
    width: 120px; 
    height: 120px; 
    margin: 0 auto var(--mb1-5); 
    border: 4px solid var(--main-color); 
    border-radius: 50%; 
    overflow: hidden; 
}
.testimonial-item h3 { 
    font-size: var(--h3-font-size); 
    background: var(--gradient-main); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
}
.testimonial-item span { 
    display: block; 
    margin-bottom: var(--mb0-75); 
    color: #D1D5DB; 
    font-size: var(--small-font-size); 
}
.testimonial-item ul li { 
    display: inline-block; 
    padding-left: 10px; 
}
.testimonial-item ul li a { 
    color: var(--title-color); 
    font-size: 1.2rem; 
    transition: color 0.3s ease; 
}
.testimonial-item:hover ul li a { 
    color: var(--main-color); 
}

/* Accordion */
.accordion {
    position: relative;
    padding: 8rem 0 4rem;
}
.accordion-container {
    align-items: center;
}
.accordion-content {
    align-self: center;
}
.accordion-item { 
    background: var(--dark-color-alt); 
    border-radius: 1.5rem; 
    overflow: hidden; 
    box-shadow: var(--shadow-neu); 
    margin-bottom: var(--mb1); 
}
.accordion-header { 
    padding: 1rem 1.5rem; 
    background: var(--gradient-main); 
    color: var(--title-color); 
    cursor: pointer; 
    position: relative; 
}
.accordion-header h3 {
    font-size: var(--h3-font-size);
}
.accordion-header::before { 
    content: '\f067'; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900; 
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--title-color); 
}
.accordion-item.collapsed .accordion-header::before { 
    content: '\f068'; 
}
.accordion-body { 
    height: 0; 
    overflow: hidden; 
    transition: height 0.3s ease; 
}
.accordion-item.collapsed .accordion-body { 
    height: auto; 
    padding: 1.5rem; 
}
.accordion-body p { 
    font-size: var(--small-font-size); 
    color: #D1D5DB; 
}

/* Contact */
.contact { padding: 8rem 0 4rem; }
.contact .section-title { text-align: left; }
.contact-box { 
    background: var(--dark-color-alt); 
    padding: 2rem; 
    border-radius: 1.5rem; 
    box-shadow: var(--shadow-neu); 
}
.contact-data { display: grid; row-gap: 2rem; }
.contact-subtitle { 
    font-size: var(--normal-font-size); 
    font-weight: var(--font-medium); 
    color: var(--text-color); 
    margin-bottom: var(--mb0-5); 
}
.contact-description { 
    display: inline-flex; 
    align-items: center; 
    column-gap: .5rem; 
    color: var(--title-color); 
    font-weight: var(--font-medium); 
}
.contact-icon { font-size: 1.25rem; }
.contact-inputs { display: grid; row-gap: 2rem; margin-bottom: var(--mb2-5); }
.contact-content { 
    position: relative; 
    height: 3rem; 
    background: var(--dark-color); 
    border-radius: 0.5rem; 
    overflow: hidden; 
}
.contact-content span { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background: var(--main-color); 
    transition: width 0.3s ease; 
}
.contact-input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    padding: 1rem; 
    background: none; 
    color: var(--text-color); 
    outline: none; 
    border: none; 
    z-index: 1; 
}
.contact-input:focus ~ span { width: 100%; }
.contact-label { 
    position: absolute; 
    top: 0.75rem; 
    left: 1rem; 
    font-size: var(--small-font-size); 
    color: #D1D5DB; 
    transition: 0.3s ease; 
}
.contact-input:focus + .contact-label { 
    top: -0.75rem; 
    font-size: var(--smaller-font-size); 
    color: var(--main-color); 
    background: var(--dark-color); 
    padding: 0 0.25rem; 
}
.contact-area { height: 7rem; }
.contact-area textarea { resize: none; }

/* Footer */
.footer { padding: 4rem 0 2rem; }
.footer-container { 
    grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr; 
    column-gap: 3rem; 
    padding: 4rem 0; 
    background: var(--dark-color-alt); 
    border-radius: 2rem 2rem 0 0; 
}
.footer-logo { 
    display: flex; 
    align-items: center; 
    column-gap: .5rem; 
    margin-bottom: var(--mb2); 
    font-family: var(--logo-font); 
    font-size: 1.5rem; 
    color: var(--main-color); 
}
.footer-logo-img { width: 20px; }
.footer-title { font-size: var(--h3-font-size); margin-bottom: var(--mb1-5); }
.footer-subscribe { 
    background: var(--dark-color); 
    padding: 0.75rem; 
    display: flex; 
    justify-content: space-between; 
    border-radius: 2rem; 
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2); 
}
.footer-input { 
    width: 70%; 
    padding: 0 0.5rem; 
    background: none; 
    border: none; 
    outline: none; 
    color: var(--text-color); 
}
.footer-button { padding: 1rem; background: var(--gradient-main); border-radius: 2rem; }
.footer-data { display: grid; row-gap: .75rem; }
.footer-information-link a { 
    color: var(--text-color); 
    font-size: var(--small-font-size); 
    transition: color 0.3s ease; 
}
.footer-information-link:hover a { color: var(--main-color); }
.footer-information { font-size: var(--small-font-size); }
.footer-social { display: inline-flex; column-gap: .75rem; }
.footer-social-link { 
    font-size: 1rem; 
    color: var(--text-color); 
    transition: color 0.3s ease; 
}
.footer-social-link:hover { color: var(--main-color); }
.footer-copy { 
    margin: 7rem 0 2rem; 
    text-align: center; 
    font-size: var(--smaller-font-size); 
    color: #D1D5DB; 
}
.footer-copy span { font-family: var(--logo-font); color: var(--main-color); }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Media Queries */
@media (max-width: 1200px) {
    .container { margin-left: var(--mb1-5); margin-right: var(--mb1-5); }
}

@media (max-width: 992px) {
    .home-description { line-height: 1.8rem; }
    .pricing-container, .footer-container { grid-template-columns: repeat(2, 1fr); }
    .home-container, .feature-container, .accordion-container, .contact-container { 
        grid-template-columns: 1fr; 
        row-gap: 2rem; 
    }
    .feature-img { margin: 0 auto; }
    .team-image { max-width: 400px; }
}

@media (max-width: 767px) {
    body { margin: var(--header-height) 0 0 0; }
    .nav { height: var(--header-height); }
    .nav-list { flex-direction: column; row-gap: 1.5rem; }
    .nav-menu { 
        position: fixed; 
        background: rgba(25, 29, 40, 0.95); 
        backdrop-filter: blur(12px); 
        width: 88%; 
        height: 100%; 
        top: 0; 
        right: -100%; 
        padding: 4rem 0 0 3rem; 
        box-shadow: -2px 0 4px var(--dark-color); 
        border-radius: 1rem 0 0 1rem; 
        z-index: var(--z-fixed); 
        transition: right 0.3s ease; 
    }
    .nav-close, .nav-toggle { display: inline-flex; }
    .show-menu { right: 0; }
    .home { padding: 5.5rem 0 1rem; }
    .section { padding: 5.5rem 0 1rem; }
    .pricing-container, .footer-container { grid-template-columns: 1fr; }
    .feature-img { padding: 1rem; }
    .btn-group { flex-direction: column; align-items: center; }
    .testimonial-item { width: 252px; }
    .contact-box { text-align: center; }
    .footer-content { text-align: center; }
    .footer-subscribe { margin-inline: auto; width: 320px; }
    .team-image { max-width: 300px; }
}

@media (max-width: 392px) {
    .container { margin-left: var(--mb1); margin-right: var(--mb1); }
    .home-title { font-size: var(--h1-font-size); }
    .home-description { line-height: 1.4rem; }
    .footer-subscribe { width: initial; }
    .team-image { max-width: 250px; }
}

JS

//Testimonial Swiper

var testimonialSwiper = new Swiper(".testimonials-swiper", {
    slidesPerView: "auto",
    centeredSlides: true,
    spaceBetween: 32,
    loop: true,
  });

//Accordion FAQ

let accordion = document.querySelector('.accordion-content');
let header = document.querySelectorAll('.accordion-header');
let item = document.querySelectorAll('.accordion-item');

header.forEach(headers => headers.addEventListener('click', toggleAccordion));
function toggleAccordion() {
    thisItem = this.parentNode;
    item.forEach(items => {
        if(thisItem == items){
            thisItem.classList.toggle('collapsed');
            return;
        }
        items.classList.remove('collapsed');
    })
}

// Menu Mobile

const navMenu = document.getElementById('nav-menu');
const navToggle = document.getElementById('nav-toggle');
const navClose = document.getElementById('nav-close');

if(navToggle){ navToggle.addEventListener('click', () => { navMenu.classList.add('show-menu')} )}
if(navClose){ navClose.addEventListener('click', () => { navMenu.classList.remove('show-menu')} )}

// Removing Menu Mobile when clicking in menu

const navLink = document.querySelectorAll('.nav-link');
function linkAction() {
    const navMenu = document.getElementById('nav-menu');
    navMenu.classList.remove('show-menu');
}
navLink.forEach(n => n.addEventListener('click', linkAction));

// Changing Background

// Active Link Change while scrolling

const sections = document.querySelectorAll('section[id]');

function scrollActive(){
    const scrollY = window.pageYOffset;
    sections.forEach(current => {
        const sectionHeight = current.offsetHeight;
        const sectionTop = current.offsetTop - 58;
        const sectionId = current.getAttribute('id');

if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link');
        }else{
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link');
        }
    })
}
window.addEventListener('scroll', scrollActive);

Empfohlen

Teams-Seite – Futuristisches Design

CodePen – Blumen zeichnen mit Greensock

Kreativdesigner-Portfolio – Alex

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS