A Pen by Tim Brown

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

Technologies

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

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

  
</head>

<body>

  <div id="DIV_1">
	<div id="DIV_2">
		 <span id="SPAN_3">Search</span> <span id="SPAN_4">√ó</span>
	</div>
	<form id="FORM_5" action="#">
		<div id="DIV_6">
			<input type="text" id="INPUT_7" />
			<input type="text" disabled="disabled" id="INPUT_8" />
		</div>
	</form>
	<div id="DIV_9">
		<script id="SCRIPT_10" type="text/x-handlebars-template"><div id="search-menu__results">
                    {{#each this}
                            <div class="search-menu__results-info">
                                <a class="search-menu_title-info" href="/content/pluralsight/en/search.html?q={{this.title}}">{{this.title}}</a>
                            </div>
                    {{/each}}
                </div>
		</script>
		<div id="DIV_11">
			</div>
	</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/timbrown81/a-pen-by-tim-brown-JYxVjN */
#DIV_1 {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    height: 1029px;
    letter-spacing: -0.24px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 1880px;
    z-index: 500;
    perspective-origin: 940px 514.5px;
    transform-origin: 940px 514.5px;
    background: rgba(34, 34, 34, 0.901961) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
    padding: 20px;
}/*#DIV_1*/

#DIV_2 {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    height: 36px;
    letter-spacing: -0.24px;
    text-align: left;
    width: 1840px;
    perspective-origin: 920px 18px;
    transform-origin: 920px 18px;
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 25px 0px 0px;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_2*/

#DIV_2:after {
    box-sizing: border-box;
    clear: both;
    color: rgb(136, 136, 136);
    display: table;
    letter-spacing: -0.24px;
    text-align: left;
    content: '"' '"';
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_2:after*/

#DIV_2:before {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    display: table;
    letter-spacing: -0.24px;
    text-align: left;
    content: '"' '"';
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_2:before*/

#SPAN_3 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    letter-spacing: -0.24px;
    text-align: left;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 100 normal 24px / 36px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 0px 0px 0px 152px;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_3*/

#SPAN_4 {
    box-sizing: border-box;
    color: rgb(249, 104, 22);
    cursor: pointer;
    display: block;
    float: right;
    height: 26px;
    letter-spacing: -0.24px;
    text-align: left;
    width: 14.9531px;
    perspective-origin: 7.46875px 13px;
    transform-origin: 7.46875px 13px;
    border: 0px none rgb(249, 104, 22);
    font: normal normal 300 normal 26px / 26px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 0px 160px 0px 0px;
    outline: rgb(249, 104, 22) none 0px;
}/*#SPAN_4*/

#FORM_5 {
    box-sizing: border-box;
    color: rgb(242, 242, 242);
    height: 84px;
    letter-spacing: -0.24px;
    width: 1840px;
    perspective-origin: 920px 42px;
    transform-origin: 920px 42px;
    border: 0px none rgb(242, 242, 242);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 32px 0px 0px;
    outline: rgb(242, 242, 242) none 0px;
}/*#FORM_5*/

#DIV_6 {
    box-sizing: border-box;
    color: rgb(242, 242, 242);
    letter-spacing: -0.24px;
    width: 1840px;
    perspective-origin: 920px 0px;
    transform-origin: 920px 0px;
    border: 0px none rgb(242, 242, 242);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(242, 242, 242) none 0px;
}/*#DIV_6*/

#INPUT_7 {
    color: rgb(242, 242, 242);
    display: block;
    height: 84px;
    position: absolute;
    width: 1880px;
    z-index: 100;
    align-self: stretch;
    perspective-origin: 940px 42px;
    transform-origin: 940px 42px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px solid rgb(242, 242, 242);
    font: normal normal normal normal 70px / normal 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 0px 0px 16px 153px;
    outline: rgb(242, 242, 242) none 0px;
    padding: 0px;
    transition: border-color 0.15s linear 0s, background 0.15s linear 0s;
}/*#INPUT_7*/

#INPUT_8 {
    color: rgb(136, 136, 136);
    cursor: default;
    display: block;
    height: 84px;
    position: absolute;
    width: 1880px;
    align-self: stretch;
    perspective-origin: 940px 42px;
    transform-origin: 940px 42px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px solid rgb(136, 136, 136);
    font: normal normal normal normal 70px / normal 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 0px 0px 16px 153px;
    outline: rgb(136, 136, 136) none 0px;
    padding: 0px;
    transition: border-color 0.15s linear 0s, background 0.15s linear 0s;
}/*#INPUT_8*/

#DIV_9 {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    letter-spacing: -0.24px;
    width: 1840px;
    perspective-origin: 920px 0px;
    transform-origin: 920px 0px;
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_9*/

#SCRIPT_10 {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    letter-spacing: -0.24px;
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
}/*#SCRIPT_10*/

#DIV_11 {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    float: left;
    letter-spacing: -0.24px;
    max-width: 1000px;
    width: 1000px;
    perspective-origin: 500px 0px;
    transform-origin: 500px 0px;
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    margin: 44px 0px 0px 160px;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_11*/

#DIV_11:after {
    box-sizing: border-box;
    clear: both;
    color: rgb(136, 136, 136);
    display: table;
    letter-spacing: -0.24px;
    content: '"' '"';
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_11:after*/

#DIV_11:before {
    box-sizing: border-box;
    color: rgb(136, 136, 136);
    display: table;
    letter-spacing: -0.24px;
    content: '"' '"';
    border: 0px none rgb(136, 136, 136);
    font: normal normal normal normal 14px / 21px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    outline: rgb(136, 136, 136) none 0px;
}/*#DIV_11:before*/


Comments