Add second background decoration div

alejandro-venegas · Nov 19, 2019 · 9251501 · 9251501
1 parent 8d04899
commit 9251501
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
   <body>
-    <div id="background-decoration" aria-hidden="true"></div>
+    <div id="background-decoration-01" aria-hidden="true"></div>
+    <div id="background-decoration-02" aria-hidden="true"></div>
 
 
     <header id="blog-header">

diff --git a/styles/style.css b/styles/style.css
@@ -18,15 +18,27 @@ body{
 
 
 
-#background-decoration{
+#background-decoration-01{
   position: absolute;
-  height: 100%;
+  height: 60%;
   width: 100%;
   top: 0;
   left: 0;
-  background-color: #F5F5F5;
-  z-index: -1;
---  transform: skewY(-5deg) translateY(-4.375vw);
+  background-color: #EEEEEE;
+  z-index: -5;
+  transform: skewY(-10deg) translateY(-8.8vw);
+}
+
+#background-decoration-02{
+  position: absolute;
+  height: 60%;
+  width: 100%;
+  top:60%;
+  left: 0;
+  z-index: -4;
+  background-color: #FAFAFA;
+  transform: skewY(10deg) translateY(-4.375vw);
+  opacity: 0.7;
 }