<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <ul class="posts"> <li class="post"> <div class="post-content"> <header> <a href="https://twitter.com/@kamciesla">@Murtaza EVREN</a> </header> <hbody> <p>@murtaza burda lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </hbody> <img src="https://picsum.photos/600/300?1" /> <footer> <a href="https://kamilciesla.pl"><i class="fa fa-globe"></i></a> <a href="https://pl.linkedin.com/in/kamilciesla"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/@kamciesla"><i class="fa fa-twitter"></i></a> <a href="https://www.behance.net/kamciesla"><i class="fa fa-behance"></i></a> <a href="https://dribbble.com/kamilciesla"><i class="fa fa-dribbble"></i></a> </footer> </div><a class="post-avatar" href="http://kamilciesla.pl"></a> </li> <li class="post"> <div class="post-content"> <header> <a href="https://twitter.com/@kamciesla">Murtaza EVREN</a> </header> <hbody> <p>@murtaza burda lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </hbody> <img src="https://picsum.photos/600/300?2" /> <footer> <a href="https://kamilciesla.pl"><i class="fa fa-globe"></i></a> <a href="https://pl.linkedin.com/in/kamilciesla"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/@kamciesla"><i class="fa fa-twitter"></i></a> <a href="https://www.behance.net/kamciesla"><i class="fa fa-behance"></i></a> <a href="https://dribbble.com/kamilciesla"><i class="fa fa-dribbble"></i></a> </footer> </div><a class="post-avatar" href="http://kamilciesla.pl"></a> </li> <li class="post"> <div class="post-content"> <header> <a href="https://twitter.com/@kamciesla">Murtaza EVREN</a> </header> <hbody> <p>@murtaza burda lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </hbody> <img src="https://picsum.photos/600/300?3" /> <footer> <a href="https://kamilciesla.pl"><i class="fa fa-globe"></i></a> <a href="https://pl.linkedin.com/in/kamilciesla"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/@kamciesla"><i class="fa fa-twitter"></i></a> <a href="https://www.behance.net/kamciesla"><i class="fa fa-behance"></i></a> <a href="https://dribbble.com/kamilciesla"><i class="fa fa-dribbble"></i></a> </footer> </div><a class="post-avatar" href="http://kamilciesla.pl"></a> </li> <li class="post"> <div class="post-content"> <header> <a href="https://twitter.com/@kamciesla">Murtaza EVREN</a> </header> <hbody> <p>@murtaza burda lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </hbody> <img src="https://picsum.photos/600/300?4" /> <footer> <a href="https://kamilciesla.pl"><i class="fa fa-globe"></i></a> <a href="https://pl.linkedin.com/in/kamilciesla"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/@kamciesla"><i class="fa fa-twitter"></i></a> <a href="https://www.behance.net/kamciesla"><i class="fa fa-behance"></i></a> <a href="https://dribbble.com/kamilciesla"><i class="fa fa-dribbble"></i></a> </footer> </div><a class="post-avatar" href="http://kamilciesla.pl"></a> </li> <li class="post"> <div class="post-content"> <header> <a href="https://twitter.com/@kamciesla">@Murtaza EVREN</a> </header> <hbody> <p>@murtaza burda lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </hbody> <img src="https://picsum.photos/600/300?5" /> <footer> <a href="https://kamilciesla.pl"><i class="fa fa-globe"></i></a> <a href="https://pl.linkedin.com/in/kamilciesla"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/@kamciesla"><i class="fa fa-twitter"></i></a> <a href="https://www.behance.net/kamciesla"><i class="fa fa-behance"></i></a> <a href="https://dribbble.com/kamilciesla"><i class="fa fa-dribbble"></i></a> </footer> </div><a class="post-avatar" href="http://kamilciesla.pl"></a> </li> <li class="post"> <div class="post-content"> <header> <a href="https://twitter.com/@kamciesla">Murtaza EVREN</a> </header> <hbody> <p>@murtaza burda lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </hbody> <img src="https://picsum.photos/600/300?6" /> <footer> <a href="https://kamilciesla.pl"><i class="fa fa-globe"></i></a> <a href="https://pl.linkedin.com/in/kamilciesla"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/@kamciesla"><i class="fa fa-twitter"></i></a> <a href="https://www.behance.net/kamciesla"><i class="fa fa-behance"></i></a> <a href="https://dribbble.com/kamilciesla"><i class="fa fa-dribbble"></i></a> </footer> </div><a class="post-avatar" href="http://kamilciesla.pl"></a> </li> </ul> <p class="no-posts">Sorry... there are no more posts to show right now.</p> </div>

body { background: url("https://wallpaperswide.com/download/peaceful-wallpaper-3840x2160.jpg"); font: bold 13px Helvetica, Arial, sans-serif; } a { color: #9D0000; text-decoration: none; -webkit-transition: color .3s ease; transition: color .3s ease; } footer a { margin-right: 10px; } a:hover { color: #666; } .container { max-width: 650px; width: 100%; margin: 0 auto; } .no-posts { padding: 50px 10px 30px 100px; text-align: center; color: #000; } .posts { list-style: none; margin: 20px auto; padding: 0; width: 100%; } .posts .post { margin-top: 20px; margin-left: 100px; position: relative; } .posts .post-avatar { background: #7698B6 url("https://static.vecteezy.com/system/resources/thumbnails/035/857/416/small/people-face-avatar-icon-cartoon-character-png.png") center/100%; height: 80px; width: 80px; border-radius: 50%; border: 5px solid #7698B6; position: absolute; left: -100px; top: 0; } .posts .post-avatar.post-avatar--fixed { position: fixed; left: 50%; top: 20px; margin-left: -325px; } .posts .post-avatar.post-avatar--absolute { position: absolute; bottom: 0; left: 0; margin-left: -100px; top: auto; } .posts .post-content { background: #fff; border-radius: 4px; width: 100%; } .posts .post-content img { width:100%; padding:0 15px; } .posts .post-content header { display:block; padding: 10px 15px 0 15px; } .posts .post-content hbody { display:block; padding: 10px 15px; } .posts .post-content footer { display:block; padding: 15px 20px; }

$(document).ready(function () { // $('.post-avatar').each(function() { // var avatar = $(this), // avatarWatcher = scrollMonitor.create(avatar.parent(), { // top: 20, // bottom: -avatar.height() - 20 // }); // avatarWatcher.stateChange(function() { // if (avatarWatcher.isInViewport) { // if (avatarWatcher.isInViewport && avatarWatcher.isAboveViewport) { // avatar.removeClass('post-avatar--absolute').addClass('post-avatar--fixed'); // } else if (!avatarWatcher.isAboveViewport) { // avatar.removeClass('post-avatar--absolute').removeClass('post-avatar--fixed'); // } // } else { // avatar.removeClass('post-avatar--fixed').addClass('post-avatar--absolute'); // } // }); // }); //# sourceURL=pen.js });