Niels
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

flex-05

04-EX01
niels de groot 4 years ago
commit
a28020b2ff
8 changed files with 316 additions and 0 deletions
Split View Show Diff Stats
  1. 156
    0
      04-EX01/04-EX01.css
  2. 89
    0
      04-EX01/04-EX01.html
  3. BIN
      04-EX01/bg-image.png
  4. BIN
      04-EX01/pic01.jpg
  5. BIN
      04-EX01/pic02.jpg
  6. BIN
      04-EX01/pic03.jpg
  7. 56
    0
      05-flex/05-flex.css
  8. 15
    0
      05-flex/05-flex.html

+ 156
- 0
04-EX01/04-EX01.css View File

@@ -0,0 +1,156 @@
body {
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-stretch: condensed;
margin: 0;

}

header {
background-color: black;
color:white;
width:100%;
display:flex;
justify-content: space-between;
padding: 2px;
}

.banner {
height:500px;
background-image: url(images/bg-image.png);
color:white;
display: flex;
flex-direction: column;
justify-content: center;
text-align:center;
line-height: 0.5;
}

.section-2 {
width: 80%;
height: 25%;
display: flex;
flex-flow : row wrap;
margin-left:15%;
margin-right: 18%;
margin-top: 2%;
margin-bottom: 2%;
box-sizing: border-box;

}

.section-2 div {
text-align:center;
width:31%;
border: gray inset 2px;
margin: 20px 5px;
}

.section-2 i {
color:darkred;
}



.red-box {
width: 100%;
height: 200px;
color:white;
background-color: rgb(206, 14, 14);
text-align: center;
display:flex;
flex-direction: column;

}

.weeral-titel {
margin-top:5%;
margin-left: 20%;
margin-right: 20%;
margin-bottom:5%;
text-align: center;
}

.container {
display: flex;
flex-wrap: wrap;

}
.text-1 {
display:flex;
justify-content: space-between;

}

.text-1 div {
border-left: grey solid 5px;
padding-left: 16px;
}

.side-text {
display:inline-block;

}


.images {
height: 50px;
width: 50px;
border-radius: 50%;
}



.header-text {
color:white;
}


.menu {
color:white;
text-align: right;
}

.laatste-box {
width:100%;
height:500px;
background-color: black;
margin-top: 15%;
display:flex;
flex-wrap:wrap;
}


.laatste-box p, .laatste-box h2 {
color:white;

}

.flex-box {
width: 33%;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-bottom: 2px #dedede solid;
column-gap:500px;
text-align: center;
}

.footer {
font-size: 8px;
color: #dede;
display:flex;
flex-flow: row;
justify-content: center;
}

+ 89
- 0
04-EX01/04-EX01.html View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<title>Industrious page</title>
<link rel="stylesheet" href="industrious.css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<body>
<header>
Industrious
<div class = "menu">menu</div>
</header>

<div class = "banner">
<h1>Industrious</h1>
<p>A responsive businness oriented template with a video background</p>
<p>Designed by TEMPLATED and released under the Creative Comons License</p>
</div>

<div class = "section-2">
<div><i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i><h1>Tekst Tekst</h1>
<p>Lorem, ipsum dolor sit amet consonicta labore temporibus eveniet placeat.</p>
</div>
<div><i class="fa fa-files-o fa-5x" aria-hidden="true"></i><h1>Tekst Tekst</h1>
<p>Lorem, ipsum dolor sit amon icta labore temporibus eveniet placeat.</p>
</div>
<div><i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i><h1>Tekst Tekst</h1>
<p>Lorem, ipsum dolor sit ssimus simie temporibus eveniet placeat.</p>
</div>
<div><i class="fa fa-line-chart fa-5x" aria-hidden="true"></i><h1>Tekst Tekst</h1>
<p>Lorem, ipsum dolor fficiamo dicta labore temporibus eveniet placeat.</p>
</div>
<div><i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i><h1>Tekst Tekst</h1>
<p>Lorem, ipsum dolor sit afficia possimus temporibus eveniet placeat.</p>
</div>
<div><i class="fa fa-qrcode fa-5x" aria-hidden="true"></i><h1>Tekst Tekst</h1>
<p>Lorem, ipsum dolossimus simnon omnius obus eniet placeat.</p>
</div>
</div>


<div class= "red-box">
<h1>Gewoon een titel</h1>
<p>Lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis molestiae voluptate mollitia, excepturi dolor quis ipsam cumque id alias eaque dolorem velit esse culpa voluptatum nulla ipsa eius sunt quibusdam! ipsum d</p>
</div>
<div class = "weeral-titel">
<h2>Weeral een titel</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo id inventore nam, officiis consequatur sed. Voluptatibus placeat est eligendi eum maxime praesentium incidunt, officiis esse nesciunt modi earum pariatur fugiat!</p>
</div>
<div class = text-1>
<div><p>Lorem ipsum dolor, recusandae nesciunt deserunt tempora tempore eos perspiciatis accusantium vel, eum velit voluptates sed quo voluptaten.</p>
<img class= "images" src="images\pic01.jpg" alt="pic01">
<p class = "side-text">Ceo Jane Doe</p>
</div>
<div ><p>Lorem ipsum dolor sit amee corporis aspernatur unde deserunt laborum obcaecati veniam in libero, nemo fugiat magni nobis iste nesciun</p>
<img class= "images" src="images\pic02.jpg" alt="pic02">
<p class = "side-text">CEo John Doe</p>
</div>
<div><p>Lorem ipt. Similique labore eveniet maxime debitis sint fugit, doloremque quo excepturi nisi sit quibusdam ex sunt. Nulla, explicabo.</p>
<img class= "images" src="images\pic03.jpg" alt="pic03">
<p class = "side-text">Ceo Jane Doe</p>
</div>
</div>
</div>
<div class= "laatste-box">
<div class= "flex-box">
<h2>accumsan montes virrera</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil blanditiis officiis, repellendus alias quisquam, nobis veritatis ad architecto quam quae quis neque et. Eveniet eaque iure, quae quisquam a architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati mollitia rem omnis. Ipsum, dolores. Hic aspernatur tempore aliquam saepe explicabo! Nisi minus esse, incidunt porro eum provident deleniti itaque ducimus!</p>
</div>
<div class= "flex-box">
<h2>sem turps amet semper</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisici</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisici</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisici</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisici</p>
</div>
<div class= "flex-box">
<h2>magna sed ipum</h2>
<p>Twitter</p>
<p>facebook</p>
<p>Instagram</p>
<p>Github</p>
</div>
<p class = "footer"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</body>
</head>
</html>

BIN
04-EX01/bg-image.png View File


BIN
04-EX01/pic01.jpg View File


BIN
04-EX01/pic02.jpg View File


BIN
04-EX01/pic03.jpg View File


+ 56
- 0
05-flex/05-flex.css View File

@@ -0,0 +1,56 @@
.container {
background-color: bisque;
padding:10px;
display: flex;
height: 500px;
flex-direction: row;
flex-wrap:wrap;
flex-flow: row nowrap;
justify-content: flex-start;

align-items: stretch;
width: 450px;
}

.container div {
line-height: 40px;
font-size: 20px;
color:white;
text-align:center;

}
.div-1 {
background-color: darkseagreen;

flex: 2 0 200px;
order: 5;
}

.div-2 {
background-color: darkslateblue;
flex: 1 1 100px;
order:2;
}

.div-3 {
background-color: darkviolet;
flex: 1 1 100px;
order:1;
}

.div-4 {
background-color: dimgray;
flex: 1 1 100px;
order: 4;
}

µ
.div-5 {
background-color: rgba(141, 77, 5, 0.514);
flex: 1 1 100px;
order: 3;

}

+ 15
- 0
05-flex/05-flex.html View File

@@ -0,0 +1,15 @@
<!doctype html>
<html>
<head>
<body>
<link rel="stylesheet" type= "text/css" href="box.css">
<div class = "container">
<div class= "div-1">1</div>
<div class= "div-2">2</div>
<div class= "div-3">3</div>
<div class= "div-4">4</div>
<div class= "div-5">5</div>
</div>
</body>
</head>
</html>

Write Preview
Loading…
Cancel
Save