Im just learnig to code and this is my starter page
So im gonna use this as a diary of sorts while i go into my 19th year of life and the many thing i want to achieve, plan for and talk about!
We live in hope - that life will get better, and more importantly that it will go on, that love will survive even though we will not. -John Green
Most of the visual branding of this thing, along with the name itself, is inspired by the Notebook Tumblr theme.
Is this annoyingly complex? Yes. Is it still easier to parse than a real Tumblr theme? Also yes.
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.)
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.
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.
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.