Lab Results
Your spirit animal is a hummingbird!
A hummingbird symbolizes:
• happiness of life
• grace of being
• cleanses negativity
• enjoying the sweetness of life
• expression of love
• high energy needs
Clown Isopod
You've got it all. The looks, the style. Friends are constantly coming to you for tips on how to get your bold brows, your smokey eyeshadow. Of course they do, you're exquisite. You also haven't left your house in thirteen years.
Bisexual who is no longer bi-themselves
Dating for 6 Todays, his birthday is my birthday that feels a little creepy does it not? Oh well I'm in love!
I think i shall tidy up my site a bit and might fill in the Links page its bare af.
Placing Blocks n Styuff
Im playing minecraft with my friend (foreshadowing: HES MY BOYFRIEND NOW) and i am having a dandy time thank you for asking and today a tweet i want to printManga Review Upocoming
Today i finished reading gentlecats and i really liked it it was nice
Im gonna be adding things to this page as time goes on :3
Using this abomination
Is this annoyingly complex? Yes. Is it still easier to parse than a real Tumblr theme? Also yes.
Adding blocks
There is a very specific element wrapping pattern you need to follow for the styling to look correct. Usually, you'll probably be splitting your page into sections, so use the <section>
tag with the "post:
class with the following structure:
<section class="post">
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">Optional footer line, you can put a date here. Delete if not using</div></footer>
</section>
There are two scenarios where you don't want to use section
: if you're doing an actual list of blog posts, each post should be wrapped in an article tag, so use <article class="post">
instead. If you're just using the boxes for stylistic purposes, use <div class="post">
. (If you're not sure whether that's the case, you should most likely use a regular div
if there's no header at the beginning of the section.)
Tags
The footer is optional, so just delete it if you don't want it. You can also add "tags" to the footer in true Tumblr fashion:
<footer class="article-footer"><div class="date">Date or whatever</div> <div class="tags"> <span class="tag">#tag here</span> </div> </footer>
Tags can contain links without any issues.
Image posts
You can add a main image to a section by putting it in front of the article-content
element. It will separate the image from the rest of the "post" content like in a Tumblr image post. If you want inline images (i.e. the image is inside the box), you can just add them normally.
<section class="post">
<img src="IMAGE PATH" alt="ALT TEXT" class="postimage" />
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">FOOTER</div></footer>
</section>
If you're still confused, the next post has the full enchilada (image and tags) as a demo.
Image description
A meme reading "I am not a toy. I am not a Christmas present. I am a 109 year commitment. Please think hard before you give someone an Australian Lungfish this Christmas." The text is superimposed on a photo of an Australian Lungfish.
More demos
- This
- is
- a
- list
- List
- inside
- of
- list