-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathHome.html
103 lines (91 loc) · 4.55 KB
/
Home.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
<!doctype html>
<html>
<head>
<title>Parallax scrolling website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"
integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
</head>
<body><div class= "Home">
<div class="nav">
<a href="./index.html">
<button>Login</button></a>
</div>
<section>
<h1 id="text">Dhruv tara</h1>
<h3 id="text2"> your guiding star!</h3>
<a href="#" id="btn">Inspire Learning</a>
<img src="img/kri.png" id="moon">
</section>
<script type="text/javascript">
let moon = document.getElementById("moon")
let text = document.getElementById("text")
let text2 = document.getElementById("text2")
let btn = document.getElementById("btn")
let header = document.getElementById("header")
window.addEventListener('scroll', function(){
var value = window.scrollY
moon.style.left = value * 1.5+ 'px';
text.style.top = 180 + value * -0.4 + 'px';
// text2.style.top = 100 + value * 0.04 + 'px';
btn.style.marginTop = value * 1 + 'px';
header.style.top = value * 0.5 + 'px';
})
</script>
<section1>
<span></span>
<div class="sec">
<h2>About</h2>
<p>In this current scenario, me and my peers faced a lot of issues while beginning out engineering journey like
:How to get started? How to proceed 1
? How to exceed further in this journey? Hence, we bring to you a platform where our
juniors would find a ray of hope to begin their journey with!</p><br>
<p>Here, on Dhruvtara ,we give you the space to explore how engineering life works through the experienced engineering students themselves.
Get the resources you’ll need to study,important apps you’ll need to get started with engineering and get to know more about internships,
resume building and lot of thrilling stuff from our amazing seniors!</p>
<section4>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h4 id="text2" >Meet our Amazing Team</h4> <br>
<h5 id="text3" style="margin-top: 10px;"> <i>Coming together is beginning, staying together is a progress and working together is SUCCESS </i></h5>
<div class="flex-container">
<div class="container" style="margin-top: 19vh;" >
<div class="card">
<div class="content">
<h3>Krithika Saravanan</h3> <br>
<p>(Computer science and technology)</p><br><br><br>
<p><i> An upcoming full-stack developer with interest in competitive programming.</i></p>
<a href="https://www.linkedin.com/in/krithika-saravanan7">LinkedIn</a>
</div>
</div>
<div class="card">
<div class="content">
<h3>Tanvi Mantri</h3><br>
<p>(Computer science and technology)</p><br><br><br>
<p><i>An Artificial Intelligence enthusiast who carries interest in Management</i></p>
<a href="https://www.linkedin.com/in/tanvi-mantri">LinkedIn</a>
</div>
</div>
<div class="card">
<div class="content">
<h3>Preethika K</h3><br>
<p>(Computer Engineering)</p><br><br><br>
<p><i>A creative mind who can come up with solutions for technical issues within instance.</i></p>
<a href="https://www.linkedin.com/in/preethika-k-658872206">LinkedIn</a>
</div>
</div>
</div>
<script type="text/javascript" src="vanilla-tilt.js"></script>
<script>
VanillaTilt.init(document.querySelectorAll(".card"), {
max: 25,
speed: 400,
glare: true,
"max-glare": 1,
});
</script>
</section4>
</div>
</div>
</div></body>
</html>