-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
222 lines (196 loc) · 8.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<style>
/* Apply some basic styles to the body to remove margin and padding */
body {
margin: 0;
padding: 0;
overflow-x: hidden; /* Hide horizontal scrollbars */
display: flex;
flex-direction: column; /* Stack elements vertically */
align-items: center;
}
/* Set the video to cover the entire viewport */
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the video covers the entire viewport */
z-index: -1; /* Set a lower z-index to keep it in the background */
}
/* Create a circular frame */
.circular-frame {
position: relative;
z-index: 1; /* Ensure the circular frame appears above the video */
width: 200px; /* Adjust the size of the circular frame */
height: 200px; /* Adjust the size of the circular frame */
border-radius: 50%; /* Create a circular shape */
overflow: hidden;
border: 5px solid #fff; /* Add a white border to the frame */
margin-top: 20px; /* Move the circular frame 20px from the top */
}
/* Style the image within the circular frame */
.circular-frame img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image covers the circular frame */
}
/* Style for the heading */
.heading-container {
position: absolute;
top: 40%; /* Position the heading in the vertical center */
left: 50%; /* Position the heading in the horizontal center */
transform: translate(-50%, -50%); /* Center the heading */
text-align: center;
z-index: 2; /* Ensure the heading appears above the video */
color: #fff; /* Text color */
}
/* Style for the LinkedIn circular button */
.linkedin-button {
position: absolute;
bottom: 50px; /* Adjust the vertical position of the button */
right: 20px; /* Adjust the horizontal position of the button */
z-index: 2; /* Set the z-index value to appear above the video */
width: 50px; /* Adjust the width of the button */
height: 50px; /* Adjust the height of the button */
background-color: transparent; /* LinkedIn blue color */
border-radius: 1%; /* Create a circular shape */
display: flex;
align-items: center;
justify-content: center;
text-decoration: none; /* Remove underlines from the link */
overflow: hidden;
transition: background-color 0.3s ease; /* Smooth transition effect */
}
.linkedin-button img {
width: 30px; /* Adjust the size of the LinkedIn icon */
height: 30px; /* Adjust the size of the LinkedIn icon */
vertical-align: middle; /* Align the icon vertically in the button */
margin-right: 10px; /* Add some spacing between the icon and text (if needed) */
}
.linkedin-button:hover {
background-color: #ffffff; /* Change the background color on hover */
}
/* Style for the GitHub circular button */
.github-button {
position: absolute;
bottom: 50px; /* Adjust the vertical position of the button */
right: 80px; /* Adjust the horizontal position of the button */
z-index: 2; /* Set the z-index value to appear above the video */
width: 50px; /* Adjust the width of the button */
height: 50px; /* Adjust the height of the button */
background-color: transparent; /* GitHub color */
border-radius: 1%; /* Create a circular shape */
display: flex;
align-items: center;
justify-content: center;
text-decoration: none; /* Remove underlines from the link */
overflow: hidden;
transition: background-color 0.3s ease; /* Smooth transition effect */
}
.github-button img {
width: 30px; /* Adjust the size of the GitHub icon */
height: 30px; /* Adjust the size of the GitHub icon */
vertical-align: middle; /* Align the icon vertically in the button */
margin-right: 10px; /* Add some spacing between the icon and text (if needed) */
}
.gmail-button {
position: absolute;
bottom: 50px; /* Adjust the vertical position of the button */
right: 90px; /* Adjust the horizontal position of the button */
z-index: 2; /* Set the z-index value to appear above the video */
width: 50px; /* Adjust the width of the button */
height: 50px; /* Adjust the height of the button */
background-color: transparent; /* GitHub color */
border-radius: 1%; /* Create a circular shape */
display: flex;
align-items: center;
justify-content: center;
text-decoration: none; /* Remove underlines from the link */
overflow: hidden;
transition: background-color 0.3s ease; /* Smooth transition effect */
}
.gmail-button img {
width: 30px; /* Adjust the size of the GitHub icon */
height: 30px; /* Adjust the size of the GitHub icon */
vertical-align: middle; /* Align the icon vertically in the button */
margin-right: 10px; /* Add some spacing between the icon and text (if needed) */
}
.gmail-button:hover {
background-color: #ffffff; /* Change the background color on hover */
}
.github-button:hover {
background-color: #ffffff; /* Change the background color on hover */
}
/* Style for the aboutme container */
.aboutme {
top:500px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 150px; /* Add some margin from the aboutme container */
}
.aboutme-item {
width: 100%;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
.aboutme-item:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<video autoplay loop muted>
<source src="tech2.mp4" type="video/mp4">
<!-- Add additional <source> elements for other video formats -->
Your browser does not support the video tag.
</video>
<!-- Circular frame for the photo -->
<div class="circular-frame">
<img src="port.jpg" alt="Your Photo">
</div>
<!-- Heading -->
<div class="heading-container">
<h1>Mohak Gupta</h1>
<h2>Student , Developer</h2>
</div>
<!-- LinkedIn Button -->
<div class="linkedin-button">
<a href="https://www.linkedin.com/in/mohak-gupta-191329255/" target="_blank">
<img src="lk2.jpg" alt="LinkedIn Profile">
</a>
</div>
<!-- GitHub Button -->
<div class="github-button">
<a href="https://github.com/mohak0981" target="_blank">
<img src="GIT1.png" alt="GitHub Profile">
</a>
</div>
<!-- About Me Container -->
<div class="aboutme" id="aboutme">
<div class="aboutme-item">
<div class="jss2">
<p><strong>About Me</strong></p>
<p>I'm Mohak Gupta from India<br>
I love programming, as well as swimming, taking photos and learning new things!<br>
Feel free to get in touch .</p>
</div>
</div>
</div>
<script>
document.getElementById("Projects").addEventListener("click", function() {
window.open("landingpage.html", "_blank");
});
</script>
</body>
</html>