<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- ========= --> <!-- Your HTML --> <!-- ========= --> <div class="ui segment" style="margin-bottom: 0em !important;"> <!-- Tarjeta de presentacion --> <div class="ui sticky" style="float: right !important;"> <div class="ui fluid three tabular menu" style="border-style: inherit !important; "> <div id="contact-button-card" class="ui segment text-right creacionesHF-cursor-hand" > <span class="creacionesHF-lightgrey-text"> @Null01 </span> </div> </div> </div> <div class="ui container"> <div class="ui grid"> <div class="sixteen wide column"> <div class="ui three stackable cards"> <div class="card"> <div class="ui left piled segment"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui tiny left floated image"> <h3 class="ui header text-center" style="margin-top: 0px;" >¿Qué es Lorem Ipsum?</h3> <div class="floated right text-center description"> Lorem ipsum dolor sit amet, epicuri recteque mel in. Summo senserit interesset ea mea. Lorem suscipiantur vel id. Dicta nostro comprehensam te vim, falli aperiri lobortis mei et. An sanctus ceteros pri, possit rationibus accommodare vix ex. </div> </div> </div> <div class="card"> <div class="ui left piled segment"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui tiny left floated image"> <h3 class="ui header text-center" style="margin-top: 0px;" >¿Qué es Lorem Ipsum?</h3> <div class="floated right text-center description"> Lorem ipsum dolor sit amet, epicuri recteque mel in. Summo senserit interesset ea mea. Lorem suscipiantur vel id. Dicta nostro comprehensam te vim, falli aperiri lobortis mei et. An sanctus ceteros pri, possit rationibus accommodare vix ex. </div> </div> </div> <div class="card"> <div class="ui left piled segment"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui tiny left floated image"> <h3 class="ui header text-center" style="margin-top: 0px;" >¿Qué es Lorem Ipsum?</h3> <div class="floated right text-center description"> Lorem ipsum dolor sit amet, epicuri recteque mel in. Summo senserit interesset ea mea. Lorem suscipiantur vel id. Dicta nostro comprehensam te vim, falli aperiri lobortis mei et. An sanctus ceteros pri, possit rationibus accommodare vix ex. </div> </div> </div> </div> </div> </div> <div class="ui hidden divider"></div> <div class="ui grid"> <div class="sixteen wide column"> <div class="ui four stackable cards"> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png"> </div> </div> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png"> </div> </div> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png"> </div> </div> <div class="card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/matthew.png"> </div> </div> </div> </div> </div> </div> </div>

<script type="text/javascript" > $('.ui.sticky').sticky(); $('#contact-button-card').click(function () { $('#modal-contact-me') .modal('setting', 'transition', 'vertical flip') .modal('show'); }); $(document).foundation(); setInterval(function () { $('.ui.grid .sixteen.wide.column .ui.three.stackable.cards .card').transition({ animation: 'tada', duration: 1000, interval: 200 }); }, 1000 * 15); setInterval(function () { $('.ui.grid .sixteen.wide.column .ui.four.stackable.cards .card').transition({ animation: 'jiggle', duration: 800, interval: 200 }); }, 1000 * 7); </script>