Skip to content

Commit

Permalink
Enhanced the Components card (#545)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prince-kushwaha-2004
Prince-kushwaha-2004 authored Feb 8, 2024
1 parent 70071e0 commit cd877d7
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 65 deletions.
Binary file added assets/images/cardbg1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/cardbg2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
171 changes: 106 additions & 65 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,12 +180,12 @@ body {
background-color: #222;
color: #eee;
background-image: none;
}
}

body .dark-mode{
body .dark-mode {
background-image: none;
background-color: black;
}
}

html {
font-size: 62.5%;
Expand All @@ -201,10 +201,10 @@ html {

button#dark-mode-toggle {
position: fixed;
top: 70px;
right: 20px;
background-color: #333;
color: white;
top: 70px;
right: 20px;
background-color: #333;
color: white;
border: none;
padding: 10px;
cursor: pointer;
Expand All @@ -216,7 +216,7 @@ button#dark-mode-toggle {

.dark-mode button#dark-mode-toggle {
background-color: #eee;
color: #222;
color: #222;
}

.header1 {
Expand All @@ -230,7 +230,7 @@ button#dark-mode-toggle {
background-position: 50% 50%;
}

.dark-mode .header1{
.dark-mode .header1 {
background-image: none;
background-color: black;
}
Expand All @@ -247,8 +247,8 @@ button#dark-mode-toggle {
background-position: 50% 50%;
}

.dark-mode .header2{
background-image: none ;
.dark-mode .header2 {
background-image: none;
background-color: black;
}

Expand All @@ -264,9 +264,9 @@ button#dark-mode-toggle {
background-position: 50% 50%;
}

.dark-mode .header3{
.dark-mode .header3 {
background-color: black;
background-image:none ;
background-image: none;
}

.navbar {
Expand Down Expand Up @@ -436,15 +436,15 @@ section {
background: rgba(255, 255, 255, 0.881);
}

.dark-mode .comp-section .compcontainer .started{
.dark-mode .comp-section .compcontainer .started {
color: rgb(47, 111, 174);
background-color:rgba(251, 251, 251, 0.743);
background-color: rgba(251, 251, 251, 0.743);
text-shadow: 1px 1px 2px rgb(197, 190, 190), 1px 1px 1px rgb(57, 4, 100);
}

.dark-mode .comp-section .compcontainer .started:hover{
.dark-mode .comp-section .compcontainer .started:hover {
background: #b1c2d4;
}
}

.comp-section {
height: 80vh;
Expand All @@ -458,6 +458,7 @@ section {

/* Container Section Css */


.container {
display: flex;
justify-content: center;
Expand All @@ -467,36 +468,67 @@ 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(61, 97, 128) 180deg, rgb(61, 97, 128) 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("./assets/images/cardbg1.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("./assets/images/cardbg2.jpg");
}

.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;
Expand All @@ -507,45 +539,55 @@ 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 {
color: rgb(69, 194, 233);
text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(69, 194, 233);
}

.container .box:hover .content i,
.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 .content i {
color: white;
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,
.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);
color: white;
text-shadow: 2px 2px 4px rgb(12, 239, 247), 1px 1px 2px rgb(26, 242, 166);
}

.dark-mode .container .box:hover .content i {
color: rgb(190, 188, 188);
text-shadow: 2px 2px 4px rgb(12, 239, 247), 1px 1px 2px rgb(26, 242, 166);
}



/* Footer Css */

.footer {
Expand Down Expand Up @@ -677,7 +719,7 @@ footer p a {
font-size: 2.5rem;
background: transparent;
border: 0;
color:rgb(57, 4, 100);
color: rgb(57, 4, 100);
margin-left: 1rem;
background-color: rgba(224, 202, 245, 0.743);
padding: .7rem;
Expand Down Expand Up @@ -778,8 +820,8 @@ footer p a {
}
}

@media (max-width: 650px){
#searchBar input{
@media (max-width: 650px) {
#searchBar input {
width: 60%;
font-size: 1.5rem;
}
Expand Down Expand Up @@ -872,7 +914,6 @@ footer p a {
}
}


@media (max-width: 400px) {
.paragraph {
width: 100%;
Expand Down

0 comments on commit cd877d7

Please sign in to comment.