-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
executable file
·222 lines (217 loc) · 10.4 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<title>Girls in AI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/index.css" rel="stylesheet" type="text/css" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" rel="stylesheet" >
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all">
</head>
<style>
@font-face {
font-family: 'Glyphicons Halflings';
src: url('font/glyphicons-halflings-regular.eot');
src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('font/glyphicons-halflings-regular.woff') format('woff'), url('font/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">GIA-LOGO</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">首页</a></li>
<li><a href="./pages/courses.html">课程</a></li>
<li><a href="./pages/giaers.html">她们</a></li>
<li><a href="./pages/about.html">关于</a></li>
<!-- <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我们的课程 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">小白python入门教程</a></li>
<li><a href="#">数据分析教程</a></li>
<li><a href="#">机器学习教程</a></li>
</ul>
</li> -->
</ul>
</div>
</div>
</nav>
</header>
<div id="index-page">
<section>
<div class="slider-part " style="z-index:1">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<!-- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li> -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active slider-item">
<img src="images/bg-1.png" alt="">
<div class="top-content">
<h3>Girls<span style="color:rgba(232, 186, 188, 1);font-size: 80px;">In</span>AI</h3>
<!--<p>coding is the new sexy</p>-->
<p class="content-detail" style="font-size:20px;max-width:480px;margin-top:24px;line-height: 40px;">GirlsInAI（GIA） 是一个面向编程小白的AI算法工程师养成计划。这个计划鼓励更多的女性去学习编程甚至成为科技行业的领袖。GIA可以为大家带来很多免费编程课和组队学习：python入门教程、数据分析教程、机器学习教程等等。今后还会有更多的免费课程和活动，欢迎加入GIA！</p>
</div>
<div class="carousel-caption">
<!-- <h3>关于GIA</h3> -->
<!--<p>GirlsInAI（GIA） 是一个面向编程 零基础 的AI算法工程师养成计划。鼓励更多的女孩子去学习编程甚至成为科技行业的领袖。希望大家都能站在食物链上游看一看，因为风景真的很好。</p>-->
</div>
</div>
</div>
<!-- Controls -->
<!-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
<div class="main-part">
<div class="introduce-part marginTop20">
<section class="ip-left">
<img src="images/004.jpg"/>
</section>
<section class="ip-right">
<div class="title-part" style="justify-content:left;">
<!-- <span class="title">介绍</span> -->
<!--<span>这个计划为什么叫Girls-In-AI? </span>-->
<span style="padding:0px 0px;font-size: 28px;">CODING IS THE NEW SEXY !</span>
</div>
<div class="content" >
</br>
<p style="font-size: 28px;line-height: 40px;"><span style="font-size: 50px;">“</span>我的出发点很简单，只想做好一件事，去鼓励更多的女生去学习AI编程甚至成为科技行业的领袖。希望大家都能站在食物链上游看一看，因为风景真的很好，
</p>
</br>
<p>这个计划所有的课程都免费。对！免费！而且我们还有奖学金放送！如果你没钱报外面三五万的水培训班，而你恰好有时间学，欢迎你来GIA！”
</p>
</br>
<p>-- Words From Founder ZhangYi
</p>
</div>
</section>
</div>
<div class="contributor-part marginTop20">
<div class="title-part">
<!-- <span class="title">我们的贡献者</span> -->
<span style="font-size:30px;">AI is shaping the future. Who is shaping GIA? </span>
</div>
<div class="swiper-container" style="height:100px;width:100%;">
<div class="swiper-wrapper" id="contributors">
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
</div>
</div>
<div class="gain-part marginTop20">
<div class="data-item">
<p>全球2300万开发者中女性程序员的比例只占</p>
<span>20<small>%</small></span>
</div>
<div class="data-item">
<p>全球高校的人工智能、机器学习课程中女学员只占</p>
<span>25<small>%</small></span>
</div>
<div class="data-item">
<p>目前GirlsInAI计划的学习参与者人数已高于</p>
<span>4.7<small>k</small></span>
</div>
</div>
<div class="course-part marginTop20">
<h3>我们的课程</h3>
<div class="course-wrap marginTop20">
<div class="course-item">
<div class="title">
<h4>小白python入门教程</h4>
</div>
<p>洞察数据，掌握成功决策的秘密</p>
<div class="enter-wrap">
<span></span><a href="https://github.com/girls-in-ai/Girls-In-AI" target="_blank">立即加入</a></span>
</div>
</div>
<div class="course-item">
<div class="title">
<h4>数据分析教程</h4>
</div>
<p>洞察数据，掌握成功决策的秘密</p>
<div class="enter-wrap">
<span><a href="https://github.com/girls-in-ai/Girls-In-AI" target="_blank">立即加入</a></span>
</div>
</div>
<div class="course-item">
<div class="title">
<h4>机器学习教程</h4>
</div>
<p>洞察数据，掌握成功决策的秘密</p>
<div class="enter-wrap">
<span><a href="https://github.com/girls-in-ai/Girls-In-AI" target="_blank">立即加入</a></span>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<span>©2019-2020 by GIA 粤ICP备19107149号</span>
<a href="https://m.weibo.cn/profile/2650740963">微博</a> |
<a href="https://github.com/girls-in-ai/Girls-In-AI">Git</a>
</footer>
</div>
<div class="fix-donation">
<a href="./pages/donation.html">赞助我吧</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>
<script src="js/index.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
autoplay: true,
speed: 300,
pagination: {
el: '',
clickable: true,
},
});
</script>
</body>
</html>