Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

opdracht flexbox layout maken #1

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

opdracht flexbox layout maken #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d47d3b
opdracht flexbox layout maken
YounesAtGithub Dec 6, 2023
d9e99db
opdracht flexbox layout maken - aanvulling
YounesAtGithub Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
47 changes: 25 additions & 22 deletions deel-1-flexbox-positioneren/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,50 @@
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<!-- O P D R A C H T 1 -->
<!--

O P D R A C H T 1
<h3>Opdracht 1</h3>
<img src="assets/images/opdracht-1-eindresultaat.jpg" alt="opdracht-1 voorbeeld">
<section class="opdracht-1">
<ul>
<ul class="ul-opdracht-1">
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
</ul>
</section>
<!-- E I N D E O P D R A C H T 1 -->
E I N D E O P D R A C H T 1

<!-- O P D R A C H T 2 -->
O P D R A C H T 2
<h3>Opdracht 2</h3>
<img src="assets/images/opdracht-2-eindresultaat.jpg" alt="opdracht-2 voorbeeld">
<section class="opdracht-2">
<ul>
<li>Ik heb niet zo veel tekst</li>
<li>Ik heb al wat meer text dan de vorige paragraaf</li>
<li>Ik heb heel veel content. Zo veel content dat deze paragraaf aanzienlijk langer is dan de twee vorige. </li>
<ul class="ul-opdracht-2">
<li class="li-opdracht-2">Ik heb niet zo veel tekst</li>
<li class="li-opdracht-2">Ik heb al wat meer text dan de vorige paragraaf</li>
<li class="li-opdracht-2">Ik heb heel veel content. Zo veel content dat deze paragraaf aanzienlijk langer is dan de twee vorige. </li>
</ul>
</section>
<!-- E I N D E O P D R A C H T 2 -->
E I N D E O P D R A C H T 2

<!-- O P D R A C H T 3 -->
O P D R A C H T 3
<h3>Opdracht 3</h3>
<img src="assets/images/opdracht-3-eindresultaat.jpg" alt="opdracht-3 voorbeeld">
<section class="opdracht-3">
<ul>
<li>Top left</li>
<li>Centered</li>
<li>Bottom right</li>
<ul class="ul-opdracht-3">
<li class="opdracht-2-top-left">Top left</li>
<li class="opdracht-2-centered">Centered</li>
<li class="opdracht-2-bottom-right">Bottom right</li>
</ul>
</section>
<!-- E I N D E O P D R A C H T 3 -->
E I N D E O P D R A C H T 3

<!-- O P D R A C H T 4 -->
O P D R A C H T 4
<h3>Opdracht 4</h3>
<img src="assets/images/opdracht-4-eindresultaat.jpg" alt="opdracht-4 voorbeeld">
<section class="opdracht-4">
<ul>
<ul class="ul-opdracht-4">
<li>Zorg</li>
<li>er</li>
<li>voor</li>
Expand All @@ -70,22 +72,23 @@ <h3>Opdracht 4</h3>
<li>beneden</li>
</ul>
</section>
<!-- E I N D E O P D R A C H T 4 -->
E I N D E O P D R A C H T 4
-->

<!-- O P D R A C H T 5 -->
<h3>Opdracht 5</h3>
<img src="assets/images/opdracht-5-eindresultaat.jpg" alt="opdracht-5 voorbeeld">
<section class="opdracht-5">
<div>
<ul>
<div class="div-opdracht-5">
<ul class="ul-opdracht-5 column-1">
<li>Column 1 top</li>
<li>Column 1 bottom</li>
</ul>
<ul>
<ul class="ul-opdracht-5">
<li>Column 2 top</li>
<li>Column 2 bottom</li>
</ul>
<ul>
<ul class="ul-opdracht-5 column-3">
<li>Column 3 top</li>
<li>Column 3 bottom</li>
</ul>
Expand Down
97 changes: 96 additions & 1 deletion deel-1-flexbox-positioneren/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,96 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/

/*OPDRACHT 1*/
.ul-opdracht-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}



/*OPDRACHT 2*/
.ul-opdracht-2 {
display: flex;

}

.li-opdracht-2 {
display: flex;
flex-basis: 33.33%;
}


/*OPDRACHT 3*/
.ul-opdracht-3 {
height: 100%;
display: flex;
justify-content: space-between;
}

.opdracht-2-top-left {
align-self: flex-start;
}

.opdracht-2-centered {
align-self: center;
}

.opdracht-2-bottom-right {
align-self: flex-end;
}


/*OPDRACHT 4*/
.ul-opdracht-4 {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

/*OPDRACHT 5*/

.div-opdracht-5 {
display: flex;
flex-direction: row;
justify-content: space-between;
min-height: 100%;
}

.ul-opdracht-5 {
/*border-style: solid;*/
/*border-color: red;*/
}


.ul-opdracht-5 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.column-1 {
align-items: flex-start;
}

.column-3 {
align-items: flex-end;
}


/* ------------------- Opdracht 5: ------------------- */
/*

!*Met de selector nth-of-type(getal) kun je het "zoveelste" element van dat type aanspreken*!
.opdracht-5 .flex-column:nth-of-type(1) {
align-items: flex-start;
}

.opdracht-5 .flex-column:nth-of-type(2) {
align-items: center;
}

.opdracht-5 .flex-column:nth-of-type(3) {
align-items: flex-end;
}*/
Binary file added deel-2-flexbox-layout/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added deel-2-flexbox-layout/assets/.DS_Store
View file
Open in desktop
Binary file not shown.
6 changes: 3 additions & 3 deletions deel-2-flexbox-layout/opdracht-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
<link rel="stylesheet" href="styles/styles.css">
<title>Flexbox-opdracht: layouts maken (1)</title>
</head>
<body>
<body class="dev">
<header>Header</header>
<main>
<article>
Article
<!--<p>ZET DEZE TEKST AAN EN UIT! consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea
<p>ZET DEZE TEKST AAN EN UIT! consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea
earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor
expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis
vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
Expand Down Expand Up @@ -42,7 +42,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea
earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor
expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis
vitae! Hic illo ipsum iure repellendus sed voluptate?</p>-->
vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
</article>
<nav>Nav</nav>
<aside>Aside</aside>
Expand Down
59 changes: 58 additions & 1 deletion deel-2-flexbox-layout/opdracht-1/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,58 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
.dev {
border-style: solid;
border-color: red;
}


/*--------------BODY--------------*/
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}

/*--------------HEADER--------------*/
header {
flex-basis: 100px;
flex-grow: 0;
flex-shrink: 0;
}

/*--------------MAIN--------------*/
main {
display: flex;
flex-direction: row;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
}

/*--------------ARTICLE--------------*/
article {
flex-basis: 60vw;
flex-grow: 1;
flex-shrink: 1;
}

/*--------------NAV--------------*/
nav {
flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;
order: 1;
}

/*--------------ASIDE--------------*/
aside {
flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;
}

/*--------------FOOTER--------------*/
footer {
flex-basis: 100px;
flex-grow: 0;
flex-shrink: 0;
}
21 changes: 13 additions & 8 deletions deel-2-flexbox-layout/opdracht-2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,24 @@
<link rel="stylesheet" href="styles/styles.css">
<title>Flexbox-opdracht: layouts maken (2)</title>
</head>
<body>
<nav class="col-1">Nav</nav>
<body class>
<nav class="col-1">Nav

p
</nav>
<div class="col-2">
<header>Header</header>
<main>
<article>
Article
<!--<p>ZET DEZE TEKST AAN EN UIT! consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis vitae! Hic illo ipsum iure repellendus sed voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquid at blanditiis culpa dolor ea earum esse et excepturi ipsa nam qui, rem repellendus totam. A, aspernatur atque consequuntur cumque dolor expedita fugiat minima, necessitatibus nemo quaerat quas quia quis repellat sapiente sequi vel veritatis vitae! Hic illo ipsum iure repellendus sed voluptate?</p>-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores beatae cum cumque
facilis illum, modi mollitia natus nisi nostrum, odit praesentium sit soluta? At aut, blanditiis debitis
distinctio, doloribus eius esse incidunt molestias, neque nobis perspiciatis provident quae quas unde
ut. At dignissimos dolores eligendi ex facilis illum, magnam nam odit quis sapiente sed sit voluptas?
Dolor doloribus explicabo neque non odio ut. Dolor laudantium magni pariatur quasi voluptatibus! Dolores
dolorum eos error et exercitationem, fugit illo, libero molestias quasi totam, unde vero voluptas.
Aliquam aperiam asperiores eius est eum illo numquam odit rem repudiandae ut! Consequuntur, sapiente
temporibus.</p>
</article>
</main>
<footer>Footer</footer>
Expand Down
70 changes: 69 additions & 1 deletion deel-2-flexbox-layout/opdracht-2/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,69 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/

.dev {
border-color: red;
border-style: dotted;
}

/*----------- BODY -----------*/
body {
display: flex;
min-height: 100vh;
flex-direction: row;
}

/*----------- NAV -----------*/
nav {
display: flex;
flex-direction: row;
flex-basis: 20%;
flex-grow: 0;
flex-shrink: 0;
}



/*----------- DIV -----------*/
div {
display: flex;
flex-direction: column;
flex-basis: auto;
flex-grow: 1;
}



/*----------- HEADER -----------*/
header {
flex-basis: 150px;
flex-grow: 0;
flex-shrink: 0;

}



/*----------- MAIN -----------*/
main {
display: flex;
flex-basis: auto;
flex-grow: 1;

}



/*----------- ARTICLE -----------*/
article {
flex-basis: 100vw;
}



/*----------- FOOTER -----------*/
footer {
flex-basis: 150px;
flex-grow: 0;
flex-shrink: 0;

}
Loading