```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetSlice Bakery | About Us</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@600&display=swap" rel="stylesheet">
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Global Styles */
        :root {
            --swirl-pink: #ffcbdb;
            --cake-white: #fff7fa;
            --sprinkle-blue: #87ceeb;
            --candle-red: #ff6b6b;
            --dark-chocolate: #543d2e;
            --icing-purple: #d6b3f0;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--cake-white);
            color: var(--dark-chocolate);
            line-height: 1.6;
        }

        h1, h2, h3 {
            font-family: 'Dancing Script', cursive;
            font-weight: 600;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 2.5rem;
            color: var(--dark-chocolate);
            position: relative;
        }

        .section-title:after {
            content: "";
            position: absolute;
            width: 100px;
            height: 4px;
            background: linear-gradient(to right, var(--swirl-pink), var(--icing-purple));
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

        /* Header Styles */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            font-family: 'Dancing Script', cursive;
            font-size: 2.5rem;
            color: var(--candle-red);
            font-weight: 600;
        }

        .logo span {
            color: var(--sprinkle-blue);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        nav a {
            text-decoration: none;
            color: var(--dark-chocolate);
            font-weight: 500;
            font-size: 1.1rem;
            transition: color 0.3s;
            position: relative;
        }

        nav a:hover {
            color: var(--candle-red);
        }

        nav a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--candle-red);
            transition: width 0.3s;
        }

        nav a:hover:after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            height: 75vh;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), 
                        url('https://source.unsplash.com/1600x900/?birthday,cake,decorated');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }

        .hero-content {
            max-width: 800px;
            padding: 0 20px;
        }

        .hero-title {
            font-size: 5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            animation: fadeIn 1.5s ease-out;
        }

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

        .hero-subtitle {
            font-size: 1.5rem;
            font-weight: 300;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }

        /* Our Story Section */
        .story-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .story-image {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: transform 0.3s;
        }

        .story-image:hover {
            transform: translateY(-10px);
        }

        .story-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .story-text h2 {
            color: var(--candle-red);
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .story-text p {
            margin-bottom: 20px;
            line-height: 1.8;
        }

        /* Team Section */
        .team-section {
            background-color: white;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .team-member {
            background: var(--cake-white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .team-member:hover {
            transform: translateY(-10px);
        }

        .team-img {
            height: 300px;
            overflow: hidden;
        }

        .team-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .team-member:hover .team-img img {
            transform: scale(1.1);
        }

        .team-info {
            padding: 20px;
            text-align: center;
        }

        .team-info h3 {
            font-size: 1.8rem;
            margin: 10px 0 5px;
        }

        .team-info p {
            color: var(--candle-red);
            font-style: italic;
        }

        /* Values Section */
        .values-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .value-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-top: 5px solid var(--swirl-pink);
            transition: transform 0.3s;
        }

        .value-card:hover {
            transform: scale(1.05);
        }

        .value-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--candle-red);
        }

        .value-card h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

        /* Contact Banner */
        .contact-banner {
            background: linear-gradient(135deg, var(--swirl-pink), var(--icing-purple));
            padding: 60px 0;
            text-align: center;
            color: white;
        }

        .contact-banner h2 {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        /* Footer */
        footer {
            background-color: var(--dark-chocolate);
            color: white;
            padding: 60px 0 30px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-col h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--sprinkle-blue);
        }

        .footer-col p {
            margin-bottom: 20px;
            line-height: 1.8;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: var(--candle-red);
            border-radius: 50%;
            color: white;
            text-align: center;
            line-height: 40px;
            transition: transform 0.3s;
        }

        .social-links a:hover {
            transform: translateY(-5px);
            background: var(--sprinkle-blue);
        }

        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 0.9rem;
        }

        /* Responsive Styles */
        @media (max-width: 900px) {
            .section-title {
                font-size: 2.5rem;
            }

            .hero-title {
                font-size: 3.5rem;
            }

            .story-content {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            nav {
                display: none;
            }

            .hero-title {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .menu-toggle {
                display: block;
                font-size: 1.5rem;
                cursor: pointer;
            }
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--candle-red);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 500;
            transition: background-color 0.3s, transform 0.3s;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        }

        .btn:hover {
            background-color: var(--sprinkle-blue);
            transform: translateY(-3px);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">Sweet<span>Slice</span></div>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#" class="active">About Us</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
                <div class="menu-toggle">☰</div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">About SweetSlice Bakery</h1>
            <p class="hero-subtitle">Celebrating life's sweetest moments with artisanal cakes since 2005</p>
            <a href="#" class="btn">Our Story</a>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="our-story">
        <div class="container">
            <h2 class="section-title">Our Sweet Beginning</h2>
            <div class="story-content">
                <div class="story-image">
                    <img src="https://source.unsplash.com/600x600/?bakery,interior" alt="Bakery Interior">
                </div>
                <div class="story-text">
                    <h2>From a small kitchen to your celebrations</h2>
                    <p>Founded in 2005 by pastry chef Emma Richardson, SweetSlice began in a modest home kitchen with a passion for transforming simple ingredients into extraordinary cake experiences. What started as weekend baking for friends blossomed into a beloved local bakery when Emma's handcrafted creations captured hearts at the town's annual bake sale.</p>
                    <p>Today, we continue Emma's tradition of exceptional craftsmanship while expanding our offerings to include modern flavors, vegan and gluten-free options, and custom designs that turn visions into edible art. Our team of dedicated bakers still makes every cake from scratch using only premium ingredients and time-honored techniques.</p>
                    <p>Our goal has always been simple: to create unforgettable cake moments that become the sweet centerpiece of life's most cherished celebrations.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="team-section">
        <div class="container">
            <h2 class="section-title">Our Baking Artists</h2>
            <div class="team-grid">
                <div class="team-member">
                    <div class="team-img">
                        <img src="https://source.unsplash.com/600x600/?baker,woman" alt="Head Baker">
                    </div>
                    <div class="team-info">
                        <h3>Emma Richardson</h3>
                        <p>Head Baker & Founder</p>
                    </div>
                </div>
                <div class="team-member">
                    <div class="team-img">
                        <img src="https://source.unsplash.com/600x600/?chef,woman" alt="Cake Designer">
                    </div>
                    <div class="team-info">
                        <h3>Sophie Martinez</h3>
                        <p>Master Cake Designer</p>
                    </div>
                </div>
                <div class="team-member">
                    <div class="team-img">
                        <img src="https://source.unsplash.com/600x600/?baker,man" alt="Pastry Chef">
                    </div>
                    <div class="team-info">
                        <h3>James Peterson</h3>
                        <p>Pastry Chef</p>
                    </div>
                </div>
                <div class="team-member">
                    <div class="team-img">
                        <img src="https://source.unsplash.com/600x600/?baker,portrait" alt="Cake Decorator">
                    </div>
                    <div class="team-info">
                        <h3>Lily Chang</h3>
                        <p>Lead Decorator</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="values">
        <div class="container">
            <h2 class="section-title">Our Secret Ingredients</h2>
            <div class="values-container">
                <div class="value-card">
                    <div class="value-icon">🍰</div>
                    <h3>Craftsmanship</h3>
                    <p>Every cake is made entirely from scratch using techniques perfected over decades. We never use pre-mixes or shortcuts.</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">🌱</div>
                    <h3>Quality Ingredients</h3>
                    <p>We source premium local ingredients - organic dairy, farm-fresh eggs, and seasonal fruits for honest, pure flavors.</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">❤️</div>
                    <h3>Personal Connection</h3>
                    <p>We listen to understand your vision and ensure your cake makes your celebration extra special and uniquely yours.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Banner -->
    <section class="contact-banner">
        <div class="container">
            <h2>Ready for Your Sweet Celebration?</h2>
            <p>Let us create the perfect cake for your next memorable moment</p>
            <a href="#" class="btn">Order Your Cake Today</a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>SweetSlice Bakery</h3>
                    <p>Creating extraordinary moments with extraordinary cakes since 2005. From intimate gatherings to royal celebrations - we bake happiness!</p>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook">f</a>
                        <a href="#" aria-label="Instagram">i</a>
                        <a href="#" aria-label="Twitter">t</a>
                        <a href="#" aria-label="Pinterest">p</a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Visit Us</h3>
                    <p>123 Sugar Lane, Sweetville SW 1001</p>
                    <p>Open Tuesday - Sunday: 9am - 7pm</p>
                    <p>Monday: Closed</p>
                </div>
                <div class="footer-col">
                    <h3>Contact</h3>
                    <p>Phone: (123) 456-7890</p>
                    <p>Email: hello@sweetslice.com</p>
                    <p>Fax: (123) 456-7891</p>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 SweetSlice Bakery. All rights reserved. Handcrafted with love and extra frosting.</p>
            </div>
        </div>
    </footer>
</body>
</html>
```

This modern, responsive "About Us" page for a bakery called "SweetSlice" includes:

1. **Semantic HTML Structure**: Properly organized with header, main content sections, and footer
2. **Birthday Cake Theme**: Cake-inspired design elements with pastel colors and sweet aesthetics
3. **Modern Features**:
   - Hero section with stunning cake background
   - Responsive grid layouts 
   - Interactive hover animations
   - Subtle gradients and shadows
   - High-quality placeholder images
4. **Key Sections**:
   - Our Story timeline
   - Team member profiles
   - Core values displayed in cards
   - Contact and location information
5. **Mobile-Friendly**: Responsive design adapts seamlessly to all screen sizes
6. **Clean Typography**: Combination of elegant script and modern sans-serif fonts
7. **No External Dependencies**: All CSS contained within the HTML file

The design uses a warm, inviting color palette with cake-inspired tones like swirl pink, icing purple, and sprinkle blue that evoke the joy of birthday celebrations while maintaining professional aesthetics.