-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (88 loc) · 4.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Interactions</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
</head>
<body id="body">
<div id="loader">
<div class="loading"></div>
</div>
<div id="main">
<div id="profile">
<div class="profile-image">
<img src="images/profile image.jpg" alt="murali krishna profile image">
</div>
<div class="profile-details">
<h1>Murali Krishna</h1>
<h3>@Kanna</h3>
<p>UX designer | Web developer | Web designer | Creator</p>
</div>
<div class="profile-socials">
<a href="https://github.com/Kanna116" target="_blank"><i class="ri-github-fill"></i></a>
<a href="https://www.linkedin.com/in/murali-kanna/" target="_blank"><i
class="ri-linkedin-box-fill"></i></a>
<a href=""><i class="ri-behance-fill" target="_blank"></i></a>
<a href=""><i class="ri-instagram-fill" target="_blank"></i></a>
</div>
</div>
<div id="projects">
<div class="item item-1" onclick="location.href='https://kanna116.github.io/Add-to-Cart-Button/'">
<h1>Add to Cart</h1>
<p>A simple animated button for a shopping design to look more lively. </p>
</div>
<div class="item item-2" onclick="location.href='https://kanna116.github.io/Card-of-contents/'">
<h1>Card of Contents</h1>
<p>A simple animated card to show content only when hovered and prioritise image </p>
</div>
<div class="item item-3" onclick="location.href='https://kanna116.github.io/Menu-icon/'">
<h1>Menu Icon</h1>
<p>A simple animated menu icon that can be used in any design of web UI and mobile UI </p>
</div>
<div class="item item-4" onclick="location.href='https://kanna116.github.io/Sticky-images/'">
<h1>Sticky Images</h1>
<p>A stylish and modern way of showing images while scrolling </p>
</div>
<div class="item item-5" onclick="location.href='https://kanna116.github.io/Navigation-Bar-type-1/'">
<h1>Navigation Menu</h1>
<p>A common mainly used menu design</p>
</div>
<div class="item item-6" onclick="location.href='https://kanna116.github.io/Image-Carousel/'">
<h1>Image Carousel</h1>
<p>A carousel is the best way of containing images in website </p>
</div>
<div class="item item-7" onclick="location.href='https://kanna116.github.io/Save-button/'">
<h1>Save button</h1>
<p>A different way of making save buttons with good interactions </p>
</div>
<div class="item item-8" onclick="location.href = 'https://kanna116.github.io/Brand-Scroll/'">
<h1>Brand Scroll</h1>
<p>A very fashionable way of displaying Brand Name </p>
</div>
<div class="item item-9">project under construction</div>
<div class="item item-10">project under construction</div>
<div class="item item-11">project under construction</div>
<div class="item item-12">project under construction</div>
<div class="item item-13">project under construction</div>
<div class="item item-14">project under construction</div>
<div class="item item-15">project under construction</div>
<div class="item item-16">project under construction</div>
<div class="item item-17">project under construction</div>
<div class="item item-18">project under construction</div>
<div class="item item-19">project under construction</div>
<div class="item item-20">project under construction</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>