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.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Allen's Recommended Web Products</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<nav id="mainNav" class="navbar sticky-top navbar-dark bg-dark px-3">
<div class="container d-flex justify-content-center">
<div class="">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Browserstack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Litmus</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">CodePen.io</a>
</li>
</ul>
</div>
</div>
</nav>
<div data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="0" class="scrollspy-example container"
tabindex="0">
<div id="scrollspyHeading1">
<div class="container contentBorder p-4 my-5 animate__animated animate__fadeIn shadow">
<h4 class="poppins-bold">Browserstack</h4>
<a class="links" target="_blank" href="https://www.browserstack.com/pricing">
<p>https://www.browserstack.com/pricing</p>
</a>
<p class="pr">In today’s fast-paced digital world, delivering a seamless user experience across all devices and
browsers is non-negotiable. Enter BrowserStack, the ultimate cloud-based testing platform designed to help
developers and QA teams ensure their websites and apps perform flawlessly—without the hassle of maintaining a
complex physical testing infrastructure.</p>
<p class="pb">BrowserStack provides access to thousands of real devices, browsers, and operating systems,
enabling developers to:</p>
<ul>
<li>
<p class="pr"><span class="pb">Perform Cross-Browser Testing:</span> Check website compatibility across a
vast range of browser versions and operating systems.</p>
</li>
<li>
<p class="pr"><span class="pb">Simulate Real-World Scenarios:</span> Test on actual devices (not emulators)
to capture accurate results, whether it’s the latest iPhone or an older Android model.</p>
</li>
<li>
<p class="pr"><span class="pb">Automate Testing:</span> Leverage popular automation frameworks like
Selenium, Appium, and Cypress to streamline repetitive testing tasks.</p>
</li>
<li>
<p class="pr"><span class="pb">Debug in Real-Time:</span> Spot and resolve issues instantly through live,
interactive testing sessions.</p>
</li>
<li>
<p class="pr"><span class="pb">Ensure Visual Consistency:</span> Compare UI elements across devices using
visual regression testing tools.</p>
</li>
</ul>
<p class="pr">Whether you’re building for desktop or mobile, BrowserStack eliminates the guesswork by offering a
comprehensive testing solution that ensures your end users enjoy a flawless experience every time.</p>
<p class="pr">With BrowserStack, you can focus on building great software while the platform takes care of the
heavy lifting. It’s the go-to tool for delivering software that works everywhere, for everyone.</p>
</div>
</div>
<div id="scrollspyHeading2">
<div class="container contentBorder p-4 my-5 animate__animated animate__fadeIn shadow">
<h4 class="poppins-bold">Litmus</h4>
<a class="links" target="_blank" href="https://www.litmus.com/pricing">
<p>https://www.litmus.com/pricing</p>
</a>
<p class="pr">In the world of email marketing, first impressions matter. Whether you’re sending a high-stakes
eblast or a routine newsletter, ensuring your email looks flawless across every inbox is critical. That’s
where Litmus steps in—a powerful email optimization platform designed to help marketers create, test, and
analyze their campaigns for maximum impact.</p>
<p class="pb">With Litmus, you can:</p>
<ul>
<li>
<p class="pr"><span class="pb">Preview Emails Across 100+ Clients and Devices:</span> Email clients like
Gmail, Outlook, and Yahoo Mail all render emails differently, which can lead to inconsistent designs.
Litmus provides real-time previews of how your email will appear on various devices and platforms,
ensuring a pixel-perfect experience for every recipient.</p>
</li>
<li>
<p class="pr"><span class="pb">Run Spam and Deliverability Tests:</span> Avoid the dreaded spam folder with
Litmus’s deliverability insights. It scans your emails against popular spam filters and highlights
potential issues, helping you improve your chances of landing in the inbox.</p>
</li>
<li>
<p class="pr"><span class="pb">Enhance Accessibility:</span> Make your emails accessible to everyone,
including users with disabilities. Litmus tests your email against accessibility standards, ensuring
proper contrast, readable text, and compatibility with screen readers.</p>
</li>
<li>
<p class="pr"><span class="pb">Validate Links, Images, and Dynamic Content:</span> Broken links or missing
images can ruin an email’s credibility. Litmus automatically checks every link and image in your email, so
you can confidently hit "send" knowing everything works as intended.</p>
</li>
<li>
<p class="pr"><span class="pb">Analyze Engagement:</span> After sending, Litmus provides detailed analytics,
including open rates, click-through rates, device usage, and engagement time. These insights help you
fine-tune your strategy for future campaigns.</p>
</li>
</ul>
<p class="pb">Why Litmus?</p>
<p class="pr">Litmus takes the guesswork out of email marketing, allowing you to craft emails that not only look
beautiful but also perform brilliantly. Whether you’re a small business or a global brand, Litmus is your
go-to tool for building and optimizing emails that engage, convert, and delight.</p>
</div>
</div>
<div id="scrollspyHeading3">
<div class="container contentBorder p-4 my-5 animate__animated animate__fadeIn shadow">
<h4 class="poppins-bold">CodePen.io</h4>
<a class="links" target="_blank" href="https://codepen.io/features/pro">
<p>https://codepen.io/features/pro</p>
</a>
<p class="pr">If you’re a front-end developer or designer looking for a seamless way to experiment, prototype,
and showcase your work, CodePen.io is the ultimate playground for creativity. This online code editor empowers
you to create and share HTML, CSS, and JavaScript snippets—called “Pens”—in real time, with a vibrant
community of creators to inspire and collaborate with.</p>
<p class="pb">With CodePen, you can:</p>
<ul>
<li>
<p class="pr"><span class="pb">Code, Preview, and Iterate in Real-Time:</span> Write your code directly in
the browser and see instant results. The live preview feature lets you experiment with ideas and make
adjustments on the fly, saving time and making coding fun and intuitive.</p>
</li>
<li>
<p class="pr"><span class="pb">Start Fast with Pre-Built Templates:</span> CodePen offers ready-made
templates that take the hassle out of repetitive setups. Whether you’re working with frameworks,
preprocessors, or libraries, getting started is as easy as a few clicks.</p>
</li>
<li>
<p class="pr"><span class="pb">Organize and Showcase Your Work:</span> Each project is saved as a “Pen,”
which you can organize into collections or embed on your blog, portfolio, or website. It’s a great way to
build an online presence and share your creativity with the world.</p>
</li>
<li>
<p class="pr"><span class="pb">Collaborate with Ease:</span> CodePen’s Collab Mode allows real-time
collaboration on Pens, making it perfect for brainstorming with teammates, pair programming, or teaching
others.</p>
</li>
<li>
<p class="pr"><span class="pb">Tap into a Thriving Community:</span> Get inspired by exploring Pens from
thousands of other developers and designers. From stunning animations to cutting-edge UI components, the
CodePen community is a treasure trove of ideas and innovation.</p>
</li>
<li>
<p class="pr"><span class="pb">Host and Share Your Work:</span> Whether you’re prototyping a new feature,
debugging a snippet, or showcasing a creative animation, CodePen makes sharing your work simple with
easy-to-use embed options and shareable links.</p>
</li>
</ul>
<p class="pb">Why CodePen?</p>
<p class="pr">CodePen.io isn’t just a tool—it’s a creative space where ideas come to life. Whether you’re
exploring a new concept, collaborating on a project, or simply seeking inspiration, CodePen empowers you to
code, share, and grow in ways that fit your workflow.</p>
<p class="pr">From beginners experimenting with web development to seasoned pros building polished prototypes,
CodePen is the go-to platform for front-end creativity and innovation.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
</body>
<!-- Created by David Allen the Second for the University of Louisville, MKT-395-4252, Professor Jeffrey Koleba -->
</html>
/* Created by David Allen the Second */
.pr {
font-family: "Poppins", serif;
font-weight: 400;
font-style: normal;
font-size: 1.2rem;
color:#212529;
}
.pb{
font-family: "Poppins", serif;
font-weight: 700;
font-style: normal;
font-size: 1.2rem;
color:#212529;
}
.poppins-bold {
font-family: "Poppins", serif;
font-weight: 700;
font-style: normal;
font-size: 3rem;
color:#212529;
}
.poppins-black {
font-family: "Poppins", serif;
font-weight: 900;
font-style: normal;
color:#212529;
}
.contentBorder{
border: 3px;
border-color: #212529;
border-style: solid;
border-radius: 25px;
}
.links p{
font-size: 1.2rem;
font-family: "Poppins", serif;
font-weight: 400;
font-style: normal;
}
.navFont{
font-family: "Poppins", serif;
font-weight: 700;
font-style: normal;
}
.cc{
background-color: #212529;
color:green;
border-radius: 25px;
}
@media (max-width: 576px) {
.links p{
font-size: 1rem;
}
.poppins-bold {
font-family: "Poppins", serif;
font-weight: 700;
font-style: normal;
font-size: 2.8rem;
color:#212529;
}
}
Also see: Tab Triggers