A Pen by Curtis Bowman

Thumbnail
This awesome code was written by minionion, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright minionion ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Curtis Bowman</title>
  
  
  <link rel='stylesheet prefetch' href='https://daneden.github.io/animate.css/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="page">
  <div class="search-bar">
    <a href="#" class="search-button">Show Search</a>
    <a href="#" class="search-button" style="display: none;"><span class="close">X</span></a>
    <input class="search-box" value="Some Text"></input>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/minionion/a-pen-by-curtis-bowman-Aawer */
body {
  background: #000000;
}

.search-button, .search-box {
  border-radius: .125em;
}

.active {
  display: block !important;
}

.close {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
}

.search-bar {
  background: #191919;
  border-top: 1px solid #343434;
  border-bottom: 1px solid #343434;
  clear: both;
  overflow: hidden;
  padding: 1em;
}

.search-button {
  display: inline-block;
  padding: 10px;
  background: #931100;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  float: right;
}
.search-button:hover {
  background: #d2023d;
}

.search-box {
  background: #fff;
  padding: 10px 30px;
  width: 400px;
  color: #cecece;
  text-transform: uppercase;
  font-family: sans-serif;
  display: none;
}
.search-box:focus {
  font-size: 2em;
  color: #181818;
}


/*Downloaded from https://www.codeseek.co/minionion/a-pen-by-curtis-bowman-Aawer */
$(".search-button").click(function(){
  $(".search-box").toggleClass("active animated slideInRight");
  $( ".search-button" ).toggle();
});

Comments