subscribe.html

---
layout: subpage
title: Subscribe
permalink: /subscribe/
tags: subscribe
---

<style>
#animated-search-input {
  /* So the cursor ends up on the end of the text when the aniimation finishes: */
  display:flex;
  justify-content: center;

  /* Styles to make it look like an actual input box: */
  border: 2px solid #666;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 4px 4px rgba(0, 0, 0, 0.08);
  background: white;

  /* To horizontally center the input box: */
  margin-left: auto;
  margin-right: auto;

  /* To ensure it doesn't get too wide (works well on mobile and desktop) */
  max-width: 400px;

  /* Animation */
  transition: all 0.2s ease;
}
</style>

<div>
  <h2 class="text-center">Search in your podcast app:</h2>
  <div id="animated-search-input" >
    <div class="typewriter">
      <h1>soft skills engineering</h1>
    </div>
  </div>
</div>

<p class="lead button-group"  style="margin-top:50px">Or use one of these links:</p>
<p class="button-group">
  <a
    href="{{ site.podcast_itunes_url }}"
    class="button">
    <span class="subscribe-link">
    <img
      src="/img/apple-podcasts.svg"
      class="icon"
      alt="Apple podcasts logo"
      aria-hidden="true" /> Apple Podcasts</span></a>

  <a
    href="{{ site.podcast_spotify_url }}"
    class="button"><span   class="subscribe-link">
      <img
        src="/img/spotify.svg"
        class="icon"
        alt="Spotify logo"
        aria-hidden="true" /> Spotify Podcasts</span></a>
  <a
    href="{{ site.podcast_youtube_music_url }}"
    class="button"><span class="subscribe-link">
      <img
        src="/img/youtube-music-icon.svg"
        class="icon"
        alt="YouTube Music logo"
        aria-hidden="true" /> YouTube Music</span></a>
</p>

<div class="lead feed-url-box text-center" style="margin-top:50px">
  <p>Or copy and paste the feed URL:</p>
  <p><a href="{{site.podcast_feed_url}}" class="feed-url">{{ site.podcast_feed_url }}</a></p>

  <textarea
    class="sr-only"
    id="feed-url-copy"
    aria-hidden="true">{{site.podcast_feed_url}}</textarea>

  <p class="text-center">
    <button class="button small" id="copy-cta"><span>Copy to clipboard</span></button>
  </p>
</div>

<div class="icon-sep">
  <img
    src="/img/computer.svg"
    alt="A computer" />
</div>

<script>
  const btn = document.querySelector('#copy-cta')
  const textarea = document.querySelector('#feed-url-copy')

  btn.addEventListener('click', function(evt) {
    const text = btn.textContent;

    textarea.select()
    textarea.setSelectionRange(0, 99999)

    document.execCommand("copy")

    btn.innerHTML = "<span>Copied!</span>"
    btn.focus()

    // Reset button text
    setTimeout(() => {
      btn.innerHTML = `<span>${text}</span>`
    }, 1000)
  });
</script>