Embed Codepen Snippets

CodePen is an online platform where developers and designers can write and showcase HTML, CSS, and JavaScript code snippets, known as "pens". It offers real-time previews and collaboration and is popular for testing, sharing, and learning front-end web development.

Get the iframe code from Codepen

1. Login to your Codepen account.
2. Open the pen you wish to embed
3. Click the Embed button at the bottom left corner.
4. A new window will appear, choose iframe.
   
5. Click Copy Code.

Add the Codepent element to your Portfoliobox site

1. In your Portfoliobox site, right-click on an element
2. In the Context menu, click Add Element Below.
3. Go down to Embed.
4. Choose Codepen and click Add.

The element is added but is empty. You now need to paste the code from Codepen.

Paste the Codepen iframe code

1. Righ-click the element you just added.
2. Choose Change content.
3. Paste the iframe code from Codepen.
4. Click Save.