diff --git a/Art/Rahul-Bhati/Rahul-Bhati.gif b/Art/Rahul-Bhati/Rahul-Bhati.gif
new file mode 100644
index 000000000..3c916e096
Binary files /dev/null and b/Art/Rahul-Bhati/Rahul-Bhati.gif differ
diff --git a/Art/Rahul-Bhati/image/Forest.png b/Art/Rahul-Bhati/image/Forest.png
new file mode 100644
index 000000000..a1ed64a6f
Binary files /dev/null and b/Art/Rahul-Bhati/image/Forest.png differ
diff --git a/Art/Rahul-Bhati/image/Islands.jpeg b/Art/Rahul-Bhati/image/Islands.jpeg
new file mode 100644
index 000000000..24efc32b3
Binary files /dev/null and b/Art/Rahul-Bhati/image/Islands.jpeg differ
diff --git a/Art/Rahul-Bhati/image/Lake.jpeg b/Art/Rahul-Bhati/image/Lake.jpeg
new file mode 100644
index 000000000..2be7cad74
Binary files /dev/null and b/Art/Rahul-Bhati/image/Lake.jpeg differ
diff --git a/Art/Rahul-Bhati/image/Mountain.jpeg b/Art/Rahul-Bhati/image/Mountain.jpeg
new file mode 100644
index 000000000..720f65fcd
Binary files /dev/null and b/Art/Rahul-Bhati/image/Mountain.jpeg differ
diff --git a/Art/Rahul-Bhati/image/fav.png b/Art/Rahul-Bhati/image/fav.png
new file mode 100644
index 000000000..abe862447
Binary files /dev/null and b/Art/Rahul-Bhati/image/fav.png differ
diff --git a/Art/Rahul-Bhati/index.html b/Art/Rahul-Bhati/index.html
new file mode 100644
index 000000000..7ff40e50e
--- /dev/null
+++ b/Art/Rahul-Bhati/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Rahul-Bhati || Card Hover Effect ⛩
+
+
+
+
+
+
+
+
Forest
+
+
+
+
Islands
+
+
+
+
Lake
+
+
+
+
Mountain
+
+
+
+
\ No newline at end of file
diff --git a/Art/Rahul-Bhati/style.css b/Art/Rahul-Bhati/style.css
new file mode 100644
index 000000000..342e09709
--- /dev/null
+++ b/Art/Rahul-Bhati/style.css
@@ -0,0 +1,58 @@
+/* * {
+ box-sizing: border-box;
+} */
+
+body {
+ width: 100%;
+ height: 100vh;
+ /* margin-top: 0; */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #252f54;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ border-radius: 30px;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.box {
+ max-width: 300px;
+ max-height: 400px;
+ border-radius: 30px;
+ background: #99a0bc;
+ box-shadow: rgba(207, 193, 193, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+img{
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: 0.5s;
+}
+
+.box img{
+ border-radius: 30px;
+}
+
+.box:hover img{
+ transform: translate(0, -70px);
+}
+
+h3{
+ display: none;
+ text-align: center;
+ transition:0.5s;
+ font-family:cursive;
+}
+
+.box:hover h3 {
+ display: block;
+ transform: translate(0, -50px);
+}
\ No newline at end of file
diff --git a/include.js b/include.js
index f51c5cbbf..890c1776b 100644
--- a/include.js
+++ b/include.js
@@ -5,6 +5,13 @@ let cards = [
imageLink: './Art/Joy/triangle.gif',
author: 'Joy',
githubLink: 'https://github.com/royranger'
+ },
+ {
+ artName: 'Cart Hover',
+ pageLink: './Art/Rahul-Bhati/index.html',
+ imageLink: './Art/Rahul-Bhati/Rahul-Bhati.gif',
+ author: 'Rahul-Bhati',
+ githubLink: 'https://github.com/Rahul-Bhati'
}
];
@@ -20,14 +27,14 @@ let contents = [];
Shuffle(cards).forEach((c) => {
contents.push([
`` +
- `` +
- `` +
- `` +
- `` +
- `
${c.artName}
` +
- `
${c.author}
` +
- `
` +
- ``
+ `` +
+ `` +
+ `` +
+ `` +
+ `
${c.artName}
` +
+ `
${c.author}
` +
+ `
` +
+ ``
]);
});