diff --git a/gardient.PNG b/gardient.PNG
new file mode 100644
index 0000000..c2011e1
Binary files /dev/null and b/gardient.PNG differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..77af6fe
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Creative Gradient Border Cards</title>
+        <link rel="stylesheet" type="text/css" href="styles.css">
+    </head>
+    <body>
+    <div class="container">
+        <div class="box">
+            <span></span>
+            <div class="content">
+                <h2>Card One</h2>
+                <p> Lorem ipsum dolor sit amet, consectetur
+                adipisicing elit, sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua.</p>
+                <a href="#">Read More</a>
+            </div>
+        </div>
+        <div class="box">
+            <span></span>
+            <div class="content">
+                <h2>Card Two</h2>
+                <p> Lorem ipsum dolor sit amet, consectetur
+                adipisicing elit, sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua.</p>
+                <a href="#">Read More</a>
+            </div>
+        </div>
+        <div class="box">
+            <span></span>
+            <div class="content">
+                <h2>Card Three</h2>
+                <p> Lorem ipsum dolor sit amet, consectetur
+                adipisicing elit, sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua.</p>
+                <a href="#">Read More</a>
+            </div>
+        </div>
+    </div>           
+    </body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..6b9038b
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,121 @@
+ *
+ {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: consolas;
+ }       
+ body
+ {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #111;
+ }
+ .container
+ {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px 0;
+    flex-wrap: wrap;
+ }
+ .container .box
+ {
+    position: relative;
+    width: 320px;
+    height: 400px;
+    color: #fff;
+    background: #111;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 30px;
+    transition: 0.5s;
+ }
+ .container .box:hover
+ {
+    transform: translateY(-20px);
+ }
+ .container .box::before
+ {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;  
+  background: linear-gradient(45deg,#ffbc00,#ff0058);
+ }
+ .container .box::after
+ {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;  
+  background: linear-gradient(45deg,#ffbc00,#ff0058);
+  filter: blur(30px);
+ }
+ .container .box:nth-child(2)::before,
+ .container .box:nth-child(2)::after
+ {
+    background: linear-gradient(315deg,#03a9f4,#ff0058);
+ }
+ .container .box:nth-child(3)::before,
+ .container .box:nth-child(3)::after
+ {
+    background: linear-gradient(315deg,#4dff03,#00d0ff);
+ }
+ .container .box span
+ {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    right: 6px;
+    bottom: 6px;
+    background: rgba(0,0,0,0.6);
+    z-index: 2;
+ }
+ .container .box span::before
+ {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    background: rgba(255,255,255,0.1);
+    pointer-events: none;
+ }
+ .container .box .content
+ {
+    z-index: 10;
+    padding: 20px 40px;
+ }
+ .container .box .content h2
+ {
+    font-size: 2em;
+    color: #fff;
+    margin-bottom: 10px;
+ }
+ .container .box .content p
+ {
+    font-size: 1.1em;
+    color: #fff;
+    margin-bottom: 10px;
+    line-height: 1.4em; 
+}
+.container .box .content a
+{
+    display: inline-block;
+    font-size: 1.1em;
+    color: #111;
+    background: #fff;
+    padding: 10px;
+    text-decoration: none;
+    font-weight: 700;
+}
\ No newline at end of file
