-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (132 loc) · 8.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ui Component Demostration</title>
<style>
body{
height: 150vh;
}
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/bento.css">
<link rel="stylesheet" href="./css/3d-card.css">
<link rel="stylesheet" href="./css/card-mtx.css">
<link rel="stylesheet" href="./css/macbook-scroll.css">
<link rel="stylesheet" href="./css/glowing-star-card.css">
<link rel="stylesheet" href="./css/msg-reveal.css">
<link rel="stylesheet" href="./css/link-reveal-card.css">
</head>
<body>
<div class="grid" grid-cols="20">
<div class="box-wrapper" col="1" colspan="8" row="1" rowspan="6">
<div class="card" id="card">
<h1>Make things float in air</h1>
<p class="desc">Hover over this card to unleash the power of CSS perspective</p>
<img src="./assests/cooking_honey_by_raeseddon2_dg4bmsc-pre.jpg" alt="">
<div class="card-footer">
<a href="#" class="link"> Try now -></a>
<button>Sign Up</button>
</div>
</div>
</div>
<div class="box-wrapper" col="9" colspan="15" row="1" rowspan="3">
<div class="msg-card-container">
<div style="padding: 40px;">
<div class="card-header">
<h1>Beautify your website within minutes</h1>
<p>Just Collab with me and you can build great looking websites within minutes.</p>
</div>
<div id="msg">
<p id="placeholder">HOVER ME TO REVEAL</p>
<span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span><span class="particle"></span>
<p id="real"><span>HEY, THIS IS JENISH.</span></p>
</div>
</div>
</div>
</div>
<div class="box-wrapper" col="9" colspan="5" row="4" rowspan="5">
<div style="height: 90%; width: 90%; background: black; border-radius: 16px;color: white;display: grid;place-items: center; padding: 20px">
<h1 style="text-align: center;">
This Components are Example of Hover transition
</h1>
<ol style="font-size: 20px;">
<li>3d-card</li>
<li>Meassage reveal Card</li>
<li>Glowing star bg card</li>
<li>Mtx card : must try</li>
<li>scroll animation (macbook)</li>
<li>Link reveal Card</li>
<li>Bento Grid itself</li>
</ol>
</div>
</div>
<div class="box-wrapper" col="14" colspan="7" row="4" rowspan="5">
<div class="card-glowing-star">
<div class="glowing-star-container">
<!-- initialised with js-->
</div>
<div class="card-glowing-star-body">
<h1>Hover over me</h1>
<p>This is a glowing stars background card. Hover over the card to make the card glow.</p>
</div>
</div>
</div>
<div class="box-wrapper" col="1" colspan="8" row="7" rowspan="6">
<div id="card-mtx-container">
<i class="fa-solid fa-plus icon-plus" style="color: #ffffff;"></i>
<i class="fa-solid fa-plus icon-plus" style="color: #ffffff;"></i>
<i class="fa-solid fa-plus icon-plus" style="color: #ffffff;"></i>
<i class="fa-solid fa-plus icon-plus" style="color: #ffffff;"></i>
<div id="card-mtx">
<span class="text">Jenish</span>
</div>
<p>
Hover over this card-mtx to reveal an awesome effect. Running out of copy here.
</p>
<p class="btn">
Watch me hover
</p>
</div>
</div>
<div class="box-wrapper" col="9" colspan="12" row="9" rowspan="7" style="overflow-y: scroll;">
<h1 class="macbook-h1"> Just scroll down for see Magic </h1>
<h1 class="macbook-h1">This Macbook is built By Jenish.No kidding.</h1>
<div class="mackbook">
<div class="screen-container">
<h1>></h1>
<div class="screen"></div>
</div>
<div class="keyboard">
</div>
</div>
</div>
<div class="box-wrapper" col="1" colspan="8" row="13" rowspan="4">
<div class="card-link-reveal-wrapper">
<a class="link-btn fn-white" href="https://www.github.com/detroja-jenish/web-ui-components">Github Repo Link</a>
<div class="card-link-reveal">
<img src="./assests/astro_cats_by_kvacm_dftva1p.jpg" alt="">
</div>
</div>
</div>
<div class="box-chaser"></div>
</div>
<address style="margin: 30px auto; width: fit-content;padding-block: 24px;">
name: Jenish <br>
contact no: +91 99049 81905 <br>
email : jenishdetroja2004@gmail.com
</address>
<script src="./js/3d-card.js"></script>
<script src="./js/msg-reveal.js"></script>
<script src="./js/bento.js"></script>
<script src="./js/card-mtx.js"></script>
<script src="./js/glowing-star-card.js"></script>
<script src="./js/link-reveal-card.js"></script>
</body>
</html>