resolved merge conflict

zero-to-mastery · Oct 2, 2023 · c68fa37 · c68fa37
2 parents 8814994 + fabfd59
commit c68fa37
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 0 deletions.
diff --git a/Art/Rahul-Bhati/Rahul-Bhati.gif b/Art/Rahul-Bhati/Rahul-Bhati.gif
diff --git a/Art/Rahul-Bhati/image/Forest.png b/Art/Rahul-Bhati/image/Forest.png
diff --git a/Art/Rahul-Bhati/image/Islands.jpeg b/Art/Rahul-Bhati/image/Islands.jpeg
diff --git a/Art/Rahul-Bhati/image/Lake.jpeg b/Art/Rahul-Bhati/image/Lake.jpeg
diff --git a/Art/Rahul-Bhati/image/Mountain.jpeg b/Art/Rahul-Bhati/image/Mountain.jpeg
diff --git a/Art/Rahul-Bhati/image/fav.png b/Art/Rahul-Bhati/image/fav.png
diff --git a/Art/Rahul-Bhati/index.html b/Art/Rahul-Bhati/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Rahul-Bhati || Card Hover Effect ⛩</title>
+     <link rel="stylesheet" href="style.css">
+     <link rel="shortcut icon" href="image/fav.png" type="image/x-icon">
+</head>
+<body>
+     <div class="container">
+          <div class="box card_1">
+               <img src="image/Forest.png" alt="nature">
+               <h3>Forest</h3>
+          </div>
+          <div class="box card_1">
+               <img src="image/Islands.jpeg" alt="nature">
+               <h3>Islands</h3>
+          </div>
+          <div class="box card_1">
+               <img src="image/Lake.jpeg" alt="nature">
+               <h3>Lake</h3>
+          </div>
+          <div class="box card_1">
+               <img src="image/Mountain.jpeg" alt="nature">
+               <h3>Mountain</h3>
+          </div>
+     </div>
+</body>
+</html>
diff --git a/Art/Rahul-Bhati/style.css 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);
+}
diff --git 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'
   }
 ];