Add files via upload

pratham-011ag · Dec 26, 2023 · a2c0a31 · a2c0a31
commit a2c0a31
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 0 deletions.
diff --git a/dimensions.png b/dimensions.png
diff --git a/goal.png b/goal.png
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<!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>
+    /* 
+    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!
+    */
+    body{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      padding: 0;
+      margin: 0;
+    }
+
+    .container{
+
+      background-color: #000;
+      display: grid;
+      height: 748px;
+      width: 748px;
+      gap: 9px;
+      grid-template-columns: 320px 198px 153px 50px;
+      grid-template-rows: 414px 130px 155px 20px; 
+    }
+
+    .one{
+      background-color: #e72f24;
+    }
+
+    .two {
+      background-color: #f0f1ec;
+      grid-column: span 3;
+    }
+
+    .three{
+      background-color: #f0f1ec;
+      grid-row: span 2;
+    }
+
+    .four{
+      background-color: #f0f1ec;
+      /* grid-column: span 2;
+      grid-row: span 2; 
+      for 2-d use grid-area instead of span
+      */
+
+      grid-area: 2/2/4/4;
+    }
+
+    .five{
+      background-color: #004592;
+      border-bottom: 10px solid #000;
+    }
+
+    .six{
+      background-color: #f0f1ec;
+      grid-row: span 2;
+    }
+
+    .seven{
+      background-color: #f0f1ec;
+    }
+
+    .eight{
+      background-color: #f9d01e;
+    }
+
+    .nine{
+      background-color: #232629;
+    }
+
+    /* .item{
+
+    } */
+
+  </style>
+</head>
+
+<body>
+  <!-- Write your HTML here -->
+  <div class = "container">
+    <div class = "item one"></div>
+    <div class = "item two"></div>
+    <div class = "item three"></div>
+    <div class = "item four"></div>
+    <div class = "item five"></div>
+    <div class = "item six"></div>
+    <div class = "item seven"></div>
+    <div class = "item eight"></div>
+    <div class = "item nine"></div>
+  </div>
+</body>
+
+</html>
diff --git a/solution.html b/solution.html
@@ -0,0 +1,94 @@
+<!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>
+    /* 
+    Write your CSS here 
+    Line Colour: #000
+    White: #F0F1EC
+    Red: #E72F24
+    Black: #232629
+    Blue: #004592
+    Yellow: #F9D01E
+    */
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+    }
+
+    .container {
+      height: 748px;
+      width: 748px;
+      display: grid;
+      background-color: #000;
+      grid-template-columns: 320px 198px 153px 50px;
+      grid-template-rows: 414px 130px 155px 22px;
+      gap: 9px;
+    }
+
+    .item {
+      background-color: #F0F1EC;
+    }
+
+    .red {
+      background-color: #E72F24;
+    }
+
+    .white1 {
+      grid-column: span 3;
+    }
+
+    .white2 {
+      grid-row: span 2;
+    }
+
+    .white3 {
+      grid-area: 2 / 2 / 4 /4
+    }
+
+    .blue {
+      background-color: #004592;
+      border-bottom: 10px solid #000;
+    }
+
+    .white4 {
+      grid-row: span 2;
+    }
+
+    .yellow {
+      background-color: #F9D01E;
+    }
+
+    .black {
+      background-color: #232629;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- Write your HTML here -->
+
+  <div class="container">
+    <div class="item red"></div>
+    <div class="item white1"></div>
+    <div class="item white2"></div>
+    <div class="item white3"></div>
+
+    <div class="item blue"></div>
+    <div class="item white4"></div>
+
+    <div class="item"></div>
+    <div class="item yellow"></div>
+    <div class="item black"></div>
+  </div>
+</body>
+
+</html>