Add hover effect to cards. Limit container width. Refs codezoned#48

Ryuno-Ki · Oct 6, 2020 · 1478526 · 1478526
1 parent b53ab7c
commit 1478526
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<html class="">
+<html lang="en" class="">
 <head>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125870124-1"></script>
     <script>
@@ -135,31 +135,31 @@ <h2 class="partner-head" style="color: white;">Our Amazing Partners:</h2>
                 <h1 class="projects-head">Some of our Opensource projects:</h1>
 
                 <div class="card-container">
-                    <div class="card" style="">
+                    <div class="card">
                         <p class="card-title">ScriptsDump</p>
                         <p class="project-info">ScriptsDump is a complete repository of all kind of scripts we and you can think of.</p>
                         <div class="button-box-container">
                             <a href="#" class="button-box">Check It Out!</a>
                         </div>
 
                     </div>  
-                    <div class="card" style="">
+                    <div class="card">
                         <p class="card-title">RIG</p>
                         <p class="project-info">RIG (Randomized ID Generator) is an app to generate IDs and badges for any event or meetup!</p>
                         <div class="button-box-container">
                             <a href="#" class="button-box">Check It Out!</a>
                         </div>
 
                     </div> 
-                    <div class="card" style="">
+                    <div class="card">
                         <p class="card-title">BlogCast</p>
                         <p class="project-info">BlogCast is a 100% Opensource blogging App/Platform.</p>
                         <div class="button-box-container">
                             <a href="#" class="button-box">Check It Out!</a>
                         </div>
 
                     </div> 
-                    <!-- <div class="card" style="">
+                    <!-- <div class="card">
                         <p class="card-title">Project_name</p>
                         <p class="project-info">about the project</p>
                         <div class="" style="border-top: 2px solid #eeeeee; padding-top: 3%;">

diff --git a/static/css/style.css b/static/css/style.css
@@ -507,11 +507,12 @@ a {
 /*===================================================== Projects =============================================================== */
 
 .card-container {
-    margin: 2%;
+    max-width: 60%;
+    margin: 2% auto;
     display: grid;
     grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-auto-rows: 1fr;
 }
 .card {
     display: flex;
@@ -522,7 +523,17 @@ a {
     /* card design */
     border-radius: 2px;
     border: solid 2px #eeeeee ;
-    box-shadow: width:100%;height:100%;box-shadow: 1px 2px 3px #eeeeee inset;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    box-shadow: 1px 2px 3px #eeeeee inset;
+}
+
+.card:hover {
+    transition: all 0.2s ease-out;
+    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
+    top: -4px;
+    border-color: #eeeeee;
 }
 
 .card .card-title {
@@ -531,10 +542,6 @@ a {
     font-weight: bold;
 }
 
-.project-info {
-
-}
-
 .card .button-box-container {
     border-top: 2px solid #eeeeee; 
     padding-top: 5%;
@@ -569,9 +576,8 @@ a {
 .button-box:hover {
     background-color: #448aff;
     color: #f5f5f5;
-    -webkit-transition: all 0.6s ease-in-out !important;;
+    -webkit-transition: all 0.6s ease-in-out !important;
 }
-
 /*=================================================== End Projects ============================================================= */