-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpuerto-rico.html
176 lines (173 loc) · 10.7 KB
/
puerto-rico.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
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>@LatinAmerica</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="index.html">Directory</a></li>
<li class="w3-right">
<a href="index.html" class="w3-padding-large"><i class="glyphicon glyphicon-envelope mygly"> Contact</i></a>
</ul>
</div>
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<h1><b>Puerto Rico</b></h1>
</header>
<div class="w3-content w3-center">
<div class="w3-row">
<div class="w3-col.s12 w3-col.m12">
<img src="images/Puerto-Rico.png" alt="Puerto Rico's flag" style="height: 50px">
</div>
</div>
</div>
<div id="products" class="container-fluid bg-2 text-center">
<br>
<p>Search in your directory</p>
<form class="form-inline">
<input class="form-control" type="text" size="50" placeholder="Search" required>
<button class="btn btn-success" type="submit" value="Confirm Search!">Search</button>
</form>
</div>
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">
<!-- Grid -->
<div class="w3-row">
<!-- Blog entries -->
<div class="w3-col l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="images/Screen-Shot-2017-03-13-at-7.59.27-AM-1024.jpg" alt="Baseball players from Puerto Rico 2017" class="myimg" style="width:100%">
<div class="w3-container w3-padding-8">
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7, 2017</span></h5>
</div>
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Introduction menu -->
<div class="w3-col l4">
<div class="w3-card-2 w3-margin w3-margin-top">
<h2 class="w3-center">HTML slides</h2>
<div class="w3-content" style="max-width:400px">
<img class="mySlides" src="images/Screen-Shot-2017-03-13-at-7.59.27-AM-1024.jpg" alt="Baseball players from Puerto Rico 2017" style="width:100%">
<img class="mySlides" src="images/puerto-rico-143340_1024.jpg" alt="Aerial view of the Island of Puerto Rico" style="width:100%">
<img class="mySlides" src="images/shrimp-727214_1024.jpg" alt="Shrimp from Puerto Rico" style="width:100%">
</div>
</div>
<!-- Posts -->
<div class="w3-card-2 w3-margin">
<div class="w3-container w3-padding">
<h4>Empresas relacionadas</h4>
</div>
<ul class="w3-ul w3-hoverable w3-white">
<li class="w3-padding-16">
<img src="images/fruits-1284553_1024.jpg" alt="Fruits of Latin America" class="w3-left w3-margin-right" style="width:80px">
<span class="w3-large">Lorem</span>
<br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="images/coffee-beans-1369780_1024.jpg" alt="Coffee from Costa Rica" class="w3-left w3-margin-right" style="width:80px">
<span class="w3-large">Ipsum</span>
<br>
<span>Praes tinci sed</span>
</li>
<li class="w3-padding-16">
<img src="images/panama_punta_pacifi11.jpg" alt="Architecture of Panama" class="w3-left w3-margin-right" style="width:80px">
<span class="w3-large">Dorum</span>
<br>
<span>Ultricies congue</span>
</li>
<li class="w3-padding-16">
<img src="images/oranges-2100108_1024.jpg" alt="Oranges from Paraguay" class="w3-left w3-margin-right" style="width:80px">
<span class="w3-large">Mingsum</span>
<br>
<span>Lorem ipsum dipsum</span>
</li>
</ul>
</div>
<hr>
<!-- Labels / tags -->
<div class="w3-card-2 w3-margin">
<div class="w3-container w3-padding">
<h4>Tags</h4>
</div>
<div class="w3-container w3-white">
<p><span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Costa Rica</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Panama</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Paraguay</span>
<span class="w3-tag w3-black w3-margin-bottom">Puerto Rico</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Fruits</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Shrimp</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Leather</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Shoes</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Exports</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Milk</span>
<span class="w3-tag w3-black w3-small w3-margin-bottom">Commerce</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Transport</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Goods</span>
<span class="w3-tag w3-black w3-small w3-margin-bottom">Sports</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Games</span> <span class="w3-tag w3-black w3-small w3-margin-bottom">Selling</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Coffee</span>
</p>
</div>
</div>
<div class="w3-white w3-margin">
<div class="w3-container w3-padding w3-black">
<h4>Follow Me</h4>
</div>
<div class="w3-container w3-xlarge w3-padding">
<i class="fa fa-facebook-official w3-hover-text-indigo"></i>
<i class="fa fa-instagram w3-hover-text-purple"></i>
<i class="fa fa-snapchat w3-hover-text-yellow"></i>
<i class="fa fa-pinterest-p w3-hover-text-red"></i>
<i class="fa fa-twitter w3-hover-text-light-blue"></i>
<i class="fa fa-linkedin w3-hover-text-indigo"></i>
</div>
</div>
<hr>
<!-- Subscribe -->
<div class="w3-white w3-margin">
<div class="w3-container w3-padding w3-black">
<h4>Subscribe</h4>
</div>
<div class="w3-container w3-white">
<p>Enter your e-mail below and get notified on the latest blog posts.</p>
<p>
<input class="w3-input w3-border" type="text" placeholder="Enter e-mail" style="width:100%">
</p>
<p>
<button type="button" class="w3-btn-block w3-padding w3-red w3-opacity w3-hover-opacity-off">Subscribe</button>
</p>
</div>
</div>
<!-- END About/Intro Menu -->
</div>
<!-- END GRID -->
</div>
<!-- END w3-content -->
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<ul class="w3-pagination">
<li><a class="w3-black" href="#">1</a></li>
<li><a class="w3-hover-black" href="#">2</a></li>
<li><a class="w3-hover-black" href="#">3</a></li>
<li><a class="w3-hover-black" href="#">4</a></li>
<li><a class="w3-hover-black" href="#">»</a></li>
</ul>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-padding-xlarge">
<a href="#" 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>
<script src="js/script.js"></script>
</body>
</html>