Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                /* 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;
    }

 }

              
            
!

JS

              
                
              
            
!
999px

Console