Skip to content

Instantly share code, notes, and snippets.

@erubescent

erubescent/index.twig

Created August 5, 2018 19:53
Show Gist options
  • Save erubescent/bfcdb6cad318d5609378c849317d9c6c to your computer and use it in GitHub Desktop.
Save erubescent/bfcdb6cad318d5609378c849317d9c6c to your computer and use it in GitHub Desktop.
Download ZIP
sluthub v1 design
Raw
index.twig
{% extends '_layout' %}
{% block main %}
<div>
<!-- main content -->
<div class="container mx-auto">
<div class="flex-1 shadow-inner mb-4 h-screen w-full">
<div class="flex mb-4">
<div class="w-3/8 h-12 p-3 flex-col">
<br/>
<div class="max-w-md w-full lg:flex">
{% for entry in craft.entries.section('slut').limit(10).all %}
<!-- item start -->
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover img-responsive lg:rounded-t-none shadow lg:rounded-l text-center overflow-hidden" style="background-image: url('https://i.imgur.com/PtsIi5A.png')" title="placeholder"></div>
<div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t shadow lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-8">
<p class="text-sm text-grey-dark flex items-center">
<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20">
<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/>
</svg>
&nbsp;
</p>
<div class="text-black font-bold text-xl mb-2">
<a href="{{ entry.url }}">{{ entry.title }}</a>
</div>
<p class="text-grey-darker text-base">{{ entry.slutShortDescription }}</p>
</div>
<div class="flex justify-between items-center">
<button onclick="window.location.href='https://gateway.sluthub.live/buy/1'" class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20">
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
</svg>
<span>Purchase</span>
</button>
<span class="font-mono">$25</span>
</div>
</div>
</div>
<!-- item end -->
<br/>
<!-- split each -->
{% endfor %}
</div>
</div>
</div>
<!-- footer -->
<div class="flex mb-4">
<div class="w-1/2 bg-grey-light h-12">1</div>
<div class="w-1/2 bg-grey h-12">2</div>
</div>
</div>
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment