宝可梦剑盾网页源码 (大作业html)-CSDN博客

本文链接：https://blog.csdn.net/Pan_peter/article/details/148048654
「宝可梦网页」
链接：https://pan.quark.cn/s/aa38c61f7800

链接：https://pan.quark.cn/s/aa38c61f7800

链接：https://pan.quark.cn/s/aa38c61f7800

<body>

    <header class="site-header">
        <div class="container">
            <a href="index.html" class="logo">宝可梦 <span>剑盾</span> ⚔️🛡️</a>
            <button class="menu-toggle" id="menuToggle" aria-label="切换导航">☰</button>
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html" class="active sword-style">伽勒尔概览</a></li>
                <li><a href="pokedex.html">伽勒尔图鉴</a></li>
                <li><a href="features.html">特色与人物</a></li>
            </ul>
        </div>
    </header>

    <main>
        <section class="hero-galar">
            <div class="container">
                <h1 class="gsap-reveal">踏上伽勒尔地区的冒险之旅！⚔️🛡️</h1>
                <p class="subtitle gsap-reveal">发现全新的宝可梦，挑战强大的道馆馆主，揭开隐藏在传说背后的秘密。</p>
                <a href="#galar-highlights" class="cta-button gsap-reveal">开始探索 👇</a>
            </div>
        </section>

        <section id="galar-highlights" class="galar-highlights section-padding">
            <div class="container">
                <h2 class="text-center gsap-reveal">伽勒尔地区的独特魅力 ✨</h2>
                <div class="highlights-grid">
                    <div class="highlight-card gsap-reveal">
                        <div class="icon">🐘</div>
                        <h3>极巨化对战</h3>
                        <p>体验震撼的极巨化与超极巨化对战，让你的宝可梦变得无比强大！</p>
                    </div>
                    <div class="highlight-card gsap-reveal">
                        <div class="icon">🌳</div>
                        <h3>广阔旷野地带</h3>
                        <p>在伽勒尔广阔的旷野地带自由探索，遭遇各种各样的野生宝可梦。</p>
                    </div>
                    <div class="highlight-card gsap-reveal">
                        <div class="icon">🐸🔥💧</div>
                        <h3>全新伙伴</h3>
                        <p>从敲音猴、炎兔儿、泪眼蜥中选择你的第一个伙伴，开启冒险！</p>
                    </div>
                    <div class="highlight-card gsap-reveal">
                        <div class="icon">🏆</div>
                        <h3>冠军之路</h3>
                        <p>挑战各地的道馆馆主，一步步迈向伽勒尔地区的冠军宝座！</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="legendary-showcase section-padding">
            <div class="container">
                <h2 class="gsap-reveal">传说的英雄：苍响 & 藏玛然特</h2>
                <div class="legendaries-container">
                    <div class="legendary-card zacian gsap-reveal">
                        <img src="img/www.png" alt="苍响 (英雄形态)">
                        <h3>苍响 · 剑之王</h3>
                        <p>传说中的英雄宝可梦，能够斩断一切事物的闪耀之剑。其矫健的身姿令见者着迷。</p>
                        <a href="#" class="legendary-cta">了解更多苍响</a>
                    </div>
                    <div class="legendary-card zamazenta gsap-reveal">
                        <img src="img/eee.png" alt="藏玛然特 (英雄形态)">
                        <h3>藏玛然特 · 盾之王</h3>
                        <p>传说中的英雄宝可梦，能够反弹任何攻击的辉煌之盾。其威严的举止使对手望而生畏。</p>
                        <a href="#" class="legendary-cta">了解更多藏玛然特</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="explore-more section-padding">
            <div class="container">
                <h2 class="gsap-reveal">深入伽勒尔的每个角落 🗺️</h2>
                <div class="explore-grid">
                    <a href="pokedex.html" class="explore-card pokedex-card gsap-reveal">
                        <h3>伽勒尔宝可梦图鉴 📖</h3>
                        <p>查看所有在伽勒尔地区栖息的宝可梦，了解它们的属性与进化形态。</p>
                    </a>
                    <a href="features.html" class="explore-card gsap-reveal">
                        <h3>重要角色与道馆馆主 🏅</h3>
                        <p>认识在冒险中遇到的关键人物，以及等待你挑战的强大道馆馆主们。</p>
                    </a>
                    <a href="#" class="explore-card news-card gsap-reveal">
                        <h3>最新游戏情报 📰</h3>
                        <p>获取关于《宝可梦 剑／盾》的最新消息、活动与更新内容。</p>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>©2025 Pokémon. ©1995 - 2025 Nintendo/Creatures Inc./GAME FREAK inc.</p>
            <p>宝可梦是任天堂/Creatures Inc./GAME FREAK inc. 的商标。</p>
            <p>图片仅为概念展示，实际游戏画面可能不同。网站内容非官方授权。</p>
            <p><a href="https://www.pokemon.com" target="_blank" rel="noopener noreferrer">访问宝可梦官方网站</a></p>
        </div>
    </footer>