constellation html

<!-- paste this section between < body > and < /body > -->

<div class="constellation">

<!-- to add extra stars copy and paste from 'start' to 'end' of star 1 as shown below. make sure to position them in the css section above. you can add images, links and other html to the information boxes as you like -->

<!-- this is the start of 'star 1' -->
<div class="hot-spot star1">+
<div class="boxstuff">
<h2>you can add titles</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>here is a <a href="/">link</a></p>
</div>
</div>
<!-- this is the end of 'star 1' -->

<div class="hot-spot star2">+
<div class="boxstuff">
<h2>add as much text as you like</h2>
<p><b>the box will automatically resize</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>

<div class="hot-spot star3">+
<div class="boxstuff">
<h2>more stars?</h2>
<p>You can add as many 'stars' and boxes as you like and position them wherever you want</p>
</div>
</div>

<div class="hot-spot star4">+
<div class="boxstuff">
<h2>if you're feeling super fancy?</h2>
<p>you can even position them over a background image O_O.</p>
</div>
</div>

<div class="hot-spot star5">+
<div class="boxstuff">
<h2>oh look, another one</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

<!-- paste any extra stars here -->

</div>

<!-- don't delete the final div as this might screw up your lovely theme -->