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>
        Create something cool in <a href="https://codepen.io/">Codepen</a>
      </li>
       <li>
        Once you're happy with it, click on export (bottom right hand corner) and click <b>Save as Github Gist</b>
      </li>
      <li>
        You can now import your gist into playalong. 
        
      </li>
     </ul>
    <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 {
  background: red;
  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{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 10px;
  padding: 30px 30px;
}

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