CSS Dribbble invite request

Developer
Hugo Giraudel
Size
9,749 Kb
Views
24,288
  1. CSS Dribbble invite request Previews
  2. CSS Dribbble invite request HTML Codes
  3. CSS Dribbble invite request CSS Codes
  4. CSS Dribbble invite request JS Codes

How do I make an css dribbble invite request?

Pure CSS Dribbble logo. Pure CSS loader. Pure CSS animations. Pure CSS reflection and shadows effects. . What is a css dribbble invite request? How do you make a css dribbble invite request? This script and codes were developed by Hugo Giraudel on 22 October 2022, Saturday.

CSS Dribbble invite request Previews
IQ Test

CSS Dribbble invite request - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Dribbble invite request</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://tank-a-faire.com/codePen/fontAwesome/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(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
@import url(https://fonts.googleapis.com/css?family=Karla);
* { box-sizing: border-box;
}
hr { visibility: hidden; clear: both;
}
body { background: #333 url(https://codepen.io/images/classy_fabric.png); -webkit-font-smoothing: antialiased; font-family: 'Ubuntu', sans-serif; color: #FAFAFA; font-size: 16px; line-height: 1.4; text-shadow: 0 -1px 0 black;
}
.wrapper { width: 350px; margin: 30px auto; padding: 20px; position: relative; border-radius: 0.4em; border: 1px solid black; background: #353535; background: linear-gradient(45deg, #151515, #383838); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4), 0 0 150px 50px rgba(155, 155, 155, 0.1);
}
.wrapper:after { content: ""; position: absolute; height: 1px; width: 96%; background: white; background: -moz-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -ms-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -o-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#151515), color-stop(0.05, #464647), color-stop(0.2, #fff), color-stop(0.7, #4a4a4a)); background: -webkit-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: linear-gradient(to right, #151515, #464647 5%, #ffffff 20%, #4a4a4a 70%); top: 0; left: 2%;
}
.wrapper:before,
.topContent:before { content: ""; position: absolute; width: 38px; height: 1px; background: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -ms-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), to(transparent)); background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)); top: -1px; left: 15%;
}
.topContent { border-bottom: 1px solid rgba(0, 0, 0, 0.8); padding-bottom: 15px; z-index: 100; position: relative;
}
.topContent:before { top: -19px; left: 10%;
}
.topContent:after { content: ""; position: absolute; top: -21px; left: 16.5%; width: 3px; height: 3px; background: rgba(255, 255, 255, 0); border-radius: 50%; box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2); pointer-events: none;
}
.topContent h1 { font-size: 22px; width: 150px; float: left; padding-left: 20px; position: relative; padding-top: 7px;
}
.topContent h1 span { font-family: 'Pacifico', cursive; color: #c33269; font-size: 28px; text-shadow: 0 -1px 0 black, 0 1px 0 rgba(255, 255, 255, 0.15);
}
.topContent h1:after { width: 130px; height: 130px; border: 10px solid #c33269; position: absolute; content: ""; border-radius: 50%; pointer-events: none; top: 0; left: -150px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25), 0 0 5px 3px rgba(0, 0, 0, 0.2);
}
.bottomContent { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px;
}
.bottomContent:after { width: 260px; height: 160px; position: absolute; content: ""; background: rgba(0, 0, 0, 0.1); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); bottom: -20px; right: -20px; border-radius: 100% 0 0.5em 0 / 100% 0 0.5em 0;
}
.bottomContent p { font-size: 20px; text-align: center; margin-bottom: 20px; font-family: 'Karla', sans-serif;
}
.bottomContent p span { color: #fa76a7;
}
.bottomContent .btn { display: block; float: left; width: 100px; height: 100px; position: relative; z-index: 200; margin: 0 15px; text-align: center; text-transform: uppercase; font-size: 50px; color: #f894ba; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.5); text-decoration: none; background: #333; background: linear-gradient(#282828, #222222); background: #fd7dad; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 5px rgba(0, 0, 0, 0.4), 0 5px 5px rgba(0, 0, 0, 0.4), inset 0 -5px 3px rgba(0, 0, 0, 0.1), inset 0 5px 2px rgba(130, 130, 130, 0.1), inset 0 -100px 0 rgba(0, 0, 0, 0.25); transition: background 0.3s ease-in, color 0.3s ease-in, box-shadow 0.1s ease-out;
}
#yes .icone { line-height: 95px;
}
#no .icone { line-height: 90px;
}
.btn:active,
.btn:focus { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
}
#yes:hover { background: rgba(95, 154, 46, 0.5); color: white;
}
#no:hover { background: rgba(208, 34, 17, 0.5); color: white;
}
.bottomContent .btn:after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -1; border-radius: inherit; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.025)); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); pointer-events: none;
}
.bottomContent #yes { margin-left: 35px;
}
/* LOGO */
.ball { float: left; width: 150px; height: 150px; background: #fa76a7; background: linear-gradient(to right, #fd7dad, #ee558e); border-radius: 50%; border: 10px solid #c33269; overflow: hidden; position: relative; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); transition: all 0.1s ease-out;
}
.ball:hover { transform: rotate(20deg);
}
.ball:before { content: ""; width: 100px; height: 60px; border-radius: 50%; background: #fc96bd; position: absolute; left: 15px; top: 10px;
}
.ball:after { width: 500px; height: 500px; position: absolute; content: ""; border: inherit; border-radius: inherit; top: -74%; left: -320%; box-shadow: 3px 0 0 #f894ba;
}
.ball-element { display: block; border: inherit; z-index: 200; border-radius: inherit; width: 250px; height: 250px; position: absolute;
}
.be1 { left: -88%; top: -145%; box-shadow: 0 3px 0 #f894ba;
}
.ball-element:after,
.ball-element:before { content: ""; position: absolute; background: #c33269; width: 10px; height: 10px;
}
.be1:after { bottom: 0; left: 170px; transform: rotate(65deg);
}
.be1:before { transform: rotate(40deg); bottom: 35px; left: 210px;
}
.be2 { left: -7%; top: 41%; box-shadow: inset 0 3px 0 #f894ba;
}
.be2:after { top: 50px; transform: rotate(40deg); left: 14px;
}
.be2:before { top: 1px; transform: rotate(70deg); left: 75px;
}
.simpleContainer { transition: opacity .3s ease-out, transform .3s ease-out, -webkit-filter .3s ease-out, filter .3s ease-out; height: 150px;
}
.hideMe { transform: translate(0, -150px); opacity: 0; -webkit-filter: blur(15px);
}
.simpleContainer.hideMe #yes { transition: all .3s ease-out; transform: translate(-150px, 150px);
}
.simpleContainer.hideMe #no { transition: all .3s ease-out; transform: translate(150px, 150px);
}
.loader { position: relative; padding-top: 30px;
}
.loader li { width: 8px; height: 20px; background: white; border-radius: 30px; position: absolute; top: 40px; left: 46px;
}
.loader ul { animation: spinner 2s steps(12, end) infinite; position: relative; width: 100px; height: 100px; margin: 0 auto 20px auto;
}
.loader li:nth-child(1) { transform: rotate(30deg) translate(0, -30px); background: #fff;
}
.loader li:nth-child(2) { transform: rotate(60deg) translate(0, -30px); background: #e8e8e8;
}
.loader li:nth-child(3) { transform: rotate(90deg) translate(0, -30px); background: #dedede;
}
.loader li:nth-child(4) { transform: rotate(120deg) translate(0, -30px); background: #d2d2d2;
}
.loader li:nth-child(5) { transform: rotate(150deg) translate(0, -30px); background: #bdbdbd;
}
.loader li:nth-child(6) { transform: rotate(180deg) translate(0, -30px); background: #a3a3a3;
}
.loader li:nth-child(7) { transform: rotate(210deg) translate(0, -30px); background: #767676;
}
.loader li:nth-child(8) { transform: rotate(240deg) translate(0, -30px); background: #616161;
}
.loader li:nth-child(9) { transform: rotate(270deg) translate(0, -30px); background: #505050;
}
.loader li:nth-child(10) { transform: rotate(300deg) translate(0, -30px); background: #494949;
}
.loader li:nth-child(11) { transform: rotate(330deg) translate(0, -30px); background: #424242;
}
.loader li:nth-child(12) { transform: rotate(0deg) translate(0, -30px); background: #383838;
}
@keyframes spinner { 0% { transform: rotate(0deg) scale(0.6); } 100% { transform: rotate(-360deg) scale(0.6); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="topContent"> <div class="ball"> <span class="ball-element be1"></span> <span class="ball-element be2"></span> </div> <h1>I would like to join the <span>dribbble</span> community.</h1> <hr> </div> <div class="bottomContent"> <div class="simpleContainer"> <p>Could you <span>invite</span> me please ?</p> <a class="btn" id="yes" href="#"><i class="icone icon-thumbs-up"></i></a> <a class="btn" id="no" href="#"><i class="icone icon-thumbs-down"></i></a> <hr> </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>

CSS Dribbble invite request - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
@import url(https://fonts.googleapis.com/css?family=Karla);
* { box-sizing: border-box;
}
hr { visibility: hidden; clear: both;
}
body { background: #333 url(https://codepen.io/images/classy_fabric.png); -webkit-font-smoothing: antialiased; font-family: 'Ubuntu', sans-serif; color: #FAFAFA; font-size: 16px; line-height: 1.4; text-shadow: 0 -1px 0 black;
}
.wrapper { width: 350px; margin: 30px auto; padding: 20px; position: relative; border-radius: 0.4em; border: 1px solid black; background: #353535; background: linear-gradient(45deg, #151515, #383838); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4), 0 0 150px 50px rgba(155, 155, 155, 0.1);
}
.wrapper:after { content: ""; position: absolute; height: 1px; width: 96%; background: white; background: -moz-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -ms-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -o-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#151515), color-stop(0.05, #464647), color-stop(0.2, #fff), color-stop(0.7, #4a4a4a)); background: -webkit-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: linear-gradient(to right, #151515, #464647 5%, #ffffff 20%, #4a4a4a 70%); top: 0; left: 2%;
}
.wrapper:before,
.topContent:before { content: ""; position: absolute; width: 38px; height: 1px; background: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -ms-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), to(transparent)); background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)); top: -1px; left: 15%;
}
.topContent { border-bottom: 1px solid rgba(0, 0, 0, 0.8); padding-bottom: 15px; z-index: 100; position: relative;
}
.topContent:before { top: -19px; left: 10%;
}
.topContent:after { content: ""; position: absolute; top: -21px; left: 16.5%; width: 3px; height: 3px; background: rgba(255, 255, 255, 0); border-radius: 50%; box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2); pointer-events: none;
}
.topContent h1 { font-size: 22px; width: 150px; float: left; padding-left: 20px; position: relative; padding-top: 7px;
}
.topContent h1 span { font-family: 'Pacifico', cursive; color: #c33269; font-size: 28px; text-shadow: 0 -1px 0 black, 0 1px 0 rgba(255, 255, 255, 0.15);
}
.topContent h1:after { width: 130px; height: 130px; border: 10px solid #c33269; position: absolute; content: ""; border-radius: 50%; pointer-events: none; top: 0; left: -150px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25), 0 0 5px 3px rgba(0, 0, 0, 0.2);
}
.bottomContent { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px;
}
.bottomContent:after { width: 260px; height: 160px; position: absolute; content: ""; background: rgba(0, 0, 0, 0.1); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); bottom: -20px; right: -20px; border-radius: 100% 0 0.5em 0 / 100% 0 0.5em 0;
}
.bottomContent p { font-size: 20px; text-align: center; margin-bottom: 20px; font-family: 'Karla', sans-serif;
}
.bottomContent p span { color: #fa76a7;
}
.bottomContent .btn { display: block; float: left; width: 100px; height: 100px; position: relative; z-index: 200; margin: 0 15px; text-align: center; text-transform: uppercase; font-size: 50px; color: #f894ba; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.5); text-decoration: none; background: #333; background: linear-gradient(#282828, #222222); background: #fd7dad; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 5px rgba(0, 0, 0, 0.4), 0 5px 5px rgba(0, 0, 0, 0.4), inset 0 -5px 3px rgba(0, 0, 0, 0.1), inset 0 5px 2px rgba(130, 130, 130, 0.1), inset 0 -100px 0 rgba(0, 0, 0, 0.25); transition: background 0.3s ease-in, color 0.3s ease-in, box-shadow 0.1s ease-out;
}
#yes .icone { line-height: 95px;
}
#no .icone { line-height: 90px;
}
.btn:active,
.btn:focus { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
}
#yes:hover { background: rgba(95, 154, 46, 0.5); color: white;
}
#no:hover { background: rgba(208, 34, 17, 0.5); color: white;
}
.bottomContent .btn:after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -1; border-radius: inherit; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.025)); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); pointer-events: none;
}
.bottomContent #yes { margin-left: 35px;
}
/* LOGO */
.ball { float: left; width: 150px; height: 150px; background: #fa76a7; background: linear-gradient(to right, #fd7dad, #ee558e); border-radius: 50%; border: 10px solid #c33269; overflow: hidden; position: relative; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); transition: all 0.1s ease-out;
}
.ball:hover { transform: rotate(20deg);
}
.ball:before { content: ""; width: 100px; height: 60px; border-radius: 50%; background: #fc96bd; position: absolute; left: 15px; top: 10px;
}
.ball:after { width: 500px; height: 500px; position: absolute; content: ""; border: inherit; border-radius: inherit; top: -74%; left: -320%; box-shadow: 3px 0 0 #f894ba;
}
.ball-element { display: block; border: inherit; z-index: 200; border-radius: inherit; width: 250px; height: 250px; position: absolute;
}
.be1 { left: -88%; top: -145%; box-shadow: 0 3px 0 #f894ba;
}
.ball-element:after,
.ball-element:before { content: ""; position: absolute; background: #c33269; width: 10px; height: 10px;
}
.be1:after { bottom: 0; left: 170px; transform: rotate(65deg);
}
.be1:before { transform: rotate(40deg); bottom: 35px; left: 210px;
}
.be2 { left: -7%; top: 41%; box-shadow: inset 0 3px 0 #f894ba;
}
.be2:after { top: 50px; transform: rotate(40deg); left: 14px;
}
.be2:before { top: 1px; transform: rotate(70deg); left: 75px;
}
.simpleContainer { transition: opacity .3s ease-out, transform .3s ease-out, -webkit-filter .3s ease-out, filter .3s ease-out; height: 150px;
}
.hideMe { transform: translate(0, -150px); opacity: 0; -webkit-filter: blur(15px);
}
.simpleContainer.hideMe #yes { transition: all .3s ease-out; transform: translate(-150px, 150px);
}
.simpleContainer.hideMe #no { transition: all .3s ease-out; transform: translate(150px, 150px);
}
.loader { position: relative; padding-top: 30px;
}
.loader li { width: 8px; height: 20px; background: white; border-radius: 30px; position: absolute; top: 40px; left: 46px;
}
.loader ul { animation: spinner 2s steps(12, end) infinite; position: relative; width: 100px; height: 100px; margin: 0 auto 20px auto;
}
.loader li:nth-child(1) { transform: rotate(30deg) translate(0, -30px); background: #fff;
}
.loader li:nth-child(2) { transform: rotate(60deg) translate(0, -30px); background: #e8e8e8;
}
.loader li:nth-child(3) { transform: rotate(90deg) translate(0, -30px); background: #dedede;
}
.loader li:nth-child(4) { transform: rotate(120deg) translate(0, -30px); background: #d2d2d2;
}
.loader li:nth-child(5) { transform: rotate(150deg) translate(0, -30px); background: #bdbdbd;
}
.loader li:nth-child(6) { transform: rotate(180deg) translate(0, -30px); background: #a3a3a3;
}
.loader li:nth-child(7) { transform: rotate(210deg) translate(0, -30px); background: #767676;
}
.loader li:nth-child(8) { transform: rotate(240deg) translate(0, -30px); background: #616161;
}
.loader li:nth-child(9) { transform: rotate(270deg) translate(0, -30px); background: #505050;
}
.loader li:nth-child(10) { transform: rotate(300deg) translate(0, -30px); background: #494949;
}
.loader li:nth-child(11) { transform: rotate(330deg) translate(0, -30px); background: #424242;
}
.loader li:nth-child(12) { transform: rotate(0deg) translate(0, -30px); background: #383838;
}
@keyframes spinner { 0% { transform: rotate(0deg) scale(0.6); } 100% { transform: rotate(-360deg) scale(0.6); }
}

CSS Dribbble invite request - Script Codes JS Codes

// Elements
var button_yes = $('#yes'), button_no = $('#no'), content_area = $('.bottomContent'), loader = $('<div class="loader"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>'), response = $('<p></p>');
// Messages
var message_yes = 'Thank you! <br><br> Please send me your invite at <span>hugo.giraudel<i class="icon-envelope"></i>gmail.com</span>', message_no = '*Sad panda* <br><br> <span>{x}</span> persons don\'t like me!';
/** * Holds the elements to be changed. */
var Container = { el : $('.simpleContainer'), hide : function() { this.el.addClass('hideMe'); }, setContent : function(content) { this.el.html(''); this.el.append(content); this.el.removeClass('hideMe'); }
};
button_yes.click(function(e) { request({answer : 1});
});
button_no.click(function(e) { request({answer : 0});
});
/** * Handle the answer: - update database count - remove current content - add content based on the given answer */
function request(args) { Container.hide(); setTimeout(function() { Container.setContent(loader); $.ajax({ dataType: 'jsonp', jsonp: 'jsonp', data: { answer: args.answer }, // Just an ultra simple script to increase the answer count url: 'http://timpietrusky.koding.com/codepen/hugos-dribbble-invite', success: function(data) { Container.hide(); setTimeout(function() { if (data.success) { // Yes if (args.answer) { message_yes = message_yes.replace('{x}', data.data.yes); response.html(message_yes); // No } else { message_no = message_no.replace('{x}', data.data.no); response.html(message_no); } response.prepend('<br>'); Container.setContent(response); } }, 500); } }); }, 300);
}
CSS Dribbble invite request - Script Codes
CSS Dribbble invite request - Script Codes
Home Page Home
Developer Hugo Giraudel
Username HugoGiraudel
Uploaded October 22, 2022
Rating 4.5
Size 9,749 Kb
Views 24,288
Do you need developer help for CSS Dribbble invite request?

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!

Hugo Giraudel (HugoGiraudel) Script Codes
Name
Batman loader
Database CRUD JS Class
Demo Flexbox 1
Sass mixin for scrollbar styling
Batman login form
CSS temperature controler
Social swatchbook
Off-canvas navigation
Google Fonts Sass Mixin
CSS power button
Create amazing blog posts 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!