Skip to content

Commit 457b428

Browse files
Kanstantsin91Kanstantsin91
authored
Add files via upload
1 parent a846b51 commit 457b428

27 files changed

+994
-0
lines changed

‎Lesson 7/Project/css/style.css

+651
Large diffs are not rendered by default.

‎Lesson 7/Project/fonts/Raleway-Black-Italic.ttf

142 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Black.ttf

174 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Bold-Italic.ttf

143 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Bold.ttf

172 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-ExtraBold-Italic.ttf

142 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-ExtraBold.ttf

170 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-ExtraLight-Italic.ttf

138 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-ExtraLight.ttf

170 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Light-Italic.ttf

143 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Light.ttf

176 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Medium-Italic.ttf

143 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Medium.ttf

174 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Regular-Italic.ttf

141 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Regular.ttf

172 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-SemiBold-Italic.ttf

142 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-SemiBold.ttf

174 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Thin-Italic.ttf

139 KB
Binary file not shown.

‎Lesson 7/Project/fonts/Raleway-Thin.ttf

171 KB
Binary file not shown.

‎Lesson 7/Project/img/avatar.png

10.3 KB
Loading

‎Lesson 7/Project/img/bg_download_section.png

737 KB
Loading

‎Lesson 7/Project/img/bg_header.png

1.42 MB
Loading

‎Lesson 7/Project/img/easy_to_customize.jpg

14 KB
Loading

‎Lesson 7/Project/img/footer_panel.png

2.6 KB
Loading

‎Lesson 7/Project/img/thoughtful_design.jpg

14.3 KB
Loading

‎Lesson 7/Project/img/well_crafted.jpg

14.6 KB
Loading

‎Lesson 7/Project/index.html

+343
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap&subset=cyrillic" rel="stylesheet">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" href="./css/style.css">
10+
<title>Document</title>
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
16+
<nav>
17+
<div class="nav_header">
18+
<p>ax<span class="it">it</span></p>
19+
</div>
20+
<div class="navigation">
21+
<a href="#features">Features</a>
22+
<a href="#about">About</a>
23+
<a href="#purchase">Pricing</a>
24+
<a href="#reviews">Reviews</a>
25+
<a href="#contacts">Contacts</a>
26+
</div>
27+
28+
</nav>
29+
30+
<a name="features"></a>
31+
<header>
32+
<div class="header_main_part">
33+
<h1>Ax<span class="it">It</span></h1>
34+
<div class="section_header">
35+
<h2>Modern axure template for beautiful prototypes</h2>
36+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
37+
</div>
38+
<div><a href="#" class="btn">Download</a></div>
39+
</div>
40+
41+
<div class="trial_block">
42+
<div class="trial_form_header">Try Your <span>free</span> Trial Today</div>
43+
<form action="">
44+
<div class="trial_form_lines">
45+
<label class="trial_name_input">
46+
<input type="text" placeholder="Name">
47+
</label>
48+
<label class="trial_email_input">
49+
<input type="email" placeholder="Email">
50+
</label>
51+
<label>
52+
<input type="password" placeholder="Password">
53+
</label>
54+
</div>
55+
<button>Get Started</button>
56+
</form>
57+
</div>
58+
59+
</header>
60+
61+
<section class="social_media_section">
62+
<div class="information_part">
63+
<p class="title">Social Media</p>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
65+
</div>
66+
<div class="one_link">
67+
<a href="https://www.facebook.com/" class="fa fa-facebook" aria-hidden="true"></a>
68+
</div>
69+
<div class="one_link">
70+
<a href="https://twitter.com/" class="fa fa-twitter" aria-hidden="true"></a>
71+
</div>
72+
<div class="one_link">
73+
<a href="https://plus.google.com/" class="fa fa-google-plus" aria-hidden="true"></a>
74+
</div>
75+
<div class="one_link">
76+
<a href="https://www.pinterest.com/" class="fa fa-pinterest" aria-hidden="true"></a>
77+
</div>
78+
<div class="one_link">
79+
<a href="https://www.instagram.com/" class="fa fa-instagram" aria-hidden="true"></a>
80+
</div>
81+
<div class="one_link">
82+
<a href="https://www.stumbleupon.com/" class="fa fa-stumbleupon" aria-hidden="true"></a>
83+
</div>
84+
<div class="one_link">
85+
<a href="https://ifttt.com/applets/147561p-rss-feed-to-email" class="fa fa-rss" aria-hidden="true"></a>
86+
</div>
87+
</section>
88+
89+
90+
<a name="about"></a>
91+
<section>
92+
<div class="section_header">
93+
<h2>Why this is awesome</h2>
94+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
95+
</div>
96+
<div class="blocks">
97+
<div class="one_block">
98+
<img src="./img/thoughtful_design.jpg" alt="thoughtful_design.jpg">
99+
<p class="title">Thoughtful Design</p>
100+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.</p>
101+
</div>
102+
<div class="one_block">
103+
<img src="./img/well_crafted.jpg" alt="well_crafted.jpg">
104+
<p class="title">Well Crafted</p>
105+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.</p>
106+
</div>
107+
<div class="one_block">
108+
<img src="./img/easy_to_customize.jpg" alt="easy_to_customize.jpg">
109+
<p class="title">Easy to Customize</p>
110+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.</p>
111+
</div>
112+
</div>
113+
</section>
114+
115+
<a name="purchase"></a>
116+
<section class="purchase_section">
117+
<div class="section_header">
118+
<h2>Prising options</h2>
119+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
120+
</div>
121+
<div class="price_table">
122+
<div class="one_price_table">
123+
<div class="table_header">
124+
<div class="row">
125+
<p class="header_row">Basic</p>
126+
</div>
127+
<div class="row">
128+
<p class="price_row"><span class="currency">&#36;</span> <span class="sum">0</span> </p>
129+
</div>
130+
<div class="row">
131+
<p class="period_row">Free for Life</p>
132+
</div>
133+
<div class="status_row"></div>
134+
</div>
135+
<div class="table_body">
136+
<div class="row">
137+
<p>1 gb of space</p>
138+
</div>
139+
<div class="row">
140+
<p>10 gb of bandwidth</p>
141+
</div>
142+
<div class="row">
143+
<p>3 websites</p>
144+
</div>
145+
<div class="row">
146+
<p>Basic Customization</p>
147+
</div>
148+
<div class="row">
149+
<p>wordpress integration</p>
150+
</div>
151+
<div class="row">
152+
<p>email support</p>
153+
</div>
154+
</div>
155+
</div>
156+
157+
<div class="one_price_table">
158+
<div class="table_header">
159+
<div class="row">
160+
<p class="header_row">Professional</p>
161+
</div>
162+
<div class="row">
163+
<p class="price_row"><span class="currency">&#36;</span> <span class="sum">19</span> </p>
164+
</div>
165+
<div class="row">
166+
<p class="period_row">Monthly Payment</p>
167+
</div>
168+
<div class="not_emty_status_row">
169+
<p>Our most popular</p>
170+
</div>
171+
</div>
172+
<div class="table_body">
173+
<div class="row">
174+
<p>5 gb of space</p>
175+
</div>
176+
<div class="row">
177+
<p>50 gb of bandwidth</p>
178+
</div>
179+
<div class="row">
180+
<p>12 websites</p>
181+
</div>
182+
<div class="row">
183+
<p>advanced Customization</p>
184+
</div>
185+
<div class="row">
186+
<p>wordpress integration</p>
187+
</div>
188+
<div class="row">
189+
<p>email support</p>
190+
</div>
191+
</div>
192+
</div>
193+
194+
<div class="one_price_table">
195+
<div class="table_header">
196+
<div class="row">
197+
<p class="header_row">Enterprise</p>
198+
</div>
199+
<div class="row">
200+
<p class="price_row"><span class="currency">&#36;</span> <span class="sum">70</span> </p>
201+
</div>
202+
<div class="row">
203+
<p class="period_row">Monthly Payment</p>
204+
</div>
205+
<div class="status_row"></div>
206+
</div>
207+
<div class="table_body">
208+
<div class="row">
209+
<p>unlimited space</p>
210+
</div>
211+
<div class="row">
212+
<p>unlimited bandwidth</p>
213+
</div>
214+
<div class="row">
215+
<p>100 websites</p>
216+
</div>
217+
<div class="row">
218+
<p>advanced Customization</p>
219+
</div>
220+
<div class="row">
221+
<p>wordpress integration</p>
222+
</div>
223+
<div class="row">
224+
<p>24/7 customer support</p>
225+
</div>
226+
</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<a name="reviews"></a>
232+
<section class="comments_section">
233+
<div class="section_header">
234+
<h2>What our customers are saying</h2>
235+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
236+
</div>
237+
238+
<div class="comments_blocks">
239+
<div class="one_comment">
240+
<div class="comment_cloud">
241+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusamus expedita repellat similique odio aspernatur ex, architecto eaque quo suscipit.</p>
242+
</div>
243+
<div class="commentator_info_block">
244+
<img src="./img/avatar.png" alt="avatar.pn">
245+
<div class="commentator_name_and_prof">
246+
<p class="commentator_name">Jeremy H.</p>
247+
<p class="commentator_prof">Manager</p>
248+
</div>
249+
</div>
250+
</div>
251+
252+
<div class="one_comment">
253+
<div class="comment_cloud">
254+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusamus expedita repellat similique odio aspernatur ex, architecto eaque quo suscipit.</p>
255+
</div>
256+
<div class="commentator_info_block">
257+
<img src="./img/avatar.png" alt="avatar.pn">
258+
<div class="commentator_name_and_prof">
259+
<p class="commentator_name">John S.</p>
260+
<p class="commentator_prof">Freelancer</p>
261+
</div>
262+
</div>
263+
</div>
264+
265+
<div class="one_comment">
266+
<div class="comment_cloud">
267+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusamus expedita repellat similique odio aspernatur ex, architecto eaque quo suscipit.</p>
268+
</div>
269+
<div class="commentator_info_block">
270+
<img src="./img/avatar.png" alt="avatar.pn">
271+
<div class="commentator_name_and_prof">
272+
<p class="commentator_name">Susan W.</p>
273+
<p class="commentator_prof">Photographer</p>
274+
</div>
275+
</div>
276+
</div>
277+
</div>
278+
</section>
279+
280+
281+
<section class="download_section">
282+
283+
<div class="section_header">
284+
<h2>Stylish axure design</h2>
285+
<p>Use the sections you need, remove the ones you don't. Create gorgeous prototypes faster than ever!
286+
</p>
287+
</div>
288+
<div class="btns_block">
289+
<a href="#" class="btn">Download</a>
290+
</div>
291+
292+
</section>
293+
294+
<a name="contacts"></a>
295+
<section class="contact_us_section">
296+
<div class="section_header">
297+
<h2>Contact us</h2>
298+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
299+
</div>
300+
<form action="">
301+
<div class="inputs_wrapper">
302+
<div class="form_lines">
303+
<label>
304+
<input type="text" placeholder="Name">
305+
</label>
306+
<label>
307+
<input type="email" placeholder="Email">
308+
</label>
309+
<label>
310+
<input type="text" placeholder="Subject">
311+
</label>
312+
</div>
313+
<div class="message_area">
314+
<label>
315+
<textarea placeholder="Message"></textarea>
316+
</label>
317+
</div>
318+
</div>
319+
<div class="button_wrapper">
320+
<button type="submit">Send Message</button>
321+
</div>
322+
</form>
323+
</section>
324+
325+
<footer>
326+
<div class="footer_links">
327+
<a href="https://www.facebook.com/" class="facebook"></a>
328+
<a href="https://twitter.com/" class="twitter"></a>
329+
<a href="https://plus.google.com/" class="google"></a>
330+
<a href="https://www.pinterest.com/" class="pinterest"></a>
331+
<a href="https://www.instagram.com/" class="instagram"></a>
332+
<a href="https://www.stumbleupon.com/" class="stumbleupon"></a>
333+
<a href="https://ifttt.com/applets/147561p-rss-feed-to-email" class="rss"></a>
334+
</div>
335+
336+
<p>&copy; 2015 Axure Themes</p>
337+
338+
</footer>
339+
340+
</div>
341+
</body>
342+
343+
</html>

0 commit comments

Comments
 (0)