-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (140 loc) · 5.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人博客</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="warp">
<header><!-- 页头开始 -->
<nav>
<div class="logo fl">
<a href="javascript:;">首页</a>
</div>
<ul>
<li>
<a href="javascript:;">
<span class="btn"></span>
<span>MENU</span>
</a>
</li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>龙小猿</h1>
<p class="sub-heading">Lorem ipsum dolor sit
amet,consectetur adipisicing elit.</p>
<button>了解我</button>
<div class="more">更多
<span class="more-img"></span>
</div>
</div>
</div>
</header><!-- 页头结束 -->
<div class="content"><!-- 内容开始 -->
<section class="green-section">
<div class="box">
<div class="box-inner">
<h2>我</h2>
<div class="hr"></div>
<h3>前端工程师（程序猿）</h3>
<p>主要是负责PC、手机网站的视觉页面编写，以及实现
页面之间联系和动效，时刻更新网站内容，让网页实现新陈代谢。
Web前端，是互联网的一个新生行业，随着互联网
的飞速发展，Web前端已经成为了一个
<span>不可替代的行业</span>
<i>！</i></p>
</div>
<div class="box-ico">
<span class="ps"></span>
<span class="st"></span>
<span class="dw"></span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview clearfix">
<div class="img-section">
<img src="images/pic1.jpg" alt="">
</div>
<div class="text-section">
<h2>我的标题</h2>
<div class="sub-header">我是一个副标题</div>
<p>Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.</p>
</div>
</div>
<div class="article-preview clearfix">
<div class="text-section">
<h2>我的标题</h2>
<div class="sub-header">我是一个副标题</div>
<p>Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.</p>
</div>
<div class="img-section">
<img src="images/pic2.jpg" alt="">
</div>
</div>
<div class="article-preview clearfix">
<div class="img-section">
<img src="images/pic3.jpg" alt="">
</div>
<div class="text-section">
<h2>我的标题</h2>
<div class="sub-header">我是一个副标题</div>
<p>Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.Lorem ipsum dolor sitamet,consectetur adipisicing e.</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>约我</h2>
<div class="hr"></div>
<div class="Sub-heading">
Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3><span></span>标题三</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
<div class="card">
<h3><span></span>标题三</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
<div class="card">
<h3><span></span>标题三</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div><div class="card">
<h3><span></span>标题三</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div><div class="card">
<h3><span></span>标题三</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div><div class="card">
<h3><span></span>标题三</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Lorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elitLorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
</div>
</div>
</section>
</div><!-- 内容结束 -->
<footer><!-- 页脚开始 -->
<div class="footer"></div>
<ul class="share-group">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="copy">
©龙小猿
</div>
</footer><!-- 页脚结束 -->
</div>
</body>
</html>