diff --git a/projects/CSS/uiverse.io/Card by G4b413l/index.html b/projects/CSS/uiverse.io/Card by G4b413l/index.html new file mode 100644 index 0000000..bb6dca8 --- /dev/null +++ b/projects/CSS/uiverse.io/Card by G4b413l/index.html @@ -0,0 +1,5 @@ +
+
+
+
+
diff --git a/projects/CSS/uiverse.io/Card by G4b413l/screenshot.png b/projects/CSS/uiverse.io/Card by G4b413l/screenshot.png new file mode 100644 index 0000000..cff8395 Binary files /dev/null and b/projects/CSS/uiverse.io/Card by G4b413l/screenshot.png differ diff --git a/projects/CSS/uiverse.io/Card by G4b413l/styles.css b/projects/CSS/uiverse.io/Card by G4b413l/styles.css new file mode 100644 index 0000000..81e308b --- /dev/null +++ b/projects/CSS/uiverse.io/Card by G4b413l/styles.css @@ -0,0 +1,52 @@ +.card { + width: 190px; + height: 254px; + transition: all 0.2s; + position: relative; + cursor: pointer; +} + +.card-inner { + width: inherit; + height: inherit; + background: rgba(255,255,255,.05); + box-shadow: 0 0 10px rgba(0,0,0,0.25); + backdrop-filter: blur(10px); + border-radius: 8px; +} + +.card:hover { + transform: scale(1.04) rotate(1deg); +} + +.circle { + width: 100px; + height: 100px; + background: radial-gradient(#b0e633, #53ef7d); + border-radius: 50%; + position: absolute; + animation: move-up6 2s ease-in infinite alternate-reverse; +} + +.circle:nth-child(1) { + top: -25px; + left: -25px; +} + +.circle:nth-child(2) { + bottom: -25px; + right: -25px; + animation-name: move-down1; +} + +@keyframes move-up6 { + to { + transform: translateY(-10px); + } +} + +@keyframes move-down1 { + to { + transform: translateY(10px); + } +} diff --git a/projects/CSS/uiverse.io/Card by adamgiebl/index.html b/projects/CSS/uiverse.io/Card by adamgiebl/index.html new file mode 100644 index 0000000..3e2c75a --- /dev/null +++ b/projects/CSS/uiverse.io/Card by adamgiebl/index.html @@ -0,0 +1 @@ +
diff --git a/projects/CSS/uiverse.io/Card by adamgiebl/screenshot.png b/projects/CSS/uiverse.io/Card by adamgiebl/screenshot.png new file mode 100644 index 0000000..91be483 Binary files /dev/null and b/projects/CSS/uiverse.io/Card by adamgiebl/screenshot.png differ diff --git a/projects/CSS/uiverse.io/Card by adamgiebl/styles.css b/projects/CSS/uiverse.io/Card by adamgiebl/styles.css new file mode 100644 index 0000000..cc485cd --- /dev/null +++ b/projects/CSS/uiverse.io/Card by adamgiebl/styles.css @@ -0,0 +1,6 @@ +.card { + width: 190px; + height: 254px; + background: rgb(236, 236, 236); + box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; +} diff --git a/projects/CSS/uiverse.io/README.md b/projects/CSS/uiverse.io/README.md new file mode 100644 index 0000000..24c01ea --- /dev/null +++ b/projects/CSS/uiverse.io/README.md @@ -0,0 +1,7 @@ +## Card by G4b413l + +![Card by G4b413l](Card by G4b413l/screenshot.png) + +## Card by adamgiebl + +![Card by adamgiebl](Card by adamgiebl/screenshot.png)