-
Notifications
You must be signed in to change notification settings - Fork 0
/
practice1.html
203 lines (180 loc) · 6.73 KB
/
practice1.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
<!DOCTYPE html>
<html>
<head>
<title>first HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com
/maps/api/js?key=AIzaSyD-bYrq9FpQQOs24OxzFM5_lyN8jJ4j3KI&">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {center: new google.maps.LatLng( 35.222, -80.837), zoom: 8};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load' , initialize);
</script>
</head>
<body>
<h1> Luis Solorio's Practice Website </h1>
<nav>
<ul id="menu">
<li><a href="practice4.html" target="_blank" style="text-decoration:none;">Autobiography</a></li>
<li><a href="practice2.html" target="_blank" style="text-decoration:none;">Music</a></li>
<li><a id="home" href="practice1.html" style="text-decoration:none;">Home</a></li>
<li><a href="practice3.html" target="_blank" style="text-decoration:none;">Science</a></li>
<li><a href="practice5.html" target="_blank" style="text-decoration:none;">JavaScript Drawings</a></li>
</ul>
</nav>
<hr>
<div id="beginning">
<p> This is <mark>one</mark> of my <b>practice</b>
webpages.<br>hopefully it will lead me to <small>many</small> things.
this is just different words so i can test the formatting in my practice
webpage.
</P>
<p> My goal is: <q> develop a future for everyone.</q><br>
-Luis(me)(I guess)</p>
<img id="world-in-palm" src="images/worldinpalms.jpg" alt="world in palm of hands">
</img>
</div>
<div id="interests">
<h2 class="head-home"> Interests </h2>
<div id="interests-container">
<figure id="tooltip">
<a href="http://www.myswitzerland.com/en-us/home.html" target="_blank">
<img src="images/th[4].jpg" alt="traveling photograph" style="width:120px;height:120px;">
</img>
<figcaption>Fig. 1 -Travel the World</figcaption>
</a>
<p id="switzerland">To Switzerland!
</p>
</figure>
<figure>
<a href="http://www.nfl.com/" target="_blank">
<img src="images/thl2yyqr68.jpg" alt="football" style="width:180px;height:180px;">
</img>
<figcaption>Fig. 2 -Love Some Football</figcaption>
</figure>
</a>
<figure>
<a>
<img>
</img>
<figcaption></figcaption>
</a>
</figure>
<br>
</div>
<img id="switz-img" src="images/switz.jpg" alt="switzerland">
</img>
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption"> Switzerland</div>
</div>
</div>
<div id="website">
<a href="practice2.html" target="_blank" style="text-decoration:none;">
<div>
<h2 class="head-home"> Music </h2>
<p>Music has a connection to the most of me. In a way, music defines who
I am and withought it I believe it would of been harder for me to find
a sense of who I am. I am a listener of many genres.
</div>
</a>
<a href="practice3.html" target="_blank" style="text-decoration:none;">
<div>
<h2 class="head-home">Science</h2>
<p>I have always been fascinated by the creation of God including the
universe he has created. I know there are many things we have yet to
answer about it and its correlation with God but I truly believe in
the Faith I have in him and the things he has done for me. We all might
not agree on the same thing but we sure can try, with our best, to
understand and accept each other.
</p>
</div>
</a>
<a href="practice4.html" target="_blank" style="text-decoration:none;">
<div>
<h2 class="head-home">Autobiography</h2>
<p>This is really just a form page for you to describe things about
yourself in a <i>special</i> way.
</p>
</div>
</a>
<a href="practice5.html" target="_blank" style="text-decoration:none;">
<div>
<h2 class="head-home">JavaScript</h2>
<p>I plan on getting better every day drawing not only with JavaScript,
but also learning how to use JavaScript with every day websites. I would also
, eventually, go into more scripting languages as I aspire to become a full-stack
developer. The limit is in your head.
</p>
</div>
</a>
</div>
<div id="nc">
<h2 class="head-home">Beautiful NC</h2><br>
<p>I was raised in a small town called Stanfield in North Carolina.
It is definitely one of those small towns where almost everyone
seems to know each other. Not only the town but the whole county,
honestly. In a way, you can see it as a "small" county. I have yet
to visit the mountain side of NC but I am sure it won't be long before
I start that journey.
</p>
<p> It seems like, to me, that North Carolina is the ideal and most perfect
place to live or retire. This beauty of a state comes equipped with both,
excitement and relaxation that you can only find in this state. I am aware
that there are many other states that offer these luxuries but none in the
style of NC.
</p>
<p> To the Appalachian mountains that stretch vertically at the west of this
nation to the spectacular views of the beaches of Wilmington and of the Outer
Banks, NC is definitely filled with many adventures longing to be seeked. The
views of the Apps are definitely something worth seeing and the strolls at Wrightsville
Beach are worth enjoying for neither will fail you.
</p>
</div>
<div id="map-canvas" style="height:80%;">
</div>
<br>
<div class="center">
<div class="pagination">
<a href="practice1.html" class="active">1</a>
<a href="practice2.html">2</a>
<a href="practice3.html">3</a>
<a href="practice4.html">4</a>
<a href="practice5.html">5</a>
<a href="practice2.html">↬</a>
</div>
</div>
<footer>
<h3>Luis Solorio</h3>
<P>contact info: 7046355761</p>
<p>email adress: solorio.luis1966@gmail.com</p>
</footer>
<script>
//get the modal
var modal = document.getElementById('myModal');
// get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('switz-img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
//When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/main.js"></script>
</body>
<html>