HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="text-center mt-3">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<a href=" https://codepen.io/shuttershades/full/rNrpKJr" class="btn btn-outline-primary btn-lg" target="_blank">Terms & Conditions</a>
<a href="https://codepen.io/shuttershades/full/eYjyPme" class="btn btn-outline-primary btn-lg" target="_blank">Privacy Policy</a>
<a href="https://codepen.io/shuttershades/full/oNMMwQm" class="btn btn-outline-primary btn-lg" target="_blank">Cookie Policy</a>
<a href="https://codepen.io/shuttershades/full/gOjZgrG" class="btn btn-outline-primary btn-lg" target="_blank">Shipping Policy</a>
<a href="https://codepen.io/shuttershades/full/mdZxYbd" class="btn btn-outline-primary btn-lg" target="_blank">Refund & Return Policy</a>
<a href="https://codepen.io/shuttershades/full/ExpGNNd" class="btn btn-outline-primary btn-lg" target="_blank">Disclaimer</a>
</div></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 text-center mx-auto align-self-center my-5 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 p-3"> Easily generate professional and customizable terms and conditions for your website or app with a user-friendly Terms & Condition Generator </div>
<div class="col-lg-9">
<div aria-live="polite" aria-atomic="true" class="position-relative copied">
<div class="position-absolute top-25 start-50 translate-middle-x pt-5">
<div class="toast align-items-center fw-bold bg-success-subtle border border-success-subtle rounded-2" role="alert" aria-live="assertive" aria-atomic="true" id="liveToast" data-bs-delay="25000000">
<div class="d-flex" data-bs-theme="danger">
<div class="toast-body w-100 text-center">
<span class="fs-2 copying">Copying...</span>
<div class="progress " role="progressbar" aria-label="Success example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success"></div>
</div>
</div>
<div class="position-relative">
<button type="button" class="btn-close position-absolute top-0 end-0" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
<div id="editor"></div>
</div>
<div class="col-lg-3">
<form class="px-2 py-2 bg-dark text-light">
<label for="website-name" class="small mb-0">Website name ✱</label>
<input class="form-control text-dark form-control-sm px-1 border-bottom border-success border-1 m-0 mb-2" type="text" id="website-name" placeholder="Website name" aria-label="Website name" requiered>
<label for="website-url" class="small mb-0">Website URL ✱</label>
<input class="form-control text-dark form-control-sm px-1 border-bottom border-success border-1 m-0 mb-2" type="url" id="website-url" placeholder="websiteurl.com" aria-label="Website URL" requiered>
<label for="company-name" class="small mb-0">Company name (optional)</label>
<input class="form-control text-dark form-control-sm px-1 border-bottom border-success border-1 m-0 mb-2" type="text" id="company-name" placeholder="Company A.B LLC" aria-label="Company name">
<label for="country" class="small mb-0">Country ✱</label>
<input class="form-control text-dark form-control-sm px-1 border-bottom border-success border-1 m-0 mb-2" type="text" id="company-country" placeholder="United states" aria-label="Country" requiered>
<div class="text-center mt-4">
<button id="copy-button" class="fw-semibold text-light bg-success border border-success rounded-pill text-heading-3 fs-3 px-5" type="button" onclick='CopyToClipboard("editor")' value="Copy">Copy <i class="bi bi-check-circle-fill"></i>
</button>
</div>
</form>
</div>
</div>
</div>
#editor{
color:black;
}
.dashed{
border: 1px red dashed;
}
.copied{
z-index:9999;
}
.overlay {
content: "";
top: 0;
right: 0;
background: #000000cf;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
}
$("#editor").trumbowyg({urlProtocol:!0,minimalLinks:!0,autogrow:!0,changeActiveDropdownIcon:!0,semantic:!0,removeformatPasted:!0,autogrowOnEnter:!0,btnsDef:{align:{dropdown:["justifyLeft","justifyCenter","justifyRight","justifyFull"],ico:"justifyLeft"}},btns:[["fontsize"],["align"],["strong","em","underline"],["link"],["unorderedList","orderedList"],["removeformat"],["viewHTML"],["fullscreen"]],plugins:{fontsize:{sizeList:["12px","14px","16px"]}}});
document.addEventListener("DOMContentLoaded",function(e){$("#editor").trumbowyg("html"),$("#editor").trumbowyg("html",'<h1 style="text-align:center;">Terms and conditions</h1><br><p style="text-align:center;"><strong> DATE OF LAST REVISION: <span id="date"></span></strong></p><br><br><br><strong><span style="font-size: 25px;">Welcome to <span class="website_name"><span class="dashed">[WEBSITE NAME]</span></span>!</span></strong><br><br><p>These terms and conditions outline the rules and regulations for the use of <strong class="website_name"><span class="dashed">[WEBSITE NAME]</span></strong>' Website, located at <a href="#" class="website_url"><strong><span class="dashed">[WEBSITE URL]</span></strong></a>. By accessing this website, you agree to these terms and conditions. Please do not continue to use <a href="#" class="website_url"><strong><span class="dashed">[WEBSITE URL]</span></strong></a> if you do not agree with all of the terms and conditions stated on this page.</p><p>The following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: “Client”, “You” and “Your” refers to you, the person log on this website and compliant to the Company’s terms and conditions. “The Company”, “Ourselves”, “We”, “Our” and “Us”, refers to our Company. “Party”, “Parties”, or “Us”, refers to both the Client and ourselves. All terms refer to the offer, acceptance and consideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client’s needs in respect of provision of the Company’s stated services, in accordance with and subject to, prevailing law of <strong class="company_country"><span class="dashed">[COUNTRY]</span></strong>. Any use of the above terminology or other words in the singular, plural, capitalization and/or he/she or they, are taken as interchangeable and therefore as referring to same.</p><br><br><strong style="font-size: 25px;">Cookies</strong><br><br><p>We employ the use of cookies. By accessing <strong class="website_url"><span class="dashed">[WEBSITE URL]</span></strong>, you agree to use cookies in agreement with the <strong class="website_name"><span class="dashed">[WEBSITE NAME]</span></strong>' Terms and Conditions and Privacy Policy.</p><br><p>Most interactive websites use cookies to let us retrieve the user’s details for each visit. In order to provide you with access to the Website and a more personalized and responsive service, we need to remember and store information about how you use this website. This is done using small text files called cookies. Cookies contain small amounts of information and are downloaded to your computer or another device by a server for this Website. Your web browser then sends these cookies back to this website on each subsequent visit so that it can derecognize and remember things like your user preferences (visits, clicks, historical activity). You can find more detailed information about cookies and how they work at http://www.aboutcookies.org.<br></p><br><p>Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies (necessary cookies).<br></p><br><p>This site offers newsletter or email subscription services and cookies may be used to remember if you are already registered and whether to show certain notifications which might only be valid for subscribed/unsubscribed users. When you submit data through a form such as those found on contact pages or comment forms, cookies may be set to remember your user details for future correspondence (functional cookies).<br></p><br><p>We also use social media buttons and/or plugins on this site that allow you to connect with your social network in various ways. For these to work social media sites such as Facebook, and LinkedIn, will set cookies through our site which may be used to enhance your profile on the respective site, or contribute to the data they hold for various purposes outlined in their respective privacy policies.<br></p><br><p>We or our service providers also use analytic services to help us understand how effective our content is, what interests our users have, and to improve how this Website works. In addition, we use web beacons or tracking pixels to count visitor numbers and performance cookies to track how many individual users access this Website and how often. <a href="https://seguidores.app.br" style="text-decoration:none;color:black;cursor:auto;">seguidores.app.br</a>. This information is used for statistical purposes only and it is not our intention to use such information to personally identify any user.</p><br><p>The cookies collected are used to a very limited extent necessary for technical purposes (website functionality) and stored for 1 to 5 years in line with the international NAI standards.<br></p><br><p>The browsers of most computers, smartphones, and other web-enabled devices are typically set up to accept cookies. If you wish to amend your cookie preferences for this website or any other websites you can do this through your browser settings. Your browser’s ‘help’ function will tell you how to do this. Be aware that disabling cookies will affect the functionality of this website in areas in which cookies are necessary for the functioning of features, and usually results in also disabling certain functionalities and features on this site. Therefore, it is recommended that you do not disable cookies.</p><br><br><strong style="font-size: 25px;">License and Intellectual Property Rights</strong><br><br><p>Unless otherwise stated, <strong class="website_name company_name"><span class="dashed">[Company]</span></strong>, and/or its licensors own the intellectual property rights for all material on <strong class="website_url"><span class="dashed">[Website URL]</span></strong>. This website and its contents are protected by copyright, trademark, and other laws of <strong class="company_country"><span class="dashed">[Country]</span></strong>, and/or foreign countries. We and our licensors reserve all rights not expressly granted under these Terms of Use.</p><br><p>You may access this website for your own personal use subject to restrictions set in these terms and conditions.</p><br><p>You must not:</p><ul><li>Republish material from <span><strong class="website_url"><span class="dashed">[Website URL]</span></strong></span>;</li><li>Use material from <strong class="website_url"><span class="dashed">[Website URL]</span></strong> for commercial purposes;</li><li>Sell, rent, or sub-license material from <strong class="website_url"><span class="dashed">[Website URL]</span></strong>;</li><li>Reproduce, duplicate, modify or copy material from <strong class="website_url"><span class="dashed">[Website URL]</span></strong>;</li><li>Redistribute content from <strong class="website_url"><span class="dashed">[Website URL]</span></strong>.</li></ul><br><p>You shall not use the "<strong class="website_name company_name"><span class="dashed">[Company]</span></strong>" name or the <strong class="website_name company_name"><span class="dashed">[Company]</span></strong> logo, either alone or in combination with other words or design elements. You may not use any of the foregoing names, marks, or logos in any press release, advertisement, or other promotional or marketing material or media, whether in written, oral, electronic, visual, or any other form, except if expressly permitted in writing by <strong class="website_name company_name"><span class="dashed">[Company]</span></strong>.</p><br><p>You will comply with all applicable laws in accessing and using this Website.</p><br><br><strong style="font-size: 25px;">Your Privacy</strong><br><br><p>You acknowledge that we may use your personal information and data according to our Privacy Policy incorporated herein by this reference. You hereby agree to the terms of our Privacy Policy, including any obligations imposed on you therein.</p><br><br><strong style="font-size: 25px;">Reservation of Rights</strong><br><br><p>We reserve the right to request that you remove all links or any particular link to our website. You approve of immediately removing all links to our website upon request. We also reserve the right to amend these terms and conditions at any time. By linking to our website, you agree to be bound to and follow these terms and conditions.</p><br><br><strong style="font-size: 25px;">Removal of links from our website</strong><br><br><p>If you find any link on our website that is offensive for any reason, you are free to contact and inform us at any moment. We will consider requests to remove links, but we are not obligated to or so or to respond to you directly.</p><br><br><strong style="font-size: 25px;">Disclaimers and Limitations of Liability</strong><br><br><p>We do not ensure that the information on this website is correct, we do not warrant its completeness or accuracy; nor do we promise to ensure that the website remains available or that the material on the website is kept up to date. This website (including without limitation any content or other part thereof) contains general information only, and we are not, by means of this website, rendering professional advice or services. Before making any decision or taking any action that might affect your finances or business, you should consult a qualified professional advisor.</p><br><p>This website is provided as is, and we make no express or implied representations or warranties regarding it. Without limiting the foregoing, we do not warrant that this website will be secure, error-free, free from viruses or malicious code, or will meet any particular criteria of performance or quality. We expressly disclaim all implied warranties, including, without limitation, warranties of merchantability, title, fitness for a particular purpose, non-infringement, compatibility, security, and accuracy.</p><br><p>Your use of this website is at your own risk and you assume full responsibility and risk of loss resulting from your usage, including, without limitation, with respect to loss of service or data. We will not be liable for any direct, indirect, special, incidental, consequential, or punitive damages or any other damages whatsoever, whether in an action of contract, statute, tort (including, without limitation, negligence), or otherwise, relating to or arising out of the use of this website, even if we knew, or should have known, of the possibility of such damages.</p><br><p>Certain links on this website may lead to websites, resources, or tools maintained by third parties over whom we have no control. Without limiting any of the foregoing, we make no express or implied representations or warranties whatsoever regarding such websites, resources, and tools, and links to any such websites, resources and tools should not be construed as an endorsement of them or their content by us.</p><br><p>The above disclaimers and limitations of liability shall be applicable not only to us but also to our personnel and subcontractors.</p><br><p>The above disclaimers and limitations of liability are applicable to the fullest extent permitted by law, whether in contract, statute, tort (including, without limitation, negligence), or otherwise.</p><br><p>To the maximum extent permitted by applicable law, we exclude all representations, warranties, and conditions relating to our website and the use of this website.</p><br><p>As long as the website and the information and services on the website are provided free of charge, we will not be liable for any loss or damage of any nature.</p>')});
$("#website-name").keyup(function(){$(".website_name").html(this.value),$(".company_name").html(this.value)}),$("#company-name").keyup(function(){$(".company_name").html(this.value)}),$("#company-country").keyup(function(){$(".company_country").html(this.value)}),$("#website-email").keyup(function(){$(".website_email").attr("href","mailto:"+this.value),$(".website_email").html(this.value)}),$("#website-url").keyup(function(){let e=this.value.replace(/https?:\/\//i,"");$(".website_url").html(e),$(".website_url").prop("href","https://"+e)});
function CopyToClipboard(e){var t,o,n=document,d=n.getElementById(e);n.body.createTextRange?((t=n.body.createTextRange()).moveToElementText(d),t.select(),t.mouseup()):window.getSelection&&(o=window.getSelection(),(t=n.createRange()).selectNodeContents(d),o.removeAllRanges(),o.addRange(t)),document.execCommand("copy"),document.getElementById("copy-button").value="Copied"};
document.addEventListener("DOMContentLoaded",function(e){
var t=new Date;t.setDate(t.getDate()),$("#date").html(t.getDate()+" "+["January","February","March","April","May","June","July","August","September","October","November","December"][t.getMonth()]+" "+t.getFullYear());
});
const toastTrigger=document.getElementById("copy-button"),toastLiveExample=document.getElementById("liveToast");toastTrigger&&toastTrigger.addEventListener("click",()=>{let e=new bootstrap.Toast(toastLiveExample);e.show(),$("#editor").addClass("overlay").delay(25000000).queue(function(){$(this).removeClass("overlay"),$(this).dequeue()}),$(".progress-bar").animate({width:"100%"},500),$(".copying").delay(1e3).queue(function(){$(this).html("Done ✔")})});
Also see: Tab Triggers