Skip to content

Instantly share code, notes, and snippets.

@cmho
Created February 2, 2020 21:08
Show Gist options
  • Save cmho/9ea2e9f8ab2a189f343ac82a1f40f456 to your computer and use it in GitHub Desktop.
Save cmho/9ea2e9f8ab2a189f343ac82a1f40f456 to your computer and use it in GitHub Desktop.
Fake Pinterest
<raw-code><div style="display: flex; flex-wrap: wrap; font-size: 14px; font-weight: bold;color: #333; font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0 -10px; width: calc(100% + 20px)">
<div style="width: calc(33.33% - 20px); flex-grow: 1; max-width: calc(50% - 20px); min-width: 150px; margin: 0 10px;">
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1579223602577-3814c1e5ec1f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1579858309461-438c9f09e72a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1580001257776-03b8f5fa600c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1578824587033-5e7e44caeae7?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
</div>
<div style="width: calc(33.33% - 20px); flex-grow: 1; max-width: calc(50% - 20px); min-width: 150px; margin: 0 10px;">
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1579000829148-040a2be10beb?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1546548970-71785318a17b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1543362906-acfc16c67564?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1519052537078-e6302a4968d4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
</div>
<div style="width: calc(33.33% - 20px); flex-grow: 1; max-width: calc(50% - 20px); min-width: 150px; margin: 0 10px;">
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1536318431364-5cc762cfc8ec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1531327431456-837da4b1d562?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1567880325673-ccc01edca61c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
<div style="margin-bottom: 35px">
<img src='https://images.unsplash.com/photo-1579223602577-3814c1e5ec1f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='' style="border-radius: 15px; max-width: 100%; margin-bottom: 10px;">
<div style="padding: 0 5px">
Test caption
</div>
</div>
</div>
</div></raw-code>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment