<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Blog | Coding Cabin</title>

<link

rel="shortcut icon"

href="https://64.media.tumblr.com/avatar_5766c7a243de_128.pnj"

/>

<link rel="stylesheet" href="css/main.min.css" />

<link

href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Display:ital@0;1&display=swap"

rel="stylesheet"

/>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css"

/>

<!--[if (lt IE 9)

</head>

<body>

<a href="#main" class="skip-link">Jump directly to main content</a>

<header class="nav">

<div class="nav__inner">

<div class="nav__inner--logo" aria-label="Coding Cabin Logo">

<img

role="presentation"

src="https://64.media.tumblr.com/avatar_5766c7a243de_128.pnj"

alt=""

/>

</div>

<nav

role="navigation"

class="nav__inner--links"

aria-label="Primary Navigation"

>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/members">Members</a></li>

<li><a href="/contact.html">Contact</a></li>

<li><a href="/awards">Coding Awards</a></li>

<li><a href="/blog.html">Blog</a></li>

<li class="btn-follow">

<a

role="button"

tabindex="0"

href="https://tumblr.com/follow/{name}"

>Follow Us</a

>

</li>

<li class="btn-dark">

<a href="#" aria-label="Dark mode"

><svg

viewBox="0 0 15 15"

fill="none"

xmlns="http://www.w3.org/2000/svg"

width="15"

height="15"

>

<path

d="M7.5 1.5v-1m0 13.99v-.998m6-5.997h1m-13 0h-1m2-4.996l-1-1m12 0l-1 1m-10 9.993l-1 1m12 0l-1-1m-2-4.997a2.999 2.999 0 01-3 2.998 2.999 2.999 0 113-2.998z"

stroke="currentColor"

stroke-linecap="square"

></path></svg

></a>

</li>

</ul>

</nav>

<nav

role="navigation"

class="nav__inner--mobile"

aria-label="Primary Mobile Navigation"

>

<button aria-label="Button mobile navigation" aria-expanded="false">

<svg

role="presentation"

xmlns="http://www.w3.org/2000/svg"

width="28"

height="28"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

>

<line x1="3" y1="12" x2="21" y2="12"></line>

<line x1="3" y1="6" x2="21" y2="6"></line>

<line x1="3" y1="18" x2="21" y2="18"></line>

</svg>

</button>

<ul class="wrapper__mobile">

<li class="close-btn">

<a href="#">

<svg

xmlns="http://www.w3.org/2000/svg"

width="35"

height="35"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

>

<line x1="18" y1="6" x2="6" y2="18"></line>

<line x1="6" y1="6" x2="18" y2="18"></line>

</svg>

<div class="sr-only">Close</div>

</a>

</li>

<li><a href="/">Home</a></li>

<li><a href="/members">Members</a></li>

<li><a href="/contact">Contact</a></li>

<li><a href="/awards">Coding Awards</a></li>

<li class="btn-follow">

<a

role="button"

tabindex="0"

href="https://tumblr.com/follow/{name}"

>

<span>Follow Us</span>

</a>

</li>

</ul>

</nav>

</div>

</header>

<main class="wrapper">

<header class="hero">

<div class="hero__inner">

<h1 class="hero__heading">Blog page</h1>

<ul class="hero__breadcrumbs">

<li><a href="/">Home</a></li>

<li><a href="#">Page</a></li>

<li class="is-current"><a href="#">Blog page</a></li>

</ul>

</div>

</header>

<section id="main" class="wrapper__posts">

<div class="wrapper__posts--article">

<article class="posts">

<div class="posts__quote">

I know there may be universes out there where I made different choices and they led me somewhere else, led me to someone else. And my heart breaks for every single version of me that didn’t end up with you.

</div>

<div class="posts__source">

— Taylor Jenkins Reid, Maybe in Another Life

</div>

</article>

<article class="posts pinned">

<div class="pinned__block">

<svg

xmlns="http://www.w3.org/2000/svg"

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="1.5"

stroke-linecap="butt"

stroke-linejoin="bevel"

>

<circle cx="11.5" cy="8.5" r="5.5" />

<path d="M11.5 14v7" />

</svg>

<span>Pinned posts</span>

</div>

<div class="body__text">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus

fugiat cum, architecto, eius explicabo, incidunt deserunt

laboriosam id veniam recusandae error saepe minus cupiditate.

Nobis cum nulla pariatur consectetur consequatur?

</div>

</article>

<article class="posts">

<div class="posts__perma">

<div class="date">

<svg

xmlns="http://www.w3.org/2000/svg"

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="1.5"

stroke-linecap="butt"

stroke-linejoin="bevel"

>

<circle cx="12" cy="12" r="10"></circle>

<polyline points="12 6 12 12 16 14"></polyline>

</svg>

<a href="/">Posted on Monday, 05 October 2020</a>

</div>

<ul class="action">

<li>

<a href="#">

<svg

xmlns="http://www.w3.org/2000/svg"

width="20"

height="20"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="1.5"

stroke-linecap="butt"

stroke-linejoin="bevel"

>

<path d="M17 2.1l4 4-4 4" />

<path d="M3 12.2v-2a4 4 0 0 1 4-4h12.8M7 21.9l-4-4 4-4" />

<path d="M21 11.8v2a4 4 0 0 1-4 4H4.2" />

</svg>

<span aria-hidden="true">Reblog</span>

</a>

</li>

<li>

<button>

<svg

xmlns="http://www.w3.org/2000/svg"

width="20"

height="20"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="1.5"

stroke-linecap="butt"

stroke-linejoin="bevel"

>

<path

d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"

></path>

</svg>

<span aria-hidden="true">Like</span>

</button>

</li>

</ul>

</div>

<figure class="posts__image">

<img src="https://via.placeholder.com/500x350" alt="" />

</figure>

<div class="body__text">

<p>

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Deserunt nam excepturi expedita laborum veritatis corrupti

cumque aut, atque fugit qui enim provident iste rerum quasi

quaerat ipsa perferendis quis totam dolore eius dicta esse modi

sint.

</p>

<blockquote>

Quos unde quod dicta repudiandae provident dignissimos qui

voluptates aliquid accusamus ratione, magnam neque minima animi

praesentium! Voluptatum repellendus unde quam modi numquam

tempore?

</blockquote>

</div>

</article>

<article class="posts">

<div class="body__text">

<h1>An example post</h1>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa

enim aut doloribus quis ad cum natus aliquid amet, ipsam libero,

tenetur perspiciatis architecto eligendi neque fugit corrupti

totam, error inventore. Deserunt tenetur amet illum, quod

repudiandae enim.

</p>

<figure

data-orig-width="1920"

data-orig-height="1040"

class="tmblr-full"

>

<img

src="https://66.media.tumblr.com/c8bb5c0e91075dd4106244a1158d8168/tumblr_inline_pnkzw6KmC51r5i3j5_1280.jpg"

alt="image"

data-orig-width="1920"

data-orig-height="1040"

width="500"

height="271"

/>

</figure>

<blockquote>

<a href="/"> Aliquid perspiciatis ducimus excepturi</a> quo at

eum magni aspernatur? Laboriosam veritatis repellendus magnam!

Cumque quas esse dolor, <em>ipsa nemo culpa nihil</em>, quo

porro hic voluptatum voluptatem quaerat distinctio iusto

inventore laborum sapiente fugiat?

</blockquote>

<ul>

<li>

Minima iure sapiente exercitationem consectetur ab qui minus

autem libero? Porro recusandae cupiditate veniam eius, maxime

quia temporibus.

</li>

<li>

Dignissimos asperiores magni nisi doloribus et libero? Nobis

id ducimus quam fugiat, facilis itaque, voluptatibus facere

odio nihil, dolore repudiandae tenetur rem recusandae sit

quasi qui laborum?

</li>

<li>

Odit nesciunt aliquid libero assumenda quas laboriosam,

dolorem tenetur maxime tempore.

</li>

</ul>

<p>

Dolorem eaque architecto aut tempore consequatur fugiat,

suscipit accusamus dicta mollitia odio perspiciatis qui est

harum ullam dolorum culpa

<strong>repellat esse quisquam blanditiis</strong> ad eveniet

earum, quo nulla? Magnam id molestias atque a. Doloribus rerum

consequatur, consectetur est eos repellat eaque itaque quasi

corporis reprehenderit! Illo id, neque tempore aspernatur,

doloremque voluptas

<a href="/">blanditiis doloribus est</a> tenetur quaerat saepe

enim quae pariatur deleniti ipsa quisquam ab adipisci nisi quam

natus illum, qui obcaecati dolor quia!

</p>

</div>

</article>

<article class="posts">

<div class="posts__answer">

<div class="question__p">

<div class="question__p--asker">

<img

src="https://assets.tumblr.com/images/default_avatar/octahedron_open_128.png"

alt=""

/>

<span><a href="#">Anonymous</a> asked a question</span>

</div>

<div class="question__p--inner">

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Dolore, rem magni eius omnis corrupti perspiciatis tenetur

laboriosam error consequuntur culpa labore fuga

necessitatibus! Iure quod beatae ut praesentium magni

repellat?

</div>

</div>

<!-- <div class="answerer__p">

<div class="answer__p">

<div class="answer__p--inner">

Dolorem eaque architecto aut tempore consequatur fugiat,

suscipit accusamus dicta mollitia odio perspiciatis qui est

harum ullam dolorum culpa repellat esse quisquam blanditiis ad

eveniet earum, quo nulla? Magnam id molestias atque a.

Doloribus rerum consequatur, consectetur est eos repellat

eaque itaque quasi corporis reprehenderit! Illo id, neque

tempore aspernatur, doloremque voluptas blanditiis doloribus

est tenetur quaerat saepe enim quae pariatur deleniti ipsa

quisquam ab adipisci nisi quam natus illum, qui obcaecati

dolor quia!

</div>

<div class="answer__p--asker">

<img

src="https://64.media.tumblr.com/avatar_5766c7a243de_128.pnj"

alt=""

/>

<span>Codingcabin answered</span>

</div>

</div>

</div>

</article>

<nav

class="pagination"

role="navigation"

aria-label="Pagination Navigation"

>

<ul class="pagination__inner">

<li>

<a href="#"

><svg

xmlns="http://www.w3.org/2000/svg"

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="1.5"

stroke-linecap="butt"

stroke-linejoin="bevel"

>

<path d="M19 12H6M12 5l-7 7 7 7" />

</svg>

Prev</a

>

</li>

<li class="pagination__item"><span class="current">1</span></li>

<li class="pagination__item"><a href="#">2</a></li>

<li class="pagination__item"><a href="#">3</a></li>

<li class="pagination__item"><a href="#">4</a></li>

<li>

<a href="#"

>Next

<svg

xmlns="http://www.w3.org/2000/svg"

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="1.5"

stroke-linecap="butt"

stroke-linejoin="bevel"

>

<path d="M5 12h13M12 5l7 7-7 7" /></svg

></a>

</li>

</ul>

</nav>

</div>

<aside class="wrapper__posts--sidebar">

<div class="latest__c">

<h1>Latest Challenge</h1>

<div class="latest__c--inner">

<!-- content -->

</div>

</div>

<div class="container__sidebar">

<div class="sidebar">

<h2 class="sidebar__heading">About</h2>

<p>

Coding Cabin is a Discord server that aims to bring together the

theme-making community of Tumblr with the goal of increasing

cooperation among and visibility for everyone who provide the

site with beautiful themes and other content!

</p>

</div>

<div class="sidebar">

<h2 class="sidebar__heading">Statistics</h2>

<div class="box">

<span class="box__head">Est.</span>

<span>July 22nd, 2018 </span>

</div>

<div class="box">

<span class="box__head">Members</span><span>0</span>

</div>

</div>

</div>

</aside>

</section>

</main>

<footer class="footer" role="contentinfo">

<div class="footer__inner">

<div class="footer__inner--grid">

<h2>Quick Links</h2>

<ul aria-label="A group of quick links">

<li><a href="/faqs">Frequently Asked Question</a></li>

<li><a href="/rss">RSS</a></li>

<li><a href="/credits">Credits</a></li>

<li><a href="/members">Members</a></li>

<li><a href="/tagged/answered">Answered</a></li>

</ul>

</div>

<div class="footer__inner--grid">

<h2>Affiliates</h2>

<figure

role="group"

aria-labelledby="affiliates"

class="footer__inner--grid__groupimg"

>

<figcaption id="affiliates" class="sr-only">

The lists of affiliates respectively

</figcaption>

<figure role="group" aria-labelledby="fig1">

<a

href="https://margotofrph.tumblr.com"

aria-label="Margot of RPH"

>

<img

src="https://api.tumblr.com/v2/blog/margotofrph.tumblr.com/avatar/96"

alt=""

/>

</a>

<figcaption id="fig1" class="sr-only">Margot of RPH</figcaption>

</figure>

<figure role="group" aria-labelledby="fig2">

<a

href="https://paletteworld.tumblr.com"

aria-label="Pallete World"

>

<img

src="https://api.tumblr.com/v2/blog/paletteworld.tumblr.com/avatar/96"

alt=""

/></a>

<figcaption id="fig2" class="sr-only">Pallete World</figcaption>

</figure>

<figure role="group" aria-labelledby="fig3">

<a href="https://yeahps.tumblr.com" aria-label="Yeah PS">

<img

src="https://api.tumblr.com/v2/blog/yeahps.tumblr.com/avatar/96"

alt=""

/>

</a>

<figcaption id="fig3" class="sr-only">Yeah PS</figcaption>

</figure>

</figure>

</div>

<div class="footer__inner--grid">

<h2>Cabin Content</h2>

<ul aria-label="A group of cabin content links" class="capsule-links">

<li><a href="/tagged/cabin themes">Themes</a></li>

<li><a href="/tagged/cabin pages">Pages</a></li>

<li><a href="/tagged/cabin widgets">Widgets</a></li>

<li><a href="/tagged/cabin resources">Resources</a></li>

<li><a href="/tagged/cabin icons">Icons</a></li>

</ul>

</div>

</div>

<!-- <div class="footer__search">

<div class="footer__copyright">

Copyright &copy; CodingCabin. Powered by Tumblr

</div>

</footer>

<!-- <script src="js/blog.js"></script> -->

<script src="js/navigation.js"></script>

<script src="js/sidebar.js"></script>

<script>

const posts = document.querySelector(".wrapper__posts--article");

const pinned = document.querySelector(".posts.pinned");

console.log(pinned);

</script>

</body>