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

06-EX02

06-EX02
emieldkr 4 years ago
parent
942aeedc05
commit
1148fea1ca
7 changed files with 439 additions and 0 deletions
Split View Show Diff Stats
  1. 3
    0
      06-EX02/debug.log
  2. BIN
      06-EX02/images/bg-image.png
  3. BIN
      06-EX02/images/pic01.jpg
  4. BIN
      06-EX02/images/pic02.jpg
  5. BIN
      06-EX02/images/pic03.jpg
  6. 202
    0
      06-EX02/index.html
  7. 234
    0
      06-EX02/style.css

+ 3
- 0
06-EX02/debug.log View File

@@ -0,0 +1,3 @@
[1021/111242.705:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1021/111242.705:ERROR:crash_report_database_win.cc(469)] failed to stat report
[1021/111242.706:ERROR:crash_report_database_win.cc(469)] failed to stat report

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


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

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

<head>
<meta charset="utf-8" />
<title>Exercise 2: Flex</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,300i,400&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/9953f27da4.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<section id="intro">
<header class="flex padding">
<div class="left">Industrious</div>
<div class="right">Menu</div>
</header>
<div id="hero" class="flex">
<div class="banner letterbox">
<h1 class="title--white">Industrious</h1>
<p class="basictext"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repudiandae unde
qui autem quis
laudantium reprehenderit fuga, nihil recusandae, accusantium adipisci porro praesentium aliquam ad
dignissimos sint dolor nulla iure!</p>
</div>
</div>
</section>



<section id="services" class="letterbox paddingtop paddingbottom">

<header class="paddingbottom flex flex--column flex--justify">
<h2 class="subtitle--gray">Sem Turpis amet semper</h2>
<p class="basictext">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates eius labore
repellendus iste quam,
corporis voluptatum vel fugit aliquam pariatur hic deserunt adipisci recusandae, ex sed perferendis cum
illum quia.</p>
</header>

<div class="row flex paddingbottom">

<div class="service flex flex--column flex--align">
<i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i>
<h3 class="subtitle--gray">Titel</h3>
<p class="basictext"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita eligendi rem
veritatis
reprehenderit sedL!</p>
</div>

<div class="service flex flex--column flex--align">
<i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i>
<h3 class="subtitle--gray">Titel</h3>
<p class="basictext"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita eligendi rem
veritatis
reprehenderit sedL!</p>
</div>

<div class="service flex flex--column flex--align">
<i class="fa fa-line-chart fa-5x" aria-hidden="true"></i>
<h3 class="subtitle--gray">Titel</h3>
<p class="basictext"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita eligendi rem
veritatis
reprehenderit sedL!</p>
</div>

</div>
<div class="row flex">

<div class="service flex flex--column flex--align">
<i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i>
<h3 class="subtitle--gray">Titel</h3>
<p class="basictext"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita eligendi rem
veritatis
reprehenderit sedL!</p>
</div>
<div class="service flex flex--column flex--align">
<i class="fa fa-qrcode fa-5x" aria-hidden="true"></i>
<h3 class="subtitle--gray">Titel</h3>
<p class="basictext"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita eligendi rem
veritatis
reprehenderit sedL!</p>
</div>
<div class="service flex flex--column flex--align">
<i class="fa fa-files-o fa-5x" aria-hidden="true"></i>
<h3 class="subtitle--gray">Titel</h3>
<p class="basictext"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita eligendi rem
veritatis
reprehenderit sedL!</p>
</div>
</div>
</section>


<section id="statement" class="flex flex--column flex--align flex--justify">
<h2 class="subtitle--white">Curabitur ullamcorper ultrices</h2>
<p class="letterbox basictext"> Lorem ipsum dolor sit amet consectetur adipisicing elit. At placeat blanditiis
dignissimos
ea sed modi,
laboriosam quis qui necessitatibus magni ullam incidunt maiores quo explicabo fuga quas. Temporibus,
quisquam magnam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, neque veniam earum fugit
mollitia velit saepe beatae impedit voluptas vel tenetur corporis ipsam praesentium molestias reiciendis
tempora quod atque aspernatur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero sapiente
ullam vero, dicta voluptates ipsa rem culpa commodi ipsam tempore officiis sit impedit quam. Dolorum neque
amet et voluptates alias. </p>
</section>


<section id="reviews" class="paddingtop paddingbottom">
<header>
<h2 class="subtitle--gray">FAUCIBUS CONSEQUAT LOREM</h2>
<p class="basictext"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nisi, voluptatum,
consectetur officiis sit
impedit quibusdam ullam</p>
</header>

<div class="row letterbox flex">

<div class="review">
<div class="review_quote">
<p class="quote">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi repudiandae, sunt accusamus
recusandae deleniti dolorum ducimus, consequuntur aperiam ab natus consequatur commodi. Eligendi
beatae adipisci aliquid. Facilis voluptate laboriosam ratione!
</p>
</div>
<div class="review_metadata flex">
<img src="images/pic01.jpg" alt="profilePic" class="profilepicture">
<p class="letterbox"> -<span class="red">Jane Doe</span> CEO </p>
</div>
</div>

<div class="review">
<div class="review_quote">
<p class="quote">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi repudiandae, sunt accusamus
recusandae deleniti dolorum ducimus, consequuntur aperiam ab natus consequatur commodi. Eligendi
beatae adipisci aliquid. Facilis voluptate laboriosam ratione!
</p>
</div>
<div class="review_metadata flex">
<img src="images/pic02.jpg" alt="profilePic" class="profilepicture">
<p class="letterbox"> -<span class="red">Jane Doe</span> CEO </p>
</div>
</div>

<div class="review">
<div class="review_quote">
<p class="quote">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi repudiandae, sunt accusamus
recusandae deleniti dolorum ducimus, consequuntur aperiam ab natus consequatur commodi. Eligendi
beatae adipisci aliquid. Facilis voluptate laboriosam ratione!
</p>
</div>
<div class="review_metadata flex">
<img src="images/pic03.jpg" alt="profilePic" class="profilepicture">
<p class="letterbox"> -<span class="red">Jane Doe</span> CEO </p>
</div>
</div>

</div>

</section>


<section id="footer" class="letterbox paddingtop paddingbottom">
<div class="about flex white">
<div class="summary">
<h5 class="subtitle--white">Accumsan montes viverra</h5>
<p class="basictext">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus laboriosam
tempore magni
quibusdam unde iure iste nobis dolore sequi voluptas adipisci consectetur consequuntur, debitis,
dolores nisi totam. Inventore, dicta porro!</p>
</div>
<div class="links">
<h5 class="subtitle--white">Sem turpis amet temper</h5>
<ul>
<li>Voorbeeldtekst</li>
<li>Voorbeeldtekst</li>
<li>Voorbeeldtekst</li>
<li>Voorbeeldtekst</li>
</ul>
</div>
<div class="social">
<h5 class="subtitle--white">Sem turpis amet temper</h5>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Instragram</li>
<li>github</li>
</ul>
</div>
</div>
<div class="copyright">
<p class="basictext white">&copy; copyright text</p>
</div>
</section>

</body>

</html>

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

@@ -0,0 +1,234 @@

/**************************************************************/
/********************** Normalization *********************/
/**************************************************************/
:root{
--primary-red: rgb(206, 27, 40);
--primary-white: white;
--primary-black: black;
--primary-gray: darkgray;
}

html{
box-sizing: border-box;
margin: 0;
max-width: 100%;
}

body{
margin: 0;
}

p,a,span,li,h1,h2,h3,h5 {
font-family: 'Raleway', sans-serif;
}

/**************************************************************/
/********************** REUSABLE *********************/
/**************************************************************/

.flex {
display: flex;
flex-direction: row;
}

.letterbox {
padding: 0 15%;
}

.paddingtop {
padding-top: 5%;
}

.paddingbottom {
padding-bottom: 5%;
}

.padding {
padding: 10px 1%;
}

.title--white {
color: var(--primary-white);
text-transform: uppercase;
font-weight: 300;
}

.title--gray {
color: var(--primary-gray);
text-transform: uppercase;
}

.subtitle--gray {
font-size: 40px;
font-weight: 300;
letter-spacing: normal;
color: var(--primary-gray);
text-transform: uppercase;
text-align: center;
}

.subtitle--white {
font-size: 40px;
font-weight: 300;
letter-spacing: normal;
color: var(--primary-white);
text-transform: uppercase;
}

.flex--column{
flex-direction: column;
}

.flex--justify{
justify-content: center;
}

.flex--align{
align-items: center;
}

.basictext{
text-align: center;
line-height: 2;
}

.red {
color: var(--primary-red);
}

.white {
color: var(--primary-white);
}

/**************************************************************/
/********************** INTRO *********************/
/**************************************************************/
#intro header{
justify-content:space-between;
background-color: var(--primary-black);
color: var(--primary-white);
}

#hero{
height: 500px;
background-image: url("images/bg-image.png");
justify-content: center;
align-items: center;
}

#hero h1 {
font-size: 60px;
text-align: center;
}

#hero p {
font-size: 20px;
opacity: 0.5;
color: var(--primary-white);
}

/**************************************************************/
/********************** SERVICES *********************/
/**************************************************************/
.service p {
text-align: center;
padding: 0 20%;
}

.service i {
color: var(--primary-red);
}

.service h3{
font-size: 20px;
margin-bottom: 0;
}

/**************************************************************/
/********************** STATEMENT *********************/
/**************************************************************/
#statement{
height: 500px;
background-color: var(--primary-red);
}

#statement p {
color: var(--primary-white);
}

/**************************************************************/
/********************** REVIEWS *********************/
/**************************************************************/

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

.quote {
padding: 15px 100px 15px 15px;
border-left: solid thick var(--primary-gray);
line-height: 2;
font-weight: 300;
font-style: italic;
}

/**************************************************************/
/********************** FOOTER *********************/
/**************************************************************/
#footer {
height: 400px;
background-color: var(--primary-black);
}

#footer .summary {
flex: 2;
}

#footer .about p {
text-align: left;
opacity: 0.5;
padding-right: 50px;
}

#footer h5 {
font-size: 20px;
}

#footer .links {
flex: 1;
}

#footer ul {
list-style-type: none;
padding: 0;
margin-top: 0;
}

#footer li {
padding: 15px 0px 15px 0px;
margin-right: 50px;
opacity: 0.5;
border-bottom: 1px solid var(--primary-gray);
}

#footer .social li {
border-bottom: none;
}

#footer li:last-child{
border-bottom: none;
}

#footer .social {
flex: 1;
}

#footer .about {
border-bottom: 1px solid var(--primary-gray);
}

#footer .copyright p {
opacity: 0.3;
}

Write Preview
Loading…
Cancel
Save