-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (130 loc) · 6.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css"> <!-- Link to your CSS file -->
<link rel="stylesheet" href="footer.css">
<title>Mountain Star Zlatibor</title>
</head>
<body>
<div class="container">
<h1>Professional Coder Baldev</h1>
<p>Hello, I'm Baldev, a web developer passionate about crafting seamless and user-friendly websites. With expertise in HTML, CSS, and JavaScript, I create engaging online experiences that blend form and function. Let's build something remarkable together!</p>
<a href="#">Learn more</a>
</div>
<div class="external">
<h2>My recent works</h2>
<div class="horizontal-scroll-wrapper">
<div class="img-wrapper slower">
<a href="https://altphotos.com/photo/stylish-parisian-cafe-terrace-279/" target="_blank" rel="noopener"><img src="i1.png" alt="">
</a>
</div>
<div class="img-wrapper faster">
<a href="https://altphotos.com/photo/retro-boy-doll-wearing-elegant-clothes-330/" target="_blank" rel="noopener">
<img src="i2.png" alt="">
</a>
</div>
<div class="img-wrapper slower vertical">
<a href="https://altphotos.com/photo/clocks-shop-exposition-window-reflecting-the-streets-277/" target="_blank" rel="noopener">
<img src="i3.png" alt="">
</a>
</div>
<div class="img-wrapper slower slower-down">
<a href="https://altphotos.com/photo/swans-and-ducks-swimming-in-a-river-264/" target="_blank" rel="noopener">
<img src="i4.png" alt="">
</a>
</div>
<div class="img-wrapper">
<a href="https://altphotos.com/photo/sidewalk-terrace-of-a-blue-facade-cafe-312/" target="_blank" rel="noopener">
<img src="i5.png" alt="">
</a>
</div>
<div class="img-wrapper slower">
<a href="https://altphotos.com/photo/paris-waterfront-at-sunset-1555/" target="_blank" rel="noopener">
<img src="i6.png" alt="">
</a>
</div>
<div class="img-wrapper faster1">
<a href="https://altphotos.com/photo/old-man-leaning-over-the-barrier-looking-at-the-river-265/" target="_blank" rel="noopener">
<img src="i7.png" alt="">
</a>
</div>
<div class="img-wrapper slower slower2">
<a href="https://altphotos.com/photo/cafe-terrace-with-a-row-of-retro-tables-261/" target="_blank" rel="noopener">
<img src="i8.png" alt="">
</a>
</div>
<div class="img-wrapper">
<a href="https://altphotos.com/photo/street-scene-with-pedestrians-and-dogs-318/" target="_blank" rel="noopener">
<img src="i9.png" alt="">
</a>
</div>
<div class="img-wrapper slower">
<a href="https://altphotos.com/photo/tourist-barge-on-the-river-seine-near-notre-dame-266/" target="_blank" rel="noopener">
<img src="i10.png" alt="">
</a>
</div>
<div class="img-wrapper slower last">
<a href="https://altphotos.com/photo/skulls-decoration-in-a-shop-window-331/" target="_blank" rel="noopener">
<img src="i11.png" alt="">
</a>
</div>
</div>
<p class="scroll-info"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" ><path d="M50,67.1c-0.6,0-1.2-0.2-1.8-0.7c-3.8-3.8-7.7-7.7-11.5-11.5c-2.3-2.3,1.2-5.8,3.5-3.5c2.5,2.5,4.9,4.9,7.4,7.4 c0-13.7,0-27.4,0-41.2c0-0.6,0.2-1.2,0.5-1.5c0,0,0,0,0,0c0.4-0.6,1.1-1,2-0.9c13.7,0.3,26.4,7.2,33.5,19.1 C96.5,55.9,84.7,85,60.2,91.6C35.5,98.2,11.6,79.1,11.1,54c-0.1-3.2,4.9-3.2,5,0c0.3,13.8,8.4,26.4,21.3,31.5 c12.5,5,27.1,1.9,36.6-7.5c9.5-9.5,12.5-24.1,7.5-36.6c-4.8-12.1-16.3-20.1-29-21.2c0,12.8,0,25.5,0,38.3 c2.5-2.5,4.9-4.9,7.4-7.4c2.3-2.3,5.8,1.3,3.5,3.5c-3.9,3.9-7.8,7.8-11.8,11.8C51.2,66.9,50.6,67.1,50,67.1z"/></svg></span> Try scrolling down</p>
</div>
<div class="container second">
<div class="item">
<div class="img img-first"></div>
<div class="card">
<h3>Designer</h3>
<p>I value simple content structure, clean design patterns, and thoughtful interactions.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="item">
<div class="img img-second"></div>
<div class="card">
<h3>Frontend Developer</h3>
<p>I like to code things from scratch, and enjoy bringing ideas to life in the browser.</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="item">
<div class="img img-third"></div>
<div class="card">
<h3>Mentor</h3>
<p>I genuinely care about people, and love helping fellow designers work on their craft.</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
<script>
const items = document.querySelectorAll('.item');
items.forEach((item) => {
item.addEventListener('mouseenter', (event) => {
const rect = item.getBoundingClientRect();
const offsetX = event.clientX - rect.left;
const offsetY = event.clientY - rect.top;
// Calculate the percentage of pointer position within the item
const originX = (offsetX / rect.width) * 100 + '%';
const originY = (offsetY / rect.height) * 100 + '%';
item.style.transformOrigin = `${originX} ${originY}`;
item.style.transform = 'scale(1.1)'; // Adjust the scale factor as desired
});
item.addEventListener('mouseleave', () => {
item.style.transformOrigin = 'center center';
item.style.transform = 'scale(1)';
});
});
</script>
<div class="footer">
<span id="L">B</span>
<span id="I">A</span>
<span id="G">L</span>
<span id="H">D</span>
<span id="T">E</span>
<span id="T">V</span>
</div>
</body>
</html>