-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (143 loc) · 7.37 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
<a href="#top" class="logo"><img src="assets/gokulogo.JPG" height="85" width="85" id="logoimg"/></a>
<div class="header-right">
<a href="#about" class="active">About Me</a>
<a href="#photos" class="active">My Photos</a>
<a href="#playlist" class="active">My Playlist</a>
<a href="#like" class="active">Like</a>
<a href="#qrcoder" class="active">QR code</a>
<a href="#spa" class="active">Q&A</a>
<a href="#contact" class="active">Contact Me</a>
</div>
</div>
<h3 style="text-align: center;"><br/><br/><br/><br/>Hey my name is Goku and I am a Saiyan from Earth!</h3>
<h3 style="text-align: center;"> this is page about Goku, a fictional character from Dragon Ball & Dragon Ball Z</h3>
<h3 style="text-align: center;"> I decided to write the assignment about him rather than about me because of reasons</h3>
<h3 style="text-align: center;"> All the information written here is based on the fincinal anime Dragon Ball, although my writting skills arent great in general</h3>
<h3 style="text-align: center;"> Enjoy!</h3>
<br/><br/><br/><br/><br/><br/><br/>
<section id="about" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h2 class="titleAbout">About</h2>
<div class="top"><div class="title">Goku (孫そん悟ご空くう Son Gokū), born Kakarot (カカロット Kakarotto, lit. "Cacarrot"), is a male Saiyan and the main protagonist of the Dragon Ball series.
Goku is a Saiyan originally sent to Earth as an infant. However, an accident alters his memory, allowing him to grow up to become Earth's greatest defender and the informal leader of the Dragon Team.
He constantly strives and trains to be the greatest warrior possible, which has kept the Earth and the universe safe from destruction many times
</div>
</div>
</section>
<section id="photos" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h2 class="titleAbout">Photos</h2>
<table>
<tr>
<th>
<div class="photo"><img src="assets/goku1.JPG" height="400" width="400">Goku</img></div>
</th>
<th>
<div class="photo"><img src="assets/goku2.JPG" height="400" width="400">Goku eat</img></div>
</th>
<th>
<div class="photo"><img src="assets/goku3.JPG" height="400" width="400">Goku SSGSS</img></div>
</th>
<th>
<div class="photo"><img src="assets/notGoku.JPG" height="400" width="400">Not Goku</img></div>
</th>
<th>
<div class="photo"><img src="assets/goku4.JPG" height="400" width="400">Goku</img></div>
</th>
<th>
<h3>I could include more but there are literally infinity images out there, I chose my favorite.</h3>
</th>
</tr>
</table>
</section>
<section id="playlist" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h2 class="titleAbout">Play List</h2>
<h2 style="text-align: center">The opening theme for Dragon Ball Z original</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GHnfX1RmZX8" style="display:block; margin: 0 auto;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="like" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h3 class="titleAbout">Like My Page</h3>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fcohen3.github.io%2Fwebsite_assignment%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="1" allowTransparency="true" allow="encrypted-media"></iframe>
</section>
<section id="qrcoder" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h3 class="titleAbout">QR Code</h3>
<div id="bc">
<div id="animation"></div>
<img src="assets/qr.JPG" id="QR"></img>
</div>
<br/>
</section>
</br></br></br></br></br></br></br>
<section id="spa" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h3 class="titleAbout">Q&A</h3>
<div class="answers">
Web 1.0</br>
It is the “readable” phrase of the World Wide Web with flat data. In Web 1.0, there is only limited interaction between sites and web users. </br>
Web 1.0 is simply an information portal where users passively receive information without being given the opportunity to post reviews, comments, and feedback.</br></br>
Web 2.0</br>
It is the “writable” phrase of the World Wide Web with interactive data. Unlike Web 1.0, Web 2.0 facilitates interaction between web users and sites, </br>
so it allows users to interact more freely with each other. Web 2.0 encourages participation, collaboration, and information sharing. </br>
Examples of Web 2.0 applications are Youtube, Wiki, Flickr, Facebook, and so on.</br></br>
Web 3.0</br>
It is the “executable” phrase of Word Wide Web with dynamic applications, interactive services, and “machine-to-machine” interaction. </br>
Web 3.0 is a semantic web which refers to the future. In Web 3.0, computers can interpret information like humans and intelligently generate </br>
and distribute useful content tailored to the needs of users. One example of Web 3.0 is Tivo, a digital video recorder. Its recording program </br>
can search the web and read what it finds to you based on your preferences.
</div>
<div class="answers">
Web 1.0: </br>
1) User type in "side effects of X"</br>
2) a list of static websites show up ordered by rating algorithm of the search engine.</br>
3) The user enters one of them</br>
4) The user read the info from the site and can choose to go back and keep surfing of relay of that info.</br>
Web 3.0:</br>
1) User type in "side effects of X"</br>
2) search engine uses AI to analyze the query and match it to other satisfying results.</br>
3) The user can enters a website</br>
4) The user can see how many likes the page has, comments, recommendations from other users.
5) The website offers the user alternative items for X according to semantic analysis of the term "side effects" (and assumes the user may want alternatives)</br>
6) The user may choose weather to relay on that info according to other users recommendations and likes.
7) The user can buy the item online if the website supports the service.</br>
</div>
</section>
<section id="contact" class="section">
<br/><br/><br/><br/><br/><br/><br/>
<h3 class="titleAbout">Contact Me</h3>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
Name:<br>
<input type="text" id="fname" name="name" placeholder="Whats your name?"><br>
E-mail:<br>
<input type="text" name="mail" placeholder="[email protected]"><br>
Comment:<br>
<input type="text" name="comment" size="50" placeholder="What would you like to tell me?"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<script type="text/javascript">
$(function(){
$("#nav a").click(function(e){
e.preventDefault();
$('html,body').scrollTo(this.hash,this.hash);
});
});
</script>
<script type="text/javascript">
$(document).scroll(function() {
$('#menu').toggle($(this).scrollTop()>1000)
});
</script>
</body>
</html>