-
Notifications
You must be signed in to change notification settings - Fork 0
/
workshop_first.html
119 lines (111 loc) · 5.36 KB
/
workshop_first.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- contains meta deta about our website -->
<meta charset="UTF-8">
<meta name="description" content="Workshop fhdfhjudhf ihih">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, posrtofilo, gdsc, plaksha">
<meta author="Amog">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul> <!-- this is an unordered list (bullet points)-->
<li><a href="#courses">Courses</a></li>
<li><a href="#projects">Project</a></li> <!-- this is a list element (the bullet point)-->
<li><a href="#contact-me">Contact Me</a></li>
<!-- <a href=""><button>Youtube</button></a> -->
</ul>
</nav>
</header>
<main>
<h1>Amog's Portfolio</h1>
<marquee direction="left">Please like my portfolio.</marquee>
<img src="https://z99fm.com/wp-content/uploads/2021/08/e_ryan_reynolds_dude_08022021.jpg"
alt="Amog Image">
<section>
<h3>Professional Summary</h3>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
gravida ligula. Mauris imperdiet leo eu tincidunt elementum.
Curabitur commodo vestibulum felis, non pretium elit ultrices a.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
gravida ligula. Mauris imperdiet leo eu tincidunt elementum.
Curabitur commodo vestibulum felis, non pretium elit ultrices a.</i>
</p>
</section>
<hr>
<section id="courses">
<h3>Courses</h3>
<table>
<thead>
<tr>
<th>Course</th>
<th>Credits</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Course 1</td>
<td>4</td>
<td>A</td>
</tr>
<tr>
<td>Course 2</td>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>Course 3</td>
<td>3</td>
<td>A</td>
</tr>
</tbody>
</table>
</section>
<hr>
<section id="projects">
<h3>Projects</h3>
<div style="display: flex; justify-content: space-between">
<span><strong>Line Follower</strong></span>
<span style="text-align: right;">2023</span>
</div>
<p>
<img style="float: right;" src="https://s3-ap-southeast-1.amazonaws.com/assets.skyfilabs.com/images/blog/line-follower-with-arm-robot.jpg"
alt="" width="14%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in gravida ligula. Mauris imperdiet leo eu tincidunt elementum. Curabitur commodo vestibulum felis, non pretium elit ultrices a. Aliquam neque lorem, efficitur sed finibus ut, condimentum vitae eros. Vestibulum viverra quam sapien, eget placerat odio elementum et. Sed accumsan volutpat ultrices. Fusce cursus bibendum convallis.
Maecenas quis odio dui. Aliquam porta ligula et turpis semper aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in gravida ligula. Mauris imperdiet leo eu tincidunt elementum. Curabitur commodo vestibulum felis, non pretium elit ultrices a. Aliquam neque lorem, efficitur sed finibus ut, condimentum vitae eros. Vestibulum viverra quam sapien, eget placerat odio elementum et. Sed accumsan volutpat ultrices. Fusce cursus bibendum convallis.
Maecenas quis odio dui. Aliquam porta ligula et turpis semper aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in gravida ligula. Mauris imperdiet leo eu tincidunt elementum. Curabitur commodo vestibulum felis, non pretium elit ultrices a. Aliquam neque lorem, efficitur sed finibus ut, condimentum vitae eros. Vestibulum viverra quam sapien, eget placerat odio elementum et. Sed accumsan volutpat ultrices. Fusce cursus bibendum convallis.
Maecenas quis odio dui. Aliquam porta ligula et turpis semper aliquet.
</p>
</section>
<hr>
<section id="contact-me">
<h3>Contact Me (Send me a message)</h3>
<form action="#" method="post">
<label>Name: </label>
<input type="text" required><br><br>
<label>Email: </label>
<input type="email"><br><br>
<label>Phone: </label>
<input type="tel"><br><br>
<p>Preferred Mode of Communication</p>
<input type="radio" value="Phone-comm">
<label>Phone</label><br><br>
<input type="radio" value="email-comm">
<label>Email</label><br><br>
<input type="submit" value="Send Message">
</form>
<h5>Location:</h5>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3433.1026893140165!2d76.72302317559804!3d30.631063390539044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fe97919cad48b%3A0xf8f99185e7d5540!2sPlaksha%20University!5e0!3m2!1sen!2sin!4v1707644538063!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
<hr>
</main>
<footer>
</footer>
</body>
</html>