Merge pull request #857 from VINAYMADIVAL/feature/mondrian-composition

aayush105 · web-flow · commit 896df33f3f73 · 2025-10-17T13:11:53.000+05:45
Add a Mondrian-style composition Art using only HTML and CSS.
diff --git a/Mondrian-Composition/index.html b/Mondrian-Composition/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mondrian Art</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+    }
+    .container{
+      display: inline-grid;
+      background-color: black;
+      gap: 9px;
+      grid-template-columns: 320px 198px 153px 50px;
+      grid-template-rows: 414px 130px 155px 11px;
+    }
+    
+    .red{
+      background-color: #E72F24;
+    }
+    .item{
+      background-color: #F0F1EC;
+    }
+    .white1{
+      grid-area: 1/2/2/5;
+    }
+    .white2{
+      grid-area: 2/1/4/2;
+    }
+    .white3{
+      grid-area: 4/1/6/2;
+    }
+    .white4{
+      grid-area: 2/2/4/4;
+    }
+    .white5{
+      grid-area: 3/4/6/5;
+      margin-top: 10px;
+    }
+    .yellow{
+      background-color: #F9D01E ;
+      grid-area: 4/2/6/3;
+    }
+    .blue{
+      background-color: #004592 ;
+      grid-area: 2/4/3/5;
+    }
+    .black{
+      background-color:#232629 ;
+      grid-area: 4/3/6/4;
+    }
+    @media (max-width:1250px){
+      .container{
+        grid-template-columns: 160px 99px 76px 25px;
+        grid-template-rows: 207px 65px 78px 6px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+   <div class="container">
+    <div class="red"></div>
+    <div class="item white1"></div>
+    <div class="item white2"></div>
+    <div class="item white3"></div>
+    <div class="item white4"></div>
+    <div class="item white5"></div>
+    <div class="black"></div>
+    <div class="yellow"></div>
+    <div class="blue"></div>
+   </div>
+</body>
+
+</html>
diff --git a/README.md b/README.md
@@ -78,6 +78,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 - [MasterCard](#mastercard)
 - [Mobile Menu Off Canvas](#mobile-menu-off-canvas)
 - [Modal/Popup](#modalpopup)
+- [Mondrian Composition](#mondrian-composition)
 - [Mouse Tracking](#mouse-tracking)
 - [Multi Step Checkout](#multi-step-checkout)
 - [NavBar](#navbar)
@@ -506,6 +507,13 @@ Your browser does not support the video tag.
 
 ---
 
+## <a id="mondrian-composition"></a>Mondrian Composition
+[<img src="images/mondrian_composition.png" height="230" title="Mondrian Art Demo">](https://codepen.io/VINAY-MADIVAL/pen/VYerdxY)
+
+**[⬆ back to top](#quick-links)**
+
+---
+
 ## <a id="Mouse"></a>Mouse tracking
 
 [<img src="images/mousetracking.png" height="230" title="Demo 1">](https://codepen.io/Momciloo/pen/GoGRrQ)
diff --git a/images/mondrian_composition.png b/images/mondrian_composition.png
