a-eid/layout_new.html

## layout_new.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">
  <style>
    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      background-color: #efeff3;
    }

    .main {
      width: 100%;
    }

    article {
      height: 100vh;
    }

    .credit {
      display: none;
      position: fixed;
      right: 20px;
      bottom: 20px;
      margin: 0;
      color: #fff;
      font-size: 14px;
      font-family: Avenir Next, Helvetica Neue, sans-serif;
    }

    header {
      position: relative;
      height: 30vh;
      width: 100%;
      border-top: 22px solid #3c3e99;
      background-color: #4c54a4;
    }

    article {
      position: relative;
      height: 70vh;
      width: 100%;
      background: #333;
    }

    button {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 60px;
      display: block;
      height: 60px;
      border: 0;
      border-radius: 100%;
      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 3px rgba(0, 0, 0, 0.2);
      -webkit-appearance: none;
      background-color: #e20269;
      -webkit-animation: button forwards 4s infinite;
      animation: button forwards 4s infinite;
      bottom: 10px;
      right: 10px;
    }

    .header_button{
      display: none;
    }

    @media (min-width: 650px) {
      section {
        max-width: 90%;
        margin: 0 auto;
      }

      article{
        margin-top: -100px;
      }
      .section_button{
        display: none;
      }

      .header_button{
        display: block;
        bottom: 0;
        right: 0;
        transform: translateY(50%);
        z-index: 100;
      }
    }

    @media (min-width: 750px) {
      section {
        max-width: 80%;
        margin: 0 auto;
      }
    }

  </style>
  <title>new layout</title>
</head>

<body>
  <main rel='main'>
    <header>
      <button class="header_button"></button>
    </header>
    <section role='presentation'>
      <article>
      </article>
      <button class="section_button"></button>
    </section>
  </main>
</body </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">
	<style>
	* {
	box-sizing: border-box;
	}

	html,
	body {
	margin: 0;
	padding: 0;
	background-color: #efeff3;
	}

	.main {
	width: 100%;
	}

	article {
	height: 100vh;
	}

	.credit {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-family: Avenir Next, Helvetica Neue, sans-serif;
	}

	header {
	position: relative;
	height: 30vh;
	width: 100%;
	border-top: 22px solid #3c3e99;
	background-color: #4c54a4;
	}

	article {
	position: relative;
	height: 70vh;
	width: 100%;
	background: #333;
	}

	button {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 60px;
	display: block;
	height: 60px;
	border: 0;
	border-radius: 100%;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 3px rgba(0, 0, 0, 0.2);
	-webkit-appearance: none;
	background-color: #e20269;
	-webkit-animation: button forwards 4s infinite;
	animation: button forwards 4s infinite;
	bottom: 10px;
	right: 10px;
	}

	.header_button{
	display: none;
	}

	@media (min-width: 650px) {
	section {
	max-width: 90%;
	margin: 0 auto;
	}

	article{
	margin-top: -100px;
	}
	.section_button{
	display: none;
	}

	.header_button{
	display: block;
	bottom: 0;
	right: 0;
	transform: translateY(50%);
	z-index: 100;
	}
	}

	@media (min-width: 750px) {
	section {
	max-width: 80%;
	margin: 0 auto;
	}
	}

	</style>
	<title>new layout</title>
	</head>

	<body>
	<main rel='main'>
	<header>
	<button class="header_button"></button>
	</header>
	<section role='presentation'>
	<article>
	</article>
	<button class="section_button"></button>
	</section>
	</main>
	</body </html>