From e769dc8ac30f4f68f1ee11abca6c02b374379e7f Mon Sep 17 00:00:00 2001 From: Olga Dorosheva Date: Mon, 23 Sep 2024 11:01:02 +0200 Subject: [PATCH] please check it --- deel-1-flexbox-positioneren/styles/styles.css | 69 ++++++++++++++++++- .../opdracht-1/styles/styles.css | 44 +++++++++++- .../opdracht-2/styles/styles.css | 47 ++++++++++++- .../opdracht-3/styles/styles.css | 50 +++++++++++++- .../opdracht-4/styles/styles.css | 58 +++++++++++++++- .../opdracht-5/styles/styles.css | 45 +++++++++++- deel-3-webpagina/index.html | 31 ++++++++- deel-3-webpagina/styles/styles.css | 65 ++++++++++++++++- 8 files changed, 401 insertions(+), 8 deletions(-) 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 @@ Flexbox opdracht 3 -
+ +
+

All Your Business Data in One Place

Sync and store all your business data. Explore your data with SQL or visualize it with your favorite BI or analytics tools.

+
+
+

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?

+
+
+

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.

+
+
+

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!

+
+
+
\ 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; + +}