Test

rtificial · Jul 23, 2024 · 9b86a75 · 9b86a75
1 parent 99e91f1
commit 9b86a75
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -25,14 +25,13 @@ <h3 id="node2-title">Design</h3>
                 <h3 id="node3-title">Approval?</h3>
                 <p>Design approved?</p>
             </div>
-            <div class="row">
-                <div class="connector horizontal" aria-hidden="true"></div>
-                <div class="node redesign" role="region" aria-labelledby="node8-title">
-                    <h3 id="node8-title">Redesign</h3>
-                    <p>Rework the design based on feedback</p>
-                </div>
+            <div class="connector horizontal-branch" aria-hidden="true"></div>
+            <div class="node redesign" role="region" aria-labelledby="node8-title">
+                <h3 id="node8-title">Redesign</h3>
+                <p>Rework the design based on feedback</p>
             </div>
-            <div class="connector vertical" aria-hidden="true"></div>
+            <div class="connector vertical-branch" aria-hidden="true"></div>
+            <div class="connector horizontal" aria-hidden="true"></div>
             <div class="node development" role="region" aria-labelledby="node4-title">
                 <h3 id="node4-title">Development</h3>
                 <p>Build the project according to specifications</p>

diff --git a/styles.css b/styles.css
@@ -5,20 +5,18 @@ body {
 }
 
 .flowchart {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-template-rows: auto auto auto auto auto auto;
-    gap: 10px;
-    justify-items: center;
-    align-items: center;
-    margin-top: 20px;
+    position: relative;
+    width: 800px;
+    height: 600px;
+    margin: 0 auto;
 }
 
 .node {
+    position: absolute;
     border: 2px solid #000;
     border-radius: 10px;
     padding: 20px;
-    width: 200px;
+    width: 150px;
     text-align: center;
     color: #fff;
     background-color: #4CAF50; /* Default background color */
@@ -33,91 +31,107 @@ body {
 }
 
 .connector {
-    width: 20px;
-    height: 20px;
+    position: absolute;
+    width: 2px;
+    background-color: #000;
 }
 
-.connector.vertical::before {
-    content: '';
-    display: block;
-    border-left: 2px solid #000;
-    height: 100%;
+.connector.vertical {
+    height: 50px;
 }
 
-.connector.horizontal::before {
-    content: '';
-    display: block;
-    border-top: 2px solid #000;
-    width: 100%;
+.connector.horizontal {
+    width: 50px;
+    height: 2px;
 }
 
-/* Specific placements in the grid */
+.connector.horizontal-branch {
+    width: 75px;
+    height: 2px;
+}
+
+.connector.vertical-branch {
+    height: 75px;
+    width: 2px;
+}
+
+/* Specific positions */
 .planning {
-    grid-column: 2;
-    grid-row: 1;
+    top: 50px;
+    left: 325px;
+}
+
+.connector:nth-of-type(1) {
+    top: 150px;
+    left: 400px;
 }
 
 .design {
-    grid-column: 2;
-    grid-row: 3;
+    top: 200px;
+    left: 325px;
+}
+
+.connector:nth-of-type(2) {
+    top: 300px;
+    left: 400px;
 }
 
 .decision {
-    grid-column: 2;
-    grid-row: 5;
+    top: 350px;
+    left: 325px;
 }
 
-.redesign {
-    grid-column: 1;
-    grid-row: 7;
+.connector.horizontal-branch {
+    top: 375px;
+    left: 275px;
 }
 
-.development {
-    grid-column: 2;
-    grid-row: 7;
+.redesign {
+    top: 350px;
+    left: 100px;
 }
 
-.testing {
-    grid-column: 2;
-    grid-row: 9;
+.connector.vertical-branch {
+    top: 425px;
+    left: 175px;
 }
 
-.deployment {
-    grid-column: 2;
-    grid-row: 11;
+.connector.horizontal:nth-of-type(2) {
+    top: 450px;
+    left: 400px;
 }
 
-.maintenance {
-    grid-column: 3;
-    grid-row: 11;
+.development {
+    top: 450px;
+    left: 325px;
 }
 
-.connector.vertical:nth-of-type(1) {
-    grid-column: 2;
-    grid-row: 2;
+.connector:nth-of-type(3) {
+    top: 550px;
+    left: 400px;
 }
 
-.connector.vertical:nth-of-type(2) {
-    grid-column: 2;
-    grid-row: 4;
+.testing {
+    top: 600px;
+    left: 325px;
 }
 
-.connector.vertical:nth-of-type(3) {
-    grid-column: 2;
-    grid-row: 6;
+.connector:nth-of-type(4) {
+    top: 700px;
+    left: 400px;
 }
 
-.connector.vertical:nth-of-type(4) {
-    grid-column: 2;
-    grid-row: 8;
+.deployment {
+    top: 750px;
+    left: 325px;
 }
 
-.connector.vertical:nth-of-type(5) {
-    grid-column: 2;
-    grid-row: 10;
+.connector.horizontal:nth-of-type(3) {
+    top: 775px;
+    left: 400px;
 }
 
-.connector.horizontal:nth-of-type(1) {
-    grid-column: 3;
-    grid-row: 5;
+.maintenance {
+    top: 750px;
+    left: 550px;
 }