├── Task3
    ├── rain.mp3
    ├── ting.mp3
    ├── delete.mp3
    ├── relax.mp3
    ├── play-solid.svg
    ├── pause-solid.svg
    ├── xmark-solid.svg
    ├── index.html
    ├── style.css
    └── app.js
├── Task1
    ├── app.js
    ├── style.css
    └── index.html
├── README.md
└── Task2
    ├── style.css
    └── index.html


/Task3/rain.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devvsakib/oasis-infobyte/HEAD/Task3/rain.mp3


--------------------------------------------------------------------------------
/Task3/ting.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devvsakib/oasis-infobyte/HEAD/Task3/ting.mp3


--------------------------------------------------------------------------------
/Task3/delete.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devvsakib/oasis-infobyte/HEAD/Task3/delete.mp3


--------------------------------------------------------------------------------
/Task3/relax.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devvsakib/oasis-infobyte/HEAD/Task3/relax.mp3


--------------------------------------------------------------------------------
/Task3/play-solid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="green" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>


--------------------------------------------------------------------------------
/Task3/pause-solid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>


--------------------------------------------------------------------------------
/Task3/xmark-solid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="rgb(82, 4, 228)" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"/></svg>


--------------------------------------------------------------------------------
/Task1/app.js:
--------------------------------------------------------------------------------
 1 | const input = document.getElementById('input'),
 2 |     clear = document.getElementById('clear'),
 3 |     equal = document.getElementById('equal'),
 4 |     allButton = document.querySelectorAll('button');
 5 | for (let button of allButton) {
 6 |     button.addEventListener('click', (e) => {
 7 |         let buttonText = e.target.innerText;
 8 | 
 9 |         if (buttonText == 'X') buttonText = 'x' 
10 |         input.value += buttonText 
11 | 
12 |         equal.addEventListener('click', () => {
13 |             inputs = input.value;
14 |             if (inputs.includes('x')) inputs = inputs.replace('x', '*')
15 |             input.value = eval(inputs);
16 |         })
17 | 
18 |     })
19 | }
20 | 
21 | clear.addEventListener('click', () => input.value = '')
22 | //created by DevvSakib


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # OIBSIP - Oasis Infobyte Intern Program
 2 | OASIS INFOBYTE offers a variety of website design and development services. Got the chance for 1 month intern of Web development and design.
 3 | There are 3 task given to complete. After completing all tasks, if everything looks fine, the intern will be certified. Glad to be a part of OASIS INFOBYTE intern program.
 4 | 
 5 | 
 6 | ## Task1 - Calculator
 7 | A Calculator created under the virtual internship program of Oasis Infobyte. <br>
 8 | [Live](https://devvsakib.github.io/oasis-infobyte/Task1)
 9 | 
10 | ## Task2 - Tribute Page
11 | A tribute page created under the virtual internship program of Oasis Infobyte. <br>
12 | [Live](https://devvsakib.github.io/oasis-infobyte/Task2)
13 | 
14 | ## Task3 - Todo webapp
15 | A TO-DO app created under the virtual internship program of Oasis Infobyte. <br>
16 | [Live](https://devvsakib.github.io/oasis-infobyte/Task3)
17 | 


--------------------------------------------------------------------------------
/Task1/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background: #000;
 3 | }
 4 | button:focus{
 5 |     outline: none;
 6 | }
 7 | button{
 8 |     border: none;
 9 |     background-color: transparent
10 | }
11 | .calculator{
12 |     display: inline-block;
13 |     background: #17181a;
14 |     padding: 25px 20px;
15 |     margin-top: 2rem;
16 |     color: #fff;
17 |     width: 350px;
18 |     text-align: center;
19 |     border-radius: 5px;
20 | }
21 | input {
22 |     width: 100%;
23 |     outline: none;
24 |     border: none;
25 |     padding: 10px 10px;
26 | }
27 | #input {
28 |     border-radius: 5px;
29 |     height: 90px;
30 |     font-size: 25px;
31 |     color: #3bae3f;
32 | }
33 | #output{
34 |     font-size: 22px;
35 |     border-radius: 0 0 5px 5px;
36 | }
37 | .calculator table{
38 |     margin: auto;
39 | }
40 | 
41 | table{
42 |     margin-top: 10px !important;
43 | 
44 | }
45 | table tr td {
46 |     padding: 10px 12px;
47 |     background: repeating-linear-gradient(320deg, black, transparent 100px);
48 | }
49 | table tr td button{
50 |     padding: 10px 15px;
51 |     color: turquoise;
52 | }
53 | table tr td p{
54 |     padding: 10px 15px;
55 |     color: turquoise;
56 |     margin: 0;
57 |     cursor: pointer;
58 | }


--------------------------------------------------------------------------------
/Task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>To-Do WebApp - Task 3</title>
 9 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
10 |         integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
12 |         integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
13 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
14 |     <link rel="stylesheet" href="style.css">
15 | </head>
16 | 
17 | <body>
18 | 
19 |     <div class="music">
20 |         <p>
21 |             <img id="playSound" class="playsound" src="./play-solid.svg" alt="">
22 |             Relaxing Sound
23 |         </p>
24 |     </div>
25 |     <div class="container py-5 mx-auto">
26 |         <!-- Task input section began -->
27 |         <div class="noteDiv">
28 |             <h5 class="card-title">Add TASK</h5>
29 |             <div>
30 |                 <div class="card-pd d-flex">
31 |                     <input class="addNote" id="addNote" placeholder="Write Your Notes Here..."></input>
32 |                     <button class="btn btn-danger" id="inputTask">Add</button>
33 |                 </div>
34 |                 <div>
35 |                     <p class="completed btn" id="allCompletedTask">Completed <span id="completedNumber">0</span></p>
36 |                 </div>
37 |             </div>
38 |         </div>
39 |         <hr>
40 |         <div class="task-list">
41 |             <h3 id="insertName">Task List</h3>
42 |             <div class="row py-5 mx-auto d-flex" id="pushNote">
43 | 
44 |             </div>
45 |         </div>
46 |     </div>
47 | 
48 |     <section class="taskC hide">
49 |         <img class="playsound close" src="./xmark-solid.svg" alt="">
50 |         <h3 class="title">Completed Task</h3>
51 |         <div class="taskComplete">
52 |             <div class="row mx-2 py-5" id="pushComplete">
53 |             </div>
54 |         </div>
55 |     </section>
56 |     <audio id="sound"></audio>
57 |     <audio id="relax"></audio>
58 |     <script src="app.js"></script>
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/Task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>JavaScript Calculator</title>
 7 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
 8 |   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 9 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
10 |   <link rel="stylesheet" href="style.css">
11 | </head>
12 | <body>
13 | <!-- Simple Calculator -->
14 |     <div class="container pt-5">
15 |         <div class="row ">
16 |             <div class="col text-center">
17 |                 <div class="calculator">
18 |                     <div class="outInArea">
19 |                         <input type="text" name="inputOutput" id="input">
20 |                     <table >
21 |                         <tr cellspacing='50'>
22 |                             <td><button id="sub">MC</button></td>
23 |                             <td><button>MR</button></td>
24 |                             <td><button>MS</button></td>
25 |                             <td><button>M+</button></td>
26 |                         </tr>
27 |                         <tr>
28 |                             <td><button>(</button></td>
29 |                             <td><button>)</button></td>
30 |                             <td><button id="clear">C</button></td>
31 |                             <td><button>/</button></td>
32 |                         </tr>
33 |                         <tr>
34 |                             <td><button>7</button></td>
35 |                             <td><button>8</button></td>
36 |                             <td><button>9</button></td>
37 |                             <td><button>X</button></td>
38 |                         </tr>
39 |                         <tr>
40 |                             <td><button>4</button></td>
41 |                             <td><button>5</button></td>
42 |                             <td><button>6</button></td>
43 |                             <td><button>-</button></td>
44 |                         </tr>
45 |                         <tr>
46 |                             <td><button>1</button></td>
47 |                             <td><button>2</button></td>
48 |                             <td><button>3</button></td>
49 |                             <td><button>+</button></td>
50 |                         </tr>
51 |                         <tr>
52 |                             <td colspan="2"><button>0</button></td>
53 |                             <td><button>.</button></td>
54 |                             <td><p id="equal">=</p></td>
55 |                         </tr>
56 |                     </table>
57 |                 </div>
58 |             </div>
59 |         </div>
60 |     </div>
61 | 
62 | 
63 | <script src="app.js"></script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/Task3/style.css:
--------------------------------------------------------------------------------
  1 | p{
  2 |     margin-bottom: 0 !important;
  3 | }
  4 | 
  5 | .card-pd {
  6 |     padding: 0;
  7 |     background-color: white;
  8 |     max-width: 400px;
  9 |     border-radius: 5px;
 10 |     box-shadow: 0 0 5px 5px rgba(100, 100, 100, 0.1);
 11 | }
 12 | 
 13 | #pushNote {
 14 |     justify-content: center;
 15 |     gap: 10px;
 16 | }
 17 | 
 18 | .card-pd input {
 19 |     border: none;
 20 |     border-radius: 0 !important;
 21 |     padding: 10px;
 22 |     width: 100%;
 23 |     outline: none;
 24 |     padding: 15px 20px !important;
 25 |     background: transparent;
 26 | }
 27 | 
 28 | .card-pd button {
 29 |     color: #fff;
 30 |     border: none;
 31 |     padding: 15px 30px;
 32 |     border-radius: 0 5px 5px 0;
 33 | }
 34 | 
 35 | .task-list {
 36 |     margin-top: 3rem;
 37 | }
 38 | 
 39 | .card-pd input {
 40 |     background: transparent;
 41 | }
 42 | 
 43 | .navbar-nav {
 44 |     width: 100%;
 45 |     display: flex;
 46 |     justify-content: space-between;
 47 | }
 48 | 
 49 | .completed {
 50 |     margin: 0;
 51 | }
 52 | 
 53 | .completed {
 54 |     color: #fff;
 55 |     border-radius: 10px;
 56 |     padding: 5px 10px;
 57 |     background-color: #28a745;
 58 |     border-color: #28a745;
 59 | }
 60 | 
 61 | .completed span {
 62 |     font-weight: bold;
 63 |     margin-left: 10px;
 64 |     font-size: 1.12rem;
 65 | }
 66 | 
 67 | .todoCard {
 68 |     position: relative;
 69 |     background-color: white;
 70 |     border-radius: 6px;
 71 |     color: #000 !important;
 72 |     box-shadow: 0 0 5px 0 rgba(40, 6, 190, 0.5);
 73 |     color: #fff;
 74 |     border: none;
 75 | }
 76 | 
 77 | .res-form {
 78 |     visibility: hidden;
 79 | }
 80 | 
 81 | 
 82 | .music {
 83 |     position: absolute;
 84 |     top: 1rem;
 85 |     right: 1rem;
 86 |     padding: 5px 10px;
 87 |     border-radius: 10px;
 88 | 
 89 | }
 90 | 
 91 | .playsound {
 92 |     width: 20px;
 93 |     cursor: pointer;
 94 |     margin-right: 5px;
 95 | }
 96 | .noteDiv > div{
 97 |     display: flex;
 98 |     justify-content: space-between;
 99 |     align-items: center;
100 | }
101 | 
102 | .close {
103 |     margin: 30px;
104 |     z-index: 9999999;
105 |     cursor: pointer;
106 | }
107 | 
108 | .music p {
109 |     font-weight: 600;
110 |     margin-bottom: 0 !important;
111 | }
112 | 
113 | .taskC {
114 |     z-index: 111;
115 |     background-color: rgba(0, 0, 0, 0.1);
116 |     width: 100vw;
117 |     height: 100vh;
118 |     top: 0;
119 |     left: 0;
120 |     right: 0;
121 |     position: absolute;
122 |     backdrop-filter: blur(5px);
123 | }
124 | 
125 | .taskComplete {
126 |     max-width: 800px;
127 |     height: 500px;
128 |     margin: auto;
129 |     overflow-y: scroll;
130 |     overflow-x: hidden;
131 | }
132 | #pushComplete{
133 |     flex-direction: column;
134 | }
135 | #tskbox{
136 |     width: 90%;
137 |     margin: auto;
138 | }
139 | .hide {
140 |     display: none;
141 | }
142 | 
143 | .open {
144 |     display: block;
145 | }
146 | 
147 | .title {
148 |     margin-top: 4rem;
149 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
150 |     text-transform: uppercase;
151 |     font-weight: 600;
152 |     text-align: center;
153 |     background: linear-gradient(180deg, rgb(234, 0, 255), rgb(82, 4, 228));
154 |     background-clip: text;
155 |     -webkit-background-clip: text;
156 |     -webkit-text-fill-color: transparent;
157 | }
158 | 
159 | #pushNote {
160 |     display: flex;
161 |     justify-content: flex-start !important;
162 | }
163 | 
164 | .card-text {
165 |     font-size: 1.5rem;
166 |     font-weight: 600;
167 |     text-transform: capitalize;
168 |     margin-bottom: 1rem;
169 | }
170 | 
171 | @media (max-width: 991px) {
172 |     .res-form {
173 |         visibility: visible;
174 |     }
175 | 
176 |     .completed {
177 |         margin-top: 20px;
178 |     }
179 | 
180 |     #pushNote {
181 |         gap: 10px;
182 |         flex-direction: column !important;
183 |         justify-content: center;
184 |     }
185 |     .noteDiv > div{
186 |         flex-direction: column;
187 |     }
188 |     #tskbox{
189 |         margin-left: 0;
190 |     }
191 | }
192 | i{
193 |     height: 30px;
194 | }
195 | 
196 | .card-number{
197 |     position: absolute;
198 |     top: 0;
199 |     left: 10px;    
200 |     font-size: 2rem;
201 |     opacity: 0.3;
202 |     font-weight: 700;
203 | }
204 | .ncTask{
205 |     padding-left: 2rem;
206 | }
207 | .gap{
208 |     gap: 10px;
209 | }


--------------------------------------------------------------------------------
/Task3/app.js:
--------------------------------------------------------------------------------
  1 | const inputTask = document.querySelector('#inputTask');
  2 | let soundEffect = document.getElementById('sound');
  3 | let relaxingSound = document.getElementById('relax');
  4 | let allCompletedTask = document.getElementById('allCompletedTask');
  5 | let completedNumber = document.getElementById('completedNumber');
  6 | let rainy = document.getElementById('playSound');
  7 | let close = document.querySelector('.close');
  8 | let open = document.querySelector('.completed');
  9 | 
 10 | soundEffect.volume = .05;
 11 | relaxingSound.volume = .5;
 12 | open.addEventListener('click', () => {
 13 |     document.querySelector('.taskC').classList.add('open')
 14 | })
 15 | close.addEventListener('click', () => {
 16 |     document.querySelector('.taskC').classList.add('hide')
 17 |     document.querySelector('.taskC').classList.remove('open')
 18 | })
 19 | rainy.addEventListener('click', () => {
 20 |     if (!rainy.classList.contains('play')) {
 21 |         rainy.classList.add("play")
 22 |         rainy.src = "./pause-solid.svg"
 23 |         relaxingSound.src = "./relax.mp3";
 24 |         relaxingSound.loop = true
 25 |         relaxingSound.play()
 26 |         console.log("Playing...");
 27 |     }
 28 |     else {
 29 |         rainy.classList.remove("play")
 30 |         rainy.src = "./play-solid.svg"
 31 |         relaxingSound.src = "";
 32 |         relaxingSound.pause()
 33 |         console.log("Paused");
 34 |     }
 35 | })
 36 | 
 37 | 
 38 | funcy();
 39 | inputTask.addEventListener('click', () => {
 40 |     let addNote = document.getElementById('addNote');
 41 |     let localData = localStorage.getItem('taskSame');
 42 | 
 43 |     localData == null ? alltask = [] : alltask = JSON.parse(localData);
 44 | 
 45 |     if (addNote.value) {
 46 |         alltask.push(addNote.value);
 47 |         soundEffect.src = "./ting.mp3"
 48 |         soundEffect.play()
 49 |     }
 50 |     localStorage.setItem('taskSame', JSON.stringify(alltask));
 51 |     addNote.value = "";
 52 |     funcy();
 53 | });
 54 | 
 55 | 
 56 | 
 57 | function funcy() {
 58 |     let localData = localStorage.getItem('taskSame');
 59 |     let complTa = localStorage.getItem('completedTask');
 60 |     let completedTask = localStorage.getItem('completedTask');
 61 | 
 62 |     if (complTa == null) {
 63 |         completedNumber.innerText = 0;
 64 |         completedNumber.style.color = "red"
 65 |         complete = [];
 66 |     }
 67 |     else {
 68 |         complete = JSON.parse(complTa);
 69 |         completedNumber.innerText = JSON.parse(completedTask).length;
 70 |     }
 71 | 
 72 |     localData == null ? alltask = [] : alltask = JSON.parse(localData);
 73 | 
 74 |     let cpTask = JSON.parse(completedTask)
 75 |     let html = '';
 76 |     let comp = '';
 77 |     alltask.forEach((e, index) => {
 78 |         html += `
 79 |         <div id="tskbox">
 80 |         <div class="col d-flex justify-content-between align-items-center todoCard my-2 mx-3 p-4">
 81 |             <h5 class="card-number">${index + 1}</h5>
 82 |             <p class="card-text ncTask editTask">${e}</p>
 83 |             <div class="d-flex gap">
 84 |                 <i id="${index}" onclick="editTask(this.id)" class="btn btn-outline-success fa fa-pen d-flex align-items-center"></i>
 85 |                 <i id="${index}" onclick="deleteTask(this.id)" class="btn btn-outline-danger fa fa-close d-flex align-items-center"></i>
 86 |                 <i id="${index}" onclick="completedTaskFunc(this.id)" class="btn btn-outline-success fa fa-check d-flex align-items-center"></i>
 87 |             </div>
 88 |         </div>
 89 |         </div>
 90 |         `
 91 |     });
 92 | 
 93 |     let pushNote = document.getElementById('pushNote');
 94 | 
 95 |     alltask.length != 0 ? pushNote.innerHTML = html : pushNote.innerHTML = `List is empty📃`;
 96 | 
 97 |     if (cpTask) {
 98 |         cpTask.forEach((e, index) => {
 99 |             comp += `
100 |             <div id="tskbox">
101 |         <div class="col d-flex justify-content-between todoCard my-2 mx-3 p-4 py-5">
102 |         <h5 class="card-number mb-0 mr-2">${index + 1}</h5>
103 |         <p class="card-text mb-0">${e}</p>
104 |         <i id="${index}" onclick="deleteCoomplete(this.id)" class="btn btn-outline-danger fa fa-close d-flex align-items-center"></i>
105 |         </div>
106 |         </div>
107 |         `
108 |         });
109 |     }
110 | 
111 |     let compTask = document.getElementById('pushComplete');
112 | 
113 |     cpTask != 0 ? compTask.innerHTML = comp : compTask.innerHTML = "<h3 style='color:blue'>Ops, No task Completed📃</h3>";
114 | 
115 | }
116 | 
117 | function deleteTask(index) {
118 |     let localData = localStorage.getItem('taskSame');
119 |     if (localData == null) {
120 |         alltask = [];
121 |     }
122 |     else {
123 |         alltask = JSON.parse(localData);
124 |     }
125 |     alltask.splice(index, 1);
126 |     soundEffect.src = "./delete.mp3"
127 |     soundEffect.play()
128 |     localStorage.setItem('taskSame', JSON.stringify(alltask));
129 |     funcy();
130 | };
131 | 
132 | function completedTaskFunc(index) {
133 |     let localData = localStorage.getItem('taskSame');
134 |     let complTa = localStorage.getItem('completedTask');
135 |     if (localData == null) {
136 |         alltask = [];
137 |     }
138 |     else {
139 |         alltask = JSON.parse(localData);
140 |     }
141 |     if (complTa == null) {
142 |         complete = [];
143 |     }
144 |     else {
145 |         complTa = JSON.parse(complTa);
146 |     }
147 |     if (complTa) {
148 |         complete.push(alltask.splice(index, 1))
149 |         soundEffect.src = "./delete.mp3"
150 |         soundEffect.play()
151 | 
152 |     }
153 |     localStorage.setItem('taskSame', JSON.stringify(alltask));
154 |     localStorage.setItem('completedTask', JSON.stringify(complete));
155 |     funcy();
156 | };
157 | function deleteCoomplete(index) {
158 |     let complTa = localStorage.getItem('completedTask');
159 |     if (complTa == null) {
160 |         complete = [];
161 |     }
162 |     else {
163 |         complete = JSON.parse(complTa);
164 |     }
165 |     complete.splice(index, 1);
166 |     soundEffect.src = "./delete.mp3"
167 |     soundEffect.play()
168 |     localStorage.setItem('completedTask', JSON.stringify(complete));
169 |     funcy();
170 | };
171 | 
172 | function editTask(index) {
173 |     let edit = prompt("Edit your task", alltask[index]);
174 |     let editTask = document.getElementsByClassName('editTask')[index];
175 |     editTask.innerHTML = edit;
176 |     alltask.splice(index, 1, edit);
177 |     localStorage.setItem('taskSame', JSON.stringify(alltask));
178 |     funcy();
179 | }


--------------------------------------------------------------------------------
/Task2/style.css:
--------------------------------------------------------------------------------
  1 | /* Import Font from Google */
  2 | @import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
  3 | /* Reset CSS */
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | a {
 11 |   color: #000;
 12 |   text-decoration: none;
 13 | }
 14 | 
 15 | html {
 16 |   scroll-behavior: smooth;
 17 | }
 18 | 
 19 | body {
 20 |   font-family: Helvetica, "Libre Franklin", sans-serif;
 21 |   font-size: 1.2rem;
 22 |   line-height: 1.5;
 23 |   font-weight: 400;
 24 | }
 25 | 
 26 | img {
 27 |   max-width: 100%;
 28 | }
 29 | 
 30 | a {
 31 |   text-decoration: none;
 32 | }
 33 | 
 34 | h1 {
 35 |   font-size: 5rem;
 36 |   font-weight: 600;
 37 |   line-height: 1.2;
 38 |   letter-spacing: 10px;
 39 |   font-family: "Libre Franklin", sans-serif;
 40 | }
 41 | 
 42 | ul {
 43 |   margin: 0;
 44 |   padding: 0;
 45 |   list-style: none;
 46 | }
 47 | 
 48 | #scroll-down {
 49 |   font-family: "Libre Franklin", sans-serif;
 50 |   font-size: 2rem;
 51 |   position: absolute;
 52 |   bottom: 10px;
 53 |   padding: 1rem 2rem;
 54 |   border: none;
 55 |   border-radius: 5px;
 56 |   cursor: pointer;
 57 |   color: rgb(255, 255, 255);
 58 |   animation: upDown 1000ms linear infinite;
 59 | }
 60 | 
 61 | .up-down {
 62 |   display: flex;
 63 |   flex-direction: row;
 64 |   gap: 1.2rem;
 65 |   animation: upDown 1000ms linear infinite;
 66 |   position: absolute;
 67 |   bottom: 2rem;
 68 |   left: 10px;
 69 | }
 70 | .up-down i {
 71 |   color: #000;
 72 | }
 73 | 
 74 | @keyframes upDown {
 75 |   0% {
 76 |     transform: translateY(0);
 77 |   }
 78 |   50% {
 79 |     transform: translateY(10px);
 80 |   }
 81 |   100% {
 82 |     transform: translateY(0);
 83 |   }
 84 | }
 85 | /* Common CSS */
 86 | .container {
 87 |   position: relative;
 88 |   max-width: 1200px;
 89 |   margin: 0 auto;
 90 |   padding: 0 15px;
 91 |   height: 100vh;
 92 |   display: flex;
 93 |   align-items: center;
 94 |   justify-content: center;
 95 |   flex-direction: column;
 96 | }
 97 | 
 98 | .bg-dark {
 99 |   color: #fff;
100 |   background-color: #000;
101 | }
102 | 
103 | .bg-light {
104 |   color: #000;
105 |   background-color: #fff;
106 | }
107 | 
108 | .tribute-badge {
109 |   align-self: flex-start;
110 |   letter-spacing: 10px;
111 |   font-family: "Libre Franklin", sans-serif;
112 | }
113 | 
114 | .banner {
115 |   background-image: url(https://imagensemoldes.com.br/wp-content/uploads/2020/10/Nikola-Tesla-PNG-791x1024.png);
116 |   background-position: right 4rem;
117 |   background-size: 50%;
118 |   background-repeat: no-repeat;
119 |   filter: saturate(0.5);
120 |   display: flex;
121 |   align-items: flex-start;
122 |   justify-content: center;
123 | }
124 | 
125 | .quote {
126 |   display: flex;
127 |   justify-content: space-between;
128 |   align-items: center;
129 | }
130 | .quote div {
131 |   flex: 1;
132 | }
133 | .quote .img-div {
134 |   text-align: right;
135 |   overflow: hidden;
136 |   border-radius: 2rem;
137 | }
138 | 
139 | .hidden {
140 |   display: none;
141 | }
142 | 
143 | @media screen and (max-width: 768px) {
144 |   .container {
145 |     padding: 2rem;
146 |   }
147 |   .quote {
148 |     flex-direction: column;
149 |     align-items: center;
150 |     gap: 2rem;
151 |   }
152 |   .quote div {
153 |     flex: auto;
154 |     text-align: center;
155 |   }
156 | }
157 | .biography {
158 |   height: auto;
159 |   padding: 3rem 2rem;
160 | }
161 | .biography .bio {
162 |   margin-bottom: 8rem;
163 | }
164 | .biography .bio h4 {
165 |   font-size: 1.2rem;
166 |   text-transform: uppercase;
167 |   margin-top: 2rem;
168 |   color: aquamarine;
169 | }
170 | .biography .bio p {
171 |   font-size: 1rem;
172 | }
173 | .biography h3 {
174 |   font-size: 2rem;
175 |   text-transform: uppercase;
176 |   letter-spacing: 5px;
177 |   margin-bottom: 10px;
178 | }
179 | .biography p {
180 |   text-align: justify;
181 |   letter-spacing: 2px;
182 | }
183 | .biography span {
184 |   color: aquamarine;
185 |   font-weight: bold;
186 | }
187 | .biography .up-down i {
188 |   color: white;
189 | }
190 | 
191 | #fourth-page {
192 |   max-width: 900px;
193 |   padding: 3rem 2rem;
194 |   height: auto;
195 | }
196 | #fourth-page .container {
197 |   padding: 2rem;
198 | }
199 | #fourth-page h3 {
200 |   font-size: 2rem;
201 |   text-transform: uppercase;
202 |   letter-spacing: 5px;
203 |   margin-bottom: 10px;
204 | }
205 | #fourth-page h3 span {
206 |   color: rgb(0, 204, 255);
207 | }
208 | #fourth-page p {
209 |   text-align: justify;
210 |   letter-spacing: 2px;
211 | }
212 | #fourth-page span {
213 |   font-weight: bold;
214 | }
215 | #fourth-page .up-down {
216 |   left: -8.5vw;
217 | }
218 | #fourth-page .up-down i {
219 |   color: rgb(0, 0, 0);
220 | }
221 | #fourth-page ul {
222 |   position: relative;
223 | }
224 | #fourth-page li {
225 |   position: relative;
226 |   padding: 30px;
227 |   border-radius: 5px;
228 |   box-shadow: 0 2px 10px rgba(45, 45, 43, 0.15);
229 |   margin-bottom: 40px;
230 | }
231 | #fourth-page .circle {
232 |   display: block;
233 |   border-radius: 50%;
234 |   width: 20px;
235 |   height: 20px;
236 |   position: absolute;
237 |   left: -30px;
238 |   top: 50%;
239 |   transform: translateY(-50%);
240 |   background: rgb(0, 204, 255);
241 | }
242 | #fourth-page .line {
243 |   position: absolute;
244 |   left: -20px;
245 |   top: 5rem;
246 |   transform: translateY(40px);
247 |   width: 2px;
248 |   height: 89%;
249 |   background: rgb(0, 204, 255);
250 | }
251 | #fourth-page .inv-title {
252 |   font-size: 1.5rem;
253 |   font-weight: 600;
254 | }
255 | #fourth-page .description {
256 |   font-size: 1rem;
257 |   font-weight: 400;
258 |   margin-top: 10px;
259 |   letter-spacing: normal;
260 | }
261 | 
262 | .pQuote {
263 |   font-size: 1rem;
264 |   font-weight: 600;
265 |   padding: 1rem;
266 |   margin-bottom: 1rem;
267 |   text-align: center;
268 |   width: -moz-fit-content;
269 |   width: fit-content;
270 |   margin: auto;
271 | }
272 | .pQuote span {
273 |   color: rgb(0, 204, 255);
274 |   text-align: right;
275 |   display: block;
276 |   font-size: 0.8rem;
277 | }
278 | 
279 | @media (max-width: 976px) {
280 |   #fourth-page .up-down {
281 |     left: 1rem !important;
282 |   }
283 |   .banner {
284 |     background-position: right 5rem;
285 |     background-size: 100%;
286 |   }
287 |   .banner::before {
288 |     content: "";
289 |     position: absolute;
290 |     z-index: -1;
291 |     top: 0;
292 |     left: 0;
293 |     width: 100%;
294 |     height: 100%;
295 |     background: rgba(0, 0, 0, 0.5);
296 |   }
297 | }
298 | @media (max-width: 668px) {
299 |   .line {
300 |     height: 90%;
301 |     top: 6.5rem !important;
302 |   }
303 | }
304 | @media (max-width: 550px) {
305 |   .line {
306 |     height: 90%;
307 |   }
308 |   .banner {
309 |     background-position: right 10rem;
310 |   }
311 | }
312 | @media (max-width: 450px) {
313 |   .banner {
314 |     background-position: right bottom;
315 |   }
316 |   .line {
317 |     top: 10rem !important;
318 |     height: 89% !important;
319 |   }
320 | }/*# sourceMappingURL=style.css.map */


--------------------------------------------------------------------------------
/Task2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Tribute Page - Task 2</title>
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
 10 |         integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
 11 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |     <link rel="stylesheet" href="style.css">
 13 | </head>
 14 | 
 15 | <body>
 16 | 
 17 |     <section class="bg-dark " id="front-page">
 18 |         <div class="container banner">
 19 |             <div>
 20 |                 <span class="tribute-badge">Tribute to</span>
 21 |                 <h1>Nikola Tesla</h1>
 22 |             </div>
 23 |             <a id="scroll-down" href="#second-page"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
 24 |         </div>
 25 |     </section>
 26 | 
 27 |     <section class="bg-light " id="second-page">
 28 |         <div class="container">
 29 |             <div class="quote">
 30 |                 <div>
 31 |                     <span class="tribute-badge">Quote</span>
 32 |                     <h2>“If you want to find the secrets of the universe, think in terms of energy, frequency and
 33 |                         vibration.”</h2>
 34 |                 </div>
 35 |                 <div class="img-div">
 36 |                     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Nikola_Tesla_Colored.png/459px-Nikola_Tesla_Colored.png?20130331231908"
 37 |                         alt="">
 38 |                 </div>
 39 |             </div>
 40 |             <div class="up-down">
 41 |                 <div>
 42 |                     <a class="scroll-down" href="#front-page"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
 43 |                 </div>
 44 |                 <div>
 45 |                     <a class="scroll-down" href="#third-page"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 |     </section>
 50 | 
 51 |     <section class="bg-dark ">
 52 |         <div class="container biography" id="third-page">
 53 |             <h3>Biography</h3>
 54 |             <p><span>N</span>ikola Tesla, (born July 9/10, 1856, Smiljan, Austrian Empire [now in Croatia]—died January
 55 |                 7, 1943, New York, New York, U.S.), Serbian American inventor and engineer who discovered and patented
 56 |                 the rotating magnetic field, the basis of most alternating-current machinery. He also developed the
 57 |                 three-phase system of electric power transmission. He immigrated to the United States in 1884 and sold
 58 |                 the patent rights to his system of alternating-current dynamos, transformers, and motors to George
 59 |                 Westinghouse. In 1891 he invented the Tesla coil, an induction coil widely used in radio technology.</p>
 60 | 
 61 |                 <div class="bio">
 62 |                     <div>
 63 |                         <h4>Early Life</h4>
 64 |                         <p>Famous Serbian-American inventor Nikola Tesla was born on July 10, 1856, in what is now Smiljan, Croatia. Tesla's interest in electrical invention was likely spurred by his mother, Djuka Mandic, who invented small household appliances in her spare time while her son was growing up. Tesla's father, Milutin Tesla, was a priest. After studying in the 1870s at the Realschule, Karlstadt (later renamed the Johann-Rudolph-Glauber Realschule Karlstadt); the Polytechnic Institute in Graz, Austria; and the University of Prague, Tesla began preparing for a trip to America.</p>
 65 |                     </div>
 66 |                     <div>
 67 |                         <h4>Famed Inventor</h4>
 68 |                         <p>Tesla came to the United States in 1884, and soon began working with famed inventor and business mogul Thomas Edison. The two worked together for a brief period before parting ways due to a conflicting business-scientific relationship, attributed by historians to their incredibly different personalities: While Edison was a power figure who focused on marketing and financial success, Tesla was a commercially out-of-tune and somewhat vulnerable, yet extremely pivotal inventor, who pioneered some of history's most important inventions. His inventions include the "Tesla coil," developed in 1891, and an alternating-current electrical system of generators, motors and transformers—both of which are still used widely today.</p>
 69 |                     </div>
 70 |                     <div>
 71 |                         <h4>Death and Legacy</h4>
 72 |                         <p>Poor and reclusive, Nikola Tesla died on January 7, 1943, at the age of 86, in New York City—where he had lived for nearly 60 years. His legacy, however, has been thriving for more than a century, and will undoubtedly live on for decades to come.</p>
 73 |                         <p>Several books and films have highlighted Tesla's life and famous works, including Nikola Tesla, The Genius Who Lit the World, a film created by the Tesla Memorial Society and the Nikola Tesla Museum in Belgrade, Serbia; and The Secret of Nikola Tesla, which stars Orson Welles as John Pierpont Morgan (J.P. Morgan). In recent years, a street sign entitled "Nikola Tesla Corner" was installed in honor of the famous inventor, near the 40th Street-6th Avenue intersection in New York City.</p>
 74 |                     </div>
 75 |                 </div>
 76 |             <div class="up-down">
 77 |                 <div>
 78 |                     <a class="scroll-down" href="#second-page"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
 79 |                 </div>
 80 |                 <div>
 81 |                     <a class="scroll-down" href="#fourth-page"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
 82 |                 </div>
 83 | 
 84 |             </div>
 85 |         </div>
 86 |     </section>
 87 | 
 88 |     <section class="container" id="fourth-page">
 89 |         <div>
 90 |             <h3><span>Greatest</span> invention</h3>
 91 |         </div>
 92 |         <div class="invention">
 93 |             <div>
 94 | 
 95 | 
 96 |                 <ul>
 97 |                     <span class="line"></span>
 98 |                     <li class="kartra_timeline__item">
 99 |                         <span class="circle"></span>
100 |                         <div>
101 |                             <div data-component="text">
102 |                                 <div>
103 |                                     <span style="font-size: 0.75rem;"><span>1899</span>
104 |                                 </div>
105 |                             </div>
106 |                             <div>
107 |                                 <div>
108 |                                     <div>
109 |                                         <p class="inv-title">Tesla coil</p>
110 |                                     </div>
111 |                                 </div>
112 |                                 <div>
113 |                                     <div>
114 |                                         <p class="description">The system consists of two parts – a primary and
115 |                                             secondary coil, both of which have their own capacitator (which stores
116 |                                             electrical energy, like a battery). The primary coil is hooked up to a
117 |                                             power source from which it receives a massive charge, to the point that
118 |                                             the charge breaks the air resistance in the space between the two coils
119 |                                             (known as the spark gap).</p>
120 |                                     </div>
121 |                                 </div>
122 |                             </div>
123 |                         </div>
124 |                     </li>
125 |                     <li class="kartra_timeline__item">
126 |                         <span class="circle"></span>
127 |                         <div>
128 |                             <div data-component="text">
129 |                                 <div>
130 |                                     <span style="font-size: 0.75rem;"><span>1913</span>
131 |                                 </div>
132 |                             </div>
133 |                             <div>
134 |                                 <div>
135 |                                     <div>
136 |                                         <p class="inv-title">Tesla turbine</p>
137 |                                     </div>
138 |                                 </div>
139 |                                 <div>
140 |                                     <div>
141 |                                         <p class="description">Inspired by the emergent success of the piston engine
142 |                                             in automobiles, Tesla decided to develop his own turbine-style engine.
143 |                                             Also known as the boundary-layer turbine and cohesion-type turbine,
144 |                                             Tesla’s turbine was distinct in its design. Unlike conventional turbines
145 |                                             Tesla’s design was bladeless, instead employing smooth discs rotating in
146 |                                             a chamber to generate movement.</p>
147 |                                     </div>
148 |                                 </div>
149 |                             </div>
150 |                         </div>
151 |                     </li>
152 |                     <li class="kartra_timeline__item">
153 |                         <span class="circle"></span>
154 |                         <div>
155 |                             <div data-component="text">
156 |                                 <div>
157 |                                     <span style="font-size: 0.75rem;"><span>1897</span>
158 |                                 </div>
159 |                             </div>
160 |                             <div>
161 |                                 <div>
162 |                                     <p class="inv-title">Radio</p>
163 |                                 </div>
164 |                                 <div>
165 |                                     <div>
166 |                                         <p class="description">In early 1895 Tesla was ready to send a radio signal
167 |                                             50 miles, from his lab at 33 and 35 South Fifth Avenue in Manhattan, to
168 |                                             West Point, NY but disaster struck before his ground-breaking test could
169 |                                             be completed: a building fire destroyed Tesla’s lab, taking his work
170 |                                             with it. A year later, Marconi took out his first wireless telegram
171 |                                             patent in England.
172 |                                         </p>
173 |                                     </div>
174 |                                 </div>
175 |                             </div>
176 |                         </div>
177 |                     </li>
178 |                     <li class="kartra_timeline__item">
179 |                         <span class="circle"></span>
180 |                         <div>
181 |                             <div data-component="text">
182 |                                 <div>
183 |                                     <span style="font-size: 0.75rem;"><span>1887</span>
184 |                                 </div>
185 |                             </div>
186 |                             <div>
187 |                                 <div>
188 |                                     <p class="inv-title">Induction motor</p>
189 |                                 </div>
190 |                                 <div>
191 |                                     <div>
192 |                                         <p class="description">Like so much of Tesla’s work, the Magnifying
193 |                                             transmitter was an expansion of his Tesla coil technology. Having set up
194 |                                             a lab in Colorado Springs in 1899, he had the space and resources to
195 |                                             create the biggest Tesla coil yet. He called this triple coil system the
196 |                                             magnifying transmitter. It was 52 feet in diameter, generated millions
197 |                                             of volts of electricity and produced 130-foot-long lightning bolts.</p>
198 |                                     </div>
199 |                                 </div>
200 |                             </div>
201 |                         </div>
202 |                     </li>
203 |                     <li class="kartra_timeline__item">
204 |                         <span class="circle"></span>
205 |                         <div>
206 |                             <div data-component="text">
207 |                                 <div>
208 |                                     <span style="font-size: 0.75rem;"><span>1902</span>
209 |                                 </div>
210 |                             </div>
211 |                             <div>
212 |                                 <div>
213 |                                     <p class="inv-title">Magnifying transmitter</p>
214 |                                 </div>
215 |                                 <div>
216 |                                     <div>
217 |                                         <p class="description">Like so much of Tesla’s work, the Magnifying
218 |                                             transmitter was an expansion of his Tesla coil technology. Having set up
219 |                                             a lab in Colorado Springs in 1899, he had the space and resources to
220 |                                             create the biggest Tesla coil yet. He called this triple coil system the
221 |                                             magnifying transmitter. It was 52 feet in diameter, generated millions
222 |                                             of volts of electricity and produced 130-foot-long lightning bolts.</p>
223 |                                     </div>
224 |                                 </div>
225 |                             </div>
226 |                         </div>
227 |                     </li>
228 |                     <li class="kartra_timeline__item">
229 |                         <span class="circle"></span>
230 |                         <div>
231 |                             <div data-component="text">
232 |                                 <div>
233 |                                     <span style="font-size: 0.75rem;"><span>1886</span>
234 |                                 </div>
235 |                             </div>
236 |                             <div>
237 |                                 <div>
238 |                                     <p class="inv-title">Alternating current</p>
239 |                                 </div>
240 |                                 <div>
241 |                                     <div>
242 |                                         <p class="description">Arguably Tesla’s greatest contribution to humanity
243 |                                             was his influence on the development of alternating current (AC).
244 |                                             Perhaps it shouldn’t, strictly speaking, feature in a list of his
245 |                                             inventions, but there’s no doubt that his technology was instrumental in
246 |                                             the emergence of AC as the world’s dominant electrical system. </p>
247 |                                     </div>
248 |                                 </div>
249 |                             </div>
250 |                         </div>
251 |                     </li>
252 |                     <li class="kartra_timeline__item">
253 |                         <span class="circle"></span>
254 |                         <div>
255 |                             <div data-component="text">
256 |                                 <div>
257 |                                     <span style="font-size: 0.75rem;"><span>1878</span>
258 |                                 </div>
259 |                             </div>
260 |                             <div>
261 |                                 <div>
262 |                                     <p class="inv-title">Hydroelectric power</p>
263 |                                 </div>
264 |                                 <div>
265 |                                     <div>
266 |                                         <p class="description">One of the most impressive products of Tesla’s
267 |                                             partnership with George Westinghouse was surely Adams Power Station, the
268 |                                             world’s first hydroelectric power plant. This innovative powerhouse
269 |                                             realised a long-held hope that the awesome force of Niagara Falls, one
270 |                                             of North America’s most spectacular natural wonders, could be harnessed.
271 |                                         </p>
272 |                                     </div>
273 |                                 </div>
274 |                             </div>
275 |                         </div>
276 |                     </li>
277 |                     <li class="kartra_timeline__item">
278 |                         <span class="circle"></span>
279 |                         <div>
280 |                             <div data-component="text">
281 |                                 <div>
282 |                                     <span style="font-size: 0.75rem;"><span>1896</span>
283 |                                 </div>
284 |                             </div>
285 |                             <div>
286 |                                 <div>
287 |                                     <p class="inv-title">The shadowgraph</p>
288 |                                 </div>
289 |                                 <div>
290 |                                     <div>
291 |                                         <p class="description">Another area of Tesla’s research that was likely
292 |                                             curtailed by the fire that destroyed his New York lab in 1895 relates to
293 |                                             the emergence of X-ray technology. Famously, German scientist Wilhelm
294 |                                             Conrad Röntgen developed the first X-ray on the 8 November of that same
295 |                                             year, a ground-breaking achievement that earned him the inaugural Nobel
296 |                                             Prize in 1901.</p>
297 |                                     </div>
298 |                                 </div>
299 |                             </div>
300 |                         </div>
301 |                     </li>
302 |                 </ul>
303 | 
304 | 
305 | 
306 |             </div>
307 |         </div>
308 |         <div class="up-down">
309 |             <div>
310 |                 <a class="scroll-down" href="#third-page"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
311 |             </div>
312 |             <div>
313 |                 <a class="scroll-down" href="#front-page"><p>TOP</p></a>
314 |             </div>
315 |         </div>
316 |     </section>
317 | 
318 |     <section class="bg-dark">
319 |         <p class="pQuote"><i> I am equally proud of my Serbian origin and my Croatian fatherland.</i><br><span>Nikola
320 |                 Tesla</span></p>
321 | 
322 |     </section>
323 | 
324 | 
325 | 
326 | 
327 |     <script src="script/scrtip.js"></script>
328 | </body>
329 | 
330 | </html>


--------------------------------------------------------------------------------