-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (117 loc) · 4.25 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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toronto</title>
<link rel="stylesheet" type="text/css" href="web-fonts-with-css/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="container-fluid navbar">
<div class="navheader">
<span class="logo">Toronto</span>
<span class="open"><i class="fa fa-bars"></i></span>
</div>
<div class="navbar-desktop">
<ul>
<li><a href="#">see & do</a></li>
<li><a href="#">eat & drink</a></li>
<li><a href="#">stay & plan</a></li>
<li><a href="#">events</a></li>
</ul>
</div>
</nav>
<div class="navbar-mobile">
<span class="close"><i class="fa fa-times"></i></span>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">see & do</a></li>
<li><a href="#">eat & drink</a></li>
<li><a href="#">stay & plan</a></li>
<li><a href="#">events</a></li>
</ul>
</div>
<header class="container-fluid banner">
<div class="diamond-shape">
</div>
<h1>The views are different here</h1>
</header>
<section class="container-fluid intro">
<h2>welcome to Toronto</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus leo et est tincidunt pulvinar. In hac
habitasse platea dictumst. Proin auctor lobortis sem ac lobortis. Proin ac mi in mi pulvinar molestie a non nisl.
Vivamus ultricies eu sapien eget egestas. Vivamus eget eleifend mauris, eget tempus mi.</p>
</section>
<section class="container-fluid action-grid">
<a href="#" class="action-grid_item">
See & Do
<i class="fa fa-chevron-right"></i>
</a>
<a href="#" class="action-grid_item">
Eat & Drink
<i class="fa fa-chevron-right"></i>
</a>
<a href="#" class="action-grid_item">
Stay & Plan
<i class="fa fa-chevron-right"></i>
</a>
<a href="#" class="action-grid_item">
Events
<i class="fa fa-chevron-right"></i>
</a>
</section>
<section class="container-fluid featured-event">
<div class="row">
<div class="right-side col-12 col-md-6">
<span class="featured-label">Featured event</span>
<img src="AdobeStock_138888689.png">
</div>
<div class="left-side col-12 col-md-6">
<h2>Toronto Farmers Market</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus leo et est tincidunt pulvinar. In
hac habitasse platea dictumst. Proin auctor lobortis sem ac lobortis.</p>
<a href="#" class="read-more">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="container-fluid events">
<div class="events_slider">
<div class="event">
<div class="diamond-shape fill-div">
</div>
<span class="date">Saturday 2 March 2017</span>
<span class="name">The Event Name</span>
<span class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus leo et est
tincidunt pulvinar. In
hac habitasse platea dictumst.</span>
<a href="#" class="read-more">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="container-fluid social">
<div class="row">
<div class="col-12 col-md-6">
<form class="subscribe" name="subscribe">
<label for="input">
Subscribe to our daily newsletter.
</label>
<div class="input-group">
<input name=email type=email placeholder="janedoe@youremail.com" required>
<button type="submit">Subscribe</button>
</div>
</form>
</div>
<div class="col-12 col-md-6 follow">
<a href="#">
<i class="fa fa-thumbs-up"></i> like toronto on Facebook
</a>
<a href="#">
<i class="fab fa-twitter"></i> follow toronto on twitter
</a>
</div>
</div>
</section>
</body>
</html>