7 changed files with 156 additions and 0 deletions
BIN
06-EX02/ex-02/images/Thumbs.db
View File
BIN
06-EX02/ex-02/images/bg-image.png
View File
BIN
06-EX02/ex-02/images/pic01.jpg
View File
BIN
06-EX02/ex-02/images/pic02.jpg
View File
BIN
06-EX02/ex-02/images/pic03.jpg
View File
+ 76
- 0
06-EX02/ex-02/index.html
View File
| @@ -0,0 +1,76 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>Exercise 2: Flex</title> | |||
| <script src="https://use.fontawesome.com/9953f27da4.js"></script> | |||
| <link rel="stylesheet" href="style.css" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <header> | |||
| <div class="balk"> | |||
| <i class="indus">Industrious</i> | |||
| <i class="menu">Menu</i> | |||
| </div> | |||
| </header> | |||
| <div class="banner"> | |||
| <header class="bannertittel">Industrious </header> | |||
| </div> | |||
| <div class="onderbanner"> | |||
| <p class="tittel">Sem Turpis amet Semper</p> | |||
| </div> | |||
| <div class="testt"> | |||
| <div class = "facontainer"> | |||
| <div class="test"> | |||
| <i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i> | |||
| </div> | |||
| <i class="fatittel">Tittel</i> | |||
| <i class="fatekst">Tekst</i> | |||
| <div class="test"> | |||
| <i class="fa fa-files-o fa-5x" aria-hidden="true"></i> | |||
| </div> | |||
| <i class="fatittel">Tittel</i> | |||
| <i class="fatekst">Tekst</i> | |||
| <div class="test"> | |||
| <i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i> | |||
| </div> | |||
| <i class="fatittel">Tittel</i> | |||
| <i class="fatekst">Tekst</i> | |||
| <div class="test"> | |||
| <i class="fa fa-line-chart fa-5x" aria-hidden="true"></i> | |||
| </div> | |||
| <i class="fatittel">Tittel</i> | |||
| <i class="fatekst">Tekst</i> | |||
| <div class="test"> | |||
| <i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i> | |||
| </div> | |||
| <i class="fatittel">Tittel</i> | |||
| <i class="fatekst">Tekst</i> | |||
| <div class="test"> | |||
| <i class="fa fa-qrcode fa-5x" aria-hidden="true"></i> | |||
| </div> | |||
| <i class="fatittel">Tittel</i> | |||
| <i class="fatekst">Tekst</i> | |||
| </div> | |||
| </div> | |||
| <!-- | |||
| <div class="round-image"> | |||
| </div> | |||
| --> | |||
| </body> | |||
| </html> | |||
+ 80
- 0
06-EX02/ex-02/style.css
View File
| @@ -0,0 +1,80 @@ | |||
| .body{ | |||
| font-family: 'Raleway', sans-serif; | |||
| } | |||
| .banner { | |||
| height: 300px; | |||
| background-image: url(images/bg-image.png); | |||
| } | |||
| .round-image { | |||
| height: 50px; | |||
| width: 50px; | |||
| border-radius: 50%; | |||
| background-image: url(images/pic01.jpg); | |||
| background-size: cover; | |||
| } | |||
| .balk { | |||
| background-color:black; | |||
| width: 100%; | |||
| height: 20px; | |||
| } | |||
| .indus { | |||
| display: flex; | |||
| color:white; | |||
| } | |||
| .menu { | |||
| display: flex; | |||
| color:gray; | |||
| justify-content: flex-end; | |||
| margin-bottom: -10px; | |||
| } | |||
| .bannertittel { | |||
| display: flex; | |||
| color: white; | |||
| font-size: 50px; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height:300px; | |||
| } | |||
| .onderbanner { | |||
| height: 175px; | |||
| width: 100%; | |||
| } | |||
| .tittel { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 100px; | |||
| font-size: 20px; | |||
| } | |||
| .facontainer{ | |||
| height: 240px; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| flex-direction: column; | |||
| flex-wrap: wrap; | |||
| } | |||
| .test { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| } | |||
| .fatittel { | |||
| display: flex; | |||
| justify-content: center; | |||
| flex-direction: row; | |||
| flex-wrap: wrap; | |||
| } | |||
| .fatekst { | |||
| display: flex; | |||
| justify-content: center; | |||
| flex-wrap: wrap; | |||
| } | |||
| .testt { | |||
| background-color: white; | |||
| height: 400px; | |||
| } | |||
Loading…