Add files via upload

Palakmeena · Mar 17, 2024 · 0c67cbd · 0c67cbd
commit 0c67cbd
Showing 1 changed file with 162 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mondrian Project</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body{
+      display: flex;
+      height: 100vh;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .painting {
+
+      display: grid;
+      grid-template-rows: 414px 285px 20px;
+      grid-template-columns: 329px 401px;
+
+
+
+
+
+
+    }
+
+    .first {
+      background-color: #E72F24;
+      border-right: 4px solid black;
+      border-bottom: 4px solid black;
+    }
+
+    .second {
+      background-color: #F0F1EC;
+      border-bottom: 4px solid black;
+      border-left: 4px solid black;
+    }
+
+    .third {
+      background-color: #F0F1EC;
+      border-top: 4px solid black;
+      border-right: 4px solid black;
+      border-bottom: 4px solid black;
+
+
+
+    }
+
+    .fourth {
+      background-color: #F0F1EC;
+      border-left: 4px solid black;
+      border-top: 4px solid black;
+
+
+      display: grid;
+      grid-template-columns: 351px 50px;
+      grid-template-rows: 285px;
+
+
+
+    }
+
+
+
+
+    .onef {
+      border-right: 8px solid black;
+      border-bottom: 4px solid black;
+
+      height: 279px;
+      width: 351px;
+    }
+
+    .twof {
+      height: 130px;
+      width: 40px;
+      background-color: blue;
+      border-left: 8px solid black;
+      border-bottom: 10px solid black;
+
+    }
+
+    .fifth {
+      background-color: #F0F1EC;
+      border-top: 4px solid black;
+      border-right: 4px solid black;
+
+    }
+
+    .sixth {
+      display: flex;
+      flex-direction: row;
+
+      background-color: #F0F1EC;
+
+      border-left: 4px solid black;
+    }
+
+    .one {
+      width: 198px;
+      background-color: #F9D01E;
+      border-top: 4px solid black;
+
+    }
+
+    .two {
+      width: 153px;
+      background-color: blueviolet;
+      border-right: 8px solid black;
+      border-top: 4px solid black;
+    }
+
+
+
+    /* 
+    Write your CSS here 
+    Gap Colour: #000
+    White: #F0F1EC
+    Red: #E72F24
+    Black: #232629
+    Blue: #004592
+    Yellow: #F9D01E
+
+    For dimensions, see dimensions.png image.
+    HINT: Remember you can't change the properties of grid lines.
+    But grid lines are transparent!
+    */
+  </style>
+</head>
+
+<body>
+  <div class="painting">
+    <div class="first"></div>
+    <div class="second"></div>
+    <div class="third"></div>
+    <div class="fourth">
+      <div class="onef" ></div>
+      <div class="twof" ></div>
+
+
+    </div>
+    <div class="fifth"></div>
+    <div class="sixth">
+      <div class="one"></div>
+      <div class="two"></div>
+    </div>
+    <div class="seventh"></div>
+    <div class="eigth"></div>
+    <div class="nineth"></div>
+
+
+  </div>
+</body>
+
+</html>