Intro

You'll complete three challenges designed to expose you to different parts of HTMl and CSS
Each challenge will have three slides:
- An intro slide explaining the challenge
- A sandbox slide where you can work on the challenge in an embedded HTML+CSS editor
- A solution slide if you're finished or want to look at a possible solution
Have fun!
Warning: left/right keys won't work unless you're clicking on the slide itself (rather than an editor or other component)

Step 1: Styling a Textarea

Google extensively to learn about CSS properties you're not sure about!
You can use linear-gradient to get the striped background effect.

Step 2: Positioning Elements

You can use flex to control the positions of the two textareas.
You'll probably need a mix of relative and absolute positioning to get the HTML and CSS labels in the top right corners.

html

css

.wrapper {
			  display: flex;
			  flex-flow: column;
			  align-items: center;
			  justify-content: center;
			  background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
			  color: white;
			  height: 100%;
			  width: 100%;
			}
			
			div.container {
			  position: relative;
			  font-size: 26px;
			  font-family: monospace;
			  line-height: 39px;
			  box-sizing: border-box;
			  flex: 0;
			  width: 100%;
			  transition: .2s;
			  transition-property: flex;
			}
			
			div.container:has([type="radio"]:checked) {
			  flex: 1;
			}
			
			label {
			  cursor: pointer;
			  color: white;
			  background: hsl(30, 100%, 50%);
			  opacity: .5;
			  text-transform: uppercase;
			  border-radius: 0.2em;
			  padding: 0.1rem 0.5rem;
			  position: absolute;
			  right: 1rem;
			  top: 0.6rem;
			  font: bold 1.2rem/1.5 'Helvetica Neue', Helvetica, Segoe UI, sans-serif;
			  z-index: 1;
			}
			
			label:hover {
			  background: hsl(15, 100%, 45%);
			  opacity: 1;
			}
			
			textarea {	
			  margin: 0;
			  font: inherit;
			  tab-size: 4;
			  background: hsl(200, 10%, 20%) linear-gradient(rgba(0,0,0,.1) 50%, transparent 0);
			  background-size: auto 3em;
			  background-attachment: local;
			  background-origin: content-box;
			  color: hsla(0,0%,80%,.9);
			  width: 100%;
			  padding: 0rem 0rem;
			  height: 1.6em;
			  white-space: pre;
			  position: absolute;
			  z-index: 0;
			  top: 0rem;
			  right: 0rem;
			  border: none;
			  outline: none;
			  transition: .2s;
			  min-height: 1.6em;
			  max-height: -webkit-fill-available;
			  transition-property: height, flex;
			}
			
			label ~ [type="radio"]:checked ~ textarea {
			  height: calc(100vh - 1.6em);
			  color: white;
			}
			
			label ~ [type="radio"]:not(:checked) ~ textarea {
			  overflow: hidden;
			}
			
			.container [type="radio"] {
			  opacity: 0;
			}