lindsaycarbonell/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">
    <title>Collapsible Menu Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="mobile-menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">MENU</div>
    <div class="menu">
      <div class="menu--one">
        <div class="menu--two">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="main-menu">
        <ul class="menu--flex-container">
            <li>Home</li>
            <li>About</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
   </div>

</body>
</html>

## style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
  }

  .container {
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0 3rem;
  }

  .showcase {
    background: rgba(13, 110, 139, 0.75);
    color: #fff;
    height: 100vh;
    position: relative;
  }

  .btn {
    display: inline-block;
    border: none;
    background: rgba(13, 110, 139, 0.75);
    color: #fff;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    transition: opacity 1s ease-in-out;
    text-decoration: none;
  }

  .btn:hover {
    opacity: 0.7;
  }

  /* MENU STYLES */
  .mobile-menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }

  /*removes the default checkbox style*/
  .mobile-menu-wrap > .toggler {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
  }

  .menu--one {
    background: rgba(24, 39, 51 , 0.85);
    border-radius: 50%;
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.4s ease;
  }

  .menu--two {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .menu li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
  }

  .menu--two li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
  }

  /* Show Menu */
  .toggler:checked ~ .menu {
    visibility: visible;
  }

  .toggler:checked ~ .menu .menu--one {
    transform: scale(1);
    transition-duration: 0.75s;
  }

  .toggler:checked ~ .menu .menu--two {
    opacity: 1;
    transition:  opacity 0.4s ease 0.4s;
  }

  .mobile-menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-menu {
    display: none;
  }

  /* desktop and tablet */
  @media (min-width: 765px) {
    .mobile-menu-wrap {
      display: none;
    }
    .menu--two ul {
      display: block;
    }
    .main-menu {
      display: block;
    }
    .menu--flex-container {
      display: flex;
      flex-direction: row;
      list-style-type: none;
      align-items: center;
      width: 100%;
    }
    .menu--flex-container li {
      margin: 20px;
    }
  }
	<!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">
	<title>Collapsible Menu Demo</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<div class="mobile-menu-wrap">
	<input type="checkbox" class="toggler">
	<div class="hamburger">MENU</div>
	<div class="menu">
	<div class="menu--one">
	<div class="menu--two">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<div class="main-menu">
	<ul class="menu--flex-container">
	<li>Home</li>
	<li>About</li>
	<li>Services</li>
	<li>Contact</li>
	</ul>
	</div>

	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Roboto', sans-serif;
	line-height: 1.4;
	}

	.container {
	max-width: 960px;
	margin: auto;
	overflow: hidden;
	padding: 0 3rem;
	}

	.showcase {
	background: rgba(13, 110, 139, 0.75);
	color: #fff;
	height: 100vh;
	position: relative;
	}

	.btn {
	display: inline-block;
	border: none;
	background: rgba(13, 110, 139, 0.75);
	color: #fff;
	padding: 0.75rem 1.5rem;
	margin-top: 1rem;
	transition: opacity 1s ease-in-out;
	text-decoration: none;
	}

	.btn:hover {
	opacity: 0.7;
	}

	/* MENU STYLES */
	.mobile-menu-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	}

	/removes the default checkbox style/
	.mobile-menu-wrap > .toggler {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	cursor: pointer;
	width: 50px;
	height: 50px;
	opacity: 0;
	}

	.menu--one {
	background: rgba(24, 39, 51 , 0.85);
	border-radius: 50%;
	width: 200vw;
	height: 200vw;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	transform: scale(0);
	transition: all 0.4s ease;
	}

	.menu--two {
	text-align: center;
	max-width: 90vw;
	max-height: 100vh;
	opacity: 0;
	transition: opacity 0.4s ease;
	}

	.menu li {
	list-style: none;
	color: #fff;
	font-size: 1.5rem;
	padding: 1rem;
	}

	.menu--two li a {
	color: inherit;
	text-decoration: none;
	transition: color 0.4s ease;
	}

	/* Show Menu */
	.toggler:checked ~ .menu {
	visibility: visible;
	}

	.toggler:checked ~ .menu .menu--one {
	transform: scale(1);
	transition-duration: 0.75s;
	}

	.toggler:checked ~ .menu .menu--two {
	opacity: 1;
	transition: opacity 0.4s ease 0.4s;
	}

	.mobile-menu-wrap .menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.main-menu {
	display: none;
	}

	/* desktop and tablet */
	@media (min-width: 765px) {
	.mobile-menu-wrap {
	display: none;
	}
	.menu--two ul {
	display: block;
	}
	.main-menu {
	display: block;
	}
	.menu--flex-container {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	align-items: center;
	width: 100%;
	}
	.menu--flex-container li {
	margin: 20px;
	}
	}