-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (166 loc) · 9.99 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
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>@Latin America</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Luznery Vera">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/w3schools.library.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<body class="w3-light-grey">
<!-- Navbar (sit on top) -->
<div class="w3-top" role="listbox">
<ul class="w3-navbar" id="myNavbar">
<li><a href="index.html">@LatinAmerica</a></li>
<li><a href="#directory">Directory</a></li>
<li class="w3-right">
<a href="#contact" class="w3-padding-large"><i class="glyphicon glyphicon-envelope mygly"> Contact</i></a>
</li>
</ul>
</div>
<div class="hero hero-primary bg-image">
<img src="images/woman-246236_1920.jpg" alt="Hero @LatinAmerica">
<div class="container">
<div class="hero-body">
<h1 class="hero-title">@LatinAmerica</h1>
<h2 class="hero-subtitle">Welcome to the Latin America Online Directory</h2>
</div>
</div>
</div>
<!-- About Section -->
<!-- First Grid: Logo & About -->
<div class="w3-row">
<div class="w3-half w3-card-4" style="height:600px">
<img src="images/fruits-1284553_1024.jpg" alt="Fruits of Latin America" class="w3-round w3-image w3-opacity-min bg-a1" width="600" height="750">
</div>
<div id="about" class="w3-half w3-card-4 w3-container" style="height:600px">
<div class="w3-padding-64">
<h3 class="w3-center">About @LatinAmerica</h3>
<br>
<h4 class="w3-center text2">Inspired by new user needs</h4>
<p class="w3-large mytext">@LatinAmerica was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit 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. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
</div>
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center country" id="directory">
<div class="w3-quarter">
<a href="costa-rica.html" target="_blank"><img src="images/Costa-Rica.png" alt="Costa Rica's flag" style="height: 30px" class="w3-hover-opacity mycountry"></a>
<p>Costa Rica</p>
</div>
<div class="w3-quarter">
<a href="panama.html" target="_blank"><img src="images/Panamá.png" alt="Panama's flag" style="height: 30px" class="w3-hover-opacity"></a>
<p>Panamá</p>
</div>
<div class="w3-quarter">
<a href="paraguay.html" target="_blank"><img src="images/Paraguay.png" alt="Paraguay's flag" style="height: 30px" class="w3-hover-opacity"></a>
<p>Paraguay</p>
</div>
<div class="w3-quarter">
<a href="puerto-rico.html" target="_blank"><img src="images/Puerto-Rico.png" alt="Puerto Rico's flag" style="height: 30px" class="w3-hover-opacity"></a>
<p>Puerto Rico</p>
</div>
</div>
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter w3-card-4 feature-1">
<a href="feature-1.html" target="_blank"><img src="images/coffee-beans-1369780_1024.jpg" alt="Coffee from Costa Rica" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-1</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter w3-card-4 feature-2">
<a href="feature-2.html" target="_blank"><img src="images/Panamá.jpg" alt="City of Panama" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-2</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter w3-card-4 feature-3">
<a href="feature-3.html" target="_blank"><img src="images/shoe-1708632_1024.jpg" alt="Leather Shoes handmade in Paraguay" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-3</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter w3-card-4 feature-4">
<a href="feature-4.html" target="_blank"><img src="images/puerto-rico-143340_1024.jpg" alt="Aerial view of the Island of Puerto Rico" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-4</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter w3-card-4 feature-5">
<a href="feature-5.html" target="_blank"><img src="images/tropics-1644560_1024.jpg" alt="Tropical fruits of Costa Rica" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-5</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter w3-card-4 feature-6">
<a href="feature-6.html" target="_blank"><img src="images/vuelo-2016-mayo15-wl-1-43_Panamá1.jpg" alt="Aerial view of Panama Canal may 2016" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-6</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter w3-card-4 feature-7">
<a href="feature-7.html" target="_blank"><img src="images/glass-1587258_1024.jpg" alt="Milk production in Paraguay" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-7</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter w3-card-4 feature-8">
<a href="feature-8.html" target="_blank"><img src="images/shrimp-727214_1024.jpg" alt="Shrimp from Puerto Rico" style="width:100%" class="w3-hover-opacity"></a>
<h3>Feature-8</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="w3-content w3-container w3-padding-64">
<h3 class="w3-center">WHERE I WORK</h3>
<p class="w3-center"><em>I'd love your feedback!</em>
</p>
<!-- Container Swing By & Contact -->
<div class="w3-half w3-container w3-center w3-animate-opacity" style="height:510px">
<div class="w3-padding-64">
<h1>Swing By</h1>
</div>
<div class="w3-padding-64">
<p>Swing by for a cup of coffee, or leave me a note:</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Upata, VE</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope mygly2"></span></p>
<div itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="email"><a href="mailto:[email protected]" class="contact">Email</a></span></div>
</div>
</div>
<!-- End Swing -->
<div class="w3-half w3-container" style="height:510px">
<!-- contact section -->
<div class="w3-padding-64 w3-padding-xlarge w3-center">
<h1>Contact</h1><span class="glyphicon glyphicon-envelope"></span>
<p class="w3-container w3-center w3-animate-opacity">GET IN TOUCH</p>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-12 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<h4>Leave a Comment:</h4>
<form>
<div class="form-group">
<textarea class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-padding-xlarge">
<a href="index.html" class="w3-btn w3-padding-large w3-margin-bottom"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp" target="_blank" class="link1">w3.css</a>, <a href="http://getbootstrap.com" class="link2">Bootstrap</a> and built by <a href="https://twitter.com/LuzneryVera" target="_blank">@LuzneryVera</a>. Thanks to Coursera and edX for their Web Development specialization programs.</p>
<a href="https://www.coursera.org/" title="Coursera Courses" target="_blank"><img src="images/coursera_logo.png" alt="coursera logo" class="w3-hover-opacity logo-c"></a>
<a href="https://www.edx.org/" title="edX Courses" target="_blank"><img src="images/edx-logo-header.png" alt="edx logo" class="w3-hover-opacity logo-e"></a>
</footer>
</body>
</html>