-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
156 lines (143 loc) · 8.89 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
<!-- This line tells the browser that this is an HTML document and specifies its version. -->
<!DOCTYPE html>
<!-- This line starts the HTML document and specifies the language to English. -->
<html lang="en">
<!-- This part contains information about the document that isn't shown on the page. -->
<head>
<meta charset="UTF-8"> <!-- This line tells the browser which character set (like letters and symbols) to use. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This line makes the webpage fit well on different screen sizes. -->
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- This line connects the HTML document to a CSS file that styles the page. -->
<!-- These lines tell the browser to connect to Google's font server. It's like telling the browser to go to Google's font store and get the font style called Roboto. Think of it like going to a shop to buy a specific type of clothing. The <link> tags are like directions to the shop, and the href attribute is the address of the shop. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- You can add fonts here -->
<title>My Portfolio</title> <!-- This line gives the webpage a title that shows in the browser tab. -->
</head>
<!-- This part contains all the content that shows up on the webpage. -->
<body>
<!-- The <div> element is a container used to group and style content. In this code, <div> elements with specific classes like "layout," "main_content," "home_page," and "navbar" are used to organize different sections of the webpage. -->
<div class="layout">
<div class="main_content">
<!-- Home Page starts here -->
<div class="home_page">
<div class="home_heading" id="Home">
<!-- Edit here 👇 Change "GDSC IIIT Kalyani" to your own name -->
<div class="intro">Hello <br>I'm <br>GDSC IIIT Kalyani</div>
<!-- Edit here 👇 Add an interesting bio here. Your instagram bio works too 😉 -->
<div class="sub_heading">Lorem, ipsum dolor sit amet consectetur adipisicing elit</div>
</div>
<div class="profile_pic">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/pfp.png">
</div>
</div>
<!-- About Page starts here -->
<div class="about_page" id="About">
<div class="about_heading">About</div>
<div class="right_container">
<div class="about_me">
<div class="about_me_contents">
NAME
<!-- Edit here 👇 Add your name instead of "GDSC IIIT Kalyani" -->
<span>GDSC IIIT Kalyani</span>
</div>
<div class="about_me_contents">
BIRTHDAY
<!-- Edit here 👇 Add your birthday -->
<span>15th July 2020</span>
</div>
<div class="about_me_contents">
EMAIL
<!-- Edit here 👇 Add your email instead of "[email protected]" -->
<span>[email protected]</span>
</div>
<div class="about_me_contents">
PHONE
<!-- Edit here 👇 Add your phone number. We'll not prank call you. -->
<span>(+91)-sickret</span>
</div>
<div class="about_me_contents">
LOCATION
<!-- Edit here 👇 Add your location -->
<span>Kalyani, West Bengal</span>
</div>
<div class="about_me_contents">
CONNECT WITH ME
<div></div>
</div>
</div>
<div class="skills">
<div class="experiences">
<div class="info">
EDUCATION BACKGROUND
<!-- Edit here 👇 Add your Educational Background -->
<span>BTech</span>
</div>
<div class="info">
ACADEMIC ACHIEVEMENTS
<!-- Edit here 👇 Add your Acad Achievements -->
<span>5</span>
</div>
<div class="info">
EXPERIENCE
<!-- Edit here 👇 Add your Experience -->
<span>2</span>
</div>
<div class="info">
PROJECTS
<!-- Edit here 👇 Add your Projects -->
<span>3</span>
</div>
</div>
<!-- Edit here 👇 Write something about yourself. Something that will help people know you better -->
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur atque maxime
corrupti debitis, quas magnam autem. Mollitia ipsa illo cumque vero, maxime sunt aut autem
voluptate, iste perspiciatis ducimus.
</div>
</div>
</div>
</div>
<!-- Portfolio page starts here -->
<div class="portfolio" id="Portfolio">
<div class="portfolio_heading">Portfolio</div>
<div class="portfolio_container">
<!--Edit here 👇 Add your own photo or video here. Incase of photo change the <Video> tag to <img> and remove autoplay and controls -->
<video src="./assets/IMG_0473.mp4" autoplay controls class="bento__item" style="--columns: span 2; object-fit: cover;">
</video>
<!-- <div class="bento__item" style="--columns: span 2;">
</div> -->
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/robotics.png" class="bento__item" style="--columns: span 2; object-fit: cover; width: 20rem;">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/team.jpeg" class="bento__item" style="--rows: span 4; --columns: 1 / -1; object-fit: cover;">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/rebase.png" class="bento__item" style="object-fit: cover">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img src="./assets/git.png" class="bento__item" style="--columns: span 2; object-fit: cover; height: 14rem;">
<!-- Edit here 👇 Add your own photo here. Simply download it in the assets folder and update the filename "pfp.png" to match your image's filename -->
<img class="bento__item" src="./assets/rebase2.png">
</div>
</div>
</div>
<!-- Navbar starts here -->
<div class="navbar">
<div class="logo">
<img src="./assets/logo.png">
</div>
<ul class="navbar_list">
<li class="navbar_content"><a href="#Home">HOME</a></li>
<li class="navbar_content"><a href="#About">ABOUT</a></li>
<li class="navbar_content"><a href="#Portfolio">PORTFOLIO</a></li>
</ul>
</div>
</div>
</body>
<!-- This is where the content of the webpage ends. -->
</html>
<!-- This marks the end of the HTML document. -->