-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
222 lines (211 loc) · 15.9 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>
<meta charset="UTF-8" />
<title>Forkio</title>
<meta name="viewport" content="width=width-device, initial-scale=1.0">
<link rel="stylesheet" href="dist/styles/style.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" href="dist/images/header/logo.svg" type="image/png" />
<link rel="stylesheet" href="dist/styles/style.min.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header class="header"><div class="wrapper">
<div class="header__navigation">
<a href="/" class="header__logo">
<div class="header__logo-img"></div>
<span class="header__logo-text">Forkio</span>
</a>
<input class="collapsable-input" type="checkbox" id="collapsable-menu">
<label for="collapsable-menu" class="header__switch-label">
<span></span>
</label>
<div class="header__menu" id="collapsable">
<nav class="header__menu-nav nav">
<ul class="nav__list">
<li class="nav__list-item"><a href="#void">Overview</a></li>
<li class="nav__list-item"><a href="#void">About Fork</a></li>
<li class="nav__list-item"><a href="#void">Buying Options</a></li>
<li class="nav__list-item"><a href="#void">Support</a></li>
</ul>
</nav>
</div>
<button class="header__button">Buy now</button>
</div>
</div></header>
<div class="intro">
<div class="wrapper">
<div class="intro__info">
<div class="intro__info-text">
<h2 class="intro__info-text-title">Fork App</h2>
<span class="intro__info-text-subtitle">A Real Gamechanger In The World Of Web-Development</span>
<span class="intro__info-text-version">v. 2.8 For Mac and Windows</span>
</div>
</div>
</div>
</div>
<div class="action">
<button class="action__button">Download For Free Now</button>
<span class="action__text">Unlimited 30-Days Trial Period</span>
</div>
<section class="revolutionary-editor">
<h2 class="revolutionary-editor__title">REVOLUTINARY EDITOR</h2>
<p class="revolutionary-editor__text">Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed id metus id quam auctor molestie eget ut augue.</p>
<ul class="revolutionary-editor__btns" style="padding: 2px 0;">
<li class="revolutionary-editor__btn">
<a class="revolutionary-editor__btn-text" aria-label="You must be signed in to watch a repository" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/baxterthehacker/public-repo","user_id":null}}" data-hydro-click-hmac="482f7253a3a798802360091be336a6572b5366196c3c79c51f72894eba353b00" href="/login?return_to=%2Fbaxterthehacker%2Fpublic-repo">
<svg class="revolutionary-editor__icon" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
Watch
</a>
<a class="revolutionary-editor__numb" href="#" aria-label="4 users are watching this repository">
4
</a>
</li>
<li class="revolutionary-editor__btn">
<a class="revolutionary-editor__btn-text" aria-label="You must be signed in to star a repository" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":35129377,"auth_type":"LOG_IN","originating_url":"https://github.com/baxterthehacker/public-repo","user_id":null}}" data-hydro-click-hmac="1cc755cf03b62cddc3f650b60656f9c864972c1b911d0959d28801cbb40ec60e" href="/login?return_to=%2Fbaxterthehacker%2Fpublic-repo">
<svg class="revolutionary-editor__icon" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
Star
</a>
<a class="revolutionary-editor__numb" href="#" aria-label="10 users starred this repository">
10
</a>
</li>
<li class="revolutionary-editor__btn">
<a class="revolutionary-editor__btn-text" aria-label="You must be signed in to fork a repository" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":35129377,"auth_type":"LOG_IN","originating_url":"https://github.com/baxterthehacker/public-repo","user_id":null}}" data-hydro-click-hmac="db3230d2633c0ec28c26ba73460005a4d27fbd90cbaa7882da0c0dd699ecfde7" href="/login?return_to=%2Fbaxterthehacker%2Fpublic-repo">
<svg class="revolutionary-editor__icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
Fork
</a>
<a href="#" class="revolutionary-editor__numb" aria-label="19 users forked this repository">
19
</a>
</li>
</ul>
</section>
<section class="hear-what-you-get">
<div class="hear-what-you-get__hidden-heading"></div>
<div class="hear-what-you-get__inf">
<div class="hear-what-you-get__inf-item">
<img class="hear-what-you-get__icon med-icn" src="/src/images/_hear_what_you_get_icon1.svg" alt="hello">
<div class="hear-what-you-get__head-text">
<h3 class="hear-what-you-get__small-heading">Creatred to Make The Web Better</h3>
<p class="hear-what-you-get__text">Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed id metus id quam auctor molestie eget ut augue. </p>
</div>
</div>
<div class="hear-what-you-get__inf-item">
<img class="hear-what-you-get__icon" src="/src/images/_hear_what_you_get_icon2.svg" alt="hello">
<div class="hear-what-you-get__head-text">
<h3 class="hear-what-you-get__small-heading">Creatred to Make The Web Better</h3>
<p class="hear-what-you-get__text">Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed id metus id quam auctor molestie eget ut augue. </p>
</div>
</div>
<div class="hear-what-you-get__inf-item">
<img class="hear-what-you-get__icon small-icn" src="/src/images/_hear_what_you_get_icon3.svg" alt="hello">
<div class="hear-what-you-get__head-text">
<h3 class="hear-what-you-get__small-heading">Creatred to Make The Web Better</h3>
<p class="hear-what-you-get__text">Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed id metus id quam auctor molestie eget ut augue. </p>
</div>
</div>
<div class="hear-what-you-get__inf-item">
<img class="hear-what-you-get__icon last-icn" src="/src/images/_hear_what_you_get_icon4.svg" alt="hello">
<div class="hear-what-you-get__head-text">
<h3 class="hear-what-you-get__small-heading">Creatred to Make The Web Better</h3>
<p class="hear-what-you-get__text">Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed id metus id quam auctor molestie eget ut augue. </p>
</div>
</div>
</div>
<div class="hear-what-you-get__head-pic">
<h2 class="hear-what-you-get__heading"> < Here is what you get ></h2>
<img class="hear-what-you-get__picture" alt="hello" src="src/images/_hear_what_you_get_picture.png">
</div>
</section>
<section class="about">
<div class="wrapper">
<h2 class="about__title">People Are Talking About Fork</h2>
<div class="about__review-list review-list">
<div class="review-list__item">
<img class="review-list__item-logo" src="/dist/images/about-fork/logo1.png" alt="logo-review" width="165">
<span class="review-list__item-text">Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet.
Proin id dignissim magna. Sed varius urna et pulvinar venenatis. </span>
</div>
<div class="review-list__item">
<img class="review-list__item-logo" src="/dist/images/about-fork/logo2.png" alt="logo-review" width="148">
<span class="review-list__item-text">Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum,
rhoncus molestie neque ac, mollis eleifend nibh.</span>
</div>
<div class="review-list__item">
<img class="review-list__item-logo" src="/dist/images/about-fork/logo3.png" alt="logo-review" width="64">
<span class="review-list__item-text">In efficitur in velit et tempus. Duis nec odio dapibus, suscipit
erat fringilla, imperdiet nibh. Morbi tempus auctor felis ac vehicula. </span>
</div>
<div class="review-list__item">
<img class="review-list__item-logo" src="/dist/images/about-fork/logo4.png" alt="logo-review" width="225">
<span class="review-list__item-text">Sed vestibulum scelerisque urna, eu finibus leo facilisis sit
amet. Proin id dignissim magna. Sed varius urna et pulvinar venenatis. </span>
</div>
<div class="review-list__item">
<img class="review-list__item-logo" src="/dist/images/about-fork/logo5.png" alt="logo-review" width="166">
<span class="review-list__item-text">Praesent ut eros tristique, malesuada lectus vel, lobortis massa.
Nulla faucibus lorem id arcu consequat faucibus. </span>
</div>
<div class="review-list__item">
<img class="review-list__item-logo" src="/dist/images/about-fork/logo6.png" alt="logo-review" width="108">
<span class="review-list__item-text">Fusce pharetra erat id odio blandit, nec
pharetra eros venenatis.
Pellentesque porttitor cursus massa et vestibulum.</span>
</div>
</div>
<p class="about__subtitle">Duis lobortis arcu sed arcu tincidunt feugiat. Nulla nisi mauris, facilisis vitae
aliquet id, imperdiet quis nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</section>
<section class="fork-subscription-pricing">
<h2 class="fork-subscription-pricing__heading">
Fork Subscription Pricing
</h2>
<div class="fork-subscription-pricing__price-list">
<div class="fork-subscription-pricing__for-columns">
<div class="fork-subscription-pricing__item clother-item">
<h3 class="fork-subscription-pricing__sub-heading">Students</h3>
<p class="fork-subscription-pricing__price">$50</p>
<p class="fork-subscription-pricing__month">per month</p>
<div class="fork-subscription-pricing__line"></div>
<p class="fork-subscription-pricing__discribing wider-subscription">Personal License</p>
<a href="#void" class="fork-subscription-pricing__btn">PURCHASE</a>
</div>
<div class="fork-subscription-pricing__item">
<h3 class="fork-subscription-pricing__sub-heading">professional</h3>
<p class="fork-subscription-pricing__price">$59</p>
<p class="fork-subscription-pricing__month">per month</p>
<div class="fork-subscription-pricing__line"></div>
<p class="fork-subscription-pricing__discribing">Professional License Email Support</p>
<a href="#void" class="fork-subscription-pricing__btn">PURCHASE</a>
</div>
</div>
<div class="fork-subscription-pricing__for-columns">
<div class="fork-subscription-pricing__item main-block">
<h3 class="fork-subscription-pricing__sub-heading main-block-heading">agency</h3>
<p class="fork-subscription-pricing__price">$99</p>
<p class="fork-subscription-pricing__month">per month</p>
<div class="fork-subscription-pricing__line"></div>
<p class="fork-subscription-pricing__discribing">1-12 Team Members Phone Support</p>
<a href="#void" class="fork-subscription-pricing__btn">PURCHASE</a>
</div>
<div class="fork-subscription-pricing__item">
<h3 class="fork-subscription-pricing__sub-heading">enterprise</h3>
<p class="fork-subscription-pricing__price">$159</p>
<p class="fork-subscription-pricing__month">per month</p>
<div class="fork-subscription-pricing__line"></div>
<p class="fork-subscription-pricing__discribing">Unlimited Team Members 24/ 7 Phone Support</p>
<a href="#void" class="fork-subscription-pricing__btn">PURCHASE</a>
</div>
</div>
</div>
</section>
</body>
</html>