-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (103 loc) · 5.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>mohite-pi</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;700&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/34764d513b.js" crossorigin="anonymous"></script></head>
<body>
<div id="navbar">
<a href="#home">Home</a>
<a href="#my-work">My Work</a>
<a href="#about-me">About Me</a>
<a href="#handles">Connect with Me</a>
</div>
<section class="content">
<!-- Introduction -->
<section class="intro" id="home">
<div class="w3-animate-opacity w3-margin-top" id="intro-div">
<div class="w3-display-middle" id="intro_container">
<h1 class="w3-panel w3-border-yellow w3-jumbo w3-animate-top w3-center" id="name-div">Hello, I am <strong id="myname">Piyush Mohite</strong></h1>
<p class="section__subtitle--intro w3-large w3-center w3-animate-bottom">Undergraduate at BITS Pilani, Goa Campus</p>
</div>
</div>
</section>
<!-- My Work -->
<section class="my-work" id="my-work">
<div id="my_work_title"><h2 class="section__title--my-work">What I do</h2></div>
<div class="my-works">
<div class="work-div">
<h3 class="workid">Learn</h3>
<p class="work-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique optio alias laudantium modi blanditiis quas ipsam nulla, voluptas sequi, accusamus saepe non. Molestiae animi quisquam, nam sed minima sit esse?</p>
</div>
<div class="work-div">
<h3 class="workid">Watch</h3>
<p class="work-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, perspiciatis, nesciunt assumenda facilis id error optio, hic tenetur mollitia enim repellat architecto quibusdam! Autem dolorem maxime dignissimos distinctio cum labore?</p>
</div>
<div class="work-div">
<h3 class="workid">Sleep</h3>
<p class="work-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias natus molestiae eum nihil consequatur doloremque neque facilis at, expedita aliquid, aut, porro accusantium maiores vel nisi nemo sapiente rerum iusto?</p>
</div>
</div>
</section>
<!-- About Me -->
<section class="aboutme" id="about-me">
<div id="about-me-box-main">
<div class="container"><h2 class="section__title--aboutme" style="color: black;">About Me</h2></div>
<div class="aboutme-container">
<div class="aboutme-text work-flex" style="flex-grow: 7">
<h3 class="section__subtitle section__subtitle--aboutme">Undergrad student based in Maharashtra, India</h3>
<p id="aboutme-para" style="color: black;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero omnis eos minima illo accusantium dolorum illum nam, perspiciatis fuga deserunt deleniti. Nemo ea dolorum delectus fugiat molestiae, odit temporibus explicabo?</p>
</div>
<div class="myself-img work-flex" style="flex-grow: 2; align-self: center;">
<img src="./img/myself.jpeg" alt="Piyush" id="myself" style="border-radius: 6%;">
</div>
</div>
</div>
</section>
<!-- Connect with Me -->
<section class="connect" id="handles">
<h2 class="section__title--connect">Connect With Me</h2>
<div class="handles">
<a href="mailto:[email protected]" class="folder">
<div class="link"><i class="fas fa-envelope-square"></i> E-mail</div></a>
<a href="https://www.linkedin.com/in/piyush-mohite-2b66421ba/" class="folder">
<div class="link"><i class="fab fa-linkedin"></i> LinkedIn</div></a>
<a href="https://twitter.com/PiyushSMohite" class="folder">
<div class="link"><i class="fab fa-twitter-square"></i> Twitter</div></a>
<a href="https://www.facebook.com/piyush.mohite.902819/?viewas=" class="folder">
<div class="link"><i class="fab fa-facebook-square"></i> Facebook</div></a>
<a href="https://www.instagram.com/mohite.py/" class="folder">
<div class="link"><i class="fab fa-instagram-square"></i> Instagram</div></a>
<a href="https://github.com/git-pi-e" class="folder">
<div class="link"><i class="fab fa-github"></i> GitHub</div></a>
</div>
</section>
</section>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>