ohiosveryown/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
    <body>


        <main class="">
                <header class="">
                    <article class="">
                        <h1 class="title">Header</h1>
                        <h3 class="date">2018—2020</h3>
                        <button class="trigger">Toggle</button>
                    </article>
                </header>

                <section class="siema">
                    <article class="">
                        <h1>Article</h1>
                        <img class="" src='https://images.unsplash.com/photo-1566718970939-7cab55b73fbd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
                    </article>

                    <article class="">
                            <h1>Article</h1>
                            <img class="" src='https://images.unsplash.com/photo-1566718970939-7cab55b73fbd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
                        </article>
                </section>
        </main>


        <script src="logic.js"></script>
    </body>
</html>


<!--

:root {
    --system-ui: -apple-system, BlinkMacSystemFont, 'avenir next', 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
}

* { margin: 0; padding: 0; }

body { font-family: var(--system-ui); }
.debug { outline: 2px solid pink; }

main {
    display: flex;
    width: 100vw; height: 100vh;
    overflow: hidden;
}

h1 { font-size: 28px; }

header {
    position: absolute;
    z-index: 0;
    top: 0; right: 0; left: 0;
    margin: 0 auto;
    max-width: 1200px; width: 88vw;
}

section {
    display: flex;
    position: relative;
    width: 100vw;
    transform: translateX(calc(100vw * .28));
}

section > article {
    width: 50%; height: 44vh;
    margin-left: 40px;
    transform: translateY(48vh);
}

img {
    position: absolute;
    z-index: -1;
    top: -44%;
    /* transform: translateY(-50%); */
    width: 100%; height: 100%;
    object-fit: cover;
  }

  button { margin-top: 16px; padding: 4px 12px; }

  .title {
      transform: translateY(48vh);
      transition: transform 800ms cubic-bezier(.8,0,.16,1);
  }

  .date {
      transform: translateY(48vh);
      transition: transform 800ms cubic-bezier(.8,0,.16,1) 50ms, opacity 300ms ease 750ms;
      /* transition: opacity 300ms ease 250ms; */
  }

  .trigger {
    transform: translateY(48vh);
  }

  .move--title, .move--date {
      transform: translateY(0);
  }

  .move--date {
    opacity: 0;
  }

-->


<!--

const trigger = document.querySelector('button')
const title = document.querySelector('.title')
const date = document.querySelector('.date')


trigger.addEventListener('click', () => {
    title.classList.toggle('move--title')
    date.classList.toggle('move--date')
})

-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
	</head>
	<body>


	<main class="">
	<header class="">
	<article class="">
	<h1 class="title">Header</h1>
	<h3 class="date">2018—2020</h3>
	<button class="trigger">Toggle</button>
	</article>
	</header>

	<section class="siema">
	<article class="">
	<h1>Article</h1>
	<img class="" src='https://images.unsplash.com/photo-1566718970939-7cab55b73fbd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
	</article>

	<article class="">
	<h1>Article</h1>
	<img class="" src='https://images.unsplash.com/photo-1566718970939-7cab55b73fbd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
	</article>
	</section>
	</main>


	<script src="logic.js"></script>
	</body>
	</html>



	<!--

	:root {
	--system-ui: -apple-system, BlinkMacSystemFont, 'avenir next', 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
	}

	* { margin: 0; padding: 0; }

	body { font-family: var(--system-ui); }
	.debug { outline: 2px solid pink; }

	main {
	display: flex;
	width: 100vw; height: 100vh;
	overflow: hidden;
	}

	h1 { font-size: 28px; }

	header {
	position: absolute;
	z-index: 0;
	top: 0; right: 0; left: 0;
	margin: 0 auto;
	max-width: 1200px; width: 88vw;
	}

	section {
	display: flex;
	position: relative;
	width: 100vw;
	transform: translateX(calc(100vw * .28));
	}

	section > article {
	width: 50%; height: 44vh;
	margin-left: 40px;
	transform: translateY(48vh);
	}

	img {
	position: absolute;
	z-index: -1;
	top: -44%;
	/* transform: translateY(-50%); */
	width: 100%; height: 100%;
	object-fit: cover;
	}

	button { margin-top: 16px; padding: 4px 12px; }

	.title {
	transform: translateY(48vh);
	transition: transform 800ms cubic-bezier(.8,0,.16,1);
	}

	.date {
	transform: translateY(48vh);
	transition: transform 800ms cubic-bezier(.8,0,.16,1) 50ms, opacity 300ms ease 750ms;
	/* transition: opacity 300ms ease 250ms; */
	}

	.trigger {
	transform: translateY(48vh);
	}

	.move--title, .move--date {
	transform: translateY(0);
	}

	.move--date {
	opacity: 0;
	}

	-->


	<!--

	const trigger = document.querySelector('button')
	const title = document.querySelector('.title')
	const date = document.querySelector('.date')


	trigger.addEventListener('click', () => {
	title.classList.toggle('move--title')
	date.classList.toggle('move--date')
	})

	-->