Candycane Mobile

<div class="candycane">
<input type="radio" name="candycane" id="cc0" checked/>
<input type="radio" name="candycane" id="cc1"/>
<input type="radio" name="candycane" id="cc2"/>
<input type="radio" name="candycane" id="cc3"/>
<input type="radio" name="candycane" id="cc4"/>
<div class="cbody">
<div class="ctitle">
<svg viewBox="0 0 130 200" width="100%" xmlns="http://www.w3.org/2000/svg">
<path fill="var(--bckg3)" d="M60,-15.4C67.7,4.1,56.8,33.7,36.1,48.5C15.4,63.2,-15.2,63.2,-34.5,48.8C-53.7,34.5,-61.6,6,-54,-13.5C-46.3,-33,-23.2,-43.4,1.5,-43.9C26.2,-44.4,52.3,-34.9,60,-15.4Z" transform="translate(62 100)" />
</svg>
<div class="ctitleenv">
<strong>00:00</strong>
<span>Friday, 25th December 2020</span>
</div>
</div>
<div class="ccont">
<div class="cc1">
<div class="cctit">Mensajes</div>
<div class="ccenv">
<div class="ccmessage">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p>
</div>
<div class="ccmessage ccmessnew">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p>
</div>
<div class="ccmessage">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p>
</div>
<div class="ccmessage">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p>
</div>
<div class="ccmessage">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p>
</div>
<!-- Añade más mensajes antes de esta línea -->
</div>
</div>
<div class="cc2">
<div class="cctit">Contactos</div>
<div class="ccenv">
<div class="ccsubtit">A-B-C</div>
<div class="cccontact">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<span>Status, or occupation.</span>
</div>
<div class="cccontact">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<span>Status, or occupation.</span>
</div>
<div class="ccsubtit">D-E-F</div>
<div class="cccontact">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<span>Status, or occupation.</span>
</div>
<div class="cccontact">
<img src="https://i.imgur.com/riOFeSn.png"/>
<strong>Contact name</strong>
<span>Status, or occupation.</span>
</div>
<!-- Añade más contactos antes de esta línea, o subtítulos si los necesitas -->
</div>
</div>
<div class="cc3">
<div class="cctit">Calendario</div>
<div class="ccenv">
<div class="ccsubtit">January 2020</div>
<a href="#" class="cclosed">
<strong>Thread name</strong>
<span>With whom, where and when.</span>
</a>
<div class="ccsubtit">February 2020</div>
<a href="#">
<strong>Thread name</strong>
<span>With whom, where and when.</span>
</a>
<!-- Añade más links antes de esta línea, o subtítulos si los necesitas -->
</div>
</div>
<div class="cc4">
<div class="cctit">Calendario</div>
<div class="ccenv">
<div class="ccimgs">
<img src="https://i.imgur.com/smhOnR0.png"/>
<img src="https://i.imgur.com/NgytdSg.png"/>
<img src="https://i.imgur.com/NgytdSg.png"/>
<img src="https://i.imgur.com/S1mryVa.png"/>
<img src="https://i.imgur.com/tsrVruv.png"/>
<img src="https://i.imgur.com/smhOnR0.png"/>
<img src="https://i.imgur.com/NgytdSg.png"/>
<img src="https://i.imgur.com/NgytdSg.png"/>
<img src="https://i.imgur.com/S1mryVa.png"/>
<img src="https://i.imgur.com/tsrVruv.png"/>
<!-- Añade más imágenes sobre esta línea -->
</div>
</div>
</div>
</div>
<div class="cbottom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="var(--bckg2)" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,74.7C640,96,800,160,960,170.7C1120,181,1280,139,1360,117.3L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>
<div class="cicons">
<label for="cc1"><em class="far fa-envelope"></em></label>
<label for="cc2"><em class="far fa-address-book"></em></label>
<label for="cc3"><em class="far fa-calendar-alt"></em></label>
<label for="cc4"><em class="far fa-images"></em></label>
</div>
</div>
</div>
<label for="cc0" id="ccstop"></label>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>

<style>.candycane { --bckg1: #eee; --bckg2: #fff; --bckg3: rgba(255,255,255,.85); --bckg4: #f8f8f8; --bckg5: #eaeaea; --accent1: #efb9cb; --accent2: #a8baa0; --bradius1:30px; --bradius2:10px; --border1: 1px solid #ddd; --border2: 1px solid #ccc; --deco:#e0e0e0; --title: var(--accent1); --text: #666; --button: #fff; --shadow-d:1px 1px rgba(0,0,0,0.15),-1px 1px rgba(0,0,0,0.15),1px -1px rgba(0,0,0,0.15),-1px -1px rgba(0,0,0,0.15); }</style><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"/><link rel="stylesheet" href="https://dl.dropbox.com/s/axo5cb7j1z40abe/candycane.css"/>