-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
169 lines (153 loc) · 6.46 KB
/
index.html
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
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 手机 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1">
<title>恋爱一周年快乐</title>
<link rel="stylesheet" href="./css/pages.css" media="all">
<link rel="stylesheet" href="https://cdn.bootcss.com/fullPage.js/2.9.6/jquery.fullpage.css" media="all">
</head>
<body>
<div class="wrap">
<div id="fullpage-s">
<!-- 第一屏 -->
<div class="section d1">
<h1 class="textd1t1 textd1 text">恋爱一周年纪念日</h4>
<div class="blacklined1"></div>
<h2 class="textd1t2 textd1 text">记下这些美好的时光</h4>
<h2 class="textd1t3 textd1 text">送给你</h4>
<h2 class="textd1t4 textd1 text">也祝福我们</h4>
<h2 class="textd1t5 textd1 text">2018年4月3日</h4>
<!-- 星星 -->
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<!-- 气球 -->
<section class="balloon">
<div class="balloon1"></div>
<div class="balloon2"></div>
</section>
<!-- 向下提示 -->
<div class="go-down">
<img src="./img/arrows.png" alt="向下">
</div>
</div>
<!-- 第2页 -->
<div class="section d2">
<h3 class="textd2t1 textd2 text">这一年</h4>
<h3 class="textd2t2 textd2 text">我们经历了很多重要时刻</h4>
<h3 class="textd2t3 textd2 text">我们从校园走入了社会</h4>
<h3 class="textd2t4 textd2 text">我们克服异地来到一个城市</h4>
<h3 class="textd2t5 textd2 text">我们拿到属于我们的小红本</h4>
<h3 class="textd2t6 textd2 text">我们开启了人生新的征程</h4>
<div class="imgd2">
<img src="./img/page2/graduation.jpg" class="imgd2i1">
<img src="./img/page2/back.jpg" class="imgd2i2">
<img src="./img/page2/marriage.jpg" class="imgd2i3">
<img src="./img/page2/wedding.jpg" class="imgd2i4">
</div>
<img src="./img/page2/heart.png" class="imgd2i5">
<!-- 向下提示 -->
<div class="go-down">
<img src="./img/arrows.png" alt="向下">
</div>
</div>
<!-- 第3页 -->
<div class="section d3">
<h3 class="textd3t1 textd3 text">这一年</h4>
<h3 class="textd3t2 textd3 text">我们一起在王者峡谷玩耍</h4>
<h3 class="textd3t3 textd3 text">一起看花开花落</h4>
<h3 class="textd3t4 textd3 text">一起洗衣做饭</h4>
<h3 class="textd3t5 textd3 text">一起品味生活的酸甜苦辣</h4>
<div class="imgd3">
<img src="./img/page3/6.jpg" class="imgd3i1">
<img src="./img/page3/4.jpg" class="imgd3i2">
<img src="./img/page3/5.jpg" class="imgd3i3">
<img src="./img/page3/2.jpg" class="imgd3i4">
<img src="./img/page3/3.jpg" class="imgd3i5">
</div>
<!-- 向下提示 -->
<div class="go-down">
<img src="./img/arrows.png" alt="向下">
</div>
</div>
<!-- 第4页 -->
<div class="section d4">
<h3 class="textd4t1 textd4 text">不在身边的时候</h4>
<h3 class="textd4t2 textd4 text">我们分享着</h4>
<h3 class="textd4t3 textd4 text">生活的点点滴滴</h4>
<h3 class="textd4t4 textd4 text">760多张饭菜的照片</h4>
<h3 class="textd4t5 textd4 text">无数的关心与问候</h4>
<h3 class="textd4t6 textd4 text">用爱融化了距离</h4>
<div class="imgd4">
<img src="./img/page4/food.jpg" class="imgd4i1">
<img src="./img/page4/love1.jpg" class="imgd4i2">
<img src="./img/page4/love2.jpg" class="imgd4i3">
<img src="./img/page4/love3.jpg" class="imgd4i4">
</div>
<!-- 向下提示 -->
<div class="go-down">
<img src="./img/arrows.png" alt="向下">
</div>
</div>
<!-- 第5屏 -->
<div class="section d5">
<div class="journey1">
<img src="./img/page5/journey1.png" alt="">
</div>
<div class="journey2">
<img src="./img/page5/journey2.png" alt="">
</div>
<h2 class="textd5t1 textd5 text">虽然没有带你去土耳其</h4>
<h2 class="textd5t2 textd5 text">但，因为有你</h4>
<h2 class="textd5t3 textd5 text">不管走到哪里</h4>
<h2 class="textd5t4 textd5 text">都是浪漫的天地</h4>
<h2 class="textd5t5 textd5 text">愿你我，不离不弃</h4>
<!-- 火箭 -->
<div class="plane"></div>
<div class="go-down">
<img src="./img/arrows.png" alt="向下">
</div>
</div>
<!-- 第6页 -->
<div class="section d6">
<div class="imgd6">
<img src="./img/page6/1.jpg" class="imgd6i1">
<img src="./img/page6/2.jpg" class="imgd6i2">
<img src="./img/page6/4.jpg" class="imgd6i4">
<img src="./img/page6/5.jpg" class="imgd6i5">
<img src="./img/page6/6.jpg" class="imgd6i6">
<img src="./img/page6/7.jpg" class="imgd6i7">
<img src="./img/page6/8.jpg" class="imgd6i8">
<img src="./img/page6/9.jpg" class="imgd6i9">
</div>
<!-- 向下提示 -->
<div class="go-down">
<img src="./img/arrows.png" alt="向下">
</div>
</div/
<!-- 第7页 -->
<div class="section d7">
<h1 class="textd7t1 textd7 text">生活</h4>
<h1 class="textd7t2 textd7 text">如此</h4>
<h1 class="textd7t3 textd7 text">有你</h4>
<h1 class="textd7t4 textd7 text">足矣</h4>
<h2 class="textd7t5 textd7 text">Love Joyce Forever</h4>
<h4 class="textd7t6 textd7 text">My heart is always with you.</h4>
<div class="blacklined7"></div>
</div>
</div>
</div>
<button class="btn-music">
<i class="icon-note"></i>
</button>
<audio loop autoplay>
<source src="http://other.web.rh01.sycdn.kuwo.cn/resource/n1/29/46/2749547780.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.6/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.6/jquery.fullpage.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>