-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (83 loc) · 5.57 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Projeto Responsível RangeHotels</title>
<link href="./style.css" rel="stylesheet">
<link href="./normalize.css" rel="stylesheet">
<link href="./main.css" rel="stylesheet">
<body>
<header class="top-header clearfix">
<img src="./images/logo_mob.svg" class="header-logo" alt="logotipo da range hotels">
<nav class="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<section class="top-content">
<div class="icon-play">
<img src="./images/icon_play.svg" alt="">
</div>
<h1 class="top-content-title">An exciting new aventure over the range</h1>
<h2 class="top-content-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2>
<a href="#" class="button">Get Started </a>
</section>
<section class="middle-content row">
<article class="col1-4">
<span class="icon-stopwatch"></span>
<h3 class="middle-content-title">Designer Guff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="col1-4">
<span class="icon-stats-bars2"></span>
<h3 class="middle-content-title">Detailed Stats</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="col1-4">
<span class="icon-clock"></span>
<h3 class="middle-content-title">Dashbord</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="col1-4">
<span class="icon-cog"></span>
<h3 class="middle-content-title">Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
</section>
<section class="main-content clearfix">
<article class="main-content-article col1-2">
<h3 class="main-content-title">Design Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="main-content-article col1-2">
<h3 class="main-content-title">Design Trends</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="main-content-article col1-2 clearfix">
<h3 class="main-content-title">Design Users</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="button2">Get Started</a>
</article>
<article class="main-content-article col1-2 clearfix">
<h3 class="main-content-title">Design Goals</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="button2">Buy Now</a>
</article>
</section>
<footer class="footer">
<ul class="footer-menushare">
<li><a href="http://www.facebook.com" class="icon-facebook" target="_blank"><span class="hidden">Facebook</span></a></li>
<li><a href="http://www.twitter.com" class="icon-twitter" target="_blank"><span class="hidden">Twitter</span></a></li>
<li><a href="http://www.google.com" class="icon-google-plus" target="_blank"><span class="hidden">Google Plus></span></a></li>
</ul>
<p>Copyright the Range</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</footer>
</body>
</html>