Here's that template that I wrote for my intro post! I recommend using a code editor like sublime text and pasting your work into the post body to make it easier to see what's going on.
The default template looks like this:
Say hello with some paragraph tags! To visually separate paragraphs on the page, stick each paragraph in a set of P tags.
Like this :)
The title of your collapsible tab
This is where the blurb about your tab's contents goes. You can have as many of these as you want, just copy the whole details section and paste it below this one, before the closing div tag.
The title of your collapsible tab
Like this!
And the code is here:
<!--
Header Section with your image and intro!
- Replace the img src with a link to your photo
- You can choose your own border gradient by replacing the "orange" and "darkred" in the first div with whichever colours you want.
-->
<section>
<figure style="padding: 1rem; margin-bottom: 0.5rem;">
<div style="background: linear-gradient(to bottom, orange, darkred); border-radius: 200px; overflow: hidden; width: 200px; height: auto; margin: 0.75rem auto 0 auto; border-radius:200px; overflow: hidden;">
<div style="text-align:center; padding: 0.5rem;">
<img style="margin:0; border-radius:200px; overflow: hidden;" width="200px" height="auto" src="https://media.discordapp.net/attachments/905515054923923508/992532005017374820/eggbug_on_white.png" title="HOVER_TEXT_GOES_HERE" alt="DESCRIBE_THE_IMAGE">
</div>
</div>
<p>Say hello with some paragraph tags! To visually separate paragraphs on the page, stick each paragraph in a set of P tags.</p>
<p>Like this :)</p>
</figure>
</section>
<!-- Collapsible tabs section!
- To change the tab section's border colour, replace the "darkred" in the opening div tag's styles with your colour choice.
- Same thing as before, replace the img src URLs with your own :)
-->
<section>
<div style="background-color: darkred; border: 1px solid darkred; border-radius: 4px; padding: 0.2rem; padding-bottom: 0;">
<details style="margin-bottom: 0.2rem; background-color: white; border-radius: 4px; padding:1rem;" title="HOVER_TEXT_GOES_HERE">
<summary>
<h4 style="display: inline-block; margin: auto;">The title of your collapsible tab</h4>
</summary>
<a href="LINK_URL_GOES_HERE_IF_YOU_WANT_A_LINK_ON_THIS_IMAGE" target="_blank" title="HOVER_TEXT_GOES_HERE">
<img style="margin: 0.75rem auto 0 auto;" width="150px" height="auto" src="https://media.discordapp.net/attachments/905515054923923508/992532005017374820/eggbug_on_white.png" alt="DESCRIBE_THE_IMAGE" title="HOVER_TEXT_GOES_HERE">
</a>
<p>This is where the blurb about your tab's contents goes. You can have as many of these as you want, just copy the whole details section and paste it below this one, before the closing div tag.</p>
</details>
<details style="margin-bottom: 0.2rem; background-color: white; border-radius: 4px; padding:1rem;" title="HOVER_TEXT_GOES_HERE">
<summary>
<h4 style="display: inline-block; margin: auto;">The title of your collapsible tab</h4>
</summary>
<a href="LINK_URL_GOES_HERE_IF_YOU_WANT_A_LINK_ON_THIS_IMAGE" target="_blank" title="HOVER_TEXT_GOES_HERE">
<img style="margin: 0.75rem auto 0 auto;" width="150px" height="auto" src="https://media.discordapp.net/attachments/905515054923923508/992532005017374820/eggbug_on_white.png" alt="DESCRIBE_THE_IMAGE" title="HOVER_TEXT_GOES_HERE">
</a>
<p>Like this!</p>
</details>
</div>
</section>
I hope this helps those who aren't too familiar with html or css. Enjoy ♥️
