now you are an expert frontend web developer. as expert frontend web developer you will help me make my website design better. 
Here are my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechSolutions Inc.</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top glass-nav">
        <a class="navbar-brand" href="#">TechSolutions Inc.</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <header class="jumbotron text-center parallax;">
        <div class="glass-hero">
            <h1 class="display-4">TechSolutions Inc.</h1>
            <p class="lead">Empowering Your Digital Future</p>
            <a href="#about" class="btn btn-primary btn-lg mt-3">Learn More</a>
        </div>
    </header>

    <!-- About Section -->
    <section id="about" class="container mt-5 section">
        <div class="glass p-4">
            <h2>About Us</h2>
            <p>TechSolutions Inc. is a premier provider of cutting-edge technology solutions and consulting services. Our mission is to help businesses harness the power of technology to drive innovation and achieve their goals.</p>
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="advantage glass p-3">
                        <h3>Innovation</h3>
                        <p>We foster innovation to create solutions that keep you ahead of the curve.</p>
                        <img src="https://images.pexels.com/photos/3184298/pexels-photo-3184298.jpeg" alt="Innovation" class="img-fluid">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="advantage glass p-3">
                        <h3>Expertise</h3>
                        <p>Our team of experts provides top-notch consulting and support.</p>
                        <img src="https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg" alt="Expertise" class="img-fluid">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="advantage glass p-3">
                        <h3>Support</h3>
                        <p>24/7 support to ensure your operations run smoothly.</p>
                        <img src="https://images.pexels.com/photos/3182822/pexels-photo-3182822.jpeg" alt="Support" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="container mt-5 section">
        <h2>Our Services</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="glass p-3">
                    <h3><i class="fas fa-lightbulb"></i> Consulting</h3>
                    <p>Expert advice to optimize your IT infrastructure and business processes.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass p-3">
                    <h3><i class="fas fa-cogs"></i> Product Development</h3>
                    <p>Developing bespoke software solutions tailored to your needs.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass p-3">
                    <h3><i class="fas fa-headset"></i> Customer Support</h3>
                    <p>24/7 support to ensure your operations run smoothly.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="container mt-5 section parallax"> 
        <h2>Our Portfolio</h2>
        <div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <img src="https://images.pexels.com/photos/3184298/pexels-photo-3184298.jpeg" class="card-img-top" alt="Project 1">
                                <div class="card-body">
                                    <h5 class="card-title">Project 1</h5>
                                    <p class="card-text">Description of Project 1.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <img src="https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg" class="card-img-top" alt="Project 2">
                                <div class="card-body">
                                    <h5 class="card-title">Project 2</h5>
                                    <p class="card-text">Description of Project 2.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <img src="https://images.pexels.com/photos/3182822/pexels-photo-3182822.jpeg" class="card-img-top" alt="Project 3">
                                <div class="card-body">
                                    <h5 class="card-title">Project 3</h5>
                                    <p class="card-text">Description of Project 3.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <img src="https://images.pexels.com/photos/3184300/pexels-photo-3184300.jpeg" class="card-img-top" alt="Project 4">
                                <div class="card-body">
                                    <h5 class="card-title">Project 4</h5>
                                    <p class="card-text">Description of Project 4.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <img src="https://images.pexels.com/photos/3183198/pexels-photo-3183198.jpeg" class="card-img-top" alt="Project 5">
                                <div class="card-body">
                                    <h5 class="card-title">Project 5</h5>
                                    <p class="card-text">Description of Project 5.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <img src="https://images.pexels.com/photos/3182821/pexels-photo-3182821.jpeg" class="card-img-top" alt="Project 6">
                                <div class="card-body">
                                    <h5 class="card-title">Project 6</h5>
                                    <p class="card-text">Description of Project 6.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#portfolio-carousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#portfolio-carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="container mt-5 mb-5 section">
        <div class="row">
            <div class="col-md-6">
                <div class="glass p-4">
                    <h2>Contact Us</h2>
                    <form>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email address</label>
                            <input type="email" class="form-control" id="email" placeholder="Enter your email">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control" id="message" rows="3" placeholder="Your message"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
            <div class="col-md-6">
                <div class="glass p-4">
                    <h2>Contact Information</h2>
                    <p><i class="fas fa-map-marker-alt"></i> 123 Tech Street, Innovation City, Techland</p>
                    <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
                    <p><i class="fas fa-envelope"></i> contact@techsolutions.com</p>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.2340912908354!2d144.9643013153156!3d-37.808215979752476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d5e6f282a41%3A0x5045675218ceed7f!2sTech%20Street%2C%20Melbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1599210453180!5m2!1sen!2sus" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="text-center py-4 glass-footer">
        <p>&copy; 2024 TechSolutions Inc. All rights reserved.</p>
        <p>Follow us: 
            <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>
        </p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>
</html>


CSS
/* General Styles */
body {
    font-family: 'Montserrat', Arial, sans-serif;
    background: linear-gradient(135deg, #000046, #1CB5E0);
    color: #fff;
    font-size: 1rem; /* base font size */
}

.section {
    padding: 60px 0;
}

.glass-hero {
    background: rgba(255, 255, 255, 0.15);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-block;
    animation: fadeIn 1.5s ease-in-out;
}

.glass {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s, box-shadow 0.3s;
}

.glass:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* Navigation Bar */
.glass-nav {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.navbar-nav .nav-item .nav-link {
    color: #fff;
    transition: color 0.3s;
    font-size: 1rem;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #ffd700;
}

/* Hero Section */
header.jumbotron {
    background: url('https://images.pexels.com/photos/3184298/pexels-photo-3184298.jpeg') no-repeat center center;
    background-size: cover;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

header .glass {
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
}

header h1 {
    color: #fff;
    font-size: 3rem;
}

header p {
    color: #fff;
    font-size: 1.25rem;
}

header .btn {
    margin-top: 20px;
    animation: float 4s ease-in-out infinite;
    font-size: 1rem;
}

/* Floating Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* About Section */
#about .advantage {
    margin-bottom: 30px;
}

#about .advantage img {
    margin-top: 15px;
    border-radius: 10px;
    width: 100%;
}

#about h2 {
    font-size: 2rem;
}

#about p {
    font-size: 1rem;
}

/* Services Section */
#services h3 i {
    margin-right: 10px;
    color: #ffd700;
}

#services h3 {
    font-size: 1.5rem;
}

#services p {
    font-size: 1rem;
}

/* Portfolio Section */
#portfolio h2 {
    padding-left: 20px;
    font-size: 2rem;
}

#portfolio .carousel-inner {
    padding: 20px;
}

#portfolio .carousel-item {
    transition: transform 1s ease-in-out;
}

#portfolio .card {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s, box-shadow 0.3s;
}

#portfolio .card img {
    border-radius: 10px 10px 0 0;
}

#portfolio .card:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

#portfolio .card h5 {
    font-size: 1.25rem;
}

#portfolio .card p {
    font-size: 1rem;
}

/* Contact Section */
#contact .form-group input,
#contact .form-group textarea {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1rem;
}

/* Footer */
.glass-footer {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1rem;
    text-align: center;
}

.glass-footer a {
    color: #ffd700;
    margin: 0 10px;
    font-size: 1rem;
}

.glass-footer a:hover {
    color: #ffeb3b;
}

/* Keyframes for Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Parallax Effect */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.parallax:nth-child(odd) {
    background-image: url('https://images.pexels.com/photos/3184298/pexels-photo-3184298.jpeg');
}

.parallax:nth-child(even) {
    background-image: url('https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg');
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }

    .carousel-item {
        display: block;
    }

    #about .row, #services .row, #portfolio .row {
        flex-direction: column;
    }

    header.jumbotron {
        height: 70vh;
    }

    header .glass {
        padding: 1rem;
    }

    header h1 {
        font-size: 2.5rem;
    }

    header p {
        font-size: 1rem;
    }

    header .btn {
        font-size: 0.875rem;
    }

    #portfolio h2 {
        padding-left: 0;
        text-align: center;
        font-size: 1.75rem;
    }

    #about h2, #services h3, #portfolio .card h5 {
        font-size: 1.5rem;
    }

    .glass {
        padding: 1rem;
    }

    .section {
        padding: 40px 0;
    }

    #contact .form-group input,
    #contact .form-group textarea,
    .glass-footer a {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 2rem;
    }

    header p {
        font-size: 0.875rem;
    }

    header .btn {
        font-size: 0.75rem;
    }

    #about h2, #services h3, #portfolio .card h5 {
        font-size: 1.25rem;
    }

    #portfolio h2 {
        font-size: 1.5rem;
    }

    .section {
        padding: 20px 0;
    }

    #contact .form-group input,
    #contact .form-group textarea,
    .glass-footer a {
        font-size: 0.75rem;
    }
}


Javascript
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    alert('Form submitted!');
});

// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Animation on scroll
window.addEventListener('scroll', function() {
    const elements = document.querySelectorAll('.glass');
    const viewportHeight = window.innerHeight;

    elements.forEach(element => {
        const elementTop = element.getBoundingClientRect().top;
        
        if (elementTop < viewportHeight - 100) {
            element.classList.add('animate');
        }
    });
});

// Initialize Bootstrap Carousel
$('#portfolio-carousel').carousel({
    interval: 3000, // Change slide every 3 seconds
});

$(document).ready(function() {
    $('.carousel').carousel({
        interval: 3000
    });
});


I want understand my code at first