gOKEbdR

gokebdr.markdown

gOKEbdR

A Pen by patmifsud on CodePen.

License.

index.html

<div class="gist-parent">
  <div class="msg-box-parent">
    <h3>How to make your own HTML slide</h3>
    <ul>
    <li>Gists are essentially just code snippets hosted on GitHub</li>
    <li>Build or fork something on <a href="https://codepen.io/">Codepen</a></li>
    <li>IMPORTANT: 'import' statements within the CodePen JS panel are 
      NOT supported. In CodePen, required modules can be added via the 
      JS panel settings (cog icon), which will insert the required 
      modules via links in html script tags.</li>
    <li>Log in to Codepen using Github (this allows you to export CodePens 
      as a Gist)</li>
    <li>In CodePen use 'Export' -> 'Save as GitHub Gist' (this should open 
      a link to your Gist on GitHub)</li>
    <li>Grab the Gist ID from the URL (it looks something like 
      this: "3a5f1475c6960ddc7f66c5621b2b3755")</li>
    <li>Add the Gist ID to your Gist Media in Playalong, see the field to the right 👉</li>
    </p>
    <p> Note - you may need to refresh this page to see your changes</p>
    <hr />
    <caption>
      This feature is experimental, let us know in slack if you run into any issues
    </caption>
  </div>
</div>

style.css

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  font-family: sans-serif;
  line-height: 1.5;
  height: 100%;
  width: 100%;
}

.gist-parent{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
}

.msg-box-parent{
  width: 100%;
  max-width: 500px;
  background: white;
  border-radius: 10px;
  padding: 30px;
  transform: scale(1.25);
}

h3{ margin: 0 0 10px 0;}
li { padding-bottom: 10px;}

hr{margin: 20px 0; opacity: 0.5;}