web3

Yuvrajchandra · Yuvrajchandra · commit b4ba75696991 · 2022-05-04T13:42:33.000+05:30
diff --git a/6. Web3 Style Background/index.html b/6. Web3 Style Background/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <div class="card bg-blur">
+          <h1>Card with Gradient Background</h1>
+        </div>
+    </body>
+</html>
diff --git a/6. Web3 Style Background/styles.css b/6. Web3 Style Background/styles.css
@@ -0,0 +1,40 @@
+:root {
+  --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80');
+}
+
+body {
+  background-color: #1D1E22;
+  font-family: sans-serif;
+  display: flex;
+}
+
+.card {
+  margin: auto;
+  padding: 1rem;
+  height: 300px;
+  width: 300px;
+  text-align: center;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: gray;
+  border-radius: 10px;
+}
+
+.bg-blur {
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.bg-blur::before {
+  content: '';
+  background-image: var(--bg-image);
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  filter: blur(30px);
+  z-index: -1;
+}
