A Pen by jonathan de montalembert

Developer
Jonathan De Montalembert
Size
13,600 Kb
Views
34,408
  1. A Pen by jonathan de montalembert Previews
  2. A Pen by jonathan de montalembert HTML Codes
  3. A Pen by jonathan de montalembert CSS Codes
  4. A Pen by jonathan de montalembert JS Codes

How do I make an a pen by jonathan de montalembert?

What is a a pen by jonathan de montalembert? How do you make a a pen by jonathan de montalembert? This script and codes were developed by Jonathan De Montalembert on 10 July 2022, Sunday.

A Pen by jonathan de montalembert Previews
IQ Test

A Pen by jonathan de montalembert - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by jonathan de montalembert</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
body { background: #666; font-family: 'Open Sans', sans-serif; font-size: 20px;
}
.wrapper { margin: 10px;
}
.uppercase { text-transform: uppercase;
}
.button { margin: 5px; outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #345; color: #95aabf; text-shadow: 0px 0px #24303c, 1px 1px #24303c, 2px 2px #24303c, 3px 3px #24303c, 4px 4px #24303c, 5px 5px #24303c, 6px 6px #24303c, 7px 7px #24303c, 8px 8px #24303c, 9px 9px #24303c, 10px 10px #24303c, 11px 11px #24303c, 12px 12px #24303c, 13px 13px #24303c, 14px 14px #24303c, 15px 15px #24303c, 16px 16px #24303c, 17px 17px #24303c, 18px 18px #24303c, 19px 19px #24303c, 20px 20px #24303c, 21px 21px #24303c, 22px 22px #24303c, 23px 23px #24303c, 24px 24px #24303c, 25px 25px #24303c, 26px 26px #24303c, 27px 27px #24303c, 28px 28px #24303c, 29px 29px #24303c, 30px 30px #24303c, 31px 31px #24303c, 32px 32px #24303c, 33px 33px #24303c, 34px 34px #24303c, 35px 35px #24303c, 36px 36px #24303c, 37px 37px #24303c, 38px 38px #24303c, 39px 39px #24303c, 40px 40px #24303c, 41px 41px #24303c, 42px 42px #24303c, 43px 43px #24303c, 44px 44px #24303c, 45px 45px #24303c, 46px 46px #24303c, 47px 47px #24303c, 48px 48px #24303c, 49px 49px #24303c, 50px 50px #24303c; overflow: hidden; font-weight: 100; text-decoration: none; cursor: pointer; transition: all .4s linear;
}
.button.button-big { font-size: 50px;
}
.button.red { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #BB1C1C; color: #f3b0b0; text-shadow: 0px 0px #981717, 1px 1px #981717, 2px 2px #981717, 3px 3px #981717, 4px 4px #981717, 5px 5px #981717, 6px 6px #981717, 7px 7px #981717, 8px 8px #981717, 9px 9px #981717, 10px 10px #981717, 11px 11px #981717, 12px 12px #981717, 13px 13px #981717, 14px 14px #981717, 15px 15px #981717, 16px 16px #981717, 17px 17px #981717, 18px 18px #981717, 19px 19px #981717, 20px 20px #981717, 21px 21px #981717, 22px 22px #981717, 23px 23px #981717, 24px 24px #981717, 25px 25px #981717, 26px 26px #981717, 27px 27px #981717, 28px 28px #981717, 29px 29px #981717, 30px 30px #981717, 31px 31px #981717, 32px 32px #981717, 33px 33px #981717, 34px 34px #981717, 35px 35px #981717, 36px 36px #981717, 37px 37px #981717, 38px 38px #981717, 39px 39px #981717, 40px 40px #981717, 41px 41px #981717, 42px 42px #981717, 43px 43px #981717, 44px 44px #981717, 45px 45px #981717, 46px 46px #981717, 47px 47px #981717, 48px 48px #981717, 49px 49px #981717, 50px 50px #981717; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.brown { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #421414; color: #cc5656; text-shadow: 0px 0px #230b0b, 1px 1px #230b0b, 2px 2px #230b0b, 3px 3px #230b0b, 4px 4px #230b0b, 5px 5px #230b0b, 6px 6px #230b0b, 7px 7px #230b0b, 8px 8px #230b0b, 9px 9px #230b0b, 10px 10px #230b0b, 11px 11px #230b0b, 12px 12px #230b0b, 13px 13px #230b0b, 14px 14px #230b0b, 15px 15px #230b0b, 16px 16px #230b0b, 17px 17px #230b0b, 18px 18px #230b0b, 19px 19px #230b0b, 20px 20px #230b0b, 21px 21px #230b0b, 22px 22px #230b0b, 23px 23px #230b0b, 24px 24px #230b0b, 25px 25px #230b0b, 26px 26px #230b0b, 27px 27px #230b0b, 28px 28px #230b0b, 29px 29px #230b0b, 30px 30px #230b0b, 31px 31px #230b0b, 32px 32px #230b0b, 33px 33px #230b0b, 34px 34px #230b0b, 35px 35px #230b0b, 36px 36px #230b0b, 37px 37px #230b0b, 38px 38px #230b0b, 39px 39px #230b0b, 40px 40px #230b0b, 41px 41px #230b0b, 42px 42px #230b0b, 43px 43px #230b0b, 44px 44px #230b0b, 45px 45px #230b0b, 46px 46px #230b0b, 47px 47px #230b0b, 48px 48px #230b0b, 49px 49px #230b0b, 50px 50px #230b0b; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.dark { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #222; color: #888888; text-shadow: 0px 0px #0e0e0e, 1px 1px #0e0e0e, 2px 2px #0e0e0e, 3px 3px #0e0e0e, 4px 4px #0e0e0e, 5px 5px #0e0e0e, 6px 6px #0e0e0e, 7px 7px #0e0e0e, 8px 8px #0e0e0e, 9px 9px #0e0e0e, 10px 10px #0e0e0e, 11px 11px #0e0e0e, 12px 12px #0e0e0e, 13px 13px #0e0e0e, 14px 14px #0e0e0e, 15px 15px #0e0e0e, 16px 16px #0e0e0e, 17px 17px #0e0e0e, 18px 18px #0e0e0e, 19px 19px #0e0e0e, 20px 20px #0e0e0e, 21px 21px #0e0e0e, 22px 22px #0e0e0e, 23px 23px #0e0e0e, 24px 24px #0e0e0e, 25px 25px #0e0e0e, 26px 26px #0e0e0e, 27px 27px #0e0e0e, 28px 28px #0e0e0e, 29px 29px #0e0e0e, 30px 30px #0e0e0e, 31px 31px #0e0e0e, 32px 32px #0e0e0e, 33px 33px #0e0e0e, 34px 34px #0e0e0e, 35px 35px #0e0e0e, 36px 36px #0e0e0e, 37px 37px #0e0e0e, 38px 38px #0e0e0e, 39px 39px #0e0e0e, 40px 40px #0e0e0e, 41px 41px #0e0e0e, 42px 42px #0e0e0e, 43px 43px #0e0e0e, 44px 44px #0e0e0e, 45px 45px #0e0e0e, 46px 46px #0e0e0e, 47px 47px #0e0e0e, 48px 48px #0e0e0e, 49px 49px #0e0e0e, 50px 50px #0e0e0e; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.light { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #ecf0f1; color: #77939a; text-shadow: 0px 0px #d5dde0, 1px 1px #d5dde0, 2px 2px #d5dde0, 3px 3px #d5dde0, 4px 4px #d5dde0, 5px 5px #d5dde0, 6px 6px #d5dde0, 7px 7px #d5dde0, 8px 8px #d5dde0, 9px 9px #d5dde0, 10px 10px #d5dde0, 11px 11px #d5dde0, 12px 12px #d5dde0, 13px 13px #d5dde0, 14px 14px #d5dde0, 15px 15px #d5dde0, 16px 16px #d5dde0, 17px 17px #d5dde0, 18px 18px #d5dde0, 19px 19px #d5dde0, 20px 20px #d5dde0, 21px 21px #d5dde0, 22px 22px #d5dde0, 23px 23px #d5dde0, 24px 24px #d5dde0, 25px 25px #d5dde0, 26px 26px #d5dde0, 27px 27px #d5dde0, 28px 28px #d5dde0, 29px 29px #d5dde0, 30px 30px #d5dde0, 31px 31px #d5dde0, 32px 32px #d5dde0, 33px 33px #d5dde0, 34px 34px #d5dde0, 35px 35px #d5dde0, 36px 36px #d5dde0, 37px 37px #d5dde0, 38px 38px #d5dde0, 39px 39px #d5dde0, 40px 40px #d5dde0, 41px 41px #d5dde0, 42px 42px #d5dde0, 43px 43px #d5dde0, 44px 44px #d5dde0, 45px 45px #d5dde0, 46px 46px #d5dde0, 47px 47px #d5dde0, 48px 48px #d5dde0, 49px 49px #d5dde0, 50px 50px #d5dde0; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.green { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #27ae60; color: #b3eecc; text-shadow: 0px 0px #208d4e, 1px 1px #208d4e, 2px 2px #208d4e, 3px 3px #208d4e, 4px 4px #208d4e, 5px 5px #208d4e, 6px 6px #208d4e, 7px 7px #208d4e, 8px 8px #208d4e, 9px 9px #208d4e, 10px 10px #208d4e, 11px 11px #208d4e, 12px 12px #208d4e, 13px 13px #208d4e, 14px 14px #208d4e, 15px 15px #208d4e, 16px 16px #208d4e, 17px 17px #208d4e, 18px 18px #208d4e, 19px 19px #208d4e, 20px 20px #208d4e, 21px 21px #208d4e, 22px 22px #208d4e, 23px 23px #208d4e, 24px 24px #208d4e, 25px 25px #208d4e, 26px 26px #208d4e, 27px 27px #208d4e, 28px 28px #208d4e, 29px 29px #208d4e, 30px 30px #208d4e, 31px 31px #208d4e, 32px 32px #208d4e, 33px 33px #208d4e, 34px 34px #208d4e, 35px 35px #208d4e, 36px 36px #208d4e, 37px 37px #208d4e, 38px 38px #208d4e, 39px 39px #208d4e, 40px 40px #208d4e, 41px 41px #208d4e, 42px 42px #208d4e, 43px 43px #208d4e, 44px 44px #208d4e, 45px 45px #208d4e, 46px 46px #208d4e, 47px 47px #208d4e, 48px 48px #208d4e, 49px 49px #208d4e, 50px 50px #208d4e; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.yellow { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #f1c40f; color: #312803; text-shadow: 0px 0px #cba50c, 1px 1px #cba50c, 2px 2px #cba50c, 3px 3px #cba50c, 4px 4px #cba50c, 5px 5px #cba50c, 6px 6px #cba50c, 7px 7px #cba50c, 8px 8px #cba50c, 9px 9px #cba50c, 10px 10px #cba50c, 11px 11px #cba50c, 12px 12px #cba50c, 13px 13px #cba50c, 14px 14px #cba50c, 15px 15px #cba50c, 16px 16px #cba50c, 17px 17px #cba50c, 18px 18px #cba50c, 19px 19px #cba50c, 20px 20px #cba50c, 21px 21px #cba50c, 22px 22px #cba50c, 23px 23px #cba50c, 24px 24px #cba50c, 25px 25px #cba50c, 26px 26px #cba50c, 27px 27px #cba50c, 28px 28px #cba50c, 29px 29px #cba50c, 30px 30px #cba50c, 31px 31px #cba50c, 32px 32px #cba50c, 33px 33px #cba50c, 34px 34px #cba50c, 35px 35px #cba50c, 36px 36px #cba50c, 37px 37px #cba50c, 38px 38px #cba50c, 39px 39px #cba50c, 40px 40px #cba50c, 41px 41px #cba50c, 42px 42px #cba50c, 43px 43px #cba50c, 44px 44px #cba50c, 45px 45px #cba50c, 46px 46px #cba50c, 47px 47px #cba50c, 48px 48px #cba50c, 49px 49px #cba50c, 50px 50px #cba50c; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.blue { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #2980b9; color: #bedcf0; text-shadow: 0px 0px #226998, 1px 1px #226998, 2px 2px #226998, 3px 3px #226998, 4px 4px #226998, 5px 5px #226998, 6px 6px #226998, 7px 7px #226998, 8px 8px #226998, 9px 9px #226998, 10px 10px #226998, 11px 11px #226998, 12px 12px #226998, 13px 13px #226998, 14px 14px #226998, 15px 15px #226998, 16px 16px #226998, 17px 17px #226998, 18px 18px #226998, 19px 19px #226998, 20px 20px #226998, 21px 21px #226998, 22px 22px #226998, 23px 23px #226998, 24px 24px #226998, 25px 25px #226998, 26px 26px #226998, 27px 27px #226998, 28px 28px #226998, 29px 29px #226998, 30px 30px #226998, 31px 31px #226998, 32px 32px #226998, 33px 33px #226998, 34px 34px #226998, 35px 35px #226998, 36px 36px #226998, 37px 37px #226998, 38px 38px #226998, 39px 39px #226998, 40px 40px #226998, 41px 41px #226998, 42px 42px #226998, 43px 43px #226998, 44px 44px #226998, 45px 45px #226998, 46px 46px #226998, 47px 47px #226998, 48px 48px #226998, 49px 49px #226998, 50px 50px #226998; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.skeuo { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) inset; background-image: url(data:image/png;base64,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); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); color: rgba(0, 0, 0, 0.35);
}
.button-group { font-size: 0; margin: 5px; display: inline-block;
}
.button-group .button { float: left; margin: 0; display: inline-block; font-size: 20px; border-radius: 0; border-right: 0;
}
.button-group .button.button-big { font-size: 35px; padding: 15px 25px;
}
.button-group .button.button-small { font-size: 12px; padding: 3px; font-weight: 100;
}
.button-group .button:first-child { border-radius: 4px 0 0 4px; border-right: 0;
}
.button-group .button:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid #111;
}
.row { display: block;
}
.row .desc { color: white; font-size: 16px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="row"> <div class="desc">Default</div> <i class="button">Diaspora</i> </div> <div class="row"> <div class="desc">Big with fontAwesome</div> <div class="button-group"> <button class="button dark button-big"> <i class="fa fa-link"></i> </button> <button class="button dark button-big"> <i class="fa fa-chain-broken"></i> </button> <button class="button dark button-big"> <i class="fa fa-save"></i> </button> <button class="button dark button-big"> <i class="fa fa-copy"></i> </button> <button class="button dark button-big"> <i class="fa fa-paste"></i> </button> </div> </div> <div class="row"> <div class="desc">Grouping and colors</div> <div class="button-group"> <i class="button blue"> <i class='fa fa-facebook'></i>
</i> <a href="" class="button uppercase blue"> Twitter </a> <b class="button red"> Github </b> <button class="button"> <i class="fa fa-github"></i> </button> <div class="button brown">Linkedin</div> <span class="button dark">my_</span> <u class="button light">Yahoo</u> <a class="button green">Reddit</a> </div> </div> <div class="row"> <div class="desc">Small</div> <div class="button-group"> <div class="button red button-small">Racing</div> <div class="button red button-small">Club</div> <div class="button red button-small">Colombes</div> </div> </div> <div class="row"> <div class="desc">Yellow</div> <div class="button-group"> <button class="button yellow">BMW</button> <button class="button yellow">Mercedes</button> </div> </div> <div class="row"> <div class="desc">Green</div> <div class="button-group"> <a href="" class="button green"> Paris </a> <b class="button green"> Saint </b> <button class="button green">Germain</button> </div> </div> <div class="row"> <div class="desc">Some Skeuo with noise</div> <div class="button-group"> <div class="button red uppercase skeuo">Ispum</div> <div class="skeuo button uppercase">Skeuo</div> <div class="button light skeuo">Jackie</div> </div> </div> <div class="row"> <div class="desc">Skeuo alone</div> <div class="button skeuo">Alone</div> </div> <div class="row"> <div class="desc">Mix skeuo long shadow and fontAwesome</div> <div class="button-group"> <button class="button skeuo yellow"> <i class="fa fa-check-square"></i> </button> <button class="button light"> <i class="fa fa-check-square-o"></i> </button> <button class="button skeuo light"> <i class="fa fa-square"></i> </button> </div> </div> <div class="row"> <div class="desc">text and fontAwesome</div> <div class="button-group"> <button class="button green"> <i class="fa fa-refresh"></i> Save</button> <button class="button red"> <i class="fa fa-ban"></i> Cancel</button> </div> </div> <div class="row"> <div class="button-group"> <div class="button blue"></div> <div class="button light"></div> <div class="button red"></div> </div> </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>

A Pen by jonathan de montalembert - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
body { background: #666; font-family: 'Open Sans', sans-serif; font-size: 20px;
}
.wrapper { margin: 10px;
}
.uppercase { text-transform: uppercase;
}
.button { margin: 5px; outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #345; color: #95aabf; text-shadow: 0px 0px #24303c, 1px 1px #24303c, 2px 2px #24303c, 3px 3px #24303c, 4px 4px #24303c, 5px 5px #24303c, 6px 6px #24303c, 7px 7px #24303c, 8px 8px #24303c, 9px 9px #24303c, 10px 10px #24303c, 11px 11px #24303c, 12px 12px #24303c, 13px 13px #24303c, 14px 14px #24303c, 15px 15px #24303c, 16px 16px #24303c, 17px 17px #24303c, 18px 18px #24303c, 19px 19px #24303c, 20px 20px #24303c, 21px 21px #24303c, 22px 22px #24303c, 23px 23px #24303c, 24px 24px #24303c, 25px 25px #24303c, 26px 26px #24303c, 27px 27px #24303c, 28px 28px #24303c, 29px 29px #24303c, 30px 30px #24303c, 31px 31px #24303c, 32px 32px #24303c, 33px 33px #24303c, 34px 34px #24303c, 35px 35px #24303c, 36px 36px #24303c, 37px 37px #24303c, 38px 38px #24303c, 39px 39px #24303c, 40px 40px #24303c, 41px 41px #24303c, 42px 42px #24303c, 43px 43px #24303c, 44px 44px #24303c, 45px 45px #24303c, 46px 46px #24303c, 47px 47px #24303c, 48px 48px #24303c, 49px 49px #24303c, 50px 50px #24303c; overflow: hidden; font-weight: 100; text-decoration: none; cursor: pointer; transition: all .4s linear;
}
.button.button-big { font-size: 50px;
}
.button.red { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #BB1C1C; color: #f3b0b0; text-shadow: 0px 0px #981717, 1px 1px #981717, 2px 2px #981717, 3px 3px #981717, 4px 4px #981717, 5px 5px #981717, 6px 6px #981717, 7px 7px #981717, 8px 8px #981717, 9px 9px #981717, 10px 10px #981717, 11px 11px #981717, 12px 12px #981717, 13px 13px #981717, 14px 14px #981717, 15px 15px #981717, 16px 16px #981717, 17px 17px #981717, 18px 18px #981717, 19px 19px #981717, 20px 20px #981717, 21px 21px #981717, 22px 22px #981717, 23px 23px #981717, 24px 24px #981717, 25px 25px #981717, 26px 26px #981717, 27px 27px #981717, 28px 28px #981717, 29px 29px #981717, 30px 30px #981717, 31px 31px #981717, 32px 32px #981717, 33px 33px #981717, 34px 34px #981717, 35px 35px #981717, 36px 36px #981717, 37px 37px #981717, 38px 38px #981717, 39px 39px #981717, 40px 40px #981717, 41px 41px #981717, 42px 42px #981717, 43px 43px #981717, 44px 44px #981717, 45px 45px #981717, 46px 46px #981717, 47px 47px #981717, 48px 48px #981717, 49px 49px #981717, 50px 50px #981717; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.brown { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #421414; color: #cc5656; text-shadow: 0px 0px #230b0b, 1px 1px #230b0b, 2px 2px #230b0b, 3px 3px #230b0b, 4px 4px #230b0b, 5px 5px #230b0b, 6px 6px #230b0b, 7px 7px #230b0b, 8px 8px #230b0b, 9px 9px #230b0b, 10px 10px #230b0b, 11px 11px #230b0b, 12px 12px #230b0b, 13px 13px #230b0b, 14px 14px #230b0b, 15px 15px #230b0b, 16px 16px #230b0b, 17px 17px #230b0b, 18px 18px #230b0b, 19px 19px #230b0b, 20px 20px #230b0b, 21px 21px #230b0b, 22px 22px #230b0b, 23px 23px #230b0b, 24px 24px #230b0b, 25px 25px #230b0b, 26px 26px #230b0b, 27px 27px #230b0b, 28px 28px #230b0b, 29px 29px #230b0b, 30px 30px #230b0b, 31px 31px #230b0b, 32px 32px #230b0b, 33px 33px #230b0b, 34px 34px #230b0b, 35px 35px #230b0b, 36px 36px #230b0b, 37px 37px #230b0b, 38px 38px #230b0b, 39px 39px #230b0b, 40px 40px #230b0b, 41px 41px #230b0b, 42px 42px #230b0b, 43px 43px #230b0b, 44px 44px #230b0b, 45px 45px #230b0b, 46px 46px #230b0b, 47px 47px #230b0b, 48px 48px #230b0b, 49px 49px #230b0b, 50px 50px #230b0b; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.dark { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #222; color: #888888; text-shadow: 0px 0px #0e0e0e, 1px 1px #0e0e0e, 2px 2px #0e0e0e, 3px 3px #0e0e0e, 4px 4px #0e0e0e, 5px 5px #0e0e0e, 6px 6px #0e0e0e, 7px 7px #0e0e0e, 8px 8px #0e0e0e, 9px 9px #0e0e0e, 10px 10px #0e0e0e, 11px 11px #0e0e0e, 12px 12px #0e0e0e, 13px 13px #0e0e0e, 14px 14px #0e0e0e, 15px 15px #0e0e0e, 16px 16px #0e0e0e, 17px 17px #0e0e0e, 18px 18px #0e0e0e, 19px 19px #0e0e0e, 20px 20px #0e0e0e, 21px 21px #0e0e0e, 22px 22px #0e0e0e, 23px 23px #0e0e0e, 24px 24px #0e0e0e, 25px 25px #0e0e0e, 26px 26px #0e0e0e, 27px 27px #0e0e0e, 28px 28px #0e0e0e, 29px 29px #0e0e0e, 30px 30px #0e0e0e, 31px 31px #0e0e0e, 32px 32px #0e0e0e, 33px 33px #0e0e0e, 34px 34px #0e0e0e, 35px 35px #0e0e0e, 36px 36px #0e0e0e, 37px 37px #0e0e0e, 38px 38px #0e0e0e, 39px 39px #0e0e0e, 40px 40px #0e0e0e, 41px 41px #0e0e0e, 42px 42px #0e0e0e, 43px 43px #0e0e0e, 44px 44px #0e0e0e, 45px 45px #0e0e0e, 46px 46px #0e0e0e, 47px 47px #0e0e0e, 48px 48px #0e0e0e, 49px 49px #0e0e0e, 50px 50px #0e0e0e; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.light { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #ecf0f1; color: #77939a; text-shadow: 0px 0px #d5dde0, 1px 1px #d5dde0, 2px 2px #d5dde0, 3px 3px #d5dde0, 4px 4px #d5dde0, 5px 5px #d5dde0, 6px 6px #d5dde0, 7px 7px #d5dde0, 8px 8px #d5dde0, 9px 9px #d5dde0, 10px 10px #d5dde0, 11px 11px #d5dde0, 12px 12px #d5dde0, 13px 13px #d5dde0, 14px 14px #d5dde0, 15px 15px #d5dde0, 16px 16px #d5dde0, 17px 17px #d5dde0, 18px 18px #d5dde0, 19px 19px #d5dde0, 20px 20px #d5dde0, 21px 21px #d5dde0, 22px 22px #d5dde0, 23px 23px #d5dde0, 24px 24px #d5dde0, 25px 25px #d5dde0, 26px 26px #d5dde0, 27px 27px #d5dde0, 28px 28px #d5dde0, 29px 29px #d5dde0, 30px 30px #d5dde0, 31px 31px #d5dde0, 32px 32px #d5dde0, 33px 33px #d5dde0, 34px 34px #d5dde0, 35px 35px #d5dde0, 36px 36px #d5dde0, 37px 37px #d5dde0, 38px 38px #d5dde0, 39px 39px #d5dde0, 40px 40px #d5dde0, 41px 41px #d5dde0, 42px 42px #d5dde0, 43px 43px #d5dde0, 44px 44px #d5dde0, 45px 45px #d5dde0, 46px 46px #d5dde0, 47px 47px #d5dde0, 48px 48px #d5dde0, 49px 49px #d5dde0, 50px 50px #d5dde0; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.green { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #27ae60; color: #b3eecc; text-shadow: 0px 0px #208d4e, 1px 1px #208d4e, 2px 2px #208d4e, 3px 3px #208d4e, 4px 4px #208d4e, 5px 5px #208d4e, 6px 6px #208d4e, 7px 7px #208d4e, 8px 8px #208d4e, 9px 9px #208d4e, 10px 10px #208d4e, 11px 11px #208d4e, 12px 12px #208d4e, 13px 13px #208d4e, 14px 14px #208d4e, 15px 15px #208d4e, 16px 16px #208d4e, 17px 17px #208d4e, 18px 18px #208d4e, 19px 19px #208d4e, 20px 20px #208d4e, 21px 21px #208d4e, 22px 22px #208d4e, 23px 23px #208d4e, 24px 24px #208d4e, 25px 25px #208d4e, 26px 26px #208d4e, 27px 27px #208d4e, 28px 28px #208d4e, 29px 29px #208d4e, 30px 30px #208d4e, 31px 31px #208d4e, 32px 32px #208d4e, 33px 33px #208d4e, 34px 34px #208d4e, 35px 35px #208d4e, 36px 36px #208d4e, 37px 37px #208d4e, 38px 38px #208d4e, 39px 39px #208d4e, 40px 40px #208d4e, 41px 41px #208d4e, 42px 42px #208d4e, 43px 43px #208d4e, 44px 44px #208d4e, 45px 45px #208d4e, 46px 46px #208d4e, 47px 47px #208d4e, 48px 48px #208d4e, 49px 49px #208d4e, 50px 50px #208d4e; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.yellow { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #f1c40f; color: #312803; text-shadow: 0px 0px #cba50c, 1px 1px #cba50c, 2px 2px #cba50c, 3px 3px #cba50c, 4px 4px #cba50c, 5px 5px #cba50c, 6px 6px #cba50c, 7px 7px #cba50c, 8px 8px #cba50c, 9px 9px #cba50c, 10px 10px #cba50c, 11px 11px #cba50c, 12px 12px #cba50c, 13px 13px #cba50c, 14px 14px #cba50c, 15px 15px #cba50c, 16px 16px #cba50c, 17px 17px #cba50c, 18px 18px #cba50c, 19px 19px #cba50c, 20px 20px #cba50c, 21px 21px #cba50c, 22px 22px #cba50c, 23px 23px #cba50c, 24px 24px #cba50c, 25px 25px #cba50c, 26px 26px #cba50c, 27px 27px #cba50c, 28px 28px #cba50c, 29px 29px #cba50c, 30px 30px #cba50c, 31px 31px #cba50c, 32px 32px #cba50c, 33px 33px #cba50c, 34px 34px #cba50c, 35px 35px #cba50c, 36px 36px #cba50c, 37px 37px #cba50c, 38px 38px #cba50c, 39px 39px #cba50c, 40px 40px #cba50c, 41px 41px #cba50c, 42px 42px #cba50c, 43px 43px #cba50c, 44px 44px #cba50c, 45px 45px #cba50c, 46px 46px #cba50c, 47px 47px #cba50c, 48px 48px #cba50c, 49px 49px #cba50c, 50px 50px #cba50c; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.blue { outline: none; display: inline-block; padding: 5px 10px; border: 1px solid #111; border-radius: 4px; background: #2980b9; color: #bedcf0; text-shadow: 0px 0px #226998, 1px 1px #226998, 2px 2px #226998, 3px 3px #226998, 4px 4px #226998, 5px 5px #226998, 6px 6px #226998, 7px 7px #226998, 8px 8px #226998, 9px 9px #226998, 10px 10px #226998, 11px 11px #226998, 12px 12px #226998, 13px 13px #226998, 14px 14px #226998, 15px 15px #226998, 16px 16px #226998, 17px 17px #226998, 18px 18px #226998, 19px 19px #226998, 20px 20px #226998, 21px 21px #226998, 22px 22px #226998, 23px 23px #226998, 24px 24px #226998, 25px 25px #226998, 26px 26px #226998, 27px 27px #226998, 28px 28px #226998, 29px 29px #226998, 30px 30px #226998, 31px 31px #226998, 32px 32px #226998, 33px 33px #226998, 34px 34px #226998, 35px 35px #226998, 36px 36px #226998, 37px 37px #226998, 38px 38px #226998, 39px 39px #226998, 40px 40px #226998, 41px 41px #226998, 42px 42px #226998, 43px 43px #226998, 44px 44px #226998, 45px 45px #226998, 46px 46px #226998, 47px 47px #226998, 48px 48px #226998, 49px 49px #226998, 50px 50px #226998; overflow: hidden; font-weight: 100; text-decoration: none;
}
.button.skeuo { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) inset; background-image: url(data:image/png;base64,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); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15); color: rgba(0, 0, 0, 0.35);
}
.button-group { font-size: 0; margin: 5px; display: inline-block;
}
.button-group .button { float: left; margin: 0; display: inline-block; font-size: 20px; border-radius: 0; border-right: 0;
}
.button-group .button.button-big { font-size: 35px; padding: 15px 25px;
}
.button-group .button.button-small { font-size: 12px; padding: 3px; font-weight: 100;
}
.button-group .button:first-child { border-radius: 4px 0 0 4px; border-right: 0;
}
.button-group .button:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid #111;
}
.row { display: block;
}
.row .desc { color: white; font-size: 16px;
}

A Pen by jonathan de montalembert - Script Codes JS Codes

// this is a draft in progress
/*
Feel free to: Buy it, use it, break it, fix it, Trash it, change it, mail - upgrade it, Charge it, point it, zoom it, press it, Snap it, work it, quick - erase it, Write it, cut it, paste it, save it, Load it, check it, quick - rewrite it, Plug it, play it, burn it, rip it, Drag and drop it, zip - unzip it, Lock it, fill it, call it, find it, View it, code it, jam - unlock it, Surf it, scroll it, pause it, click it, Cross it, crack it, switch - update it, Name it, rate it, tune it, print it, Scan it, send it, fax - rename it, Touch it, bring it, pay it, watch it, Turn it, leave it, start - format it.
*/
$('.button').on('click', function(){ $(this).toggleClass('skeuo'); return false;
})
A Pen by jonathan de montalembert - Script Codes
A Pen by jonathan de montalembert - Script Codes
Home Page Home
Developer Jonathan De Montalembert
Username roine
Uploaded July 10, 2022
Rating 3
Size 13,600 Kb
Views 34,408
Do you need developer help for A Pen by jonathan de montalembert?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jonathan De Montalembert (roine) Script Codes
Name
Demo animation with css for IKON FX
Shadows in css
A simple box with multicolor header
Slide windows
A simple pricing table
Very basic test on firebase
Alternative text on image not loaded with placehold.it
A Pen by jonathan de montalembert
A Pen by jonathan de montalembert
Tooltip in table
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!