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

init 09

09-forms
senne 4 years ago
commit
075fb2ff58
13 changed files with 388 additions and 0 deletions
Split View Show Diff Stats
  1. 50
    0
      04-EX01/oef.css
  2. 38
    0
      04-EX01/oef.html
  3. 32
    0
      05-flex/flex.css
  4. 15
    0
      05-flex/flex.html
  5. BIN
      06-EX02/images/bg-image.png
  6. BIN
      06-EX02/images/pic01.jpg
  7. BIN
      06-EX02/images/pic02.jpg
  8. BIN
      06-EX02/images/pic03.jpg
  9. 104
    0
      06-EX02/index.html
  10. 135
    0
      06-EX02/style.css
  11. 14
    0
      09-forms/index.html
  12. 0
    0
      09-forms/scripts/main.js
  13. 0
    0
      09-forms/styles/main.css

+ 50
- 0
04-EX01/oef.css View File

@@ -0,0 +1,50 @@
div{
box-sizing: border-box;
}
nav{
position: fixed;
height: 50px;
width: 100%;
background-color: lightgray;
top: 0;
left: 0;
padding: 5px;
}
.bottomBack{
padding: 10px;
background-color: darkred;
height: 500px;
width: 100%;
position: relative;
top: 55px;
}
.bottomFront{
background-color: orangered;
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
top: 10px;
}
.rightButton{
position: absolute;
right: 5px;
background-color: silver;
height: 40px;
width: 10%;
}
.leftBar{
position: absolute;
left: 5px;
background-color: silver;
height: 40px;
width: 75%;
padding: 5px;
}
.buttons{
float: left;
height: 30px;
width: 20%;
background-color: lightsalmon;
border: 3px solid purple;
}

+ 38
- 0
04-EX01/oef.html View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning</title>

<link rel="stylesheet" href="oef.css">

</head>

<body>
<nav>

<div class="rightButton"></div>

<div class="leftBar">
<div class="buttons"></div>
<div class="buttons"></div>
<div class="buttons"></div>
<div class="buttons"></div>
<div class="buttons"></div>
</div>

</nav>
<div class="bottomBack">
<div class="bottomFront">

</div>
</div>



</body>

</html>

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

@@ -0,0 +1,32 @@
.container{
background-color: bisque;
padding: 10px;
display: flex;
align-items: stretch;
}

.container div {
line-height: 40px;
font-size: 20px;
color: white;
text-align: center;
flex-grow: 1;
margin-right: 5px;
}
.div1{
background-color: chocolate;
}
.div2{
background-color: darksalmon;
}
.div3{
background-color: lime;
}
.div4{
background-color: indianred;
}
.div5{
background-color: rgb(16, 73, 54);
}

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

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>zieke flex</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
</body>

BIN
06-EX02/images/bg-image.png View File


BIN
06-EX02/images/pic01.jpg View File


BIN
06-EX02/images/pic02.jpg View File


BIN
06-EX02/images/pic03.jpg View File


+ 104
- 0
06-EX02/index.html View File

@@ -0,0 +1,104 @@
<!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" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>

<body>

<div class="title">
<div class="div1"><p>Industrious</p></div>
<div class="div2"><p>Menu</p></div>
</div>
<div class="banner">
<H1>INDUSTRIOUS</H1>
<h2> A responsive business oriented template with a video background </br> designed by TEMPLATED and released under the Creative Commons License. </h2>
</div>
<div class="main">
<h1>SEMTURPIS AMET SEMPER</h1>
<H2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius dicta voluptatem soluta repellendus cupiditate culpa nemo. Autem praesentium labore, tenetur aliquid, minima earum aperiam vitae quo qui saepe architecto accusamus!</H2>
<div class="img1">
<i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i>
<h1>Random Titel</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe sequi mollitia earum quod pariatur similique animi distinctio, sit tempore obcaecati eveniet quas assumenda nam delectus blanditiis. Sapiente, tenetur quibusdam.</p>
</div>
<div class="img2">
<i class="fa fa-files-o fa-5x" aria-hidden="true"></i>
<h1>Random Titel</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe sequi mollitia earum quod pariatur similique animi distinctio, sit tempore obcaecati eveniet quas assumenda nam delectus blanditiis. Sapiente, tenetur quibusdam.</p>
</div>
<div class="img3">
<i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i>
<h1>Random Titel</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe sequi mollitia earum quod pariatur similique animi distinctio, sit tempore obcaecati eveniet quas assumenda nam delectus blanditiis. Sapiente, tenetur quibusdam.</p>
</div>
<div class="img4">
<i class="fa fa-line-chart fa-5x" aria-hidden="true"></i>
<h1>Random Titel</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe sequi mollitia earum quod pariatur similique animi distinctio, sit tempore obcaecati eveniet quas assumenda nam delectus blanditiis. Sapiente, tenetur quibusdam.</p>
</div>
<div class="img5">
<i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i>
<h1>Random Titel</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe sequi mollitia earum quod pariatur similique animi distinctio, sit tempore obcaecati eveniet quas assumenda nam delectus blanditiis. Sapiente, tenetur quibusdam.</p>
</div>
<div class="img6">
<i class="fa fa-qrcode fa-5x" aria-hidden="true"></i>
<h1>Random Titel</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe sequi mollitia earum quod pariatur similique animi distinctio, sit tempore obcaecati eveniet quas assumenda nam delectus blanditiis. Sapiente, tenetur quibusdam.</p>
</div>
</div>

<div class="solidRed">
<h1> CURABITUR ULLAMCORPER ULTRICES</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere consectetur libero ipsum maxime, minima mollitia dolor asperiores perferendis voluptatum rerum in minus quos officia? Voluptates fugiat quisquam maxime iusto? Et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non hic ducimus, asperiores ullam sint itaque harum aliquid ut exercitationem tenetur unde modi iure explicabo voluptate officia ipsam tempora aliquam. Esse. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, soluta eligendi odio nostrum omnis voluptatibus hic voluptate! Atque ullam fugit eius facilis laudantium, culpa, provident eaque eligendi, distinctio iure voluptatem. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam facere assumenda, tempora animi temporibus quasi amet harum nesciunt, atque iure molestiae molestias eaque nisi fuga eius? Eaque aut nobis ipsa.</p>
</div>

<h1>FAUCIBUS CONSEQUAT LOREM</h1>
<h2>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate quas labore incidunt sint dolorum laboriosam illum doloremque asperiores cum tempora impedit commodi voluptatum, ad quasi temporibus quis! Quisquam, quaerat eos?</h2>
<div class="reviewContainer">
<div class="review">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam dolore ipsum vitae consectetur eius velit amet ratione? Repudiandae aperiam, itaque sapiente vero accusantium aspernatur laudantium earum voluptatibus ex ab magni!</p>
<div class="round-image">
</div>
<div>-<b>Jane Doe</b> CEO - ABC Inc.</div>
</div>
<div class="review">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis odit cum ipsum placeat atque asperiores nisi nam corrupti, saepe repellat officiis, architecto nulla voluptatum consectetur eos neque error voluptates accusamus.</p>
<div class="round-image">
</div>
<div>-<b>John Doe</b> CEO - ABC Inc.</div>
</div>
<div class="review">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quo doloribus qui? Sed, cumque debitis. Numquam suscipit ad cumque, dolore eligendi cum perspiciatis earum? Recusandae vero quae provident ducimus possimus.</p>
<div class="round-image">
</div>
<div>-<b>Janet Smith</b> CEO - ABC Inc.</div>
</div>
</div>

<div class="footer">
<div class="footcontainer">
<div class="cont">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus qui laborum eaque iusto, quae sunt nostrum eius mollitia porro distinctio sit asperiores at architecto. Possimus atque mollitia ipsa at qui.</div>
<div class="cont">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente sequi perspiciatis doloremque sint accusamus natus deserunt fuga illum molestias dolorem sed temporibus quibusdam voluptate harum, fugiat hic dolor commodi tempora.</div>
<div class="cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente error incidunt officiis tempora libero. Mollitia, ut inventore atque adipisci hic enim facilis dignissimos ullam, doloremque delectus in distinctio rerum iusto!</div>
</div>
<p>&copy; Untitled Photos Unsplash Viceo Voverr</p>
</div>



</div>
</body>

</html>

+ 135
- 0
06-EX02/style.css View File

@@ -0,0 +1,135 @@
.banner {
height: 500px;
background-image: url(images/bg-image.png);
border: none;
background-size: cover;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
}

.banner h1{
font-size: 400%;
font-family: 'Raleway';
color: white;
margin: 0;
text-align: center;
}
.banner h2{
color: white;
font-size: 150%;
width: 1000px;
text-align: center;
}
.title{
display: flex;
justify-content: space-between;
background-color:black;
}
.title p{
color: white;
padding: 5px;
}
.round-image {
height: 50px;
width: 50px;
border-radius: 50%;
background-image: url(images/pic01.jpg);
background-size: cover;
}
.main{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
padding: 10%;
font-family: 'Raleway';
color: gray;
}
.main h2{
text-align: center;
font-size: 80%;
padding: 10%;
padding-top: 0%;
font-family: 'Raleway';
}
.main div {
flex-grow: 1;
display: flex;
flex-flow: column wrap;
width: 30%;
align-items: center;
border: silver solid 2px;
margin: 10px;
text-align: center;
}

.main i {
color: red;
padding-top: 10%;
}

.solidRed{
background-color: red;
text-align: center;
height: 300px;
display: flex;
flex-flow: column;
justify-content: center;
}
.solidRed p{
padding: 0 10%;
}

.reviewContainer{
display: flex;
flex-flow: row wrap;
align-items: center;
padding: 10%;
justify-content: space-between;
}

.review{
width: 25%;
display: flex;
flex-flow:wrap;
align-items: center;
}
.review p {
border-left: solid thick gray;
padding-left: 10px;
}

.footer{
background-color: black;
height: 400px;
text-align: center;
color: white;
}

.footcontainer{
border-bottom: solid gray 2px;
padding: 10%;
display: flex;
}
.cont{
width: 30%;
}

b{
color: red;
}
h1{
text-align: center;
}

h2{
text-align: center;
padding: 0 10%;
}

body{
margin: 0;
}

+ 14
- 0
09-forms/index.html View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script src="scripts/main.js"></script>
</body>
</html>

+ 0
- 0
09-forms/scripts/main.js View File


+ 0
- 0
09-forms/styles/main.css View File


Write Preview
Loading…
Cancel
Save