Ghost template for interactive journal
<div class="modal-content-wrapper">
<div class="modal-content">
note content
</div>
<div class="margin-triger-wrapper">
<a class="margin-triger margin-note" id="margin-note">
<svg class="note" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle class="bg" cx="24" cy="24" r="16" fill="#F6F4F3" fill-opacity="0"/>
<circle cx="16" cy="24" r="3" fill="#D14962"/>
<circle cx="24" cy="24" r="3" fill="#D14962"/>
<circle cx="32" cy="24" r="3" fill="#D14962"/>
</svg>
</a>
</div>
</div>
<div class="modal-content-wrapper">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/tpUtKsdx9oc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="margin-triger-wrapper">
<a class="margin-triger media-note" id="media-note">
<svg class="note" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.5 23.634C33.1667 24.0189 33.1667 24.9811 32.5 25.366L19.75 32.7272C19.0833
33.1121 18.25 32.631 18.25 31.8612L18.25 17.1388C18.25 16.369 19.0833 15.8879 19.75 16.2728L32.5 23.634Z"
fill="#D14962"/>
</svg>
</a>
</div>
</div>
First iteration:
In the last few years we’ve been surrounded by doppelgängers: the HBO rendition of Stephen King’s <div class="citation"><a href="https://en.wikipedia.org/wiki/The_Outsiders"><u><i>The Outsiders</i></u></a></div>, Jordan Peele’s <div class="citation"><a href="https://en.wikipedia.org/wiki/Us"><u><i>Us</i></u></a></div>, and Paul Rudd’s <div class="citation"><a href="https://en.wikipedia.org/wiki/The_Outsiders"><u><i>Living with Yourself</i></u></a></div>, to name a few.
Second iteration:
In the last few years we?ve been surrounded by doppelgängers: the HBO rendition of Stephen King?s <div class="citation"><a href="https://en.wikipedia.org/wiki/The_Outsiders" data-title="The Outsiders" data-content="The Outsiders is a coming-of-age novel by S. E. Hinton, first published in 1967 by Viking Press. Hinton was 15 when she started writing the novel but did most of the work when she was 16 and a junior in high school.[1] Hinton was 18 when the book was published.[2] The book details the conflict between two rival gangs divided by their socioeconomic status: the working-class 'greasers' and the upper-class 'Socs' (pronounced /?so???z/?short for Socials). The story is told in first-person perspective by teenage protagonist Ponyboy Curtis.">The Outsiders</a></div>, Jordan Peele?s <div class="citation"><a href="https://en.wikipedia.org/wiki/Us" data-title="Us" data-content="'America', 'US', 'USA', and 'United States of America' redirect here. For the landmass comprising North, Central, South America, and the Caribbean, see Americas. For other uses, see America (disambiguation), US (disambiguation), USA (disambiguation), and United States (disambiguation).">Us</a></div>, and Paul Rudd?s <div class="citation"><a href="https://en.wikipedia.org/wiki/Living_with_Yourself" data-title="Living with Yourself" data-content="Living with Yourself is an American comedy-drama web television series created by Timothy Greenberg that premiered on October 18, 2019, on Netflix.[1] It stars Paul Rudd and Aisling Bea. Rudd also serves as an executive producer, alongside Greenberg, Anthony Bregman, Jeff Stern, Tony Hernandez, Jonathan Dayton, Valerie Faris, and Jeffrey Blitz.">Living with Yourself</a></div>, to name a few.
<div class="click-to-action">
<a href="#" class="btn">Get my newsletter</a>
<a href="#" class="social instagram"><img src="../assets/svg/instagram-icon.svg" alt=""></a>
<a href="#" class="social twitter"><img src="../assets/svg/twitter-icon.svg" alt=""></a>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide blue">
<div class="slide-content d-flex">
<div class="content d-flex">
<div class="container clear">
<div class="slide-title">
<img src="../assets/svg/cant.svg" alt="Cant">
</div>
<div class="post-tags">
<span>/kant</span><span>/ noun</span>
</div>
<p>insincere, especially conventional expressions of enthusiasm for high ideals, goodness, or piety.</p>
<p>the phraseology peculiar to a particular class, party, profession, etc.</p>
<p>the private language of the underworld.</p>
<dfn>"the cant of the fashion industry"</dfn>
<div class="fonts-name">Fonts: <span>Tilda</span>, <span>Georgia</span></div>
</div>
</div>
<div class="slide-thumb-wrap d-flex">
<div class="slide-thumb">
<img src="../assets/img/cant-thumb.png" alt="">
</div>
</div>
</div>
</div>
<div class="swiper-slide pink">
<div class="slide-content d-flex">
<div class="content d-flex">
<div class="container clear">
<div class="slide-title">
<h3>Dulcet</h3>
</div>
<div class="post-tags">
<span>/duhl-sit</span><span>/ adjective</span>
</div>
<p>pleasant or agreeable to the eye, ear, or the feelings; melodious; soothing.</p>
<p>Archaic. sweet to the taste or smell.</p>
<dfn>"the dulcet tones of the cello"</dfn>
<div class="type">Type: Elephant, Avenir</div>
</div>
</div>
<div class="slide-thumb-wrap d-flex">
<div class="slide-thumb">
<img src="../assets/img/spun.png" alt="">
</div>
</div>
</div>
</div>
<div class="swiper-slide white">
<div class="slide-content d-flex">
<div class="content d-flex">
<div class="container clear">
<div class="slide-title">
<img src="../assets/svg/Lapidary.svg" alt="Lapidary">
</div>
<div class="post-tags">
<span>/ˈlapəˌderē</span><span>/ adjective</span>
</div>
<p>relating to stone and gems and the work involved in engraving, cutting, or polishing</p>
<p>(of language) suitable for engraving on stone and therefore elegant and concise.</p>
<dfn>"a lapidary statement"</dfn>
</div>
</div>
<div class="slide-thumb-wrap d-flex">
<div class="slide-thumb">
<img src="../assets/img/image-8.png" alt="">
</div>
</div>
</div>
</div>
</div>