A Pen by Friend

Thumbnail
This awesome code was written by ambiss, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ambiss ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Friend</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="pt-br">
	<head>
		<title>ability focus only input search and disable all rest: @autor-> Friend at [Tray]Locaweb - 06/02/2017</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
	</head>
	
	<body>
		<div id="page">
		   
		   <div class="focus">
		   		<form class="focus__form">
			    	
		        	<div class="focus__cont">
			            <input type="search" placeholder="Buscar" id="infocus" class="focus__in">
			            <div class="focus__disable"></div>
			        </div>
		   			
			        <button class="focus__btn">Buscar</button>
			    </form>
		    </div>
		    
		</div><!-- - page -->
		
	</body>
	
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ambiss/a-pen-by-friend-jyxxGb */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
* {
  list-style: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
}
*:focus {
  outline: none;
}
.focus {
  background-color: #f74c2a;
  padding: 35px;
}
.focus__form {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  width: 64%;
  margin: 0 auto 0;
  height: 72px;
}
.focus__cont {
  background-color: #fff;
  width: 80%;
  margin: 0;
  padding: 0;
  height: 100%;
}
.focus__btn {
  color: rgba(236,3,25,0.8);
  font-size: 22px;
  font-weight: 700;
  font-family: Helvetica, sans-serif;
  text-shadow: 0 1px 0 #f74c2a;
  background-color: #f90;
  width: 20%;
  padding: 23px;
  border: 0;
  z-index: 9999;
}
.focus__disable {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.focus__in {
  color: #333;
  background-color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  padding: 28px;
  position: relative;
  z-index: 100;
  cursor: pointer;
}
.focus__in:focus {
  cursor: default;
}
.focus__in:focus ~ .focus__disable {
  background: #000;
  z-index: 99;
  opacity: 0.45;
  visibility: visible;
  cursor: pointer;
}

Comments