prof3ssorSt3v3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Inset Property</title>
    <link href="./css/main.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>CSS Inset Property</h1>
      <h2>Alternative to top, left, bottom, right</h2>
    </header>
    <main>
      <section id="one">
        <h1>Section Heading</h1>
      </section>

      <section id="two">
        <h1>Section Heading</h1>
      </section>
    </main>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
  font-weight: 300;
}
html {
  color-scheme: dark light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20px;
}
header :is(h1, h2) {
  margin: 0;
  padding: 1rem 4rem;
  color: coral;
}
main {
  padding: 1rem 4rem;
  display: flex;
  gap: 2rem;
}
section {
  display: flex;
  flex-direction: column;
  position: relative;
  background-position: center;
  background-size: cover;
  min-width: 400px;
  height: 500px;
  position: relative;
}
#one {
  background-image: url(../img/16-800x500.jpg);
}
#two {
  background-image: url(../img/17-800x500.jpg);
}
/*
Images from this list:
https://picsum.photos/v2/list
*/
section h1 {
  background-color: hsla(0, 0%, 100%, 0.8);
  color: #222;
  padding: 1rem;
  margin: 0;
  position: absolute;
}
#one h1 {
  top: 1rem;
  right: 1rem;
}
#two h1 {
  inset: 1rem 1rem 300px 4rem;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CSS Inset Property</title>
	<link href="./css/main.css" rel="stylesheet" />
	</head>
	<body>
	<header>
	<h1>CSS Inset Property</h1>
	<h2>Alternative to top, left, bottom, right</h2>
	</header>
	<main>
	<section id="one">
	<h1>Section Heading</h1>
	</section>

	<section id="two">
	<h1>Section Heading</h1>
	</section>
	</main>
	</body>
	</html>
	* {
	box-sizing: border-box;
	font-weight: 300;
	}
	html {
	color-scheme: dark light;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 20px;
	}
	header :is(h1, h2) {
	margin: 0;
	padding: 1rem 4rem;
	color: coral;
	}
	main {
	padding: 1rem 4rem;
	display: flex;
	gap: 2rem;
	}
	section {
	display: flex;
	flex-direction: column;
	position: relative;
	background-position: center;
	background-size: cover;
	min-width: 400px;
	height: 500px;
	position: relative;
	}
	#one {
	background-image: url(../img/16-800x500.jpg);
	}
	#two {
	background-image: url(../img/17-800x500.jpg);
	}
	/*
	Images from this list:
	https://picsum.photos/v2/list
	*/
	section h1 {
	background-color: hsla(0, 0%, 100%, 0.8);
	color: #222;
	padding: 1rem;
	margin: 0;
	position: absolute;
	}
	#one h1 {
	top: 1rem;
	right: 1rem;
	}
	#two h1 {
	inset: 1rem 1rem 300px 4rem;
	}