Scribd
Upload
2 views

Web Programming Assessment

The document contains a web programming assessment by Advay Anand, showcasing his resume, timetable, and a birthday party invitation. It includes HTML code for each section, detailing personal information, education, skills, work experience, and styling through CSS. The resume highlights his role as a Software Engineer, while the timetable outlines class schedules, and the invitation is designed for a birthday celebration.

Uploaded by

Advay Anand
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Programming Assessment

The document contains a web programming assessment by Advay Anand, showcasing his resume, timetable, and a birthday party invitation. It includes HTML code for each section, detailing personal information, education, skills, work experience, and styling through CSS. The resume highlights his role as a Software Engineer, while the timetable outlines class schedules, and the invitation is designed for a birthday celebration.

Uploaded by

Advay Anand
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Web Programming Assessment-1

Name: Advay Anand

Reg. No.: 23BDS0130

1. Content Based
a. Resume

HTML Code

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=, initial-scale=1.0">
7. <title>Resume of Advay Anand</title>
8. <link rel="stylesheet" href="ResumeStylesheet.css">
9. </head>
10. <body>
11. <div class="resume">
12. <div class="basic">
13. <div class="name">
14. <h1>Advay Anand</h1>
15. <h2>Software Engineer</h2>
16. </div>
17. <div class="about">
18. <h2>About Me</h2>
19. <p>I'm a web designer for Fiserv,
20. specializing in web design,
21. graphic design, and UX.
22. Experienced with the Adobe
23. Creative Suite, responsive design,
24. social media management,
25. and prototyping.</p>
26. </div>
27. <div class="contact">
28. <h2>Contact me:</h2>
29. <p>+91 9870455084</p>
30. <p><a>[email protected]</a></p>
31. <a href="https://www.linkedin.com/in/advay-anand-
a9319028b/" target="_blank">LinkedIn</a>
32. </div>
33. <div class="education">
34. <h2>Education</h2>
35. <table border="1">
36. <tr>
37. <th>Education</th>
38. <th>Institution</th>
39. <th>Year of Graduation</th>
40. </tr>
41. <tr>
42. <td>B.Tech</td>
43. <td>Vellore Institute of Technology</td>
44. <td>2027</td>
45. </tr>
46. <tr>
47. <td>B.Tech</td>
48. <td>Vellore Institute of Technology</td>
49. <td>2027</td>
50. </tr>
51. <tr>
52. <td>B.Tech</td>
53. <td>Vellore Institute of Technology</td>
54. <td>2027</td>
55. </tr>
56. </table>
57. </div>
58. <div class="Skills">
59. <h2>Skills</h2>
60. <ul>
61. <li>JIRA</li>
62. <li>AWS</li>
63. <li>Jenkins</li>
64. <li>TensorFLow</li>
65. <li>SpringBoot</li>
66. </ul>
67. </div>
68. </div>
69. <div class="func">
70. <div class="exp">
71. <h2>Work Experience</h2>
72. <h3>Director of Software Engineering</h3>
73. <h4>Adobe</h4>
74. <h5>2019-current/San Jose,CA</h5>
75. <ul>
76. <li>Managed cros functional team on JIRA,
increasing production velocity by 23%</li>
77. <li>Integrated IDPS into Systems, which decreaed
instances of successful socially engineered attacks to less than
1%</li>
78. <li>Boosted processes through Jenkins-backed
workflows that improved the quality or outcomes by a 54% margin</li>
79. <li><b><u>Achieved a 97% Net Promoter Score</u></b>
and a 4.7 out of 5 rating from end users for error-free end
products</li>
80. </ul>
81. <h3>Director of Software Engineering</h3>
82. <h4>Adobe</h4>
83. <h5>2019-current/San Jose,CA</h5>
84. <ul>
85. <li>Managed cros functional team on JIRA,
increasing production velocity by 23%</li>
86. <li>Integrated IDPS into Systems, which decreaed
instances of successful socially engineered attacks to less than
1%</li>
87. <li>Boosted processes through Jenkins-backed
workflows that improved the quality or outcomes by a 54% margin</li>
88. <li><b><u>Achieved a 97% Net Promoter Score</u></b>
and a 4.7 out of 5 rating from end users for error-free end
products</li>
89. </ul>
90. <h3>Director of Software Engineering</h3>
91. <h4>Adobe</h4>
92. <h5>2019-current/San Jose,CA</h5>
93. <ul>
94. <li>Managed cros functional team on JIRA,
increasing production velocity by 23%</li>
95. <li>Integrated IDPS into Systems, which decreaed
instances of successful socially engineered attacks to less than
1%</li>
96. <li>Boosted processes through Jenkins-backed
workflows that improved the quality or outcomes by a 54% margin</li>
97. <li><b><u>Achieved a 97% Net Promoter Score</u></b>
and a 4.7 out of 5 rating from end users for error-free end
products</li>
98. </ul>
99. </div>
100. </div>
101. </div>
102. </body>
103. </html>

/* ResumeStylesheet.css */

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}

.resume {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: flex;
flex-wrap: wrap;
}

.basic, .func {
flex: 1 1 45%; /* Adjusts for smaller screens */
padding: 15px;
}

.name {
text-align: center;
margin-bottom: 20px;
}

.name h1 {
font-size: 2.5rem;
color: white;
background-color: #0073e6;
height:fit-content;
text-align: center;
}

.name h2 {
font-size: 1.5rem;
color: #555;
}

.about, .contact, .education, .Skills, .exp {


margin-bottom: 20px;
}

.about h2, .contact h2, .education h2, .Skills h2, .exp h2 {


font-size: 1.8rem;
color: #0073e6;
margin-bottom: 10px;
border-bottom: 2px solid #0073e6;
display: inline-block;
}

.about p, .contact p {
margin: 10px 0;
font-size: 1rem;
color: #555;
}

.contact a {
color: #0073e6;
text-decoration: none;
}

.contact a:hover {
text-decoration: underline;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 0.9rem;
}

th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}

th {
background-color: #0073e6;
color: #fff;
}

ul {
list-style: square inside none;
margin: 10px 0;
padding: 0;
}

ul li {
margin: 5px 0;
}

.exp h3 {
font-size: 1.3rem;
color: #0073e6;
margin-bottom: 5px;
}

.exp h4 {
font-size: 1.1rem;
color: #555;
}

.exp h5 {
font-size: 0.9rem;
color: #888;
margin-bottom: 10px;
}

.exp ul li {
margin: 5px 0;
font-size: 0.95rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
.resume {
flex-direction: column;
}

.basic, .func {
flex: 1 1 100%;
}

.name h1 {
font-size: 2rem;
}

.name h2 {
font-size: 1.2rem;
}
}
Screenshot
a. VTOP TimeTable
104. <!DOCTYPE html>
105. <html lang="en">
106. <head>
107. <meta charset="UTF-8">
108. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
109. <title>Document</title>
110. <link rel="stylesheet" href="TTStyle.css">
111. </head>
112. <body>
113. <table align="center" border="1">
114. <thead>
115. <tr>
116. <td rowspan="2">THEORY</td>
117. <td>Start</td>
118. <td>08:00</td>
119. <td>09:00</td>
120. <td>10:00</td>
121. <td>11:00</td>
122. <td>12:00</td>
123. <td>-</td>
124. <td>Lunch</td>
125. <td>14:00</td>
126. <td>15:00</td>
127. <td>16:00</td>
128. <td>17:00</td>
129. <td>18:00</td>
130. <td>18:51</td>
131. <td>19:01</td>
132. </tr>
133. <tr>
134. <td>End</td>
135. <td>08:50</td>
136. <td>09:50</td>
137. <td>10:50</td>
138. <td>11:50</td>
139. <td>12:50</td>
140. <td>-</td>
141. <td>Lunch</td>
142. <td>14:50</td>
143. <td>15:50</td>
144. <td>16:50</td>
145. <td>17:50</td>
146. <td>18:50</td>
147. <td>19:00</td>
148. <td>19:50</td>
149. </tr>
150. <tr>
151. <td rowspan="2">LAB</td>
152. <td>Start</td>
153. <td>08:00</td>
154. <td>08:51</td>
155. <td>09:51</td>
156. <td>11:00</td>
157. <td>12:00</td>
158. <td>-</td>
159. <td>Lunch</td>
160. <td>14:00</td>
161. <td>15:00</td>
162. <td>16:00</td>
163. <td>17:00</td>
164. <td>18:00</td>
165. <td>18:51</td>
166. <td>19:01</td>
167. </tr>
168. <tr>
169. <td>End</td>
170. <td>08:50</td>
171. <td>09:50</td>
172. <td>10:50</td>
173. <td>11:50</td>
174. <td>12:50</td>
175. <td>-</td>
176. <td>Lunch</td>
177. <td>14:50</td>
178. <td>15:50</td>
179. <td>16:50</td>
180. <td>17:50</td>
181. <td>18:50</td>
182. <td>19:00</td>
183. <td>19:50</td>
184. </tr>
185. <tr>
186. <td rowspan="2">MON</td>
187. <td>THEORY</td>
188. </tr>
189. <tr>
190. <td>LAB</td>
191. </tr>
192. <tr>
193. <td rowspan="2">TUE</td>
194. <td>THEORY</td>
195. </tr>
196. <tr>
197. <td>LAB</td>
198. </tr>
199. <tr>
200. <td rowspan="2">WED</td>
201. <td>THEORY</td>
202. </tr>
203. <tr>
204. <td>LAB</td>
205. </tr>
206. <tr>
207. <td rowspan="2">THU</td>
208. <td>THEORY</td>
209. </tr>
210. <tr>
211. <td>LAB</td>
212. </tr>
213. <tr>
214. <td rowspan="2">FRI</td>
215. <td>THEORY</td>
216. </tr>
217. <tr>
218. <td>LAB</td>
219. </tr>
220. </thead>
221. </table>
222. </body>
223. </html>

224. /*TTSyle.css*/
225. table{
226. border: 2px solid rgb(28, 92, 148);
227. background-color: white;
228. border-collapse: collapse;
229. }
230. thead{
231. background-color: #cacaca;
232. border: 1px solid rgb(28, 92, 148);
233. }
234. tbody{
235. border: 1px solid rgb(28, 92, 148);
236.
237. }
238. html{
239. background-color:aquamarine;
240. }
Screenshot
a. Birthday Party Invitation
241. <!DOCTYPE html>
242. <html lang="en">
243. <head>
244. <meta charset="UTF-8">
245. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
246. <title>B-Day Invitation</title>
247. <link rel="stylesheet" href="inv.css">
248. </head>
249. <body>
250. <div class="card">
251. <h2>Join us to celebrate</h2>
252. <img
src="https://t3.ftcdn.net/jpg/06/36/46/60/360_F_636466013_pyvVXrMHmfoTz
SrmdWUP7VyjAhncIC5U.jpg" alt="bday cakez">
253. <h1>The Birthday Party of</h1>
254. <h1>Advay Anand</h1>
255. <h4>ON SUNDAY</h4>
256. <h4>18.01.2025</h4>
257. <div class="time">AT 4:00PM</div>
258. <p>123,St. Mark Street, Bangalore</p>
259. </div>
260. </body>
261. </html>

/* inv.css */
body {
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: #333;
}

.card {
background: #fff;
width: 350px;
max-width: 90%;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
}

.card h2 {
font-size: 1.5rem;
color: #ff6f61;
margin-bottom: 10px;
}

.card img {
width: 80%;
max-width: 250px;
margin: 15px auto;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card h1 {
font-size: 1.8rem;
color: #333;
margin: 10px 0;
}

.card h4 {
font-size: 1rem;
color: #555;
margin: 5px 0;
}

.time {
font-size: 1.2rem;
font-weight: bold;
color: #ff6f61;
margin-top: 10px;
margin-bottom: 20px;
}

.card p {
font-size: 0.9rem;
color: #777;
margin: 0;
}

@media (max-width: 768px) {


.card {
padding: 15px;
}

.card h1 {
font-size: 1.5rem;
}

.card h2 {
font-size: 1.2rem;
}

.time {
font-size: 1rem;
}
}

Screenshot
Content+Input Based

a. Riviera Event Registration


262. <!DOCTYPE html>
263. <html lang="en">
264. <head>
265. <meta charset="UTF-8">
266. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
267. <title>Cultural Fest Registration</title>
268. <link rel="stylesheet" href="Riv.css">
269. </head>
270. <body>
271. <header>
272. <img src="https://riviera.vit.ac.in/images/footer-logo-
25.svg" alt="">
273. <p style="color: black;">Join us for an unforgettable
celebration of art, culture, and entertainment!</p>
274. </header>
275. <main>
276. <section class="registration-form">
277. <h2>Event Registration</h2>
278. <form action="/submit-registration" method="POST">
279. <label for="name">Full Name:</label>
280. <input type="text" id="name" name="name"
placeholder="Enter your name" required>
281.
282. <label for="email">Email Address:</label>
283. <input type="email" id="email" name="email"
placeholder="Enter your email" required>
284.
285. <label for="phone">Phone Number:</label>
286. <input type="tel" id="phone" name="phone"
placeholder="Enter your phone number" required>
287.
288. <label for="event">Select Event:</label>
289. <select id="event" name="event" required>
290. <option value="" disabled selected>Choose an
event</option>
291. <option value="dance">Dance
Competition</option>
292. <option value="music">Music Concert</option>
293. <option value="theater">Theater Play</option>
294. <option value="art">Art Exhibition</option>
295. <option value="quiz">Quiz
Competition</option>
296. </select>
297.
298. <label for="message">Additional Notes
(Optional):</label>
299. <textarea id="message" name="message" rows="4"
placeholder="Any specific requirements or requests?"></textarea>
300.
301. <button type="submit">Register Now</button>
302. </form>
303. </section>
304. </main>
305. <footer>
306. <p>&copy; Riviera 2025. All rights reserved.</p>
307. </footer>
308. </body>
309. </html>

/* Riv.css*/

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #1b1b2f, #162447, #1f4068, #1b1b2f);
color: #e0e0e0;
background-size: 400% 400%;
animation: aurora 10s ease infinite;
}

@keyframes aurora {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

header {
text-align: center;
padding: 20px;
background: linear-gradient(90deg, #4caf50, #8bc34a, #03a9f4);
color: #fff;
border-bottom: 2px solid #03a9f4;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

header h1 {
font-size: 2.5rem;
margin: 10px 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

header p {
font-size: 1.2rem;
margin: 0;
}

main {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 140px);
padding: 20px;
}

.registration-form {
background: #222831;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
width: 100%;
max-width: 600px;
text-align: center;
}

.registration-form h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #00adb5;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

form label {
display: block;
font-weight: bold;
margin: 10px 0 5px;
color: #eeeeee;
}

form input, form select, form textarea, form button {


width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #00adb5;
border-radius: 5px;
font-size: 1rem;
background: #393e46;
color: #eeeeee;
outline: none;
}

form input:focus, form select:focus, form textarea:focus {


border-color: #8bc34a;
box-shadow: 0 0 10px #8bc34a;
}

form button {
background: linear-gradient(90deg, #03a9f4, #8bc34a);
color: #fff;
border: none;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
font-weight: bold;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

form button:hover {
background: linear-gradient(90deg, #8bc34a, #03a9f4);
transform: scale(1.05);
}
footer {
text-align: center;
padding: 10px;
background-color: #1f4068;
color: #e0e0e0;
border-top: 2px solid #03a9f4;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
}
img{
width: 250px;
}

Screenshot
a. Ration Card Updation
310. <!DOCTYPE html>
311. <html lang="en">
312. <head>
313. <meta charset="UTF-8">
314. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
315. <title>Ration Card Updation</title>
316. <link rel="stylesheet" href="Ration.css">
317. </head>
318. <body>
319. <header>
320. <nav>
321. <ul class="menu">
322. <li><a href="#home">Home</a></li>
323. <li><a href="#update">Update Details</a>
324. <ul class="submenu">
325. <li><a href="#add-member">Add Family
Member</a></li>
326. <li><a href="#remove-member">Remove
Member</a></li>
327. <li><a href="#address-change">Address
Change</a></li>
328. </ul>
329. </li>
330. <li><a href="#status">Check Status</a></li>
331. <li><a href="#contact">Contact Us</a></li>
332. </ul>
333. </nav>
334. </header>
335. <main>
336. <section id="home">
337. <h1>Welcome to the Ration Card Updation Portal</h1>
338. <p>Use this portal to update your ration card
details, check application status, and more.</p>
339. </section>
340.
341. <section id="update">
342. <h2>Update Ration Card Details</h2>
343. <p>Select an option from the menu above to update
specific details.</p>
344. </section>
345.
346. <section id="add-member">
347. <h2>Add Family Member</h2>
348. <form action="/add-member" method="POST">
349. <label for="card-number">Ration Card
Number:</label>
350. <input type="text" id="card-number" name="card-
number" required>
351.
352. <label for="member-name">New Member's
Name:</label>
353. <input type="text" id="member-name" name="member-
name" required>
354.
355. <label for="dob">Date of Birth:</label>
356. <input type="date" id="dob" name="dob" required>
357.
358. <label for="relation">Relation to
Cardholder:</label>
359. <input type="text" id="relation" name="relation"
required>
360.
361. <button type="submit">Submit</button>
362. </form>
363. </section>
364.
365. <section id="remove-member">
366. <h2>Remove Member</h2>
367. <form action="/remove-member" method="POST">
368. <label for="card-number">Ration Card
Number:</label>
369. <input type="text" id="card-number" name="card-
number" required>
370.
371. <label for="member-name-remove">Member's Name to
Remove:</label>
372. <input type="text" id="member-name-remove"
name="member-name-remove" required>
373.
374. <label for="reason">Reason for Removal:</label>
375. <select id="reason" name="reason" required>
376. <option value="death">Death</option>
377. <option value="migration">Migration</option>
378. </select>
379.
380. <button type="submit">Submit</button>
381. </form>
382. </section>
383.
384. <section id="address-change">
385. <h2>Address Change</h2>
386. <form action="/address-change" method="POST">
387. <label for="card-number">Ration Card
Number:</label>
388. <input type="text" id="card-number" name="card-
number" required>
389.
390. <label for="new-address">New Address:</label>
391. <textarea id="new-address" name="new-address"
rows="4" required></textarea>
392.
393. <button type="submit">Submit</button>
394. </form>
395. </section>
396.
397. <section id="status">
398. <h2>Check Status</h2>
399. <p>Enter your ration card number to check the status
of your application.</p>
400. <form action="/check-status" method="GET">
401. <label for="status-card-number">Ration Card
Number:</label>
402. <input type="text" id="status-card-number"
name="status-card-number" required>
403. <button type="submit">Check Status</button>
404. </form>
405. </section>
406.
407. <section id="contact">
408. <h2>Contact Us</h2>
409. <p>For any queries, reach out to our support team at
<a
href="mailto:[email protected]">[email protected]
</a>.</p>
410. </section>
411. </main>
412. <footer>
413. <p>&copy; 2025 Ration Card Portal. All rights
reserved.</p>
414. </footer>
415. </body>
416. </html>
417. /* Ration.css */
418. body {
419. font-family: Arial, sans-serif;
420. line-height: 1.6;
421. margin: 0;
422. padding: 0;
423. background-color: #f4f4f9;
424. }
425.
426. header {
427. background-color: #333;
428. color: #fff;
429. padding: 10px 0;
430. }
431.
432. .menu {
433. list-style: none;
434. margin: 0;
435. padding: 0;
436. display: flex;
437. justify-content: center;
438. position: relative;
439. }
440.
441. .menu li {
442. margin: 0 15px;
443. position: relative;
444. }
445.
446. .menu a {
447. color: #fff;
448. text-decoration: none;
449. font-weight: bold;
450. }
451.
452. .menu a:hover {
453. text-decoration: underline;
454. }
455.
456. .submenu {
457. list-style: none;
458. position: absolute;
459. top: 100%;
460. left: 0;
461. background-color: #444;
462. display: none;
463. padding: 10px;
464. border-radius: 4px;
465. }
466.
467. .menu li:hover .submenu {
468. display: block;
469. }
470.
471. .submenu li {
472. margin-bottom: 5px;
473. }
474.
475. .submenu li:last-child {
476. margin-bottom: 0;
477. }
478.
479. .submenu a {
480. color: #fff;
481. text-decoration: none;
482. }
483.
484. main {
485. padding: 20px;
486. }
487.
488. section {
489. margin-bottom: 40px;
490. padding: 20px;
491. background: #fff;
492. border-radius: 8px;
493. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
494. }
495.
496. form label {
497. display: block;
498. margin-bottom: 5px;
499. font-weight: bold;
500. }
501.
502. form input, form textarea, form select, form button {
503. display: block;
504. width: 100%;
505. margin-bottom: 15px;
506. padding: 10px;
507. border: 1px solid #ccc;
508. border-radius: 4px;
509. }
510.
511. form button {
512. background-color: #333;
513. color: #fff;
514. border: none;
515. cursor: pointer;
516. }
517.
518. form button:hover {
519. background-color: #555;
520. }
521.
522. footer {
523. text-align: center;
524. padding: 10px;
525. background-color: #333;
526. color: #fff;
527. }
528.

Screenshot

You might also like