Codepen Pens
How do I make an codepen pens?
Its just a modal window which will popup when you hover over colored portion of div then click on either delete or add to collection.. What is a codepen pens? How do you make a codepen pens? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.
Codepen Pens - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codepen Pens</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <div class="modal-message" style="display: none;"> <h1>Delete Confirmation</h1> <p>This will permanently delete your Pen, along with all its hearts and comments.</p> <p class="modal-buttons"> <a href="#">I Understand, Delete My Pen</a> <a href="#">Cancel</a> </p> </div> <div class="row"> <div class="col-sm-4"> <div class="main-grid animated fadeInDown"> <div class="content content1 text-center"> <p>Calculator</p> <span>Hover on the colored area then click on delete or add to collection. Modal window will pop up</span> <div class="content-overlay"> <div class="pen-action"> <a href="#" class="button add">+ Add to Collection</a> <a href="#" class="button remove">x Delete</a> </div> </div> </div> <div class="content-details"> <h3 class="content-title">A Pen by Tushar Mehrotra</h3> <p class="text-right">Calculator</p> </div> </div> </div> <div class="col-sm-4"> <div class="main-grid animated fadeInDown"> <div class="content content2 text-center"> <p>Subscribe Form</p> <span>Hover on the colored area then click on delete or add to collection. Modal window will pop up</span> <div class="content-overlay"> <div class="pen-action"> <a href="#" class="button add">+ Add to Collection</a> <a href="#" class="button remove">x Delete</a> </div> </div> </div> <div class="content-details"> <h3 class="content-title">A Pen by Tushar Mehrotra</h3> <p class="text-right">Subscribe Form</p> </div> </div> </div> <div class="col-sm-4"> <div class="main-grid animated fadeInDown"> <div class="content content3 text-center"> <p>Sign In Form</p> <span>Hover on the colored area then click on delete or add to collection. Modal window will pop up</span> <div class="content-overlay"> <div class="pen-action"> <a href="#" class="button add">+ Add to Collection</a> <a href="#" class="button remove">x Delete</a> </div> </div> </div> <div class="content-details"> <h3 class="content-title">A Pen by Tushar Mehrotra</h3> <p class="text-right">SignIn Form</p> </div> </div> </div> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Codepen Pens - Script Codes CSS Codes
body{ background: #555; position: relative;
}
div.row{ margin: 20px 0;
}
.main-grid{ height: 250px; width: 98%; margin: 0 auto 10px; padding: 10px; background: #333; margin-right: 5px;
}
.content{ height: 170px; width: 98%; margin: 0 auto; background: #ffae12; position: relative;
}
.content p{ display: inline-block; color: #fff; font-size: 19px; font-weight: bold;
}
.content span{ color: #fff; font-size: 17px; font-weight: bold; display: inline-block; margin:10px;
}
.content1{ background: #3498db;
}
.content2{ background: #2ecc71;
}
.content3{ background: #e74c3c;
}
.content-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.15s ease; background: rgba(68,68,68,0.95);
}
.content-overlay:hover{ opacity: 1;
}
.pen-action{ position: absolute; bottom: 0; z-index: 1; text-align: center; padding-bottom: 10px; border-bottom: 3px solid #0ebeff; width: 100%;
}
.content2 .pen-action{ border-bottom: 3px solid #2ecc71;
}
.content3 .pen-action{ border-bottom: 3px solid #e74c3c;
}
.pen-action .button{ background: #000; padding: 3px 3px; color: #fff; margin-bottom: 13px; font-size: 10px; font-family: "Lato", Tahoma; border-radius: 3px;
}
.content-details{ color: #999; width: 98%; margin: 0 auto; font-family: "Lato", Tahoma;
}
.content-details h3{ font-size: 14px; margin-top: 4px; font-weight: bold;
}
.modal-message{ position: fixed; width: 600px; min-width: 320px; left: 50%; top: 10px; height: auto; margin-left: -300px; background: #000; color: #fff; z-index: 301; border: 10px solid #e74c3c; padding: 10px
}
.modal-message h1{ font-family: "Telefon Black", Sans-Serif; font-weight: bold;
}
.modal-message p{ margin-bottom: 15px; color: #999;
}
.modal-message a{ color: #fff; background: #555; padding: 10px; margin: 10px 5px; border-radius: 3px;
}
.modal-message a:hover{ text-decoration: none;
}
.modal-message a:nth-child(1){ background: #ff3c41;
}
.modal-message a:nth-child(1):hover{ background: #ff090f;
}
.modal-message a:nth-child(2):hover{ background: #333;
}
Codepen Pens - Script Codes JS Codes
$(".main-grid a").on("click",function(){ var action = $(this).attr("class"); if(action == "button add"){ $(this).parents(".container").children(".modal-message").css({"display":"block","border":"10px solid #2ecc71"}).find(".modal-buttons a:nth-child(1)").css('background','#2ecc71'); } if(action == "button remove"){ $(this).parents(".container").children(".modal-message").css({"display":"block","border":"10px solid #e74c3c"}).find(".modal-buttons a:nth-child(1)").css('background','#e74c3c'); }
});
$(".modal-message a:nth-child(2)").on("click",function(){ $(this).parents(".modal-message").css("display","none");
});
Developer | Tushar Mehrotra |
Username | MTushar |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 3,066 Kb |
Views | 34,408 |
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!
Name | Size |
Portfolio | 2,739 Kb |
Vertical timeline page | 2,267 Kb |
Jquery datepicker | 1,497 Kb |
AngularJS Form Validation | 2,896 Kb |
React JS add project | 3,543 Kb |
Form Email validation | 2,148 Kb |
CSS3 Pricing Table | 3,923 Kb |
Hamburger menu animation | 2,469 Kb |
Less Color Functions | 3,495 Kb |
Full Page JS jQuery Plugin | 2,029 Kb |
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!
Name | Username | Size |
Collapsing Widget | Er40 | 4,279 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Welcome | Nakome | 6,076 Kb |
Html5-canvas-snow-effect | MariamMassadeh | 2,609 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Calendar | Miroot | 2,033 Kb |
Social buttons | Flacu | 2,022 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!