diff --git a/index.html b/index.html
index 351cc76..1386a18 100644
--- a/index.html
+++ b/index.html
@@ -20,13 +20,14 @@
align-items: center;
justify-content: center;
min-height: 100vh;
- background: #f5f5f5;
+ background: #354150;
display: flex;
flex-direction: column;
}
.about-me {
padding: 2.5rem;
+ color: white;
}
.wrapper {
@@ -41,117 +42,12 @@
justify-content: center;
gap: 24px;
}
-
- .card {
- cursor: pointer;
- position: relative;
- background: #000;
- border-radius: 10px;
- overflow: hidden;
- width: 100%;
- height: 25rem;
- box-shadow: rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw,
- rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw,
- rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw,
- rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
- }
-
- .poster {
- position: relative;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
-
- .poster::before {
- content: '';
- position: absolute;
- bottom: -45%;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- transition: .3s;
- object-fit: cover;
- }
-
- .card:hover .poster::before {
- bottom: 0;
- }
-
- .poster img {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: .3s;
- }
-
- .card:hover .poster img {
- transform: scale(1.1);
- }
-
- .details {
- position: absolute;
- bottom: -100%;
- left: 0;
- width: 100%;
- height: auto;
- padding: 1.5em 1.5em 2em;
- background: #000a;
- backdrop-filter: blur(16px) saturate(120%);
- transition: .3s;
- color: #fff;
- z-index: 2;
- }
-
- .card:hover .details {
- bottom: 0;
- padding-bottom: 1.5rem;
- padding-top: 1.5rem;
- }
-
- .details h1,
- .details h2 {
- font-weight: 700;
- }
-
- .details h1 {
- font-size: 1.5em;
- margin-bottom: 5px;
- }
-
- .details h2 {
- font-weight: 400;
- font-size: 1em;
- opacity: .6;
- }
-
-
-
-
- Description text.
-
-
-
-
-
-
-
- Description text.
-
-
-
-