From 423f266bbb16602edd9aa8b0e2480c0d08dcc015 Mon Sep 17 00:00:00 2001 From: Aart Wessels Date: Tue, 23 Jul 2024 11:32:43 +0100 Subject: [PATCH] Test 2 --- index.html | 74 ++++++++++++++++++++++++++++++++++-------------------- styles.css | 32 +++++++++++------------ 2 files changed, 61 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index abd280f..fb813e1 100644 --- a/index.html +++ b/index.html @@ -3,42 +3,62 @@ - Accessible Flowchart + Complex Accessible Flowchart

Project Development Flowchart

-

This flowchart illustrates the main steps in the project development process.

-
-
-

Planning

-

Define project scope and objectives

+

This flowchart illustrates the main steps in the project development process, including decision points and multiple paths.

+
+
+
+

Planning

+

Define project scope and objectives

+
+ +
+

Design

+

Create design specifications

+
+ +
+

Approval?

+

Design approved?

+
- -
-

Design

-

Create design specifications

+
+ +
+

Development

+

Build the project according to specifications

+
- -
-

Development

-

Build the project according to specifications

+
+ +
+

Testing

+

Test the project and fix bugs

+
- -
-

Testing

-

Test the project and fix bugs

+
+ +
+

Deployment

+

Deploy the project to production

+
+ +
+

Maintenance

+

Maintain and update the project

+
- -
-

Deployment

-

Deploy the project to production

-
- -
-

Maintenance

-

Maintain and update the project

+
+ +
+

Redesign

+

Rework the design based on feedback

+
diff --git a/styles.css b/styles.css index 1221508..a9d3972 100644 --- a/styles.css +++ b/styles.css @@ -11,8 +11,10 @@ body { margin-top: 20px; } -.flowchart.vertical .arrow { - font-size: 24px; +.row { + display: flex; + align-items: center; + justify-content: center; margin: 10px 0; } @@ -20,32 +22,26 @@ body { border: 2px solid #000; border-radius: 10px; padding: 20px; - width: 250px; + width: 200px; text-align: center; - margin-bottom: 10px; + margin: 10px; color: #fff; + background-color: #4CAF50; /* Default background color */ } -.planning { - background-color: #4CAF50; /* Green */ -} - -.design { - background-color: #2196F3; /* Blue */ -} - -.development { +.node.decision { background-color: #f44336; /* Red */ } -.testing { +.node.redesign { background-color: #ff9800; /* Orange */ } -.deployment { - background-color: #9c27b0; /* Purple */ +.arrow { + font-size: 24px; + margin: 0 10px; } -.maintenance { - background-color: #795548; /* Brown */ +.arrow.vertical { + transform: rotate(90deg); }