diff --git a/deel-1-flexbox-positioneren/styles/styles.css b/deel-1-flexbox-positioneren/styles/styles.css
index c92b153..1054cf3 100644
--- a/deel-1-flexbox-positioneren/styles/styles.css
+++ b/deel-1-flexbox-positioneren/styles/styles.css
@@ -1 +1,68 @@
-/*Schrijf hier jouw CSS*/
\ No newline at end of file
+/*Schrijf hier jouw CSS*/
+.opdracht-1 .flex-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+}
+/*Opdracht-2*/
+
+.opdracht-2 .flex-container {
+    display: flex;
+    flex-direction: row;
+
+}
+.opdracht-2 .flex-item {
+    flex-basis: 240px;
+}
+/*Opdracht-3*/
+
+.opdracht-3 .flex-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.opdracht-3 .left {
+    align-self: flex-start;
+}
+.opdracht-3 .center {
+    align-self: center;
+}
+.opdracht-3 .right {
+    align-self: flex-end;
+}
+
+/*Opdracht-4*/
+
+.opdracht-4 .flex-container {
+    display: flex;
+    flex-direction:row;
+    flex-wrap: wrap;
+    gap: 11px;
+}
+/*Opdracht-5*/
+
+.opdracht-5 .flex-container {
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+
+}
+.opdracht-5 .flex-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+}
+.opdracht-5 .item-1 {
+    align-self: flex-start;
+}
+.opdracht-5 .item-2 {
+    align-self: center;
+
+}
+.opdracht-5 .item-3 {
+    align-self: flex-end;
+
+}
\ No newline at end of file
diff --git a/deel-2-flexbox-layout/opdracht-1/styles/styles.css b/deel-2-flexbox-layout/opdracht-1/styles/styles.css
index c92b153..f9e2199 100644
--- a/deel-2-flexbox-layout/opdracht-1/styles/styles.css
+++ b/deel-2-flexbox-layout/opdracht-1/styles/styles.css
@@ -1 +1,43 @@
-/*Schrijf hier jouw CSS*/
\ No newline at end of file
+/*Schrijf hier jouw CSS*/
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+main {
+    display: flex;
+    flex-direction: row;
+    flex-basis: auto;
+    flex-shrink: 0;
+    flex-grow: 1;
+}
+
+header {
+    flex-basis: 150px;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+article {
+    flex-basis: 60vw;
+    order: 1;
+    flex-shrink: 1;
+    flex-grow: 1;
+}
+
+nav {
+    flex-basis: 20vw;
+    order: 3;
+    flex-shrink: 0;
+    flex-grow: 1;
+}
+aside {
+    flex-basis: 20vw;
+    order: 2;
+    flex-shrink: 0;
+    flex-grow: 1;
+}
+
+footer {
+    flex-basis: 150px;
+}
\ No newline at end of file
diff --git a/deel-2-flexbox-layout/opdracht-2/styles/styles.css b/deel-2-flexbox-layout/opdracht-2/styles/styles.css
index c92b153..27514a0 100644
--- a/deel-2-flexbox-layout/opdracht-2/styles/styles.css
+++ b/deel-2-flexbox-layout/opdracht-2/styles/styles.css
@@ -1 +1,46 @@
-/*Schrijf hier jouw CSS*/
\ No newline at end of file
+/*Schrijf hier jouw CSS*/
+body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: 100vh;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+main {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+header {
+    flex-basis: 20vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+footer {
+    flex-basis: 15vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+article {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+nav {
+    flex-basis: 20vw;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/deel-2-flexbox-layout/opdracht-3/styles/styles.css b/deel-2-flexbox-layout/opdracht-3/styles/styles.css
index c92b153..0835bb3 100644
--- a/deel-2-flexbox-layout/opdracht-3/styles/styles.css
+++ b/deel-2-flexbox-layout/opdracht-3/styles/styles.css
@@ -1 +1,49 @@
-/*Schrijf hier jouw CSS*/
\ No newline at end of file
+/*Schrijf hier jouw CSS*/
+body {
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+}
+
+nav {
+    flex-basis: 20vw;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+div {
+    display: flex;
+    flex-direction: column;
+    flex-basis: auto;
+    flex-shrink: 1;
+    flex-grow: 1;
+}
+main {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: auto;
+}
+
+article {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+aside {
+    flex-basis: 20vw;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+header {
+    flex-basis: 20vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+footer {
+    flex-basis: 15vh;
+    flex-grow:0;
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/deel-2-flexbox-layout/opdracht-4/styles/styles.css b/deel-2-flexbox-layout/opdracht-4/styles/styles.css
index c92b153..83bb054 100644
--- a/deel-2-flexbox-layout/opdracht-4/styles/styles.css
+++ b/deel-2-flexbox-layout/opdracht-4/styles/styles.css
@@ -1 +1,57 @@
-/*Schrijf hier jouw CSS*/
\ No newline at end of file
+/*Schrijf hier jouw CSS*/
+body {
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+}
+
+nav {
+    flex-basis: 20vw;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+header {
+    flex-basis: 20vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+article {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+footer {
+    flex-basis: 15vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+aside {
+    flex-basis: 20vw;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.outer-col-2 {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: auto;
+
+}
+
+.inner-row {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+
+}
+.inner-col {
+    display: flex;
+    flex-direction: column;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
diff --git a/deel-2-flexbox-layout/opdracht-5/styles/styles.css b/deel-2-flexbox-layout/opdracht-5/styles/styles.css
index c92b153..b32dcdb 100644
--- a/deel-2-flexbox-layout/opdracht-5/styles/styles.css
+++ b/deel-2-flexbox-layout/opdracht-5/styles/styles.css
@@ -1 +1,44 @@
-/*Schrijf hier jouw CSS*/
\ No newline at end of file
+/*Schrijf hier jouw CSS*/
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+main {
+    display: flex;
+    flex-direction: row;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+
+}
+nav {
+    order: 1;
+    flex-basis: 20vw;
+
+}
+article {
+    order: 2;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+aside {
+    order: 3;
+    flex-basis: 20vw;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+}
+header {
+    flex-basis: 20vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+footer {
+    flex-basis: 15vh;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
diff --git a/deel-3-webpagina/index.html b/deel-3-webpagina/index.html
index ffbab80..50ade98 100644
--- a/deel-3-webpagina/index.html
+++ b/deel-3-webpagina/index.html
@@ -7,10 +7,39 @@
     <title>Flexbox opdracht 3</title>
 </head>
 <body>
-    <div>
+<nav class="navigation">
+    <h2>Analytica</h2>
+    <ul>
+        <li>About us</li>
+        <li>Strategy</li>
+        <li>Prices</li>
+        <li>Contact</li>
+    </ul>
+
+</nav>
+<section class="section-content">
+    <div class="header-content">
         <h1>All Your Business Data in One Place</h1>
         <h3>Sync and store all your business data. Explore your data with SQL or visualize it with your favorite BI or
             analytics tools.</h3>
     </div>
+    <div class="content">
+        <article>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut autem consequatur dolore ducimus eius
+                fugit inventore laudantium, magni mollitia, nemo perspiciatis rem reprehenderit temporibus, tenetur ullam
+                veritatis vero vitae?</p>
+        </article>
+        <article>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquam architecto
+                asperiores deleniti incidunt ipsam laborum magni molestias nihil non optio, pariatur quibusdam, quod
+                reiciendis reprehenderit sapiente sint ullam.</p>
+        </article>
+        <article>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam beatae dolore expedita
+                ipsum, necessitatibus non pariatur perspiciatis praesentium quaerat quasi voluptas. Deleniti labore
+                laudantium nam odit quae voluptates voluptatum!</p>
+        </article>
+    </div>
+</section>
 </body>
 </html>
\ No newline at end of file
diff --git a/deel-3-webpagina/styles/styles.css b/deel-3-webpagina/styles/styles.css
index e6edfc0..c7201d6 100644
--- a/deel-3-webpagina/styles/styles.css
+++ b/deel-3-webpagina/styles/styles.css
@@ -1 +1,64 @@
-/*Schrijf hier jouw css*/
\ No newline at end of file
+/*Schrijf hier jouw css*/
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    display: flex;
+    flex-direction: column;
+    background-color: #F2F3D9;
+    font-family: Poppins, Arial, sans-serif;
+    color: #030027;
+    text-align: center;
+    min-height: 100vh;
+}
+.header-content {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 30vh;
+    justify-content: center;
+
+}
+.content {
+    display: flex;
+    min-height: 60vh;
+    justify-content: center;
+
+}
+.section-content {
+    padding: 40px;
+}
+article {
+    display: flex;
+    flex-direction: column;
+    background-color: indianred;
+    flex-basis: 280px;
+    border-radius: 6px;
+    box-shadow: #775560 10px 10px;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 20px;
+    margin: 30px;
+    flex-shrink: 1;
+    flex-grow: 0;
+}
+
+h2 {
+    text-transform: uppercase;
+}
+.navigation {
+    display:flex;
+    justify-content: space-between;
+    padding: 30px 40px;
+    background-color: #030027;
+    color: #F2F3D9;
+}
+.navigation ul {
+    display: flex;
+    flex-basis: 400px;
+    flex-grow: 0;
+    flex-shrink: 1;
+    justify-content: space-between;
+
+}