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");
});
![Codepen Pens - Script Codes](http://shots.codepen.io/MTushar/pen/RWvWag-512.jpg)
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 |
Simple chatbot javascript | 2,442 Kb |
React JS add project | 3,543 Kb |
A Pen by Tushar Mehrotra | 2,043 Kb |
Random Programming Quote Generator | 5,855 Kb |
AngularJS Directives | 2,734 Kb |
CSS3 Pricing Table | 3,923 Kb |
AngularJS Form Validation | 2,896 Kb |
Less Color Functions | 3,495 Kb |
Jquery datepicker | 1,497 Kb |
JS Calculator | 3,213 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 |
Fading gradient button | Insprd | 1,713 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Form Labels | Bartuc | 2,717 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 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!