<div class="contain">
  <div class="item example-1">
    <header>
      <h1>
          <a href="#">iShadeed</a>
        </h1>
      <form action="">
        <label class="off-screen" for="search">Search for something</label>
        <input id="search" type="text">
      </form>

      <button><span class="off-screen">
          Add Project</span>
            <svg viewBox="0 0 491.86 491.86">
              <path d="M465.17,211.61H280.24V26.69C280.24,18.27,268.81,0,245.93,0s-34.32,18.27-34.32,26.69V211.61H26.69C18.27,211.61,0,223.05,0,245.93s18.27,34.32,26.69,34.32H211.61V465.17c0,8.42,11.44,26.69,34.32,26.69s34.32-18.27,34.32-26.69V280.24H465.17c8.42,0,26.69-11.44,26.69-34.32S473.59,211.61,465.17,211.61Z" transform="translate(0 0)"/>
            </svg>
          </button>
    </header>
    <header>
      <h1>
          <a href="#">iShadeed</a>
        </h1>
      <form action="">
        <label class="off-screen" for="search">Search for something</label>
        <input id="search" type="text">
      </form>

      <button><span class="off-screen">
          Add Project</span>
            <svg viewBox="0 0 491.86 491.86">
              <path d="M465.17,211.61H280.24V26.69C280.24,18.27,268.81,0,245.93,0s-34.32,18.27-34.32,26.69V211.61H26.69C18.27,211.61,0,223.05,0,245.93s18.27,34.32,26.69,34.32H211.61V465.17c0,8.42,11.44,26.69,34.32,26.69s34.32-18.27,34.32-26.69V280.24H465.17c8.42,0,26.69-11.44,26.69-34.32S473.59,211.61,465.17,211.61Z" transform="translate(0 0)"/>
            </svg>
          </button>
    </header>
  </div>
</div>

/*...... Demo Styles ........*/
.example-1 {
	header {
		display: flex;
		background: #026AA7;
		padding: 1em;

		> *:not(:last-child) {
			margin-right: 1rem !important;
		}
	}

	h1 {
		margin: 0;	
		display: flex;

		a {
			display: inline-block;
			font-size: 1.5rem;
      font-weight: bold;
			padding: 0.25rem 0.9rem;
			color: rgba(#000, 0.6);
			text-decoration: none;
			background: rgba(#fff, 0.6);
			border-radius: 5px;
			transition: all 0.4s linear;
			
			&:hover {
				color: #000;
				background: #fff;
				transition: background 0.2s ease-out;
			}
		}
	}

	form {
		display: flex;
		margin-left: auto;
		width: 100%;
		max-width: 400px;
	}

	input {
		appearance: none;
		width: 100%;
		background-color: rgba(#fff, 0.3);
		background-image: url('../img/search.svg');
		background-size: 1.5em 1.5em;
		background-repeat: no-repeat;
		background-position: right 0.65em center;
		font-size: 16px;
		padding: 0.7em 0.5em;
		border-radius: 5px;
		color: #000;
		transition: box-shadow 0.2s ease-out, background 0.2s ease-out;

		&:focus {
			background-color: #fff;
			box-shadow: 0 0 0 3px rgba(#000, 0.25);
			outline: 0;
		}
	}

	button {
		appearance: none;
		font-size: 16px;
		padding: 0.7em 1em;
		border-radius: 5px;
		color: #000;
		background-color: rgba(#fff, 0.3);
		transition: background 0.2s ease-out;
		cursor: pointer;

		svg {
			width: 20px;
			fill: #fff;
			transition: fill 0.2s ease-out;
		}

		&:hover,
		&:focus {
			background: #fff;

			svg {
				fill: #000;
			}
		}

		&:focus {
			outline: 0;
		}
	}
}


/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}

.item {
	margin-bottom: 4em;
}

input, button {
  border: 0;
}

header + header {
  margin-top: 1em;
}

header:nth-child(2) {
  background: #5aaf4c;
}