-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (124 loc) · 6.36 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
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<!-- Body -->
<body>
<!-- Navigation bar -->
<nav>
<div>
<ul>
<li><a href="#title">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#places">Places To Visit</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
</div>
</nav>
<!-- End of Navigation bar -->
<!-- Home | Parallex background -->
<header id="title">
<div class="bgimg-1">
<h1>Montréal</h1>
</div>
</header>
<!-- End of Home | Parallex background -->
<!-- About -->
<section id="about">
<div class="container"> <!-- Start of container -->
<h2>About</h2>
<div class="row"> <!-- Start of row -->
<!-- Column 1 -->
<div class="col-md-6">
<img src="https://c1.staticflickr.com/3/2817/33231983300_29bd76b2fd.jpg" >
</div>
<!-- Column 2 -->
<div class="col-md-6">
<h3></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quae tandem ista ratio est? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Non igitur bene. Duo Reges: constructio interrete. Iam id ipsum absurdum, maximum malum neglegi. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.</p>
</div>
</div> <!-- End of row -->
</div> <!-- End of container -->
</section>
<!-- End of About -->
<!-- Parallax background -->
<div class="bgimg-2">
</div>
<!-- End of Parallax background -->
<!-- Start of Places -->
<section id="places">
<div class="container"> <!-- Start of container -->
<h2>Places To Visit</h2>
<div class="row"> <!-- Start of row -->
<!-- Column 1 -->
<div class="col-sm-4">
<img src="https://c1.staticflickr.com/3/2868/33574280926_da516084dd_n.jpg" width="335px">
<h3><a href="#">History</a></h3>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quae tandem ista ratio est? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Non igitur bene. Duo Reges: constructio interrete. Iam id ipsum absurdum, maximum malum neglegi. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.</p>
</div>
<!-- Column 2 -->
<div class="col-sm-4">
<img src="https://c2.staticflickr.com/4/3938/33458581402_8df2f53c85_n.jpg">
<h3><a href="#">Food</a></h3>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quae tandem ista ratio est? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Non igitur bene. Duo Reges: constructio interrete. Iam id ipsum absurdum, maximum malum neglegi. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.</p>
</div>
<!-- Column 3 -->
<div class="col-sm-4">
<img src="https://c1.staticflickr.com/3/2942/33462150252_1515f3950d_n.jpg">
<h3><a href="#">Culture</a></h3>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quae tandem ista ratio est? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Non igitur bene. Duo Reges: constructio interrete. Iam id ipsum absurdum, maximum malum neglegi. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.</p>
</div>
</div> <!-- End of row -->
</div> <!-- End of container -->
</section>
<!-- End of Places -->
<!-- Parallax background -->
<div class="bgimg-3">
</div>
<!-- End of Parallax background -->
<!-- Resources -->
<section id="resources">
<div class="container"> <!-- Start of container -->
<h2>Resources</h2>
<div class="row"> <!-- Start of row -->
<!-- Column 1 -->
<div class="col-md-6">
<h3> Want more information? Here are additional resources about Montréal and the province of Québec.</h3>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quae tandem ista ratio est? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Non igitur bene.</p>
<h3>Links</h3>
<ul class="list-unstyled">
<li>
<a href="http://www.tourisme-montreal.org/" target="_blank" >Tourisme Montréal</a>
</li>
<li>
<a href="http://ville.montreal.qc.ca/portal/page?_pageid=5977,86481579&_dad=portal&_schema=PORTAL" target="_blank">Ville de Montréal</a>
</li>
<li>
<a href="https://www.quebecoriginal.com/en" target="_blank">Québec Original</a>
</li>
<li><a href="http://www.tourisme.gouv.qc.ca/index.php" target="_blank">Tourisme Québec
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="col-md-6">
<img src="https://c2.staticflickr.com/4/3938/32776099264_44f0bde1b7.jpg">
</div>
</div> <!-- End of row -->
</div> <!-- End of container -->
</section>
<!-- End of Resources -->
<!-- Start of Footer -->
<footer>
<h5>Written & Coded by <strong> Zara Otamias </strong> ♥</h5>
</footer>
<!-- End of Footer -->
</body>
<!-- End of Body -->
<!-- Stock photos from unsplash.com -->