frebro/friends.html

## friends.html
<!doctype html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <title>KAN Grid: FRIENDS</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900" rel="stylesheet">
    <style type="text/css">
      body {
        margin: 0;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 300;
      }
      main {
        display: grid;
        overflow: hidden;
        max-width: 100vw;
        max-height: 100vh;
        grid-template-columns: 0.15fr 0.15fr 1.6fr 0.15fr 1fr 0.15fr;
        grid-template-rows: 0.2fr 2.5fr 1fr 50px 0.2fr;
      }
      h1 {
        grid-column: 1 / -1;
        grid-row: 2 / -1;
        margin: 0;
        color: mistyrose;
        text-transform: uppercase;
        line-height: 0.8;
        font-size: 27.6vw;
        font-weight: 900;
        transform: translateX(-0.15em);
        z-index: -1;
      }
      .color {
        background-color: powderblue;
        grid-column: 1 / 4;
        grid-row: 1 / -1;
        z-index: -3;
      }
      img {
        grid-column: 2 / 5;
        grid-row: 2 / -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        mix-blend-mode: multiply;
        z-index: -2;
      }
      .intro {
        grid-column: 3 / 4;
        grid-row: 3 / -2;
        hyphens: auto;
        color: mistyrose;
      }
      .intro p {
        max-width: 60ch;
      }
      .details {
        grid-column: 5 / -1;
        grid-row: 2 / -3;
        margin: 0;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: salmon;
      }
      .details dt {
        border: 2px solid pink;
        padding: 0.25em 2em;
        margin: 1em 0;
        font-size: 1.375rem;
      }
      .details dd {
        margin: 0;
        padding: 1em 2em;
        font-size: 1.75rem;
      }
      .k {
        grid-column: -2 / -1;
        grid-row: -3 / -1;
        font-family: serif;
        font-size: 3.9rem;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Friends</h1>
      <div class="color" aria-hidden="true"></div>
      <img src="roya-ann-miller-185140-unsplash.jpg" alt="Roya Ann Miller">
      <div class="intro">
        <p>Här får du vara dig själv och vi gillar dig för det. Vi jobbar alla bäst i en opretentiös och avslappnad miljö. Därför visar vi varandra respekt, bland annat genom att vara positiva och engagerade. Något som säkert bidrar till den goda stämningen som kännetecknar KAN. Om du någon gång snubblar kommer du att märka att du har vännerna här. Vi bryr oss och tar hand om varandra.</p>
      </div>
      <dl class="details">
        <dt>Friends?</dt>
        <dd>Att ha roligt på jobbet och vara sig själv</dd>
        <dd>Att vara opretentiös, ha respekt för andra och bidra till en avslappnad atmosfär</dd>
        <dd>Att vara ärlig, positiv och engagerad</dd>
        <dd>Att bry sig om varandra, även utanför arbetsuppgiften</dd>
      </dl>
      <span class="k">K</span>
    </main>
  </body>
</html>

## roya-ann-miller-185140-unsplash.jpg

      
    Raw
  

              roya-ann-miller-185140-unsplash.jpg
	<!doctype html>
	<html lang="sv">
	<head>
	<meta charset="utf-8">
	<title>KAN Grid: FRIENDS</title>
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900" rel="stylesheet">
	<style type="text/css">
	body {
	margin: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	}
	main {
	display: grid;
	overflow: hidden;
	max-width: 100vw;
	max-height: 100vh;
	grid-template-columns: 0.15fr 0.15fr 1.6fr 0.15fr 1fr 0.15fr;
	grid-template-rows: 0.2fr 2.5fr 1fr 50px 0.2fr;
	}
	h1 {
	grid-column: 1 / -1;
	grid-row: 2 / -1;
	margin: 0;
	color: mistyrose;
	text-transform: uppercase;
	line-height: 0.8;
	font-size: 27.6vw;
	font-weight: 900;
	transform: translateX(-0.15em);
	z-index: -1;
	}
	.color {
	background-color: powderblue;
	grid-column: 1 / 4;
	grid-row: 1 / -1;
	z-index: -3;
	}
	img {
	grid-column: 2 / 5;
	grid-row: 2 / -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	mix-blend-mode: multiply;
	z-index: -2;
	}
	.intro {
	grid-column: 3 / 4;
	grid-row: 3 / -2;
	hyphens: auto;
	color: mistyrose;
	}
	.intro p {
	max-width: 60ch;
	}
	.details {
	grid-column: 5 / -1;
	grid-row: 2 / -3;
	margin: 0;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: salmon;
	}
	.details dt {
	border: 2px solid pink;
	padding: 0.25em 2em;
	margin: 1em 0;
	font-size: 1.375rem;
	}
	.details dd {
	margin: 0;
	padding: 1em 2em;
	font-size: 1.75rem;
	}
	.k {
	grid-column: -2 / -1;
	grid-row: -3 / -1;
	font-family: serif;
	font-size: 3.9rem;
	}
	</style>
	</head>
	<body>
	<main>
	<h1>Friends</h1>
	<div class="color" aria-hidden="true"></div>
	<img src="roya-ann-miller-185140-unsplash.jpg" alt="Roya Ann Miller">
	<div class="intro">
	<p>Här får du vara dig själv och vi gillar dig för det. Vi jobbar alla bäst i en opretentiös och avslappnad miljö. Därför visar vi varandra respekt, bland annat genom att vara positiva och engagerade. Något som säkert bidrar till den goda stämningen som kännetecknar KAN. Om du någon gång snubblar kommer du att märka att du har vännerna här. Vi bryr oss och tar hand om varandra.</p>
	</div>
	<dl class="details">
	<dt>Friends?</dt>
	<dd>Att ha roligt på jobbet och vara sig själv</dd>
	<dd>Att vara opretentiös, ha respekt för andra och bidra till en avslappnad atmosfär</dd>
	<dd>Att vara ärlig, positiv och engagerad</dd>
	<dd>Att bry sig om varandra, även utanför arbetsuppgiften</dd>
	</dl>
	<span class="k">K</span>
	</main>
	</body>
	</html>