Spacefish/Demo.markdown

## Demo.markdown

      
    Raw
  

              Demo.markdown
            
          
    Demo

Forked from David Maciejewski's Pen Demo.
A Pen by Spacefish on CodePen.
License.

  
## index.html
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Foobar</title>
</head>
<body>

  <div class="wrapper">
    <div class="header">
      Aufgabe: Header, Inhaltsspalte und Sidebar (rechts) gestalten.<br>
      Header: Grün, Content: Blau, Sidebar: Rot<br>
      Content: 70%, Sidebar: 20%;
    </div>

    <div class="content">
      CONTENT
    </div>

    <div class="sidebar">
      SIDEBAR
    </div>
  </div>
</body>
</html>

## style.css
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: black;
}

@keyframes example {
    from {
      filter: hue-rotate(0deg) blur(150px);
      transform: rotate(360deg);
      width: 100%;
    }
    to {
      filter: hue-rotate(720deg) blur(0px);
      transform: rotate(360deg);
      width: 100%;
    }
}

.wrapper {
   // animation-timing-function: linear;
   animation-name: example;
   animation-duration: 1s;
  animation-iteration-count: infinite;
}

.header {
  background-color:  #0f0;
  height: 80px;
}

.content {
  width: 70%;
  background-color:  #00f;
  height: 200px;
}

.sidebar {
  position: absolute;
  height: 200px;
  right: 0px;
  top: 80px;
  width: 20%;
  background-color:  #f00;
}
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Foobar</title>
	</head>
	<body>

	<div class="wrapper">
	<div class="header">
	Aufgabe: Header, Inhaltsspalte und Sidebar (rechts) gestalten.<br>
	Header: Grün, Content: Blau, Sidebar: Rot<br>
	Content: 70%, Sidebar: 20%;
	</div>

	<div class="content">
	CONTENT
	</div>

	<div class="sidebar">
	SIDEBAR
	</div>
	</div>
	</body>
	</html>
	, ::before, *::after {
	box-sizing: border-box;
	}

	body {
	background-color: black;
	}

	@keyframes example {
	from {
	filter: hue-rotate(0deg) blur(150px);
	transform: rotate(360deg);
	width: 100%;
	}
	to {
	filter: hue-rotate(720deg) blur(0px);
	transform: rotate(360deg);
	width: 100%;
	}
	}

	.wrapper {
	// animation-timing-function: linear;
	animation-name: example;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	}

	.header {
	background-color: #0f0;
	height: 80px;
	}

	.content {
	width: 70%;
	background-color: #00f;
	height: 200px;
	}

	.sidebar {
	position: absolute;
	height: 200px;
	right: 0px;
	top: 80px;
	width: 20%;
	background-color: #f00;
	}