Changed Styling of component cards

Rakesh9100 · Feb 6, 2024 · 3500db7 · 3500db7
1 parent 2ee5ab6
commit 3500db7
Showing 1 changed file with 77 additions and 47 deletions.
diff --git a/style.css b/style.css
@@ -458,6 +458,7 @@ section {
 
 /* Container Section Css */
 
+
 .container {
     display: flex;
     justify-content: center;
@@ -467,36 +468,64 @@ section {
 }
 
 .container .box {
-    position: relative;
-    width: 320px;
+    background-color: black;
+    color: wheat;
+    width: 300px;
+    height: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 25px;
-    background: rgba(224, 202, 245, 0.743);
-    border: 4px solid rgb(18, 100, 166);
-    border-radius: 14px;
-    box-shadow: 2px 2px 4px 2px rgb(28, 116, 189);
+    box-shadow: 0 0 10px 5px  black;
     cursor: pointer;
+    /* position: absolute; */
+    overflow: hidden;
+    border-radius: 1rem 0;
+    z-index: 1;
+    margin: 2rem;
+
+}
+.container .box::before{
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%) rotate(-280deg);
+   width: 200%;
+   height: 180%;
+   background-image: conic-gradient(rgb(69, 194, 233) 0deg,rgb(69, 194, 233) 90deg,transparent 130deg,transparent 180deg
+   ,rgb(219, 61, 221) 180deg,rgb(219, 61, 221) 270deg,transparent 310deg,transparent 360deg);
+   transition:transform 1s;
+   border-radius: 1rem 0;
+   z-index: 1;
+}
+.dark-mode .container .box::before{
+   background-image: conic-gradient(rgb(251, 251, 251) 0deg,rgb(249, 249, 250) 90deg,transparent 130deg,transparent 180deg
+   ,rgb(67, 64, 67) 180deg,rgb(61, 59, 61) 270deg,transparent 310deg,transparent 360deg);
+}
+.container .box:hover::before{
+    transform: translate(-50%,-50%) rotate(-100deg);
+}
+.container .box .content{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    transform: translate(-50%,-50%);
+    background:url("https://static.vecteezy.com/system/resources/previews/022/370/881/non_2x/modern-dark-flow-blue-purple-and-pink-light-on-black-abstract-background-popular-dynamic-background-eps10-vector.jpg");
+    background-size: cover;
+    width: 290px;
+    height: 190px;
+    border-radius: 1rem 0;
+    z-index: 5;
+    transition: all linear .5s;
 }
-
-.container .box:hover {
-    background-color: rgb(18, 100, 166);
-    border: 4px solid rgba(224, 202, 245, 0.743);
-    box-shadow: 2px 2px 4px 2px rgba(224, 202, 245, 0.743);
+.dark-mode .container .box .content{
+    background:url("https://media.istockphoto.com/photos/black-and-white-wave-design-picture-id946676078?k=6&m=946676078&s=170667a&w=0&h=TCxsFzIx91gpwTGm8K0ITBtPS7NU2dDT8FCPsKZ7Uhs=");
 }
 
-.dark-mode .container .box {
-    background: rgba(251, 251, 251, 0.743);
-    border: 4px solid rgb(238, 245, 251);
-    box-shadow: 2px 2px 4px 2px rgb(28, 116, 189);
-  }
-
-  .dark-mode .container .box:hover {
-    background-color: rgb(192, 224, 251);
-    border: 4px solid rgba(234, 223, 244, 0.743);
-    box-shadow: 2px 2px 4px 2px rgba(224, 202, 245, 0.743);
-  }
 
 .container .zoom-effect {
     transition: transform 0.3s ease-in-out;
@@ -507,45 +536,46 @@ section {
     transition: transform 0.3s ease-in-out;
 }
 
-.container .box .content {
-    position: relative;
-    left: 0;
-    padding: 20px 40px;
-    text-align: center;
-    transition: 0.5s ease-in;
-    color: var(--dark);
-}
 
 .container .box .content i {
     font-size: 73px;
-    color: rgb(18, 100, 166);
-    text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(37, 111, 172);
+    color: rgb(219, 61, 221);
+    text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(69, 194, 233);
+    transition: all linear 1s;
 }
 
-.dark-mode .container .box .content i {
-    text-shadow: 1px 1px 2px black, 1px 1px 2px #a5b9c5; 
-  }
-
 .container .box .content h2 {
     font-size: 23px;
-    color: rgb(37, 111, 172);
+    color: rgb(69, 194, 233);
     margin-top: 25px;
     margin-bottom: 5px;
-    text-shadow: 1px 1px 1px black, 1px 1px 2px rgb(37, 111, 172);
+    text-shadow: 1px 1px 1px black, 1px 1px 2px rgb(69, 194, 233);
+    transition: all linear 1s;
 }
 
-.container .box:hover .content i,
+.container .box:hover .content i{
+    color: rgb(69, 194, 233);
+    text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(69, 194, 233);
+}
 .container .box:hover .content h2 {
-    color: rgba(224, 202, 245, 0.743);
-    text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(37, 111, 172);
+    color: rgb(219, 61, 221);
+    text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(69, 194, 233);
 }
-
-.dark-mode .container .box:hover .content i,
-.dark-mode .container .box:hover .content h2 {
-  color: rgba(253, 252, 253, 0.743);
-  text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(175, 189, 200);
+.dark-mode .container .box .content i{
+    color:rgb(138, 130, 138) ;
+    text-shadow: 1px 1px 2px rgb(124, 122, 122), 1px 1px 2px rgb(255, 255, 255);
+}
+.dark-mode .container .box .content h2{
+    color: white;
+    text-shadow: 1px 1px 2px rgb(124, 122, 122), 1px 1px 2px rgb(255, 255, 255);
+}
+.dark-mode .container .box:hover .content i{
+    color:white;
+    text-shadow: 1px 1px 2px rgb(124, 122, 122), 1px 1px 2px rgb(255, 255, 255);
 }
 
+
+
 /* Footer Css */
 
 .footer {