Codepen Pens

Developer
Tushar Mehrotra
Size
3,066 Kb
Views
34,408
  1. Codepen Pens Previews
  2. Codepen Pens HTML Codes
  3. Codepen Pens CSS Codes
  4. Codepen Pens JS Codes

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 Previews
IQ Test

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
Codepen Pens - Script Codes
Home Page Home
Developer Tushar Mehrotra
Username MTushar
Uploaded September 13, 2022
Rating 3
Size 3,066 Kb
Views 34,408
Do you need developer help for Codepen Pens?

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!

Tushar Mehrotra (MTushar) Script Codes
Name
Github profile finder
Profile card
Show Hide Alert with Angular JS
Vertical timeline page
Simple chatbot javascript
Animated Responsive Skill Bar
CSS3 Pricing Table
AngularJS Directives
Full Page JS jQuery Plugin
MixItUp With Ajax
Create amazing sales emails 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!