Simondb
/
Frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

06-EX2

06-EX2
Simondb 4 years ago
parent
9ff87508b9
commit
9cb2c296f9
8 changed files with 353 additions and 0 deletions
Split View Show Diff Stats
  1. 28
    0
      06-EX2/Example/index.html
  2. 12
    0
      06-EX2/Example/style.css
  3. BIN
      06-EX2/img/bg-image.png
  4. BIN
      06-EX2/img/pic01.jpg
  5. BIN
      06-EX2/img/pic02.jpg
  6. BIN
      06-EX2/img/pic03.jpg
  7. 217
    0
      06-EX2/taak.css
  8. 96
    0
      06-EX2/taak.html

+ 28
- 0
06-EX2/Example/index.html View File

@@ -0,0 +1,28 @@
<!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>
<div>
<i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i>
<i class="fa fa-files-o fa-5x" aria-hidden="true"></i>
<i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i>
<i class="fa fa-line-chart fa-5x" aria-hidden="true"></i>
<i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i>
<i class="fa fa-qrcode fa-5x" aria-hidden="true"></i>
</div>

<div class="banner"></div>

<div class="round-image">

</div>
</body>

</html>

+ 12
- 0
06-EX2/Example/style.css View File

@@ -0,0 +1,12 @@
.banner {
height: 500px;
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;
}

BIN
06-EX2/img/bg-image.png View File


BIN
06-EX2/img/pic01.jpg View File


BIN
06-EX2/img/pic02.jpg View File


BIN
06-EX2/img/pic03.jpg View File


+ 217
- 0
06-EX2/taak.css View File

@@ -0,0 +1,217 @@
.container{
background-color: white;
padding: 0;
display: flex;
height: auto;
flex-flow: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: Raleway;
}

.header{
background-color: black;
width: 100%;
height: 50px;
color: white;
}

.insert{
background-size: auto;
height: 400px;
background-image: url(img/bg-image.png);
text-align: center;
}

.insert h1{
position: absolute;
top: 150px;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.insert p{
position: absolute;
top: 210px;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.logo{
float: left;
box-sizing: content-box;
padding: 15px;
}

.menu{
box-sizing: content-box;
float: right;
padding: 15px;
}

.into-1{
text-align: center;
word-wrap: break-word;
}

.into-1 p{
position: absolute;
top: 530px;
left: 50%;
transform: translate(-50%, -50%);
word-wrap: break-word;
color:black;
}

.body{
width: 100%;
background-color: white;
position: relative;
top: 50px;
display: flex;
height: 600px;
flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
color: black;
}

.item{
height: 300px;
width: 26%;
border: 1px solid rgba(128, 128, 128, 0.418);
color: black;
text-align: center;
margin-top: 20px;
}

.item i{
color: rgb(150, 16, 16);
}

.middle{
margin-top: 150px;
height: 250px;
background-color: rgb(150, 16, 16);
text-align: center;
color:white;
word-wrap: break-word;
}

.text{
color:black;
text-align: center;
word-wrap: break-word;
}

.who{
width: 100%;
background-color: white;
position: relative;
top: 150px;
display: flex;
height: 200px;
flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
color: black;
}

.whotxt{
width: 100%;
background-color: white;
position: relative;
top: 150px;
display: flex;
height: 100px;
flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
color: black;
margin-left: 60px;
}

.person{
height: 50px;
width: 50px;
border-radius: 50%;
background-image: url(img/pic01.jpg);
background-size: cover;
}

.person p , .person-2 p, .person-3 p{
margin-left: 50px;
}
.person-2{
height: 50px;
width: 50px;
border-radius: 50%;
background-image: url(img/pic02.jpg);
background-size: cover;

}

.person-3{
height: 50px;
width: 50px;
border-radius: 50%;
background-image: url(img/pic03.jpg);
background-size: cover;
}

footer{
height: 100px;
width: 100%;
}

.containerfooter{
width: 100%;
background-color: white;
position: relative;
top: 150px;
display: flex;
height: 400px;
flex-flow: row;
justify-content: space-around;
flex-wrap: wrap;
color: white;
background-color: black;
}

.footertext{
margin-top: 55px;
float: left;
width: 20%;
}

.footermenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.footermenu{
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 55px;
float: left;
width: 20%;
}

.copyright p{
color: white;
text-align: center;
}

.copyright{
background-color:black;
}

+ 96
- 0
06-EX2/taak.html View File

@@ -0,0 +1,96 @@
<html>
<head>
<meta charset="utf-8" />
<title>
hi
</title>
<link rel="stylesheet" href="taak.css" />
<script
src="https://kit.fontawesome.com/aa439f5135.js"
crossorigin="anonymous"
></script>
<link
href="https://fonts.googleapis.com/css?family=Raleway&display=swap"
rel="stylesheet"
/>
</head>

<body>
<div class="container">
<div class="header">
<div class="logo">INDUSTRIOUS</div>
<div class="menu">Menu</div>
</div>
<div class="insert"><H1>INDUSTRIOUS</H1></br>
<p>blablablablablablablablablablablablablablablablablablablabla</br>blabalblablablabalblabla</p></div>
<div class="into-1"><h1>wopetiewoop</h1></br><p>woeptiescoopdiewoopwoeptiescoopdiewoopwoep</br>tiescoopdiewoopwoeptiescoopdiewoopwoeptiescoopdiewoop</p></div>
<div class="body">
<div class="item"><i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i></br><h3>Iets 1</h3><br><p>jepjepjepjepjep</p></div>
<div class="item"><i class="fa fa-files-o fa-5x" aria-hidden="true"></i></br><h3>Iets 2</h3><br><p>jepjepjepjepjep</p></div>
<div class="item"><i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i></br><h3>Iets 3</h3><br><p>jepjepjepjepjep</p></div>
<div class="item"><i class="fa fa-line-chart fa-5x" aria-hidden="true"></i></br><h3>Iets 4</h3><br><p>jepjepjepjepjep</p></div>
<div class="item"><i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i></br><h3>Iets 5</h3><br><p>jepjepjepjepjep</p></div>
<div class="item"><i class="fa fa-qrcode fa-5x" aria-hidden="true"></i></br><h3>Iets 6</h3><br><p>jepjepjepjepjep</p></div>
</div>


<div class="middle">
<h1>Testing 123 testest</h1></br>
<p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</br>blablablablablablblablablablablablablablablablablabla</p>
</div>

<div class="text">
<h1>Testing 123 testest</h1></br>
<p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</br>blablablablablablblablablablablablablablablablablabla</p>
</div>


<div class="Whotxt">
<div class="persontxt"><P>????????????<br>??????????????????<br>??????????</P></div>
<div class="persontxt-2"><P>????????????<br>??????????????????<br>??????????</P></div>
<div class="persontxt-3"><P>????????????<br>??????????????????<br>??????????</P></div>
</div>

<div class="Who">
<div class="person"><P>????????????</P></div>
<div class="person-2"><P>????????????</P></div>
<div class="person-3"><P>????????????</P></div>
</div>

<footer>
<div class ="containerfooter">
<div class ="footertext"><h3>Lorem ipsum iets</h3><br><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque voluptatibus suscipit ea ex? Architecto facilis, necessitatibus illum veniam totam praesentium beatae, sequi ex quam delectus consequuntur incidunt natus tempora atque.</p></div>
<div class ="footermenu">
<h3>Ipsum Lorem Iets</h3>
<ul>
<li>1234567987894</li>
<li>1234567987894</li>
<li>1234567987894</li>
<li>1234567987894</li>
</ul>
</div>
<div class ="footermenu">
<h3>Ipsum Iets Lorem</h3>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Tinder</li>
</ul>
</div>
</div>
</div>
</footer>

<div class="copyright">
<p>©Me Myself And I</p>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save