-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
323 lines (237 loc) · 10.4 KB
/
index.html
File metadata and controls
323 lines (237 loc) · 10.4 KB
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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html>
<head>
<title>Ruby Buskila</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<div class="logo_frame">
<img id="logo" src="image/Logo.png" alt="Logo">
<div id="ruby_frame"></div>
</div>
<li><a href="#about">About Me</a></li>
<li><a href="#photos">My Photos</a></li>
<li><a href="#playlist">My Playlist</a></li>
<li><a href="#like">Like</a></li>
<li><a href="#qrcoder">QR code</a></li>
<li><a href="#spa">Q&A</a></li>
<li><a href="#contact">Contact Me</a></li>
</div>
<div id="backg">
<section id="about" class="section">
<h1>About me</h1>
<article>
Hello, my name is Yuval Mor Yosef and I'm Ruby's granddaughter, I'm 26 years old and originally from Rishon Lezion. I am a second year student in the
Information Systems Engeneering department in Ben Gurion University.
<br>
<br>
My grandmother Ruby was born in Moroco in 1945 and moved to Israel at age 6 years old.
At age 19 years old she got married to my grandfather Shalom and they have five children.
<br>
<br>
Now, at the "Corona time", my grandmother lost her little sister for a very hard Disease, so it makes even harder because me and my cousienes could'nt go to the funeral and the "shiv'a" was different.
About a week later, the mother of my grandfather Shalom passed away and again me and my cousienes didn't see them so we do a lot of video calls and using Zoom for calls with all of the family. Ruby and Shalom get interested about technologic and don't affraid about that so it makes us easier to do it.
<br>
<br>
We used to celebrate Passover at their place in Ashqelon city every year and this year will be the first time that we will celebrate every family in his own place and even in a deferent city so my wonderful grandmother Ruby decided to cook all the traditional and the foods we like for each little family of her children so we still feel all together by using Zoom all the littles families.
<br>
<br>
My grandmother Ruby is usually work out at least twice a week in the gym so now she trying to keep doing that in her garden. In addition she loves to travel around the world so this time, she cancled a trip to South America that she really got excited about it but I'm sure that she will get their.
<br>
<br>
I hope that this Corona Virus era will end soon and we all meet again and everybody will be safe and healthy.
</article>
</section>
<section id="photos" class="section">
<h1>My photos</h1>
<h3>Click and hold to enlarge</h3>
<div class="images_buttons">
<a
style="background-image:url(image/BlackForest.jpg)"
alt="Family trip">
<span>Family trip</span>
</a>
<a
style="background-image:url(image/singapore2.jpg)"
alt="singapore">
<span>singapore</span>
</a>
<a
style="background-image:url(image/Mimuna2.jpg)"
alt="Mimuna">
<span>Mimuna</span>
</a>
<a
style="background-image:url(image/children.jpg)"
alt="Family">
<span>Family</span>
</a>
<a
style="background-image:url(image/RobyAndShalom22.jpg)"
alt="My husband">
<span>My husband</span>
</a>
<a
style="background-image:url(image/Dove2.jpg)"
alt="Amsterdam">
<span>Amsterdam</span>
</a>
</div>
</section>
<section id="playlist" class="section">
<h1>My playlist</h1>
<div class="youtube_buttons_frame">
<div class="youtube_buttons">
<iframe class="yt-iframe" src="https://www.youtube.com/embed/ijPL6Yi8VRM?list=PLHGBgLrQ6M0ZsbOMShBtzsGB1CafLYMeO" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div></div>
</section>
<section id="like" class="section">
<h1>Give me a like</h1>
<iframe src="https://www.facebook.com/plugins/like.php?href=https://sise-web-development-environments.github.io/assignment1-yuvalmoryosef/&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</section>
<section id="qrcoder" class="section">
<h1>Scan my code</h1>
<img src="image/QR.png" alt="Q">
</section>
<section id="spa" class="section">
<h1>Answers</h1>
<h2>:web 1.0 / 2.0 / 3.0 שלושה הבדלים עיקריים בין</h2>
<p>
<OL><ol dir="rtl">
חיפוש:
<OL>
<LI>חיפוש מהיר אך לא מדוייק.</LI>
<LI>איחזור מידע עפ"י תגים המתוייגים ידנית ולכן הכיסוי הוא מאוד חלקי.</LI>
<LI>מתבצע תיוג באופן אוטומטי של תוכן רב ולכן החיפוש הוא הרבה יותר מדוייק ונרחב.</LI>
</OL>
תוכן:
<OL>
<LI>גופי חדשות הפיצו תכנים שאנשים צורכים.</LI>
<LI>אנשים מפרסמים תוכן כרצונם בפלטפורמות שונות ואנשים רשאים לבחור אם לצרוך את תהוכן או לא.</LI>
<LI>אנשים בונים אפליקציות כך שיוכלו לתקשר אחד עם השני, חברות מפיצות פלטפורמות כך שנותני שירותים יוכלו לאבחן את הקהל יעד ולהתאים אליו את התוכן.</LI>
</OL>
שימוש:
<OL>
<LI>שימוש בתוכן סטאטי ללא אינטראקציה עם משתמשים.</LI>
<LI>מבוסס על תקשורת חברתית, בעיקר על ידי יוצרי תוכן של וידאו.</LI>
<LI>נקבע ע"י השימוש של המשתמש ומותאם לו אישית עפ"י צריכתו והתוכן בו מתעניין.</LI>
</OL>
</OL>
</p>
<h2>:"תרחיש שימוש בנושא חיפוש שאילתא "פתרון לשיער מתולתל</h2>
<p>
<OL><ol dir="rtl">
web 1.0:
<OL>
<LI>המשתמש פותח את הדפדפן.</LI>
<LI>המשתמש מקליד כתובת של מנוע חיפוש.</LI>
<LI>המשתמש מקליד :פתרון לשיער מתולתל" בשורת החיפוש.</LI>
<LI>הדפדפן מציג למשתמש רשימת אתרים הכוללים את מילות השאילתא.</LI>
<LI>המשתמש בוחר את אחד האתרים המוצעים.</LI>
<br>
</OL>
<OL>
תרחיש אלטרנטיבי:
<LI>המשתמש הקליד את השאילתא באופן שגוי.</LI>
<LI>הדפדפן מציג למשתמש תוצאות שגויות / שגיאה.</LI>
<LI>המשתמש יחזור לשלב החיפוש ויקליד את השאילתא מחדש.</LI>
</OL>
<br>
web 3.0:
<OL>
<LI>המשתמש פותח את הדפדפן.</LI>
<LI>המשתמש מתחיל להקליד את השאילתה המדוברת.</LI>
<LI>הדפדפן מציע אופציות להשלמה אוטומטית.</LI>
<LI>המשתמש מפעיל את השאילתא הרצויה.</LI>
<LI>המנוע חיפוש מציג למשתמש אופציות רבות כגון תכשירים לטיפוח התלתלים, מכשירים מסוג "מחליק" לרכישה וכו'.</LI>
<br>
</OL>
<OL>
תרחיש אלטרנטיבי:
<LI>המשתמש הקליד את השאילתא באופן שגוי.</LI>
<LI>המנוע חיפוש מציע אופציה לבחירה עם תיקון אפשרי לשגיאה.</LI>
<LI>המשתמש בוחר באופציית התיקון.</LI>
<LI>המנוע חיפוש מציע אתרים עם האפשרויות המתאימות.</LI>
</OL>
</OL>
</p>
</section>
<section id="contact" class="section">
<h1>Contact me</h1>
<form action="mailto:moryuval@post.bgu.ac.il" method="post" enctype="text/plain" align="center" >
<div class="form-group">
<label>
<i class="fa fa-user" aria-hidden="true"></i>
Name</label><br>
<input type="text" name="name" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label><i class="fa fa-envelope" aria-hidden="true"></i> Email</label><br>
<input type="email" name="email" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label><i class="fa fa-comment" aria-hidden="true"></i> Message</label><br>
<textarea id="Emoji2" rows="3" type="text" name="message" class="form-control" placeholder="Type Your Message"></textarea>
<div class="form-group">
<label><i class="emoji" aria-hidden="true"></i>Emoji</label><br>
<input list="em" name="emoji">
<datalist id="em">
<option value="😂">
<option value="😀">
<option value="😁">
<option value="😄">
<option value="😅">
<option value="😆">
<option value="😇">
<option value="😈">
<option value="😉">
<option value="😊">
<option value="😋">
<option value="😌">
<option value="😍">
<option value="😎">
<option value="😏">
</datalist>
</div>
</div>
<div class="form-group">
<button class="btn btn-raised btn-block btn-danger">Post →</button>
<input type="reset" value="reset">
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>Error</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2>Success! Your Message was Sent Successfully.</h2>
</div>
<a href="mailto:moryuval@post.bgu.ac.il"
runtime_url="mailto:moryuval@post.bgu.ac.il" style="">
<font style="color: rgb(255, 255, 255);">
</font></a></span></div></div></div>
</form>
</section>
</div>
<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>
<script type="text/javascript">
$(document).ready(function() {
$('.youtube_buttons a').magnificPopup({type: 'iframe', preloader: false, fixedContentPos: false});
})
</script>
</body>
</html>