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 ⛩ + + + + +
+
+ nature +

Forest

+
+
+ nature +

Islands

+
+
+ nature +

Lake

+
+
+ nature +

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 8e553d675..3b558a5de 100644 --- a/include.js +++ b/include.js @@ -124,6 +124,13 @@ let cards = [ imageLink: './Art/Adithya/result.gif', author: 'Adithya', githubLink: 'https://github.com/Adithya-K-Shetty' + }, + { + 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' } ];