Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Post it</title>
- <link rel="shortcun icon" href="http://cdn1.iconfinder.com/data/icons/spirit20/post-it.png">
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
- <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAnMvBxXo9S2OX7r4UAYFk4RTWx8njL9qYLnq46LoOVGM6mIGTuxSw5Vy1t3-Mgam0NeNQzRbf5lkSpw"></script>
- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
- <script type="text/javascript" src="http://rikrikrik.com/js/jquery.shortkeys.js"></script></head>
- <script type="text/javascript">
- $(document).ready(function(){
- var id = 1;
- $("#textinput").hide();
- $("#sortPost").hide();
- $("#imginput").hide();
- $(".add_post_button").click(function(){
- $("#textinput").slideToggle(500);
- $("#imginput").slideUp(500);
- $("#sortPost").slideUp(500);
- $(".help_info").fadeOut(1000);
- });
- $(".sort_by_button").click(function(){
- $("#sortPost").slideToggle(500);
- $("#textinput").slideUp();
- $("#imginput").slideUp();
- $(".help_info").fadeOut(1000);
- });
- $(".search_bar").focus(function(){
- $("#textinput").slideUp(500);
- $("#imginput").slideUp(500);
- $("#sortPost").slideUp(500);
- $(".help_info").fadeOut(1000);
- });
- $(".photoPost").click(function(){
- $("#textinput").slideToggle(500);
- $("#imginput").slideToggle(500);
- });
- $(".textPost").click(function(){
- $("#imginput").slideToggle(500);
- $("#textinput").slideToggle(500);
- });
- $(".text_submit_post").click(function(){
- var currentTime = new Date();
- var month = currentTime.getMonth() + 1;
- var day = currentTime.getDate();
- var year = currentTime.getFullYear();
- var hours = currentTime.getHours();
- var minutes = currentTime.getMinutes();
- var ampm;
- var randomBg = Math.floor((Math.random()*14)+1);
- var positionTop = Math.floor((Math.random()*80));
- var positionLeft = Math.floor((Math.random()*80));
- var divnumber = Math.floor((Math.random()*10000));
- var wh = Math.floor((Math.random()*100)+110);
- var rotatedegree = Math.floor((Math.random()-0.5)*4);
- if($(".checkbox").is(':checked')){
- var user = "Anonymous";
- }
- else{
- var user = "User";
- }
- if (minutes < 10){
- minutes = "0" + minutes
- }
- if (hours > 12){
- var ampm = "PM"
- }
- if (hours <= 12){
- var ampm = "AM"
- }
- var post = stripHTML($(".text_input").val())
- $("#header").append("<div class='postIt-" + id + "'><h style='font-weight: bold; font-size: 13px;'>" + user + "<br>" + month + "/" + day + "/" + year + " - " + (hours - 12) + ":" + minutes + " " + ampm + "</h><br><h style='font-size: 15px;'>" + post + "</h></div>");
- $(".postIt-" + id).css("width",wh);
- $(".postIt-" + id).css("height",wh);
- $(".postIt-" + id).css("transform","rotate("+rotatedegree+"deg)");
- $(".postIt-" + id).css("-moz-transform","rotate("+rotatedegree+"deg)");
- $(".postIt-" + id).css("-webkit-transform","rotate("+rotatedegree+"deg)");
- $(".postIt-" + id).css("top",positionTop+"%");
- $(".postIt-" + id).css("left",positionLeft+"%");
- $(".postIt-" + id).css("position","absolute");
- $(".postIt-" + id).css("min-height", "70px");
- $(".postIt-" + id).css("min-width", "70px");
- $(".postIt-" + id).css("max-height", "350px");
- $(".postIt-" + id).css("max-width", "350px");
- $(".postIt-" + id).css("display","block");
- $(".postIt-" + id).css("border","1px solid #B8B8B8");
- $(".postIt-" + id).css("text-overflow","ellipsis");
- $(".postIt-" + id).css("margin","3px");
- $(".postIt-" + id).css("overflow","hidden");
- $(".postIt-" + id).css("font-family","'Open Sans', Helvetica, Arial, sans-serif");
- $(".postIt-" + id).css("border-radius","3px");
- $(".postIt-" + id).css("-webkit-border-radius","3px");
- $(".postIt-" + id).css("-mox-border-radius","3px");
- $(".postIt-" + id).css("cursor","move");
- $(".postIt-" + id).css("z-index","1");
- $(".postIt-" + id).css("padding","2px 4px 2px 4px");
- $(".postIt-" + id).css("box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
- $(".postIt-" + id).css("-moz-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
- $(".postIt-" + id).css("-webkit-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
- $(".postIt-" + id).draggable();
- $(".postIt-" + id).resizable();
- if (randomBg == 1){
- $(".postIt-" + id).addClass("bg_one");
- }
- if (randomBg == 2){
- $(".postIt-" + id).addClass("bg_two");
- }
- if (randomBg == 3){
- $(".postIt-" + id).addClass("bg_three");
- }
- if (randomBg == 4){
- $(".postIt-" + id).addClass("bg_four");
- }
- if (randomBg == 5){
- $(".postIt-" + id).addClass("bg_five");
- }
- if (randomBg == 6){
- $(".postIt-" + id).addClass("bg_six");
- }
- if (randomBg == 7){
- $(".postIt-" + id).addClass("bg_seven");
- }
- if (randomBg == 8){
- $(".postIt-" + id).addClass("bg_eight");
- }
- if (randomBg == 9){
- $(".postIt-" + id).addClass("bg_nine");
- }
- if (randomBg == 10){
- $(".postIt-" + id).addClass("bg_ten");
- }
- if (randomBg == 11){
- $(".postIt-" + id).addClass("bg_eleven");
- }
- if (randomBg == 12){
- $(".postIt-" + id).addClass("bg_twelve");
- }
- if (randomBg == 13){
- $(".postIt-" + id).addClass("bg_thirteen");
- }
- if (randomBg == 14){
- $(".postIt-" + id).addClass("bg_fourteen");
- }
- $("#textinput").slideUp(500);
- $(".text_input").val("");
- $(".checkbox").removeAttr("checked");
- id++
- });
- $(".img_submit_post").click(function(){
- var currentTime = new Date();
- var month = currentTime.getMonth() + 1;
- var day = currentTime.getDate();
- var year = currentTime.getFullYear();
- var hours = currentTime.getHours();
- var minutes = currentTime.getMinutes();
- var ampm;
- var randomBg = Math.floor((Math.random()*14)+1);
- var positionTop = Math.floor((Math.random()*80));
- var positionLeft = Math.floor((Math.random()*80));
- var wh = Math.floor((Math.random()*100)+110);
- var rotatedegree = Math.floor((Math.random()-0.5)*4);
- if($(".checkbox").is(':checked')){
- var user = "Anonymous";
- }
- else{
- var user = "User";
- }
- if (minutes < 10){
- minutes = "0" + minutes
- }
- if (hours > 12){
- var ampm = "PM"
- }
- if (hours <= 12){
- var ampm = "AM"
- }
- var imgurl = $(".img_input").val()
- var comment = $(".img_comment").val()
- $("#header").append("<div class='urlPost-" + id + "'><h style='font-weight: bold; font-size: 13px'>" + user + "<br>" + month + "/" + day + "/" + year + " - " + (hours - 12) + ":" + minutes + " " + ampm + "</h><br><a target='_blank' style='font-size: 15px'href='" + imgurl + "'><img onError=\"this.src='http://www.badhaven.com/wp-content/uploads/2012/04/image-not-found.gif';\" class='image_embed' src='" + imgurl + "'></a><a target='_blank' style='font-size: 13px'href='" + imgurl + "'>" + comment + "</a></div>");
- $(".urlPost-" + id).css("width",wh);
- $(".urlPost-" + id).css("height",wh);
- $(".urlPost-" + id).css("transform","rotate("+rotatedegree+"deg)");
- $(".urlPost-" + id+ id).css("-moz-transform","rotate("+rotatedegree+"deg)");
- $(".urlPost-" + id).css("-webkit-transform","rotate("+rotatedegree+"deg)");
- $(".urlPost-" + id).css("top",positionTop+"%");
- $(".urlPost-" + id).css("left",positionLeft+"%");
- $(".urlPost-" + id).css("position","absolute");
- $(".urlPost-" + id).css("display","block");
- $(".urlPost-" + id).css("min-height", "70px");
- $(".urlPost-" + id).css("min-width", "70px");
- $(".urlPost-" + id).css("max-height", "350px");
- $(".urlPost-" + id).css("max-width", "350px");
- $(".urlPost-" + id).css("border","1px solid #B8B8B8");
- $(".urlPost-" + id).css("text-overflow","ellipsis");
- $(".urlPost-" + id).css("margin","3px");
- $(".urlPost-" + id).css("overflow","hidden");
- $(".urlPost-" + id).css("font-family","'Open Sans', Helvetica, Arial, sans-serif");
- $(".urlPost-" + id).css("border-radius","3px");
- $(".urlPost-" + id).css("-webkit-border-radius","3px");
- $(".urlPost-" + id).css("-mox-border-radius","3px");
- $(".urlPost-" + id).css("cursor","move");
- $(".urlPost-" + id).css("padding","2px 4px 2px 4px");
- $(".urlPost-" + id).css("box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
- $(".urlPost-" + id).css("-moz-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
- $(".urlPost-" + id).css("-webkit-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
- $(".urlPost-" + id).draggable();
- $(".urlPost-" + id).resizable();
- if (randomBg = 1){
- $(".urlPost-" + id).addClass("bg_one");
- }
- if (randomBg = 2){
- $(".urlPost-" + id).addClass("bg_two");
- }
- if (randomBg = 3){
- $(".urlPost-" + id).addClass("bg_three");
- }
- if (randomBg = 4){
- $(".urlPost-" + id).addClass("bg_four");
- }
- if (randomBg = 5){
- $(".urlPost-" + id).addClass("bg_five");
- }
- if (randomBg = 6){
- $(".urlPost-" + id).addClass("bg_six");
- }
- if (randomBg = 7){
- $(".urlPost-" + id).addClass("bg_seven");
- }
- if (randomBg = 8){
- $(".urlPost-" + id).addClass("bg_eight");
- }
- if (randomBg = 9){
- $(".urlPost-" + id).addClass("bg_nine");
- }
- if (randomBg = 10){
- $(".urlPost-" + id).addClass("bg_ten");
- }
- if (randomBg = 11){
- $(".urlPost-" + id).addClass("bg_eleven");
- }
- if (randomBg = 12){
- $(".urlPost-" + id).addClass("bg_twelve");
- }
- if (randomBg = 13){
- $(".urlPost-" + id).addClass("bg_thirteen");
- }
- if (randomBg = 14){
- $(".urlPost-" + id).addClass("bg_fourteen");
- }
- $("#imginput").slideUp(500);
- $(".img_input").val("");
- $(".checkbox").removeAttr("checked");
- id++;
- });
- $('.sort').click(function(){
- if ($(this).hasClass('selected')){
- return false;
- }
- else{
- $('.selected').removeClass('selected');
- $(this).addClass('selected');
- }
- });
- $(".help_info_question_button").click(function(){
- $(".help_info").fadeToggle(500);
- });
- $(document).shortkeys({
- 'N': function () {
- $('#textinput').slideToggle(500);
- $("#imginput").slideUp(500);
- $("#sortPost").slideUp(500);
- }});
- $(document).shortkeys({
- 'T': function () {
- $('#textinput').slideToggle(500);
- $("#imginput").slideUp(500);
- $("#sortPost").slideUp(500);
- }});
- $(document).shortkeys({
- 'H': function () {
- $('.help_info').fadeToggle(500);
- }});
- $(document).shortkeys({
- 'S': function () {
- $('#sortPost').slideToggle(500);
- $("#imginput").slideUp(500);
- $("#textinput").slideUp(500);
- }});
- $(document).shortkeys({
- 'I': function () {
- $('#imginput').slideToggle(500);
- $("#textinput").slideUp(500);
- $("#sortPost").slideUp(500);
- }});
- });
- function stripHTML(str){
- var strippedText = $("<div/>").html(str).text();
- return strippedText;
- }
- </script>
- <style type="text/css">
- body{
- background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noise_lines.png');
- overflow-x: hidden;
- overflow-y: auto;
- }
- #header{
- width: 100%;
- height: 100%;
- top: 0px;
- left: 0px;
- position: absolute;
- z-index: 1;
- overflow: auto;
- }
- #header .help_info_question_button{
- margin-right: 5px;
- margin-left: auto;
- margin-top: 5px;
- float: right;
- opacity: 0.3;
- -moz-opacity: 0.3;
- filter:alpha(opacity=3);
- height: 26px;
- width: 26px;
- z-index: 2;
- }
- #header .help_info_question_button:hover{
- margin-right: 5px;
- margin-left: auto;
- margin-top: 5px;
- float: right;
- opacity: 1;
- -moz-opacity: 1;
- filter:alpha(opacity=1);
- z-index: 2;
- }
- #header .help_info{
- margin-right: 5px;
- margin-left: auto;
- margin-top: 10px;
- float: right;
- opacity: 1;
- width: 300px;
- height: 325px;
- overflow-y: scroll;
- overflow-x: hidden;
- background-color: #696969;
- color: #E8E8E8;
- opacity: .7;
- -moz-opacity: .7;
- filter:alpha(opacity=7);
- z-index: 100;
- display: none;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- -o-border-radius: 3px;
- border: 1px solid #858585;
- }
- .help_info::-webkit-scrollbar {
- width: 5px;
- }
- .help_info::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- .help_info::-webkit-scrollbar-thumb {
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background: rgba(0, 0,0,0.8);
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
- }
- .help_info::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(55,0,0,0.4);
- }
- #header .keyboard_control_button{
- margin-right: 5px;
- margin-left: auto;
- float: right;
- opacity: 0.3;
- -moz-opacity: 0.3;
- filter:alpha(opacity=3);
- height: 26px;
- width: 26px;
- z-index: 2;
- margin-top: -9px;
- }
- #header .keyboard_control_button:hover{
- margin-right: 5px;
- margin-left: auto;
- float: right;
- opacity: 1;
- -moz-opacity: 1;
- filter:alpha(opacity=1);
- z-index: 2;
- margin-top: -9px;
- }
- #header hr{
- width: 270px;
- background-color: #BDBDBD;
- border-bottom: 1px solid #D4D4D4;
- }
- #header br{
- display: block;
- margin-top: 5px;
- }
- #header::-webkit-scrollbar {
- width: 5px;
- }
- #header::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- #header::-webkit-scrollbar-thumb {
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background: rgba(0, 0,0,0.8);
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
- }
- #header::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(55,0,0,0.4);
- }
- .font{
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- }
- .text_submit_post:hover, .img_submit_post:hover{
- color: gray;
- }
- .float_right{
- float: right;
- }
- .float_left{
- float: left;
- }
- .center_text{
- text-align: enter;
- }
- #footer{
- position: fixed;
- width: 100%;
- right: 0px;
- left: 0px;
- bottom: 0px;
- padding: 20px;
- height: 40px;
- background-color: #FCFCFC;
- border-top: 1px solid #E3E3E3;
- -moz-box-shadow: 0 0 11px #DEDEDE;
- -webkit-box-shadow: 0 0 11px #DEDEDE;
- box-shadow: 0 0 11px #DEDEDE;
- z-index: 100;
- }
- #footer .footer_float_right{
- float: right;
- margin-right: 40px;
- }
- #footer .footer_float_left{
- float: left;
- margin-left: 5px;
- }
- #footer .sign_up_button{
- border: 1px solid #D9D9D9;
- outline: none;
- background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(240,240,240)),
- color-stop(0.67, rgb(237,237,237)),
- color-stop(0.79, rgb(242,242,242))
- );
- }
- #footer .sign_up_button:hover{
- border: 1px solid #BD5563;
- outline: none;
- background: #F06C7D;
- }
- #footer .sign_up_button:active{
- border: 1px solid #BD5563;
- outline: none;
- background: #F06C7D;
- }
- #footer .sign_in_button{
- border: 1px solid #D9D9D9;
- outline: none;
- background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(240,240,240)),
- color-stop(0.67, rgb(237,237,237)),
- color-stop(0.79, rgb(242,242,242))
- );
- }
- #footer .sign_in_button:hover{
- border: 1px solid #969E49;
- outline: none;
- background: #DBE868;
- }
- #footer .sign_in_button:active{
- border: 1px solid #969E49;
- outline: none;
- background: #DBE868;
- }
- #footer .add_post_button{
- border: 1px solid #D9D9D9;
- outline: none;
- background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(240,240,240)),
- color-stop(0.67, rgb(237,237,237)),
- color-stop(0.79, rgb(242,242,242))
- );
- }
- #footer .add_post_button:hover{
- border: 1px solid #4AA168;
- outline: none;
- background: #68ED97;
- }
- #footer .add_post_button:active{
- border: 1px solid #4AA168;
- outline: none;
- background: #68ED97;
- }
- #footer .sort_by_button{
- border: 1px solid #D9D9D9;
- outline: none;
- background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(240,240,240)),
- color-stop(0.67, rgb(237,237,237)),
- color-stop(0.79, rgb(242,242,242))
- );
- }
- #footer .sort_by_button:hover{
- border: 1px solid #5198B0;
- outline: none;
- background: #80D2ED;
- }
- #footer .sort_by_button:active{
- border: 1px solid #5198B0;
- outline: none;
- background: #80D2ED;
- }
- #footer .search_bar{
- font-style: italic;
- color: #5C5C5C;
- border: 1px solid #D9D9D9;
- outline: none;
- padding: 8px;
- width: 250px;
- transition: all .7s ease;
- -webkit-transition: all .7s ease;
- -moz-transition: all .7s ease;
- background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(240,240,240)),
- color-stop(0.67, rgb(237,237,237)),
- color-stop(0.79, rgb(242,242,242))
- );
- }
- #footer .search_bar:hover{
- border: 1px solid #D9D9D9;
- outline: none;
- padding: 8px;
- width: 300px;
- background-color: #F5F5F5;
- transition: all .7s ease;
- -webkit-transition: all .7s ease;
- -moz-transition: all .7s ease;
- background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(240,240,240)),
- color-stop(0.67, rgb(237,237,237)),
- color-stop(0.79, rgb(242,242,242))
- );
- }
- #footer .search_bar:focus{
- font-style: normal;
- border: 1px solid #B5B5B5;
- outline: none;
- padding: 8px;
- font-weight: bold;
- width: 300px;
- transition: all .7s ease;
- -webkit-transition: all .7s ease;
- -moz-transition: all .7s ease;
- background-image: linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
- background-image: -o-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
- background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
- background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
- background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.34, rgb(255,255,255)),
- color-stop(0.67, rgb(255,255,255)),
- color-stop(0.79, rgb(255,255,255))
- );
- }
- #footer .input{
- padding: 8px;
- padding-left: 15px;
- padding-right: 15px;
- cursor: pointer;
- color: #5C5C5C;
- }
- #footer .cancel_space{
- margin-left: -7px;
- }
- #footer .left_nav_button{
- border-bottom-left-radius: 5px;
- border-top-left-radius: 5px;
- border-right: 1px solid #D9D9D9;
- }
- #footer .center_nav_button{
- border-radius: none;
- border-right: 1px solid #D9D9D9;
- }
- #footer .right_nav_button{
- border-bottom-right-radius: 5px;
- border-top-right-radius: 5px;
- }
- #sortPost{
- position: fixed;
- border-top-right-radius: 3px;
- border-top-left-radius: 3px;
- margin: auto;
- bottom: 0;
- left: 0;
- right: 0;
- margin-left: auto;
- margin-right: 20px;
- padding: 15px 0px 5px 50px;
- width: 370px;
- height: 110px;
- background-color: #FCFCFC;
- -moz-box-shadow: 0 0 11px #DEDEDE;
- -webkit-box-shadow: 0 0 11px #DEDEDE;
- box-shadow: 0 0 11px #DEDEDE;
- border: 1px solid #DEDEDE;
- outline: none;
- z-index: 10;
- }
- #textinput{
- position: fixed;
- border-top-right-radius: 3px;
- border-top-left-radius: 3px;
- margin: auto;
- bottom: 0;
- left: 0;
- right: 0;
- margin-left: auto;
- margin-right: 20px;
- padding: 15px 0px 5px 0px;
- width: 420px;
- height: 335px;
- background-color: #FCFCFC;
- -moz-box-shadow: 0 0 11px #DEDEDE;
- -webkit-box-shadow: 0 0 11px #DEDEDE;
- box-shadow: 0 0 11px #DEDEDE;
- border: 1px solid #DEDEDE;
- outline: none;
- z-index: 10;
- }
- #textinput .text_input{
- width: 420px;
- max-width: 420px;
- outline: none;
- height: 210px;
- overflow: auto;
- max-height: 210px;
- background-color: #F0F0F0;
- padding: 6px;
- border: none;
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
- resize: none;
- border-bottom: 1px solid #D1D1D1;
- border-top: 1px solid #D1D1D1;
- transition: all .3s ease;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- }
- .close{
- margin-right: 3px;
- margin-top: 3px;
- }
- #textinput .text_input:hover{
- width: 420px;
- max-width: 420px;
- outline: none;
- height: 210px;
- max-height: 210px;
- background-color: #EDEDED;
- padding: 6px;
- border: none;
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
- resize: none;
- border-bottom: 1px solid #D1D1D1;
- border-top: 1px solid #D1D1D1;
- transition: all .3s ease;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- }
- #textinput .text_input:focus{
- width: 420px;
- max-width: 420px;
- outline: none;
- height: 210px;
- max-height: 210px;
- background-color: #EDEDED;
- padding: 6px;
- border: none;
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
- resize: none;
- border-bottom: 1px solid #D1D1D1;
- border-top: 1px solid #D1D1D1;
- transition: all .3s ease;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- }
- #textinput .text_input::-webkit-scrollbar {
- width: 5px;
- }
- #textinput .text_input::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- #textinput .text_input::-webkit-scrollbar-thumb {
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background: rgba(0, 0,0,0.8);
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
- }
- #textinput .text_input::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(55,0,0,0.4);
- }
- #textinput .photoPost{
- float: right;
- margin-right: 15px;
- opacity: 0.6;
- -moz-opacity: 0.6;
- filter:alpha(opacity=6);
- }
- #textinput .photoPost:hover{
- float: right;
- margin-right: 15px;
- opacity: 1;
- -moz-opacity: 1;
- filter:alpha(opacity=1);
- }
- #imginput{
- position: fixed;
- border-top-right-radius: 3px;
- border-top-left-radius: 3px;
- margin: auto;
- bottom: 0;
- left: 0;
- right: 0;
- margin-left: auto;
- margin-right: 20px;
- padding: 15px 0px 5px 0px;
- width: 420px;
- height: 228px;
- background-color: #FCFCFC;
- -moz-box-shadow: 0 0 11px #DEDEDE;
- -webkit-box-shadow: 0 0 11px #DEDEDE;
- box-shadow: 0 0 11px #DEDEDE;
- border: 1px solid #DEDEDE;
- outline: none;
- z-index: 10;
- }
- #imginput .img_input{
- width: 420px;
- max-width: 420px;
- outline: none;
- height: 45px;
- overflow-y: hidden;
- overflow-x: auto;
- max-height: 45px;
- background-color: #F0F0F0;
- padding: 6px;
- border: none;
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
- resize: none;
- border-bottom: 1px solid #D1D1D1;
- border-top: 1px solid #D1D1D1;
- transition: all .3s ease;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- }
- #imginput .img_input:hover{
- width: 420px;
- max-width: 420px;
- outline: none;
- height: 45px;
- overflow-y: hidden;
- overflow-x: auto;
- max-height: 45px;
- background-color: #EDEDED;
- padding: 6px;
- border: none;
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
- resize: none;
- border-bottom: 1px solid #D1D1D1;
- border-top: 1px solid #D1D1D1;
- transition: all .3s ease;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- }
- #imginput .img_input:focus{
- width: 420px;
- max-width: 420px;
- outline: none;
- height: 45px;
- overflow-y: hidden;
- overflow-x: auto;
- max-height: 45px;
- background-color: #EDEDED;
- padding: 6px;
- border: none;
- font-family: 'Open Sans', Helvetica, Arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
- resize: none;
- border-bottom: 1px solid #D1D1D1;
- border-top: 1px solid #D1D1D1;
- transition: all .3s ease;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- }
- #imginput .textPost{
- float: right;
- margin-right: 15px;
- opacity: 0.6;
- -moz-opacity: 0.6;
- filter:alpha(opacity=6);
- }
- #imginput .textPost:hover{
- float: right;
- margin-right: 15px;
- opacity: 1;
- -moz-opacity: 1;
- filter:alpha(opacity= 1 1);
- }
- #sortPost span{
- color: #6E6E6E;
- font-size: 14px;
- background-color: #F9F9F9;
- border: 1px solid #DCDCDC;
- border-radius: 2px;
- margin-right: 5px;
- cursor: pointer;
- padding: 4px 9px 4px 9px;
- }
- #sortPost span.selected{
- color: #363636;
- background-color: #C2E8BE;
- border: 1px solid #B5D4B2;
- font-weight: bold;
- }
- #textinput .text_submit_post{
- background: none;
- outline: none;
- border: none;
- text-decoration: underline;
- cursor: pointer;
- }
- #imginput .img_submit_post{
- background: none;
- outline: none;
- border: none;
- text-decoration: underline;
- cursor: pointer;
- }
- .bg_one {
- background-image: linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
- background-image: -o-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
- background-image: -moz-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
- background-image: -webkit-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
- background-image: -ms-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(184,35,35)),
- color-stop(0.62, rgb(171,36,36))
- );
- }
- .bg_two {
- background-image: linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
- background-image: -o-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(184,35,124)),
- color-stop(0.61, rgb(201,40,131))
- );
- }
- .bg_three {
- background-image: linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
- background-image: -o-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(184,37,162)),
- color-stop(0.61, rgb(199,40,188))
- );
- }
- .bg_four {
- background-image: linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
- background-image: -o-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(126,39,184)),
- color-stop(0.61, rgb(135,40,199))
- );
- }
- .bg_five {
- background-image: linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
- background-image: -o-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(68,39,184)),
- color-stop(0.61, rgb(42,74,199))
- );
- }
- .bg_six {
- background-image: linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
- background-image: -o-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(40,139,184)),
- color-stop(0.61, rgb(42,144,199))
- );
- }
- .bg_seven {
- background-image: linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
- background-image: -o-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(40,179,184)),
- color-stop(0.61, rgb(44,199,199))
- );
- }
- .bg_eight {
- background-image: linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
- background-image: -o-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(40,184,127)),
- color-stop(0.61, rgb(44,199,142))
- );
- }
- .bg_nine {
- background-image: linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
- background-image: -o-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(40,184,79)),
- color-stop(0.61, rgb(46,199,87))
- );
- }
- .bg_ten {
- background-image: linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
- background-image: -o-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(93,184,40)),
- color-stop(0.61, rgb(77,199,46))
- );
- }
- .bg_eleven{
- background-image: linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
- background-image: -o-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(150,184,40)),
- color-stop(0.61, rgb(159,199,48))
- );
- }
- .bg_twelve{
- background-image: linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
- background-image: -o-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(184,184,40)),
- color-stop(0.61, rgb(194,199,48))
- );
- }
- .bg_thirteen{
- background-image: linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
- background-image: -o-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(184,131,40)),
- color-stop(0.61, rgb(199,149,50))
- );
- }
- .bg_fourteen{
- background-image: linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
- background-image: -o-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
- background-image: -moz-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
- background-image: -webkit-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
- background-image: -ms-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.24, rgb(184,91,40)),
- color-stop(0.61, rgb(199,115,50))
- );
- }
- .image_embed{
- width: 100%;
- height: auto;
- }
- #textinput .checkbox{
- width: 10px;
- height: 10px;
- }
- #imginput .checkbox{
- width: 10px;
- height: 10px;
- }
- </style>
- <body>
- <div id="header">
- <input type="image" src="http://cdn1.iconfinder.com/data/icons/brightmix/64/monotone_question.png" class="help_info_question_button">
- <div class="help_info">
- <ol class="font" style="font-size: 14px; margin-right: 15px; margin-bottom: 15px;">
- <li>Start by clicking 'N' on your keyboard or the "Add Note" button on the navigation bar at the bottom right of your screen.</li><br>
- <li>From there you can either add a text note or an image note by clicking on the camera icon.</li><br>
- <li>If you want, you can start by clicking 'I' on your keyboard and that will directly take you to adding an image note.</li><br>
- <li>Fill out the form provided, but make sure you don't exceed 180 characters.</li><br>
- <li>If you're adding an image, make sure you don't forget to include the 'http://'.</li><br>
- <li>Lastly, the sort panel can be accessed by hitting 'S' on your keyboard or simple clicking it on the navigation bar at the buttom right of your screen.</li><br>
- <li>Then, click 'Post' and your note will be added. Enjoy!</li>
- </ol>
- </div>
- <div id="textinput">
- <form action="" method="">
- <textarea class="text_input" maxlength="180" placeholder="Do you have something to say?" required></textarea>
- <div class="float_left" style="width: 200px; padding-top: 11px; padding-left: 8px;">
- <input type="button" class="text_submit_post font" style="font-size: 14px" value="Post">
- <input type="checkbox" class="checkbox"><h class="font" style="font-size: 14px; color: gray; font-style: italic;">Anonymously</h>
- </div>
- </form>
- <div class="float_right" style="width: 20px;">
- <input type="image" class="photoPost" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/photo.png">
- </div>
- </div>
- <div id="imginput">
- <form action="" method="">
- <input type="text" class="img_input" placeholder="Image URL goes here." required>
- <input type="text" style="margin-top: 15px" class="img_input img_comment" maxlength="180" placeholder="Add a comment." required>
- <div class="float_left" style="width: 200px; padding-top: 11px; padding-left: 8px;">
- <input type="button" class="img_submit_post font" style="font-size: 14px" value="Post">
- <input type="checkbox" class="checkbox"><h class="font" style="font-size: 14px; color: gray; font-style: italic;">Anonymously</h>
- </div>
- </form>
- <div class="float_right">
- <input type="image" style="height: 14px; width: 14px" class="textPost" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/text_letter_t.png">
- </div>
- </div>
- <div id="sortPost">
- <span class="sort font" id="random">Random</span>
- <span class="sort font" id="popular">Popularity</span>
- <span class="sort font" id="active">Active</span>
- <span class="sort selected font" id="newest">Newest</span>
- </div>
- <div id="footer">
- <div class="footer_float_right">
- <form action="" method="">
- <input type="button" class="add_post_button input cancel_space left_nav_button font" style="font-size: 14px;" value="Add Note">
- <input type="button" class="sort_by_button input cancel_space center_nav_button font" style="font-size: 14px;" value="Sort By">
- <input type="text" class="search_bar cancel_space right_nav_button font" style="outline: none; font-size: 14px;" placeholder="Search">
- </form>
- </div>
- <div class="footer_float_left">
- <form action="" method="">
- <input type="button" class="font input sign_in_button left_nav_button cancel_space" style="font-size:14px" value="Sign In">
- <input type="button" class="font input sign_up_button right_nav_button cancel_space" style="font-size:14px;" value="Sign Up">
- </form>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement