diff --git a/index.html b/index.html index 946278d..fcd5185 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,16 @@ Portfolio -
-
-
-

Title

-

Content of the card.

-
Click
+
+
+
+
+

Title

+

Content of the card.

+
Click
+
- \ No newline at end of file diff --git a/style.css b/style.css index 6b35166..5136d0e 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,39 @@ -html { - background-image: url("bg1.jpg"); -} +/* html { + +} */ body { + background-image: url("bg2.jpg"); + /* background-position: 0vw 100vh; */ + background-position: 0vw 0vh; + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: auto; /* Resize the background image to cover the entire container */ display: flex; justify-content: center; align-items: center; flex-direction: column; - color: aliceblue; + color: rgb(225, 225, 225); } -.card { +.container .card { + display: flex; justify-content: center; align-items: center; flex-direction: column; width: 20vw; - + padding: 0em 1em 0 1em; + min-width: fit-content; border-color: black; border-radius: 1em; - background: linear-gradient(90deg, rgba(28,212,82,0.8323530095632002) 3%, rgba(109, 236, 131, 0.747) 100%); + border-top: 1px solid rgba(255,255,255, 0.5); + border-left: 1px solid rgba(255,255,255, 0.5); + backdrop-filter: blur(5px); + /* background: linear-gradient(90deg, rgba(28,212,82,0.8323530095632002) 3%, rgba(109, 236, 131, 0.747) 100%); */ + box-shadow: 20px 20px 50px rgba(0,0,0,0.5); } -.card h4 { +.container .card h4 { height: 0.1vh; } @@ -34,7 +45,7 @@ body { background-color: aliceblue; border-radius: 0.2em; background: linear-gradient(90deg, rgb(151, 255, 119) 0%, rgb(204, 255, 188) 30%, rgb(204, 255, 188) 60%, rgba(151, 255, 119,1) 100%); - color: black; + color: rgb(32, 0, 19); } .btn:hover {