Codepen Enhancement Proposal: Fork/Original Pen
How do I make an codepen enhancement proposal: fork/original pen?
Propsed Enhancement to CodepenAdd a method to credit the original authors of forks. Currently, the Parent link is very difficult to find and the forked pen's author is not adequately credited.. What is a codepen enhancement proposal: fork/original pen? How do you make a codepen enhancement proposal: fork/original pen? This script and codes were developed by Chris Holder on 20 June 2022, Monday.
Codepen Enhancement Proposal: Fork/Original Pen Previews
Codepen Enhancement Proposal: Fork/Original Pen - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codepen Enhancement Proposal: Fork/Original Pen</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300' rel='stylesheet' type='text/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! */ * { margin: 0; padding: 0;
}
body { background: #ccc;
}
#fork { background: #181818; width: 100%; height: 40px; overflow: hidden; color: white; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px;
}
#fork .wrapper { padding-top: 10px;
}
#fork .wrapper .icon, #fork .wrapper .info { display: inline-block;
}
#fork .wrapper .icon { height: 40px; float: left; position: relative; top: -19px; margin: 0 10px 0 13px; opacity: 0.3; transition: all 333ms ease-in-out;
}
#fork .wrapper .info { float: left; position: relative; bottom: -4px; text-transform: uppercase;
}
#fork .wrapper .info p { letter-spacing: 0.1em;
}
#fork .wrapper .info p a { color: white; margin-left: 0px; color: #ccc; text-decoration: none; text-transform: none; opacity: 0; transition: all 333ms ease-in-out;
}
#fork .wrapper .info p a .arrow { opacity: 0; font-size: 10px; margin-left: 0; transition: all 333ms ease-in-out;
}
#fork .wrapper .info p a img { margin-right: 8px; margin-bottom: -3px; width: 15px;
}
#fork:hover .wrapper .icon { opacity: 1;
}
#fork:hover .wrapper .info p a { opacity: 1; margin-left: 10px;
}
#fork:hover .wrapper .info p a:hover { color: white;
}
#fork:hover .wrapper .info p a:hover .arrow { opacity: 0.4; margin-left: 5px;
}
.content { width: 70%; max-width: 800px; min-width: 550px; margin: 50px auto 0; background: #efefef; border-top: 12px solid #F37921; padding: 34px 0 40px; box-shadow: 1px 1px 4px 1px #b4b4b4;
}
.content h1, .content p { text-align: center; font-family: 'Open Sans', sans-serif;
}
.content h1 { padding: 0 0 20px; text-transform: uppercase; font-size: 20px; font-weight: 800; letter-spacing: 0.05em; color: #767676;
}
.content p { color: #999; text-align: left; font-weight: 300; line-height: 22px; width: 70%; margin: 0 auto 80px; min-width: 430px;
}
.content .share-wrap { width: 100%; text-align: center; margin-top: -50px; float: left;
}
.content .share { text-align: center; border: 1px solid #ddd; width: 130px; padding: 8px 0 12px; margin: 0 auto; color: #888; font-family: 'Open Sans', sans-serif; font-size: 14px; cursor: pointer;
}
.content .share span { color: #FD8586; font-size: 18px; position: relative; top: 2px; animation: heart 2s infinite normal 4s; transition: all 333ms ease-in-out; animation-iteration-count: 3;
}
.content .share:hover span { color: #FC474B; font-size: 22px;
}
@keyframes heart { 0% { font-size: 18px; color: #FD8586; } 60% { font-size: 18px; color: #FD8586; } 70% { font-size: 23px; color: #FC474B; } 80% { font-size: 18px; color: #FD8586; } 90% { font-size: 20px; } 100% { font-size: 18px; color: #FD8586; }
}
@keyframes bouncy { 0% { margin-top: 0px; } 60% { margin-top: 0px; } 70% { margin-top: -10px; } 80% { margin-top: 0px; } 90% { margin-top: -4px; } 100% { margin-top: 0px; }
}
.indicator { color: #F17930; position: absolute; font-size: 19px; top: 48px; left: 60px; animation: bouncy 1.5s infinite normal; animation-iteration-count: 3;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="fork"> <div class="wrapper"> <div class="icon"> <svg version="1.1" x="0px" y="0px" width="16px" height="115" viewBox="0 0 40 204.547" enable-background="new 0 0 40 204.547" xml:space="preserve"> <path id="path3642" fill="#FFFFFF" d="M14.888,83.932c0,64.244-12.41,82.634-5.38,108.87c2.937,10.961,18.277,9.533,20.831,0c6.487-24.211-5.126-46.494-5.126-109.444c0-8.618,8.279-8.84,12.76-19.959c4.001-9.928-1.647-63.393-3.467-63.393c-2.077,0-1.06,46.3-4.997,46.3c-3.971,0-1.963-45.672-4.475-46.3s-0.67,46.3-5.316,46.3c-4.694,0-1.643-46.3-4.155-46.3s-1.805,46.3-5.636,46.3c-4.218,0-1.951-46.3-3.835-46.3c-3.202,0-6.952,50.283-4.96,60.904C3.124,71.531,14.888,73.544,14.888,83.932L14.888,83.932z"/> </svg> </div> <div class="info"> <p>Original Pen <a href="http://codepen.io/MichaelArestad"><img src="http://norther.li/_codepen/user.png"/>Michael Arestad<span class="arrow">▶</span></a> </p> </div> </div>
</div>
<div class="content"> <h1>Proposed Enhancement to Codepen</h1> <p>Add a method to credit the original authors of forks. Currently, the Parent link is very difficult to find and the forked pen's author is not adequately credited.</p> <div class="share-wrap"> <div class="share"> <!-- Twitter Buttons don't work :( -->
<!-- <a href="https://twitter.com/share" class="twitter-share-button" data-via="northerli" data-size="large" data-related="codepen">Tweet</a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> --> Agree? <span>♥</span> it. </div> </div>
</div>
<p class="indicator">▲</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Codepen Enhancement Proposal: Fork/Original Pen - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { background: #ccc;
}
#fork { background: #181818; width: 100%; height: 40px; overflow: hidden; color: white; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px;
}
#fork .wrapper { padding-top: 10px;
}
#fork .wrapper .icon, #fork .wrapper .info { display: inline-block;
}
#fork .wrapper .icon { height: 40px; float: left; position: relative; top: -19px; margin: 0 10px 0 13px; opacity: 0.3; transition: all 333ms ease-in-out;
}
#fork .wrapper .info { float: left; position: relative; bottom: -4px; text-transform: uppercase;
}
#fork .wrapper .info p { letter-spacing: 0.1em;
}
#fork .wrapper .info p a { color: white; margin-left: 0px; color: #ccc; text-decoration: none; text-transform: none; opacity: 0; transition: all 333ms ease-in-out;
}
#fork .wrapper .info p a .arrow { opacity: 0; font-size: 10px; margin-left: 0; transition: all 333ms ease-in-out;
}
#fork .wrapper .info p a img { margin-right: 8px; margin-bottom: -3px; width: 15px;
}
#fork:hover .wrapper .icon { opacity: 1;
}
#fork:hover .wrapper .info p a { opacity: 1; margin-left: 10px;
}
#fork:hover .wrapper .info p a:hover { color: white;
}
#fork:hover .wrapper .info p a:hover .arrow { opacity: 0.4; margin-left: 5px;
}
.content { width: 70%; max-width: 800px; min-width: 550px; margin: 50px auto 0; background: #efefef; border-top: 12px solid #F37921; padding: 34px 0 40px; box-shadow: 1px 1px 4px 1px #b4b4b4;
}
.content h1, .content p { text-align: center; font-family: 'Open Sans', sans-serif;
}
.content h1 { padding: 0 0 20px; text-transform: uppercase; font-size: 20px; font-weight: 800; letter-spacing: 0.05em; color: #767676;
}
.content p { color: #999; text-align: left; font-weight: 300; line-height: 22px; width: 70%; margin: 0 auto 80px; min-width: 430px;
}
.content .share-wrap { width: 100%; text-align: center; margin-top: -50px; float: left;
}
.content .share { text-align: center; border: 1px solid #ddd; width: 130px; padding: 8px 0 12px; margin: 0 auto; color: #888; font-family: 'Open Sans', sans-serif; font-size: 14px; cursor: pointer;
}
.content .share span { color: #FD8586; font-size: 18px; position: relative; top: 2px; animation: heart 2s infinite normal 4s; transition: all 333ms ease-in-out; animation-iteration-count: 3;
}
.content .share:hover span { color: #FC474B; font-size: 22px;
}
@keyframes heart { 0% { font-size: 18px; color: #FD8586; } 60% { font-size: 18px; color: #FD8586; } 70% { font-size: 23px; color: #FC474B; } 80% { font-size: 18px; color: #FD8586; } 90% { font-size: 20px; } 100% { font-size: 18px; color: #FD8586; }
}
@keyframes bouncy { 0% { margin-top: 0px; } 60% { margin-top: 0px; } 70% { margin-top: -10px; } 80% { margin-top: 0px; } 90% { margin-top: -4px; } 100% { margin-top: 0px; }
}
.indicator { color: #F17930; position: absolute; font-size: 19px; top: 48px; left: 60px; animation: bouncy 1.5s infinite normal; animation-iteration-count: 3;
}
| Developer | Chris Holder |
| Username | see8ch |
| Uploaded | June 20, 2022 |
| Rating | 3.5 |
| Size | 5,681 Kb |
| Views | 38,456 |
Do you need developer help for Codepen Enhancement Proposal: Fork/Original Pen?
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!
Chris Holder (see8ch) Script Codes
| Name | Size |
| GSchool Workshop Demo - Winter 2015 | 2,017 Kb |
| My Logo | 2,811 Kb |
| Northerli Logo | 5,477 Kb |
| Code Motel Logo | 3,759 Kb |
| Experiment - SCSS SVG Background Image with Variables | 3,270 Kb |
| Styling Placeholders with a mixin | 4,205 Kb |
| A Pen by Chris Holder | 2,538 Kb |
| GSchool Workshop Demo - Winter 2015 | 3,433 Kb |
| Localhost Directory GUI | 3,997 Kb |
| One from many. | 2,423 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
| Search field | Jamesbarnett | 2,100 Kb |
| JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
| Svg sky | Omodev | 7,070 Kb |
| CSS3 Form | Tusharbandal | 1,836 Kb |
| Hover Animation from UNIQLO | Insprd | 3,772 Kb |
| Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
| Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
| C.Rowe Button | Brownerd | 2,473 Kb |
| Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Do you want hide your ip address?
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!