This repository has been archived by the owner on Dec 18, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (116 loc) · 6.3 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
<!DOCTYPE html>
<html>
<title>#JS30</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/ico" href="images/codex-logo.jpeg" />
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right"
href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="w3-bar-item w3-button"><i class="fa fa-code"></i>JS30</a>
<a href="#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-info-circle"></i>CHALLENGE</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-external-link"></i> MORE
INFO</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">
</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()">CHALLENGE</a>
<a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">MORE INFO</a>
</div>
</div>
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container" id="home">
<img src="images/JS3-social-share.png" alt="JS30" class="responsive">
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center"><i class="fa fa-briefcase"></i>ABOUT THE CHALLENGE</h3>
<p class="w3-center">@ManuCastrillonM challenged us to complete the Wes Bos' JS30 challenge.</p>
<p class="w3-center"> So... here is my humble work</p><br>
<p id="progressBarText" class="w3-large w3-center w3-padding-16"><i class="fa fa-tasks"></i></p>
<div class="w3-light-grey">
<div id="progressBar" class="w3-container w3-padding-small w3-center "></div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<h3 class="w3-center">MY WORK</h3>
<p class="w3-center">
<em> Click on the images to access </em>
</p><br>
</div>
<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact">
<h3 class="w3-center">More info</h3>
<p>
<a href="https://javascript30.com/" target="_blank"><i class="fa fa-code w3-hover-opacity"> Wes Bos' JS30
WebPage</i></a>
</p>
<p>
<a href="https://twitter.com/ManuCastrillonM/status/1243345922580504584" target="_blank"><i
class="fa fa-twitter w3-hover-opacity"> The challenge</i> </a>
</p>
<p>
<a href="https://twitter.com/search?q=%23CodexJavaScript30&src=typed_query&f=live" target="_blank"><i
class="fa fa-twitter w3-hover-opacity"> #CodexJavaScript30 </i></a>
</p>
<p>
<a href="https://github.com/sescobar99/javascript30-challenge" target="_blank"><i
class="fa fa-github w3-hover-opacity"> My Github repository for the challenge </i></a>
</p>
<!-- <div class="w3-row w3-padding-32 w3-section">
<div class="w3-col m4 w3-container">
<img src="/w3images/map.jpg" class="w3-image w3-round" style="width:100%">
</div>
<div class="w3-col m8 w3-panel">
<div class="w3-large w3-margin-bottom">
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Chicago, US<br>
<i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Phone: +00
151515<br>
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email:
mail@mail.com<br>
</div>
<p>Swing by for a cup of <i class="fa fa-coffee"></i>, or leave me a note:</p>
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">
</div>
</div>
<input class="w3-input w3-border" type="text" placeholder="Message" required name="Message">
<button class="w3-button w3-black w3-right w3-section" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form>
</div>
</div> -->
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64 ">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section">
</div>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank"
class="w3-hover-text-green">w3.css</a></p>
<p><a href="https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm" target="_blank">Original
Template</a> </p>
</footer>
<script src="index.js"> </script>
</body>
</html>