简约拟态博客网页源码 (大作业html)

原创于 2025-05-13 22:34:32 发布 · 236 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#课程设计 #html #前端
前端同时被 2 个专栏收录
20 篇文章
订阅专栏
前端demo
14 篇文章
订阅专栏
「简约博客网页」
链接：https://pan.quark.cn/s/74cbfa52edbe

链接：https://pan.quark.cn/s/74cbfa52edbe

链接：https://pan.quark.cn/s/74cbfa52edbe
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简约拟态博客 - 首页</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #e0e5ec;
            --primary-text-color: #525f7f; /* 深灰色，用于主要文本 */
            --secondary-text-color: #8898aa; /* 浅灰色，用于次要文本 */
            --accent-color: #3498db; /* 强调色，如蓝色 */
            --accent-color-darker: #2980b9;
            --container-padding: 25px;
            --border-radius-main: 20px;
            --border-radius-small: 12px;

            /* Neumorphism Shadows */
            --shadow-outer-light: rgba(255, 255, 255, 0.8);
            --shadow-outer-dark: rgba(163, 177, 198, 0.6);
            --shadow-inner-light: rgba(255, 255, 255, 0.7);
            --shadow-inner-dark: rgba(193, 204, 218, 0.7);

            --box-shadow-concave: inset 6px 6px 12px var(--shadow-inner-dark),
                                  inset -6px -6px 12px var(--shadow-inner-light);
            --box-shadow-convex: 6px 6px 12px var(--shadow-outer-dark),
                                -6px -6px 12px var(--shadow-outer-light);
            --box-shadow-flat: 3px 3px 6px var(--shadow-outer-dark),
                               -3px -3px 6px var(--shadow-outer-light);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--bg-color);
            color: var(--primary-text-color);
            line-height: 1.8;
            overflow-x: hidden; /* 防止水平滚动条 */
        }

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

        /* Header */
        .main-header {
            padding: 20px 0;
            background-color: var(--bg-color);
        }

        .main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0;
            padding-bottom: 0;
        }

        .logo {
            font-size: 1.8em;
            font-weight: 700;
            color: var(--primary-text-color);
            text-decoration: none;
            padding: 10px 15px;
            border-radius: var(--border-radius-small);
            box-shadow: var(--box-shadow-flat);
            transition: all 0.3s ease;
        }
        .logo:hover {
            box-shadow: var(--box-shadow-concave);
            color: var(--accent-color);
        }

        .main-nav ul {
            list-style: none;
            display: flex;
        }

        .main-nav ul li {
            margin-left: 20px;
        }

        .main-nav ul li a {
            text-decoration: none;
            color: var(--secondary-text-color);
            font-weight: 500;
            padding: 10px 15px;
            border-radius: var(--border-radius-small);
            transition: all 0.3s ease;
            box-shadow: var(--box-shadow-flat);
        }

        .main-nav ul li a:hover,
        .main-nav ul li a.active {
            color: var(--accent-color);
            box-shadow: var(--box-shadow-concave);
        }


        /* Hero Section */
        .hero {
            height: 75vh;
            min-height: 450px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: var(--container-padding);
            background: url('https://picsum.photos/seed/techblog/1920/1080') no-repeat center center/cover;
            position: relative;
            border-radius: 0 0 var(--border-radius-main) var(--border-radius-main); /* Rounded bottom corners */
            overflow: hidden; /* For pseudo-element overlay */
            box-shadow: var(--box-shadow-convex); /* Give the hero section a slight pop */
            margin-bottom: 50px;
        }

        .hero::before { /* Overlay for better text readability */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(224, 229, 236, 0.3); /* Slight bg-color tint */
            backdrop-filter: blur(3px); /* Frosted glass effect */
        }

        .hero-content {
            position: relative; /* To be above the overlay */
            z-index: 1;
            padding: 30px;
            background-color: rgba(224, 229, 236, 0.7); /* Semi-transparent bg for content box */
            border-radius: var(--border-radius-main);
            box-shadow: var(--box-shadow-convex);
        }

        .hero-title {
            font-size: 3.5em;
            font-weight: 700;
            color: var(--primary-text-color);
            margin-bottom: 0.3em;
            letter-spacing: 1px;
        }

        .hero-subtitle {
            font-size: 1.5em;
            color: var(--secondary-text-color);
            margin-bottom: 1.2em;
            font-weight: 300;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 35px;
            background-color: var(--accent-color);
            color: #fff;
            font-size: 1.1em;
            font-weight: 500;
            text-decoration: none;
            border-radius: var(--border-radius-small);
            box-shadow: 4px 4px 8px #b8c1d1, -4px -4px 8px #ffffff; /* Convex for buttons */
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            background-color: var(--accent-color-darker);
            box-shadow: inset 2px 2px 5px #b8c1d1, inset -2px -2px 5px #ffffff; /* Concave on hover */
        }
        .cta-button:active { /* Pressed effect */
             box-shadow: inset 4px 4px 8px #b8c1d1, inset -4px -4px 8px #ffffff;
        }


        /* Section Styling */
        .section {
            padding: 50px var(--container-padding);
            margin-bottom: 40px;
        }
        .section-title {
            text-align: center;
            font-size: 2.5em;
            color: var(--primary-text-color);
            margin-bottom: 40px;
            font-weight: 600;
            position: relative;
            padding-bottom: 10px;
        }
        .section-title::after { /* Subtle underline */
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--accent-color);
            border-radius: 2px;
            box-shadow: var(--box-shadow-flat);
        }

        /* Blog Posts Grid */
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .post-card {
            background-color: var(--bg-color);
            border-radius: var(--border-radius-main);
            padding: 25px;
            box-shadow: var(--box-shadow-convex);
            transition: all 0.3s ease-out;
            display: flex;
            flex-direction: column;
        }

        .post-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 10px 10px 20px var(--shadow-outer-dark),
                        -10px -10px 20px var(--shadow-outer-light);
        }

        .post-card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: var(--border-radius-small);
            margin-bottom: 20px;
            box-shadow: var(--box-shadow-flat); /* Slight shadow for image itself */
        }

        .post-card-category {
            display: inline-block;
            padding: 5px 10px;
            background-color: var(--accent-color);
            color: white;
            border-radius: 5px;
            font-size: 0.8em;
            margin-bottom: 10px;
            align-self: flex-start; /* Align to the start of the flex container */
            box-shadow: var(--box-shadow-flat);
        }
         .post-card-category:hover {
            background-color: var(--accent-color-darker);
        }


        .post-card-title {
            font-size: 1.6em;
            font-weight: 600;
            color: var(--primary-text-color);
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .post-card-excerpt {
            font-size: 0.95em;
            color: var(--secondary-text-color);
            flex-grow: 1; /* Allows excerpt to take available space */
            margin-bottom: 20px;
        }

        .post-card-readmore {
            align-self: flex-start; /* Align button to left */
            text-decoration: none;
            color: var(--accent-color);
            font-weight: 500;
            padding: 8px 15px;
            border-radius: var(--border-radius-small);
            box-shadow: var(--box-shadow-flat);
            transition: all 0.3s ease;
        }
        .post-card-readmore:hover {
            background-color: var(--accent-color);
            color: white;
            box-shadow: var(--box-shadow-concave);
        }

        /* About Section */
        .about-section .container {
            background-color: var(--bg-color);
            border-radius: var(--border-radius-main);
            padding: 40px;
            box-shadow: var(--box-shadow-convex);
            display: flex; /* For potential image + text layout */
            align-items: center;
            gap: 30px;
        }
        .about-image {
            width: 200px;
            height: 200px;
            border-radius: 50%; /* Circular image */
            object-fit: cover;
            box-shadow: var(--box-shadow-convex);
            flex-shrink: 0; /* Prevent image from shrinking */
        }
        .about-content p {
            margin-bottom: 15px;
            font-size: 1.05em;
        }

        /* Footer */
        .main-footer {
            text-align: center;
            padding: 30px var(--container-padding);
            background-color: var(--bg-color);
            margin-top: 50px;
            border-top-left-radius: var(--border-radius-main);
            border-top-right-radius: var(--border-radius-main);
            box-shadow: inset 4px 4px 8px var(--shadow-inner-dark),
                        inset -4px -4px 8px var(--shadow-inner-light); /* Inner shadow for footer container */
        }
        .social-links {
            margin-bottom: 15px;
        }
        .social-links a {
            margin: 0 12px;
            display: inline-block;
            padding: 12px;
            border-radius: 50%;
            background-color: var(--bg-color);
            box-shadow: var(--box-shadow-convex);
            transition: all 0.3s ease;
        }
        .social-links a img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
        }
        .social-links a:hover {
            box-shadow: var(--box-shadow-concave);
            transform: translateY(-3px);
        }
        .social-links a:hover img {
             filter: brightness(0.8) sepia(1) hue-rotate(180deg) saturate(5); /* Accent color on hover */
        }

        .copyright {
            font-size: 0.9em;
            color: var(--secondary-text-color);
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 2.8em;
            }
            .hero-subtitle {
                font-size: 1.3em;
            }
            .about-section .container {
                flex-direction: column;
                text-align: center;
            }
            .about-image {
                margin-bottom: 20px;
            }
        }

        @media (max-width: 768px) {
            .main-header .container {
                flex-direction: column;
                align-items: center;
            }
            .main-nav ul {
                margin-top: 20px;
                flex-wrap: wrap; /* Allow nav items to wrap */
                justify-content: center;
            }
            .main-nav ul li {
                margin: 5px 10px;
            }

            .hero {
                height: auto;
                min-height: 350px;
                padding: 20px;
            }
            .hero-title {
                font-size: 2.2em;
            }
            .hero-subtitle {
                font-size: 1.1em;
            }
            .cta-button {
                padding: 12px 25px;
                font-size: 1em;
            }
            .section-title {
                font-size: 2em;
            }
            .posts-grid {
                grid-template-columns: 1fr; /* Stack posts on smaller screens */
            }
            .post-card {
                margin-bottom: 20px;
            }
        }

        @media (max-width: 480px) {
            .logo {
                font-size: 1.5em;
            }
            .hero-title {
                font-size: 1.8em;
            }
            .hero-subtitle {
                font-size: 1em;
            }
            .container {
                width: 95%;
            }
            .post-card-title {
                font-size: 1.4em;
            }
            .social-links a {
                margin: 0 8px;
                padding: 10px;
            }
            .social-links a img {
                width: 20px;
                height: 20px;
            }
        }

        /* Animation utility classes (can be added by GSAP) */
        .fade-in { opacity: 0; }
        .slide-up { opacity: 0; transform: translateY(30px); }
        .scale-up { opacity: 0; transform: scale(0.9); }

    </style>
</head>
<body>

    <header class="main-header">
        <div class="container">
            <a href="#" class="logo anim-logo">我的博客</a>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html" class="active anim-nav-item">首页</a></li>
                    <li><a href="article.html" class="anim-nav-item">文章</a></li>
                    <li><a href="about.html" class="anim-nav-item">关于</a></li>
                    <li><a href="contact.html" class="anim-nav-item">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="hero-content">
                <h1 class="hero-title anim-hero-title">探索·思考·分享</h1>
                <p class="hero-subtitle anim-hero-subtitle">记录每一点灵感，分享每一次成长。欢迎来到我的数字花园。</p>
                <a href="#latest-posts" class="cta-button anim-hero-cta">开始阅读</a>
            </div>
        </section>

        <section id="latest-posts" class="section latest-posts-section">
            <div class="container">
                <h2 class="section-title anim-section-title">最新博文</h2>
                <div class="posts-grid">
                    <article class="post-card anim-post-card">
                        <img src="https://picsum.photos/seed/post1/600/400" alt="博文封面" class="post-card-image">
                        <span class="post-card-category">技术</span>
                        <h3 class="post-card-title">深入理解现代前端框架的核心原理</h3>
                        <p class="post-card-excerpt">本文将带你探索React、Vue等现代前端框架背后的设计哲学与实现机制，助你成为更优秀的前端开发者...</p>
                        <a href="#" class="post-card-readmore">阅读全文 &rarr;</a>
                    </article>

                    <article class="post-card anim-post-card">
                        <img src="https://picsum.photos/seed/post2/600/400" alt="博文封面" class="post-card-image">
                        <span class="post-card-category">生活</span>
                        <h3 class="post-card-title">极简主义生活方式：少即是多</h3>
                        <p class="post-card-excerpt">分享我实践极简主义的心得体会，从物品整理到心态调整，体验简单生活的快乐与自由，发现生活中的小确幸...</p>
                        <a href="#" class="post-card-readmore">阅读全文 &rarr;</a>
                    </article>

                    <article class="post-card anim-post-card">
                        <img src="https://picsum.photos/seed/post3/600/400" alt="博文封面" class="post-card-image">
                        <span class="post-card-category">思考</span>
                        <h3 class="post-card-title">人工智能时代的批判性思维培养</h3>
                        <p class="post-card-excerpt">在信息爆炸和AI日益普及的今天，如何保持独立思考，培养批判性思维能力？本文将探讨其重要性与实践方法...</p>
                        <a href="#" class="post-card-readmore">阅读全文 &rarr;</a>
                    </article>
                </div>
            </div>
        </section>

        <section class="section about-section">
            <div class="container anim-about-container">
                <img src="https://picsum.photos/seed/avatar/200/200" alt="博主头像" class="about-image anim-about-image">
                <div class="about-content anim-about-content">
                    <h2 class="section-title" style="text-align: left; margin-bottom: 20px;">关于我</h2>
                    <p>你好！我是一名热衷于技术探索与生活分享的博主。这个小站是我记录学习心得、生活感悟和奇思妙想的地方。</p>
                    <p>我坚信持续学习和分享的力量，希望通过文字与你交流，共同成长。如果你对我的内容感兴趣，欢迎常来逛逛！</p>
                </div>
            </div>
        </section>

    </main>

    <footer class="main-footer anim-footer">
        <div class="container">
            <div class="social-links">
                <a href="#" title="GitHub" class="anim-social-icon"><img src="https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/github.svg" alt="GitHub"></a>
                <a href="#" title="LinkedIn" class="anim-social-icon"><img src="https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/linkedin.svg" alt="LinkedIn"></a>
                <a href="#" title="Twitter" class="anim-social-icon"><img src="https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/twitter.svg" alt="Twitter"></a>
                <a href="#" title="Email" class="anim-social-icon"><img src="https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/gmail.svg" alt="Email"></a>
            </div>
            <p class="copyright">&copy; <span id="currentYear"></span> 我的简约拟态博客. 保留所有权利.</p>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            gsap.registerPlugin(ScrollTrigger);

            // 设置当前年份
            document.getElementById('currentYear').textContent = new Date().getFullYear();

            // --- 通用动画函数 ---
            const animateOnScroll = (selector, vars) => {
                gsap.utils.toArray(selector).forEach(elem => {
                    gsap.fromTo(elem,
                        { opacity: 0, y: 50, scale: 0.95, ...vars.from },
                        {
                            opacity: 1,
                            y: 0,
                            scale: 1,
                            duration: 0.8,
                            ease: 'power3.out',
                            scrollTrigger: {
                                trigger: elem,
                                start: 'top 85%', // 元素顶部到达视口85%时触发
                                toggleActions: 'play none none none', // 进入时播放，离开时不反向
                                // markers: true, // 调试用
                                ...vars.scrollTrigger
                            },
                            ...vars.to
                        }
                    );
                });
            };


            // --- 页面加载动画 ---
            const tlOnLoad = gsap.timeline({ defaults: { ease: "power2.out", duration: 0.7 }});

            tlOnLoad
                .fromTo('.anim-logo', {opacity: 0, y: -30}, {opacity: 1, y: 0, duration: 0.5}, 0.2)
                .staggerFromTo('.anim-nav-item', 0.3, {opacity:0, y: -20}, {opacity:1, y:0}, 0.15, "-=0.2")
                .fromTo('.anim-hero-title', {opacity:0, y: 30, scale:0.9}, {opacity:1, y:0, scale:1, duration: 0.8, ease: "elastic.out(1, 0.75)"}, 0.5)
                .fromTo('.anim-hero-subtitle', {opacity:0, y: 20}, {opacity:1, y:0}, "-=0.6")
                .fromTo('.anim-hero-cta', {opacity:0, scale:0.8}, {opacity:1, scale:1, ease: "back.out(1.7)"}, "-=0.4");

            // --- 滚动触发动画 ---

            // Section Titles
            animateOnScroll('.anim-section-title', { from: {y: 30, opacity: 0}, to: {duration: 0.6} });

            // Post Cards (staggered)
             gsap.utils.toArray('.anim-post-card').forEach((card, index) => {
                gsap.fromTo(card,
                    { opacity: 0, y: 60, scale: 0.9 },
                    {
                        opacity: 1,
                        y: 0,
                        scale: 1,
                        duration: 0.7,
                        delay: index * 0.15, // Stagger effect
                        ease: 'power3.out',
                        scrollTrigger: {
                            trigger: card.parentNode, // Trigger based on the grid container
                            start: 'top 80%',
                            toggleActions: 'play none none none',
                        }
                    }
                );
            });


            // About Section
            animateOnScroll('.anim-about-container', { from: { opacity: 0, scale: 0.9 }, to: { duration: 1, ease: 'expo.out' } });
            // Individual elements within about section can have slight delays if desired
            gsap.fromTo('.anim-about-image',
                { opacity: 0, x: -50, scale:0.8 },
                {
                    opacity: 1, x: 0, scale:1, duration: 0.8, ease: 'power3.out',
                    scrollTrigger: { trigger: '.anim-about-container', start: 'top 70%' }
                }
            );
            gsap.fromTo('.anim-about-content',
                { opacity: 0, x: 50 },
                {
                    opacity: 1, x: 0, duration: 0.8, ease: 'power3.out', delay: 0.2,
                    scrollTrigger: { trigger: '.anim-about-container', start: 'top 70%' }
                }
            );


            // Footer elements (social icons can be staggered)
            const footerTl = gsap.timeline({
                scrollTrigger: {
                    trigger: '.anim-footer',
                    start: 'top 95%',
                    toggleActions: 'play none none none'
                }
            });
            footerTl.fromTo('.anim-footer .copyright', {opacity:0, y:20}, {opacity:1, y:0, duration:0.6, ease:'power2.out'});
            gsap.utils.toArray('.anim-social-icon').forEach((icon, index) => {
                 footerTl.fromTo(icon,
                    { opacity: 0, y: 20, scale: 0.5 },
                    { opacity: 1, y: 0, scale: 1, duration: 0.4, ease: 'back.out(2)', delay: index * 0.1 },
                    "<0.1" // Stagger start relative to previous animation in timeline
                );
            });


            // --- Interactive Hover Animations (Neumorphism Enhancements) ---
            // Example for buttons (can be expanded to other elements)
            const neoHoverElements = document.querySelectorAll('.cta-button, .post-card-readmore, .main-nav ul li a, .logo, .social-links a');
            neoHoverElements.forEach(el => {
                const originalShadow = getComputedStyle(el).boxShadow;
                let hoverShadow = '';

                // Determine hover shadow based on existing style or a predefined one
                // This is a simplified example; for true neomorphism, shadow changes are key
                if (el.classList.contains('cta-button') || el.classList.contains('post-card-readmore')) {
                    hoverShadow = `inset 2px 2px 5px var(--shadow-inner-dark), inset -2px -2px 5px var(--shadow-inner-light)`;
                } else if (el.classList.contains('logo') || el.classList.contains('main-nav ul li a')) {
                     hoverShadow = `inset 3px 3px 7px var(--shadow-inner-dark), inset -3px -3px 7px var(--shadow-inner-light)`;
                } else if (el.closest('.social-links')) {
                     hoverShadow = `inset 3px 3px 6px var(--shadow-inner-dark), inset -3px -3px 6px var(--shadow-inner-light)`;
                }


                el.addEventListener('mouseenter', () => {
                    if(hoverShadow) { // Only apply if hoverShadow is defined
                        gsap.to(el, {
                            boxShadow: hoverShadow,
                            duration: 0.2,
                            ease: 'power1.inOut'
                        });
                    }
                    // For elements not using inset shadow on hover, maybe a slight scale or y-translate
                    if (!el.classList.contains('cta-button') && !el.classList.contains('post-card-readmore') && !el.classList.contains('logo') && !el.closest('.social-links') && !el.classList.contains('main-nav ul li a')) {
                         gsap.to(el, { y: -2, scale: 1.03, duration: 0.2, ease: 'power1.out' });
                    }
                });

                el.addEventListener('mouseleave', () => {
                     if(hoverShadow) {
                        gsap.to(el, {
                            boxShadow: originalShadow,
                            duration: 0.3,
                            ease: 'power1.inOut'
                        });
                     }
                     if (!el.classList.contains('cta-button') && !el.classList.contains('post-card-readmore') && !el.classList.contains('logo') && !el.closest('.social-links') && !el.classList.contains('main-nav ul li a')) {
                        gsap.to(el, { y: 0, scale: 1, duration: 0.2, ease: 'power1.out' });
                     }
                });

                // Active state for CTA style buttons
                if (el.classList.contains('cta-button') || el.classList.contains('post-card-readmore')) {
                    el.addEventListener('mousedown', () => {
                        gsap.to(el, {
                            boxShadow: `inset 4px 4px 8px var(--shadow-inner-dark), inset -4px -4px 8px var(--shadow-inner-light)`,
                            scale: 0.98,
                            duration: 0.1,
                            ease: 'power1.in'
                        });
                    });
                     el.addEventListener('mouseup', () => {
                        gsap.to(el, {
                            boxShadow: hoverShadow, // return to hover state shadow
                            scale: 1,
                            duration: 0.1,
                            ease: 'power1.out'
                        });
                    });
                     el.addEventListener('mouseleave', () => { // Ensure it resets if mouse leaves while pressed
                        gsap.to(el, {
                            boxShadow: originalShadow,
                            scale: 1,
                            duration: 0.1,
                            ease: 'power1.out'
                        });
                    });
                }

            });

            // Post card hover animation (already handled by CSS, but GSAP could do more complex things)
            // document.querySelectorAll('.post-card').forEach(card => {
            //     const originalShadow = getComputedStyle(card).boxShadow;
            //     card.addEventListener('mouseenter', () => {
            //         gsap.to(card, {
            //             y: -8,
            //             scale: 1.01,
            //             boxShadow: `10px 10px 20px ${getComputedStyle(document.documentElement).getPropertyValue('--shadow-outer-dark').trim()}, -10px -10px 20px ${getComputedStyle(document.documentElement).getPropertyValue('--shadow-outer-light').trim()}`,
            //             duration: 0.25,
            //             ease: 'power1.out'
            //         });
            //     });
            //     card.addEventListener('mouseleave', () => {
            //         gsap.to(card, {
            //             y: 0,
            //             scale: 1,
            //             boxShadow: originalShadow,
            //             duration: 0.25,
            //             ease: 'power1.out'
            //         });
            //     });
            // });


        });
    </script>
    <script src="snoweffect.js"></script>


</body>
</html>