-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (223 loc) · 14 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
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
</head>
<body class="body">
<header class="header">
<div class="header__content content">
<div class="header__logo">
<p class="header__icon"><img src="img/icon/logo.png" alt=""></p>
<p class="header__logo-description">for athlets and coaches</p>
</div>
<div class="header__title-block">
<p class="header__main">BE RECRUITED<p>
<p class="header__main-lower">PLAY COLLEGE SPORTS</p>
<img class="header__line-main-title" src="img/line.png" alt="line">
</div>
<div class="header__mobile">
<nav class="header__nav">
<ul class="header__list">
<li class="header__link"><a href="#" class="header__link header__link--click">FOOTBALL</a></li>
<li class="header__link"><a href="#" class="header__link header__link--click">BASKETBALL</a></li>
<li class="header__link"><a href="#" class="header__link header__link--click">BASEBALL</a></li>
<li class="header__link"><a href="#" class="header__link header__link--click">SOcCER</a></li>
<li class="header__link"><a href="#" class="header__link header__link--click">ICE HOCKEY</a></li>
</ul>
</nav>
<div class="header__buttons">
<form class="header__form app-store" action="#" target="_blank">
<button class="header__button"><span class="header__text-button">download on the</span><span class="header__text-button header__text-button--lower">app store</span></button>
</form>
<form class="header__form header__form--google-play" action="#" target="_blank">
<button class="header__button"><span class="header__text-button">get it on</span><span class="header__text-button header__text-button--lower">google play</span></button>
</form>
</div>
</div>
</div>
</header>
<div class="football-basketball">
<div class="footbal">
<div class="footbal__conection">
<div class="content">
<div class="footbal__content">
<img class="footbal__footballer" src="img/footbal-basketbal/footbal/footballer_1174.png" alt="footballer">
<img class ="footbal__backline" src="img/footbal-basketbal/footbal/rectangle_1_kopiya_3_975.png" alt="backline">
<img class="footbal__plus" src="img/footbal-basketbal/footbal/rectangle_3_copy_21_607.png" alt="plus">
<img class="footbal__plus-opacity" src="img/footbal-basketbal/footbal/rectangle_3_copy_21_kopiya_1002.png" alt="plus">
<h2 class="footbal__title">ATHLETS</h2>
<div class="footbal__desktop">
<p class="footbal__name"><span class="footbal__number">01 </span>Connection</p>
<p class="footbal__description">Connect with coaches directly, you can ping coaches to view profile.</p>
</div>
</div>
</div>
</div>
<div class="footbal__desktop">
<div class="footbal__collaboration">
<div class="content">
<div class="footbal__content">
<p class="footbal__name"><span class="footbal__number">02</span>Collaboration</p>
<p class="footbal__description">Work with other student athletes to increase visability. When you share and like other players videos it will increase your visability as a player. This is the team work aspect to Surface 1.</p>
</div>
</div>
</div>
</div>
<div class="footbal__desktop">
<div class="footbal__growth">
<div class="content">
<div class="footbal__content">
<p class="footbal__name"><span class="footbal__number footbal__number--three">03</span>Growth</p>
<p class="footbal__description footbal__description--footer">Resources and tools for you to get better as a student Athelte.
Access to training classes, tutor sessions, etc</p>
</div>
</div>
</div>
</div>
<div class="fotorama slider ">
<div class="footbal__conection"> <p class="footbal__name"><span class="footbal__number">01 </span>Connection</p>
<p class="footbal__description">Connect with coaches directly, you can ping coaches to view profile.</p>
</div>
<div class="footbal__collaboration"><p class="footbal__name"><span class="footbal__number">02</span>Collaboration</p>
<p class="footbal__description">Work with other student athletes to increase visability. When you share and like other players videos it will increase your visability as a player. This is the team work aspect to Surface 1.</p>
</div>
<div class="footbal__growth"><p class="footbal__name"><span class="footbal__number footbal__number--three">03</span>Growth</p>
<p class="footbal__description footbal__description--footer">Resources and tools for you to get better as a student Athelte.
Access to training classes, tutor sessions, etc</p>
</div>
</div>
</div>
<div class="footbal">
<div class="footbal__conection ">
<div class="content">
<div class="footbal__content footbal__content--basketball">
<img class="footbal__footballer footbal__footballer--basketballer" src="img/footbal-basketbal/basketbal/sloy_4_1330.png" alt="footballer">
<img class ="footbal__backline footbal__backline--basketbal" src="img/footbal-basketbal/basketbal/rectangle_1_kopiya_7_1279.png" alt="backline">
<img class ="footbal__backline-second" src="img/footbal-basketbal/basketbal/rectangle_1_kopiya_7_1279.png" alt="backline">
<img class="footbal__plus footbal__plus--basketbal" src="img/footbal-basketbal/footbal/rectangle_3_copy_21_607.png" alt="plus">
<img class="footbal__plus-lower" src="img/footbal-basketbal/footbal/rectangle_3_copy_21_607.png" alt="plus">
<img class="footbal__plus-opacity footbal__plus-opacity--basketbal" src="img/footbal-basketbal/footbal/rectangle_3_copy_21_kopiya_1002.png" alt="plus">
<h2 class="footbal__title footbal__title--basketbal">PLAYERS</h2>
<div class="footbal__desktop">
<p class="footbal__name"><span class="footbal__number">01 </span>Connection</p>
<p class="footbal__description">Connect with talented athlete directly, you can watch their skills through video showreels directly from Surface 1.</p>
</div>
</div>
</div>
</div>
<div class="footbal__desktop">
<div class="footbal__collaboration">
<div class="content">
<div class="footbal__content footbal__content--basketball">
<p class="footbal__name"><span class="footbal__number">02</span>Collaboration</p>
<p class="footbal__description">Work with recruiter to increase your chances of finding talented athlete.</p>
</div>
</div>
</div>
</div>
<div class="footbal__desktop">
<div class="footbal__growth footbal__growth--basketbal">
<div class="content">
<div class="footbal__content footbal__content--basketball">
<p class="footbal__name"><span class="footbal__number footbal__number--three footbal__number--basketbal ">03</span>Growth</p>
<p class="footbal__description footbal__description--footer">Save your time, recruit proper athlets for your team.</p>
</div>
</div>
</div>
</div>
<div class="fotorama slider ">
<div class="footbal__conection"> <p class="footbal__name"><span class="footbal__number">01</span>Connection</p>
<p class="footbal__description">Connect with talented athlete directly, you can watch their skills through video showreels directly from Surface 1</p>
</div>
<div class="footbal__collaboration"><p class="footbal__name"><span class="footbal__number">02</span>Collaboration</p>
<p class="footbal__description">Work with recruiter to increase your chances of finding talented athlete.</p>
</div>
<div class="footbal__growth"><p class="footbal__name"><span class="footbal__number footbal__number--three">03</span>Growth</p>
<p class="footbal__description footbal__description--footer">Save your time, recruit proper athlets for your team.</p>
</div>
</div>
</div>
</div>
<div class="cards">
<div class="card">
<img src="img/fon/first_card.jpg" alt="" class="card__image">
<div class="card__content">
<div class="card__number">
<div class="card__number--text">01</div>
</div>
<h2 class="card__title">Be active</h2>
<p class="card__description">Post videos with your skills,
Like and follow others to be
more popular.</p>
</div>
</div>
<div class="card card--contact">
<img src="img/fon/second_card.jpg" alt="" class="card__image">
<div class="card__content card__content--contact">
<div class="card__number card__number--contact">
<div class="card__number--text">02</div>
</div>
<h2 class="card__title">Find contact</h2>
<p class="card__description card__description--contact">Contact others to find right coach or athlete you are looking for.</p>
</div>
</div>
<div class="card">
<img src="img/fon/third_card.jpg" alt="" class="card__image">
<div class="card__content">
<div class="card__number">
<div class="card__number--text">03</div>
</div>
<h2 class="card__title">Work it</h2>
<p class="card__description card__description--work">Enjoy being a student athlete, the recruiting process can be overwhelming, we want to make this a enjoyable experience.</p>
</div>
</div>
</div>
<div class="download">
<div class="download__content content">
<div class="download__heading">
<img src="img/download_line/rectangle_1_kopiya_5_1031.png" alt="line" class="download__line">
<img src="img/download_line/rectangle_1_kopiya_6_1117.png" alt="line" class="download__line download__line--small">
<h2 class="download__title">Download app</h2>
<p class="download__description">Show everyone what you can do!</p>
</div>
<div class="header__buttons">
<form class="header__form app-store" action="#" target="_blank">
<button class="header__button"><span class="header__text-button">download on the</span><span class="header__text-button header__text-button--lower">app store</span></button>
</form>
<form class="header__form header__form--google-play" action="#" target="_blank">
<button class="header__button"><span class="header__text-button">get it on</span><span class="header__text-button header__text-button--lower">google play</span></button>
</form>
</div>
</div>
<div class="footer">
<div class="footer__logo"> <img src="img/icon/logo.png" alt="logo">
</div>
<div class="footer__icon">
<p><a href="https://www.facebook.com/" target="blank">
<img src="img/icon/footer_icon/forma_1_864.png" alt="icon" class="footer__icon--brand">
</a></p>
<p><a href="https://twitter.com/" target="blank">
<img src="img/icon/footer_icon/forma_1_1119.png" alt="icon" class="footer__icon--brand">
</a></p>
<p><a href="https://www.instagram.com/" target="blank">
<img src="img/icon/footer_icon/forma_1_867.png" alt="icon" class="footer__icon">
</a></p>
</div>
<div class="footer__description">
<p><a href="#" target="blank" class="footer__description footer__description--link">
Contact Us |
</a></p>
<p><a href="#" target="blank" class="footer__description footer__description--link">
Terms & Conditions
</a></p> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
</body>
</html>