Day 21 - Interactive Dribbble Invite Modal

Developer
Andy Tran
Size
7,096 Kb
Views
24,288
  1. Day 21 - Interactive Dribbble Invite Modal Previews
  2. Day 21 - Interactive Dribbble Invite Modal HTML Codes
  3. Day 21 - Interactive Dribbble Invite Modal CSS Codes
  4. Day 21 - Interactive Dribbble Invite Modal JS Codes

How do I make an day 21 - interactive dribbble invite modal?

This week I decided to create Paul Flavius Nechita's Day 21 UI, which is a Dribbble Invite Modal.. What is a day 21 - interactive dribbble invite modal? How do you make a day 21 - interactive dribbble invite modal? This script and codes were developed by Andy Tran on 22 October 2022, Saturday.

Day 21 - Interactive Dribbble Invite Modal Previews
IQ Test

Day 21 - Interactive Dribbble Invite Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 21 - Interactive Dribbble Invite Modal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,600,700,800'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="modal"> <header class="header"> <h1>Invite people to Dribbble</h1><span>2 Invites Available</span> </header> <div class="search"> <div class="input-form"> <input/> </div> <button></button> </div> <div class="content"> <!-- Row One--> <div class="row"> <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/profile/profile-512_13.jpg"/></div> <div class="description"> <h2>Andy Tran</h2> <p class="meta">HTML, CSS, JavaScript</p> <p><span class="location">San Jose</span><a class="website" href="#">andytran.me</a></p> </div> <div class="select"> <div class="dribbble"><span></span></div> </div> </div> <!-- Row Two--> <div class="row"> <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/profile/profile-512_21.jpg"/></div> <div class="description"> <h2>Chris Coyier</h2> <p class="meta">HTML, CSS, JavaScript, CodePen, Sweg</p> <p><span class="location">Unknown</span><a class="website" href="#">github.com/chriscoyier</a></p> </div> <div class="select"> <div class="dribbble selected"><span></span></div> </div> </div> <!-- Row Three--> <div class="row"> <div class="thumbnail"><img src="https://assets.codepen.io/assets/about/about-timsabat.jpg"/></div> <div class="description"> <h2>Tim Sabat</h2> <p class="meta">HTML, CSS, JavaScript, CodePen, Sweg</p> <p><span class="location">Unknown</span><a class="website" href="#">boomboomboom.biz</a></p> </div> <div class="select"> <div class="dribbble"><span></span></div> </div> </div> </div> <footer class="footer"> <input type="text" placeholder="Send invite by e-mail"/> <button class="submit">Send Invite</button> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://codepen.io/andytran/pen/yYMobm.js'></script> <script src="js/index.js"></script>
</body>
</html>

Day 21 - Interactive Dribbble Invite Modal - Script Codes CSS Codes

body { background: #F2F2F2; padding: 40px; color: rgba(0, 0, 0, 0.6); font-family: 'Roboto', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body:before { content: ''; position: fixed; top: 0; left: 0; display: block; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%;
}
::-moz-selection { background: #E84F89;
}
::selection { background: #E84F89;
}
.modal { z-index: 1000; position: relative; background: #FFF; max-width: 600px; border-radius: 6px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); box-sizing: border-box; margin: 0 auto; padding: 60px; overflow: hidden;
}
.header { margin: 0 0 40px; color: #E84F89; text-align: center;
}
.header h1 { margin: 0 0 10px; color: rgba(0, 0, 0, 0.8); font-size: 30px; font-weight: 600;
}
.header span { color: rgba(0, 0, 0, 0.4);
}
.search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0 0 20px;
}
.search .input-form { position: relative; width: 100%; overflow: hidden;
}
.search .input-form:before, .search .input-form:after { content: ''; position: absolute; bottom: 0; left: 50%; display: none; background: #E84F89; width: 20%; height: 2px;
}
.search .input-form:after { left: auto; right: 50%;
}
.search .input-form.focused:before, .search .input-form.focused:after { display: block;
}
.search .input-form.focused:before { -webkit-animation: slidingLeft 2s infinite; animation: slidingLeft 2s infinite;
}
.search .input-form.focused:after { -webkit-animation: slidingRight 2s infinite; animation: slidingRight 2s infinite;
}
.search input { outline: none; background: 0; width: 100%; height: 100%; border: 0; border-bottom: 1px solid #EDEDED; padding: 5px 10px;
}
.search button { outline: none; position: relative; background: 0; display: block; width: 20px; height: 20px; border: 0; margin: 0 0 0 10px; cursor: pointer;
}
.search button:before, .search button:after { content: ''; display: block; width: 1px;
}
.search button:before { width: 14px; height: 14px; border: 1px solid #DEDEDE; border-radius: 100%; box-sizing: border-box;
}
.search button:after { position: absolute; right: 0; bottom: 0; background: #DEDEDE; height: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; margin: 20px 0;
}
.thumbnail { width: 80px; min-width: 80px; height: 80px; border-radius: 100%; margin: 0 40px 0 0; overflow: hidden;
}
.thumbnail img { display: block; width: 100%;
}
.description { width: 100%;
}
.description h2 { display: block; margin: 0 0 10px; color: #85B754; font-size: 18px;
}
.description .meta { margin: 0 0 10px; color: #E1E1E1; font-size: 12px;
}
.description .location { margin: 0 10px 0 0; color: #9A9A9A;
}
.description .website { color: #343434; text-decoration: none;
}
.dribbble, .dribbble:before, .dribbble:after, .dribbble span { position: relative; width: 20px; height: 20px; border: 2px solid #DEDEDE; border-radius: 100%; -webkit-transition: 0.3s ease; transition: 0.3s ease; overflow: hidden; cursor: pointer;
}
.dribbble:before, .dribbble:after, .dribbble span, .dribbble:before span { content: ''; position: absolute; top: -100px; left: -100px; display: block;
}
.dribbble:after { right: -100px; bottom: -100px;
}
.dribbble span, .dribbble:before span, .dribbble:after span { top: -100px; left: -100px; height: 30px;
}
.dribbble.selected, .selected.dribbble:before, .selected.dribbble:after, .dribbble span.selected { border-color: #E84F89;
}
.dribbble.selected:before, .selected.dribbble:after, .dribbble span.selected, .dribbble:before span.selected { top: -14px; left: -6px;
}
.dribbble.selected:after { top: auto; right: -6px; bottom: -14px; left: auto;
}
.dribbble.selected span, .selected.dribbble:before span, .selected.dribbble:after span, .dribbble span.selected span { top: -5px; left: -11px; height: 50px; border-color: #E84F89;
}
.footer .dribbble, .footer .dribbble:before, .footer .dribbble:after, .footer .dribbble span, .dribbble .footer span { border-color: #FFF !important;
}
.footer .dribbble span, .footer .dribbble:before span, .footer .dribbble:after span, .dribbble .footer span span { border-color: #FFF !important;
}
.footer { margin: 20px 0 0;
}
.footer input { width: 100%; border: 1px solid #DEDEDE; border-radius: 4px; box-sizing: border-box; margin: 0 0 20px; padding: 20px; font-family: inherit; font-size: 14px; font-weight: inherit; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.footer input:focus { border-color: #E84F89;
}
.footer button { outline: none; position: relative; background: #E84F89; width: 100%; border: 0; border-radius: 3px; box-sizing: border-box; padding: 20px; color: #FFF; font-size: 18px; font-weight: 600; text-transform: uppercase; cursor: pointer;
}
.footer button.success { position: absolute; top: 50%; left: 50%; color: #E84F89; -webkit-transform: translate(-50%, -50%) scale(100); transform: translate(-50%, -50%) scale(100); -webkit-animation: successContainer 10s ease; animation: successContainer 10s ease;
}
.footer button .dribbble, .footer button .dribbble:before, .footer button .dribbble:after, .footer button .dribbble span, .dribbble .footer button span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-indent: -9999px; -webkit-animation: dribbble 10s ease; animation: dribbble 10s ease; opacity: 0;
}
.footer button .dribbble:before, .footer button .dribbble:after, .footer button .dribbble span, .dribbble .footer button span, .footer button .dribbble:before span, .dribbble:before .footer button span { top: -14px !important; left: -6px !important; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); -webkit-animation: none; animation: none; opacity: 1;
}
.footer button .dribbble:after { top: auto !important; right: -6px !important; bottom: -14px !important; left: auto !important; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); -webkit-animation: none; animation: none; opacity: 1;
}
.footer button .dribbble span, .footer button .dribbble:before span, .footer button .dribbble:after span, .dribbble .footer button span span { top: -5px !important; left: -11px !important; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); -webkit-animation: none; animation: none; opacity: 1;
}
.message { position: absolute; top: 50%; left: 0; width: 100%; padding: 60px; box-sizing: border-box; text-align: center; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-animation: message 10s ease; animation: message 10s ease;
}
.message .dribbble, .message .dribbble:before, .message .dribbble:after, .message .dribbble span, .dribbble .message span { position: relative; margin: 0 auto 160px; border-color: #FFF; -webkit-transform: scale(6); transform: scale(6); -webkit-transform-origin: top; transform-origin: top;
}
.message .dribbble:before, .message .dribbble:after, .message .dribbble span, .dribbble .message span, .message .dribbble:before span, .dribbble:before .message span, .message .dribbble:after,
.message .dribbble span,
.message .dribbble:before span,
.message .dribbble:after span,
.dribbble .message span span { margin: 0; position: absolute; border-color: #FFF; -webkit-transform: scale(1); transform: scale(1);
}
.message h1 { margin: 0 0 10px; color: #FFF; font-size: 24px; font-weight: 600; -webkit-animation: messageH1 10s ease; animation: messageH1 10s ease;
}
.message span { color: #FFF; -webkit-animation: messageSpan 10s ease; animation: messageSpan 10s ease;
}
.message span a { color: #FFF;
}
@-webkit-keyframes message { 0% { top: 0; opacity: 0; } 25% { opacity: 0; } 30% { top: 50%; opacity: 1; }
}
@keyframes message { 0% { top: 0; opacity: 0; } 25% { opacity: 0; } 30% { top: 50%; opacity: 1; }
}
@-webkit-keyframes dribbble { 0% { opacity: 0; } 4% { opacity: 0; } 5% { opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 19% { opacity: 1; } 20% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate(-50%, -50%) rotate(720deg); transform: translate(-50%, -50%) rotate(720deg); opacity: 0; }
}
@keyframes dribbble { 0% { opacity: 0; } 4% { opacity: 0; } 5% { opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 19% { opacity: 1; } 20% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate(-50%, -50%) rotate(720deg); transform: translate(-50%, -50%) rotate(720deg); opacity: 0; }
}
@-webkit-keyframes successContainer { 0% { position: relative; top: 0; left: 0; height: 60px; color: #E84F89; margin: 0 auto; padding: 0; border-radius: 4px; -webkit-transform: translate(0%, 0%) scale(1); transform: translate(0%, 0%) scale(1); overflow: hidden; } 5% { width: 60px; border-radius: 100px; } 10% { width: 60px; height: 60px; margin: 0 auto; border-radius: 100px; color: #E84F89; -webkit-transform: translate(0%, 0%) scale(1); transform: translate(0%, 0%) scale(1); } 20% { width: 60px; height: 60px; top: 0; left: 0; border-radius: 100%; margin: 0 auto; padding: 0; -webkit-transform: translate(0%, 0%) scale(1); transform: translate(0%, 0%) scale(1); } 40% { -webkit-transform: translate(-50%, -50%) scale(100); transform: translate(-50%, -50%) scale(100); }
}
@keyframes successContainer { 0% { position: relative; top: 0; left: 0; height: 60px; color: #E84F89; margin: 0 auto; padding: 0; border-radius: 4px; -webkit-transform: translate(0%, 0%) scale(1); transform: translate(0%, 0%) scale(1); overflow: hidden; } 5% { width: 60px; border-radius: 100px; } 10% { width: 60px; height: 60px; margin: 0 auto; border-radius: 100px; color: #E84F89; -webkit-transform: translate(0%, 0%) scale(1); transform: translate(0%, 0%) scale(1); } 20% { width: 60px; height: 60px; top: 0; left: 0; border-radius: 100%; margin: 0 auto; padding: 0; -webkit-transform: translate(0%, 0%) scale(1); transform: translate(0%, 0%) scale(1); } 40% { -webkit-transform: translate(-50%, -50%) scale(100); transform: translate(-50%, -50%) scale(100); }
}
@-webkit-keyframes slidingLeft { 0% { left: 50%; width: 0%; opacity: 0; } 5% { left: 50%; width: 0%; } 20% { width: 20%; opacity: 1; } 100% { left: -100%; }
}
@keyframes slidingLeft { 0% { left: 50%; width: 0%; opacity: 0; } 5% { left: 50%; width: 0%; } 20% { width: 20%; opacity: 1; } 100% { left: -100%; }
}
@-webkit-keyframes slidingRight { 0% { right: 50%; width: 0%; opacity: 0; } 5% { right: 50%; width: 0%; } 20% { width: 20%; opacity: 1; } 100% { right: -100%; }
}
@keyframes slidingRight { 0% { right: 50%; width: 0%; opacity: 0; } 5% { right: 50%; width: 0%; } 20% { width: 20%; opacity: 1; } 100% { right: -100%; }
}

Day 21 - Interactive Dribbble Invite Modal - Script Codes JS Codes

$('.input-form input').on('focus', function() { $('.input-form').addClass('focused');
});
$('.input-form input').on('blur', function() { $('.input-form').removeClass('focused');
});
$('.dribbble').on('click', function() { $(this).toggleClass('selected');
});
$('.submit').on('click', function() { $(this).addClass('success'); $('<div class="dribbble selected"><span></span></div>').appendTo(this); $('<div class="message"> <div class="dribbble selected"><span></span></div> <h1>Your invite(s) have been sent out.</h1><span>To view your available invites, please follow this <a href="#">link</a>.</span> </div>').appendTo('.modal');
});
Day 21 - Interactive Dribbble Invite Modal - Script Codes
Day 21 - Interactive Dribbble Invite Modal - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded October 22, 2022
Rating 4.5
Size 7,096 Kb
Views 24,288
Do you need developer help for Day 21 - Interactive Dribbble Invite Modal?

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!

Andy Tran (andytran) Script Codes
Name
Flat Navigation
Code Module - Slide In Banner
Macbook Pro Demo
Planner Dashboard
Flat Horizontal Navigation
Minion Animation
Day 23 - Interactive Wallet
Pure CSS - Menu App
Flat Pricing Table
Material Playing Cards
Create amazing art & images 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!