@AdCharity/

Venezuela Final Project

HTML, CSS, JS

Venezuela information

fork
loading
Files
  • index.html
  • bibs
  • coins
  • images
  • Ven
  • aboutcreators.html
  • area.html
  • art.html
  • bibiliography.html
  • celebrations.html
  • clothing.html
  • economy.html
  • file.txt
  • finish.html
  • food.html
  • funfacts.html
  • language.html
  • projectdetails.html
  • religion.html
  • reload.html
  • school.html
  • signup.html
  • songsdances.html
  • test.html
  • travel.html
  • zbase.html
  • zveni.gif
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<DOCTYPE html>
	<html>
	<title>VenezuelaInformation</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		html,
		body,
		h1,
		h2,
		h3,
		h4,
		h5 {
			font-family: "Open Sans", sans-serif
		}
		div.sticky {
				position: -webkit-sticky;
				position: sticky;
				top: 0;
				padding: 10px;
				background-color: tomato;
				border: 1px solid red;
		}
	</style>
	<div class="sticky">Welcome to our Website on Venezuela! Click <a href="signup.html">here</a> for our sign up/contact information.</div>
	<body class="w3-theme-15">

		<!-- Header -->
		<style>
			.header {
				background-image: url("images/venezuelanflag.jpg");
				background-repeat: no-repeat;
				background-color: #1abc9c;
				height: 180px;
				border: 5px solid;
				color: white;
				text-align: center;
				padding: 47px;
				background-position: center top;
			}

			.image {
				background-size: contain;
				width: 100%;
				height: 750px;
				border: 5px solid;
				color: white;
				resize: both;
				overflow: scroll;
			}
          
		</style>
		<!--overflow: hidden;-->
		<div class="header" "w3-top">
			<h1>Venezuela Information</h1>
		</div>

		<!-- Navigation (Normal Screen) -->
		<!-- <div class="w3-top"> -->
		<div class="w3-bar w3-theme-d2 w3-left-align w3-large">
			<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2"
			 href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
    <a href="index.html" class="w3-bar-item w3-button w3-padding-medium w3-theme-d4"><i class="fa fa-home w3-margin-right"></i>Venezuela</a>
    <a href="aboutcreators.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="About Creators"><i class="fa fa-user"></i></a>
    <a href="https://mail.google.com" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="GMail"><i class="fa fa-envelope"></i></a>
    <div class="w3-dropdown-hover w3-hide-small">
      <button class="w3-button w3-padding-large" title="Updates"><i class="fa fa-bell"></i><span class="w3-badge w3-right w3-small w3-green">4</span></button>
      <div class="w3-dropdown-content w3-card-4 w3-bar-block" style="width:300px">
        <a href="#" class="w3-bar-item w3-button">Last Updated: 11/10/18</a>
        <a href="#" class="w3-bar-item w3-button">All notifications will appear here</a>
        <a href="#" class="w3-bar-item w3-button">The official name of Venezuela is: The Bolivarian Republic of Venezuela.</a>
        <a href="test.html" class="w3-bar-item w3-button">Click here to take the quiz!</a>
      </div>
    </div>
    <a href="https://www.logomaker.com/" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-medium w3-hover-white" title="Logo">
      <img src="images/logo.png" class="w3-circle" style="height:25px;width:25px" alt="CrescentMoon"> 
    </a>
  </div>
</div>

<!-- Navigation (Small Screen) -->
<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-large">
  <a href="aboutcreators.html" class="w3-bar-item w3-button w3-padding-large">About Creators</a>
  <a href="index.html" class="w3-bar-item w3-button w3-padding-large">Home</a>
  <a href="https://mail.google.com" class="w3-bar-item w3-button w3-padding-large">GMail</a>
</div>

<!-- Margin -->
<div class="w3-container w3-content" style="max-width:1400px;margin-top:80px"> 
  <!-- Grid -->
  <div class="w3-row">
    <!-- Left Row -->
    <div class="w3-col m3">
      <!-- Anime Character of the Year -->
      <div class="w3-card w3-round w3-white">
        <div class="w3-container w3-margin">
          <h4 class="w3-center">Venezuela Leader</h4>
          <p class="w3-center"><img src="images/maduro.jpg" class="w3-circle" style="height:160px;width:150px" alt="Nicolás Maduro"></p>
          <hr>
          <p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i>Current President of Venezuela, and elected in 2013. Presidential elections were held in Venezuela on April 14th, 2013, following the death of President Hugo Chávez on March 5th, 2013. </p>
          <p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i>Nicolás Maduro is the current leader of Venezuela. He takes residence at the Miraflores ("to watch flowers" or "flower's view" in English) Palace.</p>
          <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i>President Maduro was born in November 23,1962 at the capital, Caracas, Venezuela. He is currently at the age of 55.</p>
          <p>His father was Nicolás Maduro García, and his mother, Teresa de Jesús Moros. President Maduro is married to Cilia Flores and has one child, Nicolás Jr. Famous quote when expelling 3 US diplomats: "Yankee go home. Enough abuses already."</p>
        </div>
      </div>
      <br>
      <!-- Mini Nav Side left -->     
      <div class="w3-card w3-round">
        <div class="w3-white">
          <button onclick="work('Demo1')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i>Navigation</button>
            <div id="Demo1" class="w3-hide w3-container">
            <a href="index.html">Home</a>
            <br>
            <a href="language.html">Language</a>
            <br>
            <a href="area.html">Area</a>
            <br>
            <a href="religion.html">Religion</a>
            <br>
            <a href="celebrations.html">Celebrations</a>
            <br>
            <a href="travel.html">Travel</a>
            <br>
            <a href="school.html">School</a>
            <br>
            <a href="economy.html">Economy</a>
            <br>
            <a href="food.html">Food</a>
            <br>
            <a href="clothing.html">Clothing</a>
            <br>
            <a href="art.html">Art</a>
            <br>
            <a href="songsdances.html">Songs/Dances</a>
            <br>
            <a href="funfacts.html">Fun Facts</a>
            <br>
            <a href="test.html">Test</a>
            <br>
            <a href="projectdetails.html">Project Details</a>
            <br>
            <a href="bibiliography.html">Bibliography</a>
            <br>
            </div>
          <button onclick="work('Demo2')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i>Look</button>
            <div id="Demo2" class="w3-hide w3-container">
            <p>This is an informative website, created from scratch with html (that's why the interface is a little screwy)! Above is the navigation. Click here to find information regarding a topic. In the top right, there is a crescent moon logo. If you click it, you will be redirected to a logo website. In the main navigation bar, clicking on the home will bring you back to home, the profile picture to the creators section, the email to GMail, and the notifications. To the right is the information. to the left is the general information, such as the president, gallery, and mini notifications.  </p>
            </div>
          <button onclick="work('Demo4')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i>Gallery</button>
          <div id="Demo4" class="w3-hide w3-container">
          <div class="w3-row-padding">
          <br>
          <p class="w3-center"><img src="images/riotmaduro.jpeg" class="w3-circle" style="height:150px;width:150px" alt="Speech"></p>
          <br>
          <p class="w3-center"><img src="images/angelfalls.jpeg" class="w3-circle" style="height:150px;width:150px" alt="Flag"></p>
          <br>
          <p class="w3-center"><img src="images/map.jpeg" class="w3-circle" style="height:150px;width:150px" alt="Map"></p>
          <br>
          <p class="w3-center"><img src="images/simon.jpeg" class="w3-circle" style="height:150px;width:150px" alt="Simon Bolivar"></p>
          <br>          
          </div>
          </div>
          </div>
          <br>
          <!-- Tags -->
          <div class="w3-card w3-round w3-white w3-hide-small">
            <div class="w3-container">
              <p>Tags</p>
              <p>
              <span class="w3-tag w3-small w3-theme-d5">Venezuela</span>
              <span class="w3-tag w3-small w3-theme-d4">Spanish</span>
              <span class="w3-tag w3-small w3-theme-d3">Active</span>
              <span class="w3-tag w3-small w3-theme-d2">News</span>
              <span class="w3-tag w3-small w3-theme-d1">Comments</span>
              <span class="w3-tag w3-small w3-theme">Crescent Moon</span>
              <span class="w3-tag w3-small w3-theme-l1"></span>
              <span class="w3-tag w3-small w3-theme-l2">Photos</span>
              <span class="w3-tag w3-small w3-theme-l3">Design</span>
              <span class="w3-tag w3-small w3-theme-l4">Project</span>
              <span class="w3-tag w3-small w3-theme-l5">Information</span>
              </p>
            </div>
          </div>
          <br>
        <!-- End Left Column -->
        </div>
        </div>

        <!-- Middle Column -->
        <!-- add  w3-margin for margin at the end of the w3-container class -->
        <div class="w3-col m7">
        <div class="w3-container w3-card w3-white w3-round w3-margin"><br>
        <img src="images/profilepic.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="height:60px;width:60px">
          <span class="w3-right w3-opacity">10/26/18</span>
          <h4>Creator 1</h4><br>
          <hr class="w3-clear">
          <h4><b>Producers</b></h4>
          <img src="zveni.gif" style="height:auto;width:100%"  class="w3-margin-bottom">
          <p>This blog format website was completetly made by html, css, and java (coding langauges). We not only gained Spanish as a language, but coding langauges as well. Our group consists of Natán and Roberto. You can check our the creators tab to see a bit more information.</p>
        </div>
        <div class="w3-container w3-card w3-white w3-round w3-margin"><br>
        <img src="images/profilepic.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="height:60px;width:60px">
          <span class="w3-right w3-opacity">10/26/18</span>
          <h4>Creator 1</h4><br>
          <hr class="w3-clear">
          <h4><b>General Information</b></h4>
          <img src="images/generalmap.png" style="height:auto;width:100%"  class="w3-margin-bottom"> 
          <p>If you don't want to actually review the website, at least read this! Above is a small map of Venezuela. Here is an overview of Venezuela. Venezuela's official name is the Republic bolivariana de Venezuela. Its population is estimated at 30 million, based off of 2009 statistics. The capital is Caracas. Venezuela's area is 881,050 sq km, or 340,561 sq miles. The soveriegn bolivar/bolivar is the current currency. A calling code in Venezuela is + 58. Time in Venezuela is GMT - 4. As of 2010, the GDP is US $301.012 billion, and the per capita is US $10,314.
          </p>
        </div>
        <div class="w3-container w3-card w3-white w3-round w3-margin"><br>
          <img src="images/profilepic.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="height:60px;width:60px">
          <span class="w3-right w3-opacity">10/26/18</span>
          <h4>Creator 1 & Creator 2</h4><br>
          <hr class="w3-clear">
          <h4><b>The Flag</b></h4>
          <img src="images/flaginfo.jpg" style="height:auto;width:100%"  class="w3-margin-bottom">
          <p>The flag of Venezuela was first used on April 20th, 1846. It is very similar to the liberaton leader flag, Francisco de Maranda. The colors are based on "the primary color theory"; where blue represents independence from Spain, the red is courage, and the centered stars are the seven provinces that supported the revolution. In some flags, ther is an eight star. This is because Simon Bolivar added an eight star for the province Angostura, or mordern Guyana. After being removed in 1905, it was re-introduced into the flag on 2011 by Hugo Chavez (former leader of Venezuela). There is a coat of arms in the upper left corner. </p>
          <p>The coat of arms, or unique sign to a flag, nation, etc. (such as a shield) was first approved by the Venezuelan Congress on April 18th, 1836. Although having undergone several revisions, the symbolism has not changed. The wheat, on a red field, shows the union and wealth of the 20 states of the Republic. The yellow field with weapons (sword, sabre, and three lances), two flags, and tied together by a laurel represent victory in war. The blue field, with the white horse, roams freely as an emblem of independence/freedom.</p>
        <p>
        Above the shield lie two cornucopias spewing out wealth. The shiled is surrounded by an olive and palm branch, tied at the botom with a large band. A small caption at the bottom reads: "19 de Abril de 1810, Independencia, 20 de Febrero de 1859, Federación, República Bolivariana de Venezuela." This translates to April 19th, 1810, Independence, February 20th, 1859, Federation, Bolivarian Republic of Venezuela.
          </p>
        </div>
        
        <!-- End Middle Column -->
        </div>

        <!-- Right Column -->
        <div class="w3-col m2">
            <div class="w3-card w3-round w3-white w3-center w3-margin">
              <div class="w3-container">
                <p>Upcomming Events:</p>
                <p>Presenting Project Soon!</p>
              </div>
            </div>
        <div class="w3-card w3-round w3-white w3-padding-16 w3-center w3-margin">
        <p>NO ADS (Because the creators don't no how to put them on)! </p>
        </div>   
      <!-- End Right Column -->
      </div>
    <!-- End Grid -->
    </div>
  <!-- End Page Container -->
  </div>
<br>
<!-- Footer -->
<footer class="w3-container w3-theme-d3 w3-padding-16">
  <h5>Venezuelan Information</h5>
  <p>Powered by: Olympus Jr. High</p>
  <div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</footer>
<footer class="w3-container w3-theme-d5">
</footer>

<!-- Functions  -->
<script>
function work(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-theme-d1";
    } else { 
        x.className = x.className.replace("w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace(" w3-theme-d1", "");
    }
}

function openNav() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } 
    else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>
</body>
</html>
result
console