-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (87 loc) · 3.31 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
<!DOCTYPE html>
<html>
<head>
<title>甲鱼甲鱼汤的个人网站</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="#">个人网站</a>
</div>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="# ">关于</a></li>
<li><a href="#about">服务</a></li>
<li><a href="#call-me">联系</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero" id="home" >
<div class="container">
<h1>欢迎来到<span class="myname" >甲鱼甲鱼汤</span>的个人网站</h1>
<p>这里是一些关于我的信息，包括我的个人简介、我的服务项目、我的联系方式等等。</p>
<p>致力于广泛的个人学习，成为更优秀的人类。理想什么都会一点！</p>
<a href="#" class="btn">了解更多</a>
</div>
</section>
<section class="services" id="about">
<div class="container">
<h2>我的服务项目</h2>
<p>这里是一些我提供的服务项目，你可以通过点击查看详情。</p>
<div class="services-list">
<div class="service">
<img src="img/web.png" alt="web">
<h3>网站开发</h3>
<p>网站开发是指利用计算机技术，使用HTML、CSS、JavaScript等技术制作的静态网页，并通过互联网服务器托管，让用户通过浏览器访问。网站开发可以帮助企业提升品牌形象、提升营收、增加客户忠诚度、提升企业知名度。</p>
<a href="#" class="btn">了解更多</a>
</div>
<div class="service">
<img src="img/app.png" alt="app">
<h3>APP开发</h3>
<p>APP开发是指利用计算机技术，使用Swift、Objective-C、Java等技术制作的移动应用，并通过应用商店发布，让用户在手机上安装使用。APP开发可以帮助企业提升品牌形象、提升营收、增加客户忠诚度、提升企业知名度。</p>
<a href="#" class="btn">了解更多</a>
</div>
<div class="service">
<img src="img/ui.png" alt="ui">
<h3>UI设计</h3>
<p>UI设计是指利用计算机技术，使用Photoshop、Illustrator、CorelDraw等软件制作的视觉设计，并通过互联网服务器托管，让用户在电脑、手机、平板等设备上查看。UI设计可以帮助企业提升品牌形象、提升营收、增加客户忠诚度、提升企业知名度。</p>
<a href="#" class="btn">了解更多</a>
</div>
</div>
</div>
</section>
<section class="contact" id="call-me">
<div class="container">
<h2>联系我</h2>
<p>你可以通过以下方式联系我：</p>
<div class="contact-list">
<div class="contact-item">
<img src="img/phone.png" alt="phone">
<h3>电话</h3>
<p>19562187768</p>
</div>
<div class="contact-item">
<img src="img/email.png" alt="email">
<h3>邮箱</h3>
<p>[email protected]</p>
</div>
<div class="contact-item">
<img src="img/wechat.png" alt="wechat">
<h3>微信</h3>
<p>19562187768</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
</div>
</footer>
</body>
</html>