DNFMobile/index.html at main · sun409377708/DNFMobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遮天星辰 - DNF公会招募</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header class="header">
        <div class="logo">
            <i class="fas fa-crown"></i>
            <span class="guild-name">遮天星辰</span>
        </div>
        <button class="login-btn">加入我们</button>
    </header>

    <div class="carousel">
        <div class="carousel-container">
            <div class="carousel-slide">
                <img src="images/banner.jpeg" alt="DNF手游">
            </div>
        </div>
    </div>

    <section class="guild-intro">
        <h2><i class="fas fa-star"></i>公会介绍</h2>
        <div class="guild-features">
            <span><i class="fas fa-users"></i>妹子多</span>
            <span><i class="fas fa-trophy"></i>团队氛围好</span>
            <span><i class="fas fa-calendar"></i>活动丰富</span>
        </div>
        <div class="recruitment-content">
            <div class="recruitment-header">
                <i class="fas fa-question-circle"></i>
                <h3>你还在孤独单打独斗吗？</h3>
            </div>
            <div class="recruitment-main">
                <p class="highlight">来加入我们的公会吧！这里不仅有</p>
                <div class="feature-tags">
                    <span><i class="fas fa-rocket"></i>大佬带飞</span>
                    <span><i class="fas fa-chart-line"></i>装备爆率UP</span>
                    <span><i class="fas fa-fire"></i>肝帝肝到崩溃</span>
                </div>
                <p class="emoji-text">的快乐时光！🤪</p>

                <div class="benefits-showcase">
                    <h4><i class="fas fa-gift"></i>公会福利：</h4>
                    <ul class="benefits-list">
                        <li><i class="fas fa-check-circle"></i>100%成功率加速通关副本（大部分时间）</li>
                        <li><i class="fas fa-laugh-squint"></i>各种无敌搞笑的语音聊天，笑得你眼泪直流</li>
                        <li><i class="fas fa-surprise"></i>突发奇想的活动和奖励，没准儿还真能捡到宝</li>
                    </ul>
                    <p class="special-note">加入我们，你不仅能快速升级，还能学习到什么叫<span class="highlight-text">"上线5分钟，离线2小时"</span>！💯</p>
                </div>

                <div class="call-to-action">
                    <p class="final-call">快来，我们等你一起开启"躺赢"之旅！</p>
                    <p class="fun-note">（是真的躺...）</p>
                </div>
            </div>
        </div>
    </section>

    <section class="character-classes">
        <h2><i class="fas fa-gamepad"></i>热门职业</h2>
        <div class="class-grid">
            <div class="class-card">
                <img src="images/swordmaster.jpeg" alt="鬼剑士">
                <h3>鬼剑士</h3>
                <p>近战物理输出，新手友好</p>
            </div>
            <div class="class-card">
                <img src="images/mage.jpeg" alt="魔法师">
                <h3>魔法师</h3>
                <p>远程魔法输出，华丽炫酷</p>
            </div>
            <div class="class-card">
                <img src="images/gunner.jpeg" alt="神枪手">
                <h3>神枪手</h3>
                <p>远程物理输出，操作灵活</p>
            </div>
            <div class="class-card">
                <img src="images/priest.jpeg" alt="圣职者">
                <h3>圣职者</h3>
                <p>近战魔法，辅助治疗</p>
            </div>
        </div>
    </section>

    <section class="activities">
        <h2><i class="fas fa-calendar-alt"></i>每周活动</h2>
        <div class="activity-list">
            <div class="activity-item">
                <div class="activity-day">周一</div>
                <div class="activity-content">
                    <h3>深渊组队日</h3>
                    <p>组队刷深渊，装备共享</p>
                    <img src="images/activity1.jpeg" alt="深渊活动">
                </div>
            </div>
            <div class="activity-item">
                <div class="activity-day">周三</div>
                <div class="activity-content">
                    <h3>团本训练日</h3>
                    <p>团队副本训练与配合</p>
                    <img src="images/activity2.jpeg" alt="团本训练">
                </div>
            </div>
            <div class="activity-item">
                <div class="activity-day">周六</div>
                <div class="activity-content">
                    <h3>公会团本日</h3>
                    <p>大型团队副本挑战</p>
                    <img src="images/activity3.jpeg" alt="公会团本">
                </div>
            </div>
        </div>
    </section>

    <section class="benefits">
        <h2><i class="fas fa-gift"></i>会员福利</h2>
        <div class="benefit-list">
            <div class="benefit-item">
                <i class="fas fa-graduation-cap fa-2x"></i>
                <h3>新手指导</h3>
                <p>专业玩家一对一指导</p>
            </div>
            <div class="benefit-item">
                <i class="fas fa-coins fa-2x"></i>
                <h3>装备共享</h3>
                <p>公会成员装备互助</p>
            </div>
        </div>
    </section>

    <section class="contact">
        <h2><i class="fas fa-phone-alt"></i>联系方式</h2>
        <div class="contact-info">
            <div class="contact-item">
                <i class="fab fa-qq"></i>
                <div>
                    <h3>QQ群</h3>
                    <p>123456789</p>
                </div>
            </div>
            <div class="contact-item">
                <i class="fas fa-user"></i>
                <div>
                    <h3>会长</h3>
                    <p>游戏ID：星辰会长</p>
                </div>
            </div>
        </div>
    </section>

    <script src="js/main.js"></script>
</body>
</html>