gucheen/landing.html

## landing.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Be Bold Creative Strategic</title>
  <style>
    * {
      font-family: sans-serif;
      color: rgba(0, 0, 0, 0.75);
    }

    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      padding: 0px 30px;
      background: #f9f9f9;
    }

    h1 {
      font-size: 175px;
      margin: 0 16px;
      color: #EC6F6A;
    }

    h2 {
      text-transform: uppercase;
      margin: 30px 0 0;
      font-size: 30px;
    }

    button {
      border: 2px solid #EC6F6A;
      color: #EC6F6A;
      padding: 4px 16px;
      text-transform: uppercase;
      font-size: 10px;
      font-weight: 400;
      margin: 0 16px;
      cursor: pointer;
    }

    .lp {
      max-width: 800px;
      margin: auto;
      min-height: 450px;
      box-shadow: 0px 25px 25px -10px #CCC;
      background: #fff;
      border: 5px solid #000;
      overflow: hidden;
      transform: scale(0.8);
    }

    .content {
      display: flex;
    }

    /*NAV*/
    nav {
      border-bottom: 3px solid #000;
      height: 72px;
      display: grid;
      grid-template-columns: 100px auto;
    }

    .nav__item:nth-of-type(1) {
      border-right: 3px solid #000;
    }

    .nav__logo {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72px;
    }

    .nav__logoShape {
      height: 40px;
      width: 40px;
      background: #EC6F6A;
      border-radius: 50%;
    }

    .nav__logoText {
      font-weight: 600;
      text-shadow: 1px 0px #000;
      margin: 0 0 0 -15px;
    }

    .nav__item:nth-of-type(2) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /*MAIN TEXT*/
    .main__text {
      width: 75%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /*SHAPE*/
    section.shape__holder {
      width: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 3px solid #000;
      box-sizing: border-box;
      overflow: hidden;
    }

    .shape__circle {
      border-bottom: 3px solid #000;
      background: #C19E90;
    }

    .circle {
      transform: rotate(135deg);
      border: 3px solid #000;
      border-radius: 50%;
      height: 200px;
      width: 200px;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .circle-half {
      height: 100px;
      width: 200px;
      background: #EC6F6A;
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;
    }

    .circle-half:nth-of-type(2) {
      transform: rotate(180deg);
      background: #F6C274;
      border-bottom: 3px solid #000;
    }

    .squiggle__cont {
      background: #50B0A2;
      width: 198px;
      overflow: hidden;
    }

    .shape__squiggle {
      overflow: hidden;
      position: relative;
      width: 210px;
      height: 30px;
      margin: 0px 0 0 -10px;
    }

    .squiggle {
      position: absolute;
      background: radial-gradient(ellipse, transparent, transparent 8px, black 8px, black 11px, transparent 11px);
      background-size: 35px 40px;
      width: 200px;
      height: 20px;
    }

    .squiggle2 {
      top: 14px;
      left: 18px;
      background-position: 0px -20px;
    }

    .content__bottom {
      border-top: 3px solid #000;
      height: 79px;
      display: grid;
      grid-template-columns: 40px 40px 150px 370px 200px;
    }

    .content__btm__item {
      border-right: 3px solid #000;
    }

    .content__btm__item:nth-of-type(1) {
      background: #F6C274;
    }

    .content__btm__item:nth-of-type(2) {
      background: #EB5939;
    }

    .content__btm__item:nth-of-type(3) {
      background: #EC6F6A;
    }

    .content__btm__item:nth-of-type(4) {
      background: #C19E8F;
      border: none;
    }

    .content__btm__item:nth-of-type(5) {
      background: #000;
      border: none;
    }
  </style>
</head>

<body>
  <main>
    <div class="lp">

      <nav>
        <div class="nav__item">
          <div class="nav__logo">
            <div class="nav__logoShape">
            </div>
            <div class="nav__logoText">ON</div>
          </div>
        </div>
        <div class="nav__item">
          <div class="nav__link"></div>
          <button>Contact</button>
        </div>
      </nav>

      <div class="content">
        <section class="main__text">
          <h1>Be</h1>
          <h2>Bold. <br> Creative. <br> Strategic.</h2>
        </section>

        <section class="shape__holder">
          <div class="shape__circle">
            <div class="circle">
              <div class="circle-half">
              </div>
              <div class="circle-half">
              </div>
            </div>
          </div>

          <div class="squiggle__cont">
            <div class="shape__squiggle">
              <div class="squiggle"></div>
              <div class="squiggle squiggle2">
              </div>
            </div>
            <div class="shape__squiggle">
              <div class="squiggle"></div>
              <div class="squiggle squiggle2">
              </div>
            </div>
            <div class="shape__squiggle">
              <div class="squiggle"></div>
              <div class="squiggle squiggle2">
              </div>
            </div>

          </div>
        </section>

      </div>

      <section class="content__bottom">
        <div class="content__btm__item "></div>
        <div class="content__btm__item "></div>
        <div class="content__btm__item "></div>
        <div class="content__btm__item "></div>
        <div class="content__btm__item "></div>
      </section>

    </div>
  </main>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Be Bold Creative Strategic</title>
	<style>
	* {
	font-family: sans-serif;
	color: rgba(0, 0, 0, 0.75);
	}

	body {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	padding: 0px 30px;
	background: #f9f9f9;
	}

	h1 {
	font-size: 175px;
	margin: 0 16px;
	color: #EC6F6A;
	}

	h2 {
	text-transform: uppercase;
	margin: 30px 0 0;
	font-size: 30px;
	}

	button {
	border: 2px solid #EC6F6A;
	color: #EC6F6A;
	padding: 4px 16px;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 400;
	margin: 0 16px;
	cursor: pointer;
	}

	.lp {
	max-width: 800px;
	margin: auto;
	min-height: 450px;
	box-shadow: 0px 25px 25px -10px #CCC;
	background: #fff;
	border: 5px solid #000;
	overflow: hidden;
	transform: scale(0.8);
	}

	.content {
	display: flex;
	}

	/NAV/
	nav {
	border-bottom: 3px solid #000;
	height: 72px;
	display: grid;
	grid-template-columns: 100px auto;
	}

	.nav__item:nth-of-type(1) {
	border-right: 3px solid #000;
	}

	.nav__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 72px;
	}

	.nav__logoShape {
	height: 40px;
	width: 40px;
	background: #EC6F6A;
	border-radius: 50%;
	}

	.nav__logoText {
	font-weight: 600;
	text-shadow: 1px 0px #000;
	margin: 0 0 0 -15px;
	}

	.nav__item:nth-of-type(2) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	/MAIN TEXT/
	.main__text {
	width: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	/SHAPE/
	section.shape__holder {
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-left: 3px solid #000;
	box-sizing: border-box;
	overflow: hidden;
	}

	.shape__circle {
	border-bottom: 3px solid #000;
	background: #C19E90;
	}

	.circle {
	transform: rotate(135deg);
	border: 3px solid #000;
	border-radius: 50%;
	height: 200px;
	width: 200px;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.circle-half {
	height: 100px;
	width: 200px;
	background: #EC6F6A;
	border-top-left-radius: 90px;
	border-top-right-radius: 90px;
	}

	.circle-half:nth-of-type(2) {
	transform: rotate(180deg);
	background: #F6C274;
	border-bottom: 3px solid #000;
	}

	.squiggle__cont {
	background: #50B0A2;
	width: 198px;
	overflow: hidden;
	}

	.shape__squiggle {
	overflow: hidden;
	position: relative;
	width: 210px;
	height: 30px;
	margin: 0px 0 0 -10px;
	}

	.squiggle {
	position: absolute;
	background: radial-gradient(ellipse, transparent, transparent 8px, black 8px, black 11px, transparent 11px);
	background-size: 35px 40px;
	width: 200px;
	height: 20px;
	}

	.squiggle2 {
	top: 14px;
	left: 18px;
	background-position: 0px -20px;
	}

	.content__bottom {
	border-top: 3px solid #000;
	height: 79px;
	display: grid;
	grid-template-columns: 40px 40px 150px 370px 200px;
	}

	.content__btm__item {
	border-right: 3px solid #000;
	}

	.content__btm__item:nth-of-type(1) {
	background: #F6C274;
	}

	.content__btm__item:nth-of-type(2) {
	background: #EB5939;
	}

	.content__btm__item:nth-of-type(3) {
	background: #EC6F6A;
	}

	.content__btm__item:nth-of-type(4) {
	background: #C19E8F;
	border: none;
	}

	.content__btm__item:nth-of-type(5) {
	background: #000;
	border: none;
	}
	</style>
	</head>

	<body>
	<main>
	<div class="lp">

	<nav>
	<div class="nav__item">
	<div class="nav__logo">
	<div class="nav__logoShape">
	</div>
	<div class="nav__logoText">ON</div>
	</div>
	</div>
	<div class="nav__item">
	<div class="nav__link"></div>
	<button>Contact</button>
	</div>
	</nav>

	<div class="content">
	<section class="main__text">
	<h1>Be</h1>
	<h2>Bold. <br> Creative. <br> Strategic.</h2>
	</section>

	<section class="shape__holder">
	<div class="shape__circle">
	<div class="circle">
	<div class="circle-half">
	</div>
	<div class="circle-half">
	</div>
	</div>
	</div>

	<div class="squiggle__cont">
	<div class="shape__squiggle">
	<div class="squiggle"></div>
	<div class="squiggle squiggle2">
	</div>
	</div>
	<div class="shape__squiggle">
	<div class="squiggle"></div>
	<div class="squiggle squiggle2">
	</div>
	</div>
	<div class="shape__squiggle">
	<div class="squiggle"></div>
	<div class="squiggle squiggle2">
	</div>
	</div>

	</div>
	</section>

	</div>

	<section class="content__bottom">
	<div class="content__btm__item "></div>
	<div class="content__btm__item "></div>
	<div class="content__btm__item "></div>
	<div class="content__btm__item "></div>
	<div class="content__btm__item "></div>
	</section>

	</div>
	</main>
	</body>

	</html>