-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (165 loc) · 9.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Step project forkio</title>
<link rel="stylesheet" href="dist/css/main.css">
<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>
<!-- задание №1 -->
<section class="header__section ">
<header class="header__main wrapper">
<a href="#" class="header__logo">
<span class="header__logo--pic"></span>
<span class="header__logo--text"> forkio</span>
</a>
<nav class="menu">
<a href="#" class="menu__btn">Buy Now</a>
<input id="menu__toggle" type="checkbox"/>
<label class="burger__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a href="#" class="menu__item">Overview</a></li>
<li><a href="#" class="menu__item">About Fork</a></li>
<li><a href="#" class="menu__item">Buying Options</a></li>
<li><a href="#" class="menu__item">Support</a></li>
</ul>
</nav>
</header>
<h1 class="app">Fork App</h1>
<p class="app__slogan">A real gamechanger in the world of web development</p>
<p class="app__text">v. 2.8 For Mac and Windows</p>
<div class="button-wrapper">
<button class="button__call-to-action">Download For Free Now</button>
<p class="unlimited__trial">Unlimited 30-Days Trial Period</p>
</div>
</div>
</section>
<!-- задание №2 -->
<section class="editor container">
<p class="editor__header">Revolutionary editor</p>
<p class="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>
<div class="editor__buttons">
<a class="github-button" href="https://github.com/ntkme/github-buttons/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch ntkme/github-buttons on GitHub">Watch</a>
<a class="github-button" href="https://github.com/ntkme/github-buttons" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
<a class="github-button" href="https://github.com/ntkme/github-buttons/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork ntkme/github-buttons on GitHub">Fork</a>
</div>
</section>
<section class="guarantees">
<p class="guarantees__header container"><Here is what you get></p>
<div class="guarantees__list container">
<div class="guarantees__list-item">
<img src="./dist/img/icon1.png" alt="search icon" class="guarantees__list-img">
<div class="guarantees__list-content">
<p class="guarantees__list-text">Creatred to Make The Web Better</p>
<p class="guarantees__list-text">Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. <br class="br">Sed id metus id quam auctor molestie eget ut augue.</p>
</div>
</div>
<div class="guarantees__list-item">
<img src="./dist/img/icon2.png" alt="tool icon" class="guarantees__list-img">
<div class="guarantees__list-content glc2">
<p class="guarantees__list-text">Incredibly Powerful Tool</p>
<p class="guarantees__list-text">Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat massa placerat ac. <br class="br">Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.</p>
</div>
</div>
<div class="guarantees__list-item">
<img src="./dist/img/icon3.png" alt="stuff icon" class="guarantees__list-img">
<div class="guarantees__list-content glc3">
<p class="guarantees__list-text">Experimental Stuff</p>
<p class="guarantees__list-text">Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat massa placerat ac. <br class="br">Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.</p>
</div>
</div>
<div class="guarantees__list-item">
<img src="./dist/img/icon4.png" alt="timer icon" class="guarantees__list-img">
<div class="guarantees__list-content glc4">
<p class="guarantees__list-text">Creatred to Make The Web Better</p>
<p class="guarantees__list-text">Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat massa placerat ac. <br class="br">Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.</p>
</div>
</div>
</div>
<img src="./dist/img/editor-img.png" alt="editor img" class="guarantees__img">
</section>
<!-- задание №1 -->
<section class="testimonials__section" >
<div class="testimonials wrapper">
<h2 class="testimonials__header">People Are Talking About Fork</h2>
<div class="partners">
<div class="partners__block">
<img src="dist/img/partner-logo1.png" alt="logo" class="partners__logo">
<p class="partners__comment">Sed vestibulum scelerisque urna, eu finibus leo facilisis sit
amet. Proin id dignissim magna. Sed varius urna et pulvinar venenatis. </p>
</div>
<div class="partners__block">
<img src="dist/img/partner-logo2.png" alt="logo" class="partners__logo">
<p class="partners__comment">Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum,
rhoncus molestie neque ac, mollis eleifend nibh.</p>
</div>
<div class="partners__block">
<img src="dist/img/partner-logo3.png" alt="logo" class="partners__logo">
<p class="partners__comment">In efficitur in velit et tempus. Duis nec odio dapibus, suscipit
erat fringilla, imperdiet nibh. Morbi tempus auctor felis ac vehicula. </p>
</div>
<div class="partners__block">
<img src="dist/img/partner-logo4.png" alt="logo" class="partners__logo">
<p class="partners__comment">Sed vestibulum scelerisque urna, eu finibus leo facilisis sit
amet. Proin id dignissim magna. Sed varius urna et pulvinar venenatis. </p>
</div>
<div class="partners__block">
<img src="dist/img/partner-logo5.png" alt="logo" class="partners__logo">
<p class="partners__comment">Praesent ut eros tristique, malesuada lectus vel, lobortis massa.
Nulla faucibus lorem id arcu consequat faucibus. </p>
</div>
<div class="partners__block">
<img src="dist/img/partner-logo6.png" alt="logo" class="partners__logo">
<p class="partners__comment">Fusce pharetra erat id odio blandit, nec pharetra eros venenatis.
Pellentesque porttitor cursus massa et vestibulum.</p>
</div>
</div>
<footer class="testimonials__footer">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. </footer>
</div>
</section>
<!-- задание №2 -->
<section class="pricing">
<p class="pricing__header container">Fork Subscription Pricing</p>
<div class="pricing__list container">
<div class="pricing__list-item">
<p class="pricing__list-text bgc1">Students</p>
<p class="pricing__list-text">$29</p>
<p class="pricing__list-text">per month</p>
<p class="pricing__list-text">Personal License</p>
<button class="pricing__list-button">purchase</button>
</div>
<div class="pricing__list-item">
<p class="pricing__list-text bgc2">Professional</p>
<p class="pricing__list-text">$59</p>
<p class="pricing__list-text">per month</p>
<p class="pricing__list-text">Professional License <br>Email Support</p>
<button class="pricing__list-button">purchase</button>
</div>
<div class="pricing__list-item">
<p class="pricing__list-text bgc3">Agency</p>
<p class="pricing__list-text">$99</p>
<p class="pricing__list-text">per month</p>
<p class="pricing__list-text">1-12 Team Members <br>Phone Support</p>
<button class="pricing__list-button">purchase</button>
</div>
<div class="pricing__list-item">
<p class="pricing__list-text bgc4">Enterprise</p>
<p class="pricing__list-text">$159</p>
<p class="pricing__list-text">per month</p>
<p class="pricing__list-text">Unlimited Team Members <br>24/ 7 Phone Support</p>
<button class="pricing__list-button">purchase</button>
</div>
</div>
</section>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="./dist/js/app.js"></script>
</body>
</html>