"uikit"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ademilter/pen/GJdgEN?limit=all&page=25&q=uikit" /> <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7898554/661028/css/fonts.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/3561/formalize.css'> <style class="cp-pen-styles">html { background-color: #eee; font-family: 'Whitney SSm A', 'Whitney SSm B'; font-weight: 400; font-style: normal; line-height: 1.5; font-size: 16px; } .icon { display: inline-block; width: 20px; height: 20px; fill: currentColor; } h1, h2, h3, h4, h5, h6 { font-family: 'Whitney SSm A', 'Whitney SSm B'; font-weight: 700; font-style: normal; line-height: 1.4; } a { color: inherit; -webkit-transition: 0.18s; transition: 0.18s; } .Timeline { max-width: 1200px; margin: 30px auto; } .grid-sizer { width: calc(25% - 30px); margin: 15px; } .Activity { float: left; width: calc(25% - 30px); padding: 30px 30px 20px; margin: 15px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Activity-content { font-family: 'Mercury SSm A', 'Mercury SSm B'; font-weight: 400; font-style: normal; } .Activity-content img { max-width: 100%; } .Activity-content_title { font-size: 18px; } .Activity-content_summary { margin-top: 8px; } .Activity-content_link { margin-top: 10px; text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Activity-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.15); } .Activity-time { font-size: 14px; opacity: .8; } .Activity:hover .Activity-time { opacity: 1; text-decoration: underline; } .Activity-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; font-size: 0; } .Activity_icon { display: inline-block; } .Activity_icon + .Activity_icon { margin-right: 5px; } .Activity_icon--action { position: relative; width: 20px; height: 20px; pointer-events: none; cursor: default; } .Activity_icon--action .icon { position: absolute; left: 0; top: 0; -webkit-transition: 0.18s; transition: 0.18s; } .Activity:hover .Activity_icon--action .icon--line { opacity: 0; } .Activity_icon--action .icon--solid { opacity: 0; color: red; } .Activity:hover .Activity_icon--action .icon--solid { opacity: 1; } .Activity_icon--source { opacity: 0; } .Activity:hover .Activity_icon--source { opacity: 1; } .Activity--photo { position: relative; padding: 0; } .Activity--photo:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background-image: -webkit-linear-gradient(top, transparent 50%, rgba(0, 0, 0, 0.4) 100%); background-image: linear-gradient(-180deg, transparent 50%, rgba(0, 0, 0, 0.4) 100%); } .Activity--photo:hover:before { background-image: -webkit-linear-gradient(top, transparent 50%, rgba(0, 0, 0, 0.6) 100%); background-image: linear-gradient(-180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%); } .Activity--photo .Activity-footer { border-top: 0; position: absolute; left: 30px; right: 30px; bottom: 20px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } .Activity--link .Activity-content_summary { color: rgba(0, 0, 0, 0.7); } .Activity--text .Activity-content_summary { font-size: 30px; line-height: 1.3; } .Activity--twitter { color: white; background-color: #54ACEE; } .Activity--github { color: white; background-color: #333; } .Activity--github .Activity-content_summary { color: rgba(255, 255, 255, 0.6); } .Activity--dribbble { display: none; color: white; background-color: #ea4c89; } .Activity--imdb { display: none; color: black; background-color: #f5de50; } .Activity--codepen { display: none; color: white; background-color: #222; } .Activity--foursquare { display: none; color: white; background-color: #2d5be3; } .Activity--instapaper { display: none; color: black; background-color: white; } .Activity--vimeo { display: none; color: white; background-color: #1ab7ea; } .Activity--youtube { display: none; color: white; background-color: #cd201f; } .Activity--soundcloud { display: none; color: white; background-color: #ff8800; } </style></head><body> <svg style="display:none;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-bookmark" viewBox="0 0 731 1024"> <title>bookmark</title> <path class="path1" d="M665.143 73.143q13.143 0 25.143 5.143 18.857 7.429 30 23.429t11.143 35.429v736.571q0 19.429-11.143 35.429t-30 23.429q-10.857 4.571-25.143 4.571-27.429 0-47.429-18.286l-252-242.286-252 242.286q-20.571 18.857-47.429 18.857-13.143 0-25.143-5.143-18.857-7.429-30-23.429t-11.143-35.429v-736.571q0-19.429 11.143-35.429t30-23.429q12-5.143 25.143-5.143h598.857z"></path> </symbol> <symbol id="icon-bookmark-o" viewBox="0 0 731 1024"> <title>bookmark-o</title> <path class="path1" d="M658.286 146.286h-585.143v709.714l292.571-280.571 50.857 48.571 241.714 232v-709.714zM665.143 73.143q13.143 0 25.143 5.143 18.857 7.429 30 23.429t11.143 35.429v736.571q0 19.429-11.143 35.429t-30 23.429q-10.857 4.571-25.143 4.571-27.429 0-47.429-18.286l-252-242.286-252 242.286q-20.571 18.857-47.429 18.857-13.143 0-25.143-5.143-18.857-7.429-30-23.429t-11.143-35.429v-736.571q0-19.429 11.143-35.429t30-23.429q12-5.143 25.143-5.143h598.857z"></path> </symbol> <symbol id="icon-like" viewBox="0 0 1024 1024"> <title>like</title> <path class="path1" d="M512 950.857q-14.857 0-25.143-10.286l-356.571-344q-5.714-4.571-15.714-14.857t-31.714-37.429-38.857-55.714-30.571-69.143-13.429-78.857q0-125.714 72.571-196.571t200.571-70.857q35.429 0 72.286 12.286t68.571 33.143 54.571 39.143 43.429 38.857q20.571-20.571 43.429-38.857t54.571-39.143 68.571-33.143 72.286-12.286q128 0 200.571 70.857t72.571 196.571q0 126.286-130.857 257.143l-356 342.857q-10.286 10.286-25.143 10.286z"></path> </symbol> <symbol id="icon-like-o" viewBox="0 0 1024 1024"> <title>like-o</title> <path class="path1" d="M950.857 340.571q0-46.286-12.286-81.714t-31.429-56.286-46.571-34-53.714-17.714-56-4.571-64 14.571-63.143 36.571-49.429 41.143-34.286 35.143q-10.286 12.571-28 12.571t-28-12.571q-13.714-16-34.286-35.143t-49.429-41.143-63.143-36.571-64-14.571-56 4.571-53.714 17.714-46.571 34-31.429 56.286-12.286 81.714q0 96 106.857 202.857l332 320 331.429-319.429q107.429-107.429 107.429-203.429zM1024 340.571q0 126.286-130.857 257.143l-356 342.857q-10.286 10.286-25.143 10.286t-25.143-10.286l-356.571-344q-5.714-4.571-15.714-14.857t-31.714-37.429-38.857-55.714-30.571-69.143-13.429-78.857q0-125.714 72.571-196.571t200.571-70.857q35.429 0 72.286 12.286t68.571 33.143 54.571 39.143 43.429 38.857q20.571-20.571 43.429-38.857t54.571-39.143 68.571-33.143 72.286-12.286q128 0 200.571 70.857t72.571 196.571z"></path> </symbol> <symbol id="icon-star" viewBox="0 0 951 1024"> <title>star</title> <path class="path1" d="M950.857 406.285q0 12.571-14.857 27.429l-207.429 202.286 49.143 285.714q0.571 4 0.571 11.429 0 12-6 20.286t-17.429 8.286q-10.857 0-22.857-6.857l-256.571-134.857-256.571 134.857q-12.571 6.857-22.857 6.857-12 0-18-8.286t-6-20.286q0-3.429 1.143-11.429l49.143-285.714-208-202.286q-14.286-15.429-14.286-27.429 0-21.143 32-26.286l286.857-41.714 128.571-260q10.857-23.429 28-23.429t28 23.429l128.571 260 286.857 41.714q32 5.143 32 26.286z"></path> </symbol> <symbol id="icon-star-o" viewBox="0 0 951 1024"> <title>star-o</title> <path class="path1" d="M649.714 610.285l174.857-169.714-241.143-35.429-108-218.286-108 218.286-241.143 35.429 174.857 169.714-41.714 240.571 216-113.714 215.429 113.714zM950.857 406.285q0 12.571-14.857 27.429l-207.429 202.286 49.143 285.714q0.571 4 0.571 11.429 0 28.571-23.429 28.571-10.857 0-22.857-6.857l-256.571-134.857-256.571 134.857q-12.571 6.857-22.857 6.857-12 0-18-8.286t-6-20.286q0-3.429 1.143-11.429l49.143-285.714-208-202.286q-14.286-15.429-14.286-27.429 0-21.143 32-26.286l286.857-41.714 128.571-260q10.857-23.429 28-23.429t28 23.429l128.571 260 286.857 41.714q32 5.143 32 26.286z"></path> </symbol> <symbol id="icon-write" viewBox="0 0 1024 1024"> <title>write</title> <path class="path1" d="M507.429 713.142l66.286-66.286-86.857-86.857-66.286 66.286v32h54.857v54.857h32zM758.857 301.714q-9.143-9.143-18.857 0.571l-200 200q-9.714 9.714-0.571 18.857t18.857-0.571l200-200q9.714-9.714 0.571-18.857zM804.571 641.142v108.571q0 68-48.286 116.286t-116.286 48.286h-475.429q-68 0-116.286-48.286t-48.286-116.286v-475.429q0-68 48.286-116.286t116.286-48.286h475.429q36 0 66.857 14.286 8.571 4 10.286 13.143 1.714 9.714-5.143 16.571l-28 28q-8 8-18.286 4.571-13.143-3.429-25.714-3.429h-475.429q-37.714 0-64.571 26.857t-26.857 64.571v475.429q0 37.714 26.857 64.571t64.571 26.857h475.429q37.714 0 64.571-26.857t26.857-64.571v-72q0-7.429 5.143-12.571l36.571-36.571q8.571-8.571 20-4t11.429 16.571zM749.714 219.428l164.571 164.571-384 384h-164.571v-164.571zM1003.429 294.857l-52.571 52.571-164.571-164.571 52.571-52.571q16-16 38.857-16t38.857 16l86.857 86.857q16 16 16 38.857t-16 38.857z"></path> </symbol> <symbol id="icon-delicious" viewBox="0 0 1024 1024"> <title>delicious</title> <path class="path1" d="M914.285 786.286v-274.286h-402.286v-402.286h-274.286q-53.143 0-90.571 37.429t-37.429 90.571v274.286h402.286v402.286h274.286q53.143 0 90.571-37.429t37.429-90.571zM950.856 237.714v548.571q0 68-48.286 116.286t-116.286 48.286h-548.571q-68 0-116.286-48.286t-48.286-116.286v-548.571q0-68 48.286-116.286t116.286-48.286h548.571q68 0 116.286 48.286t48.286 116.286z"></path> </symbol> <symbol id="icon-github" viewBox="0 0 1024 1024"> <title>github</title> <path class="path1" d="M298.285 772.571q-4.571 5.143-11.429-1.714-7.429-6.286-2.286-10.857 4.571-5.143 11.429 1.714 6.857 6.286 2.286 10.857zM274.285 737.714q5.143 6.857 0 10.857-4.571 3.429-9.714-4t0-10.286q5.143-4 9.714 3.429zM239.428 703.429q-2.857 4-7.429 1.143-5.714-2.857-4-6.857 1.714-2.857 7.429-1.143 5.714 2.857 4 6.857zM257.142 722.857q-3.429 4-9.143-1.714-5.143-6.286-1.143-9.143 3.429-3.429 9.143 1.714 5.143 6.286 1.143 9.143zM330.856 786.857q-2.286 6.857-10.857 3.429-9.714-2.286-7.429-8.571t10.857-4q9.143 2.857 7.429 9.143zM366.856 789.714q0 6.286-9.143 6.286-9.714 1.143-9.714-6.286 0-6.286 9.143-6.286 9.714-1.143 9.714 6.286zM399.999 784q1.143 5.714-8 8t-10.286-4.571 8-8.571q9.143-1.143 10.286 5.143zM950.856 237.714v548.571q0 68-48.286 116.286t-116.286 48.286h-128q-9.143 0-14-0.571t-11.143-2.857-9.143-8.286-2.857-15.714v-136.571q0-55.429-29.714-81.143 32.571-3.429 58.571-10.286t53.714-22.286 46.286-38 30.286-60 11.714-86q0-69.143-45.143-117.714 21.143-52-4.571-116.571-16-5.143-46.286 6.286t-52.571 25.143l-21.714 13.714q-53.143-14.857-109.714-14.857t-109.714 14.857q-9.143-6.286-24.286-15.429t-47.714-22-49.143-7.714q-25.143 64.571-4 116.571-45.143 48.571-45.143 117.714 0 48.571 11.714 85.714t30 60 46 38.286 53.714 22.286 58.571 10.286q-22.857 20.571-28 58.857-12 5.714-25.714 8.571t-32.571 2.857-37.429-12.286-31.714-35.714q-10.857-18.286-27.714-29.714t-28.286-13.714l-11.429-1.714q-12 0-16.571 2.571t-2.857 6.571 5.143 8 7.429 6.857l4 2.857q12.571 5.714 24.857 21.714t18 29.143l5.714 13.143q7.429 21.714 25.143 35.143t38.286 17.143 39.714 4 31.714-2l13.143-2.286q0 21.714 0.286 58.857t0.286 38.857q0 12.571-6.286 19.143t-12.571 7.429-18.857 0.857h-128q-68 0-116.286-48.286t-48.286-116.286v-548.571q0-68 48.286-116.286t116.286-48.286h548.571q68 0 116.286 48.286t48.286 116.286z"></path> </symbol> <symbol id="icon-dribbble" viewBox="0 0 1024 1024"> <title>dribbble</title> <path class="path1" d="M658.285 857.143q-24-137.714-80-284.571h-1.143l-1.143 0.571q-9.143 3.429-24.571 9.429t-57.714 28-78.286 46.857-74.857 65.429-58.857 84.571l-8.571-6.286q105.143 85.714 238.857 85.714 75.429 0 146.286-29.714zM552.571 510.286q-12-28-30.286-63.429-177.714 53.143-384.571 53.143-0.571 4-0.571 12 0 70.857 25.143 135.143t70.857 115.143q28.571-50.857 70.571-95.143t81.429-71.143 74.571-46.286 56.857-27.429l21.143-7.429q2.286-0.571 7.429-2t7.429-2.571zM491.428 389.143q-68.571-121.714-139.429-216-78.857 37.143-133.714 106.286t-73.143 155.429q172.571 0 346.286-45.714zM882.285 571.429q-120-34.286-233.714-16.571 49.714 136.571 73.143 268 63.429-42.857 105.714-108.286t54.857-143.143zM422.285 148q-0.571 0-1.143 0.571 0.571-0.571 1.143-0.571zM759.428 230.857q-105.714-93.714-247.429-93.714-43.429 0-88.571 10.857 74.857 97.143 140.571 218.286 39.429-14.857 74.286-34.571t55.143-35.143 37.429-32.571 21.429-23.143zM886.856 508q-1.714-132.571-85.143-234.286l-0.571 0.571q-5.143 6.857-10.857 14t-24.857 25.429-40.571 34.571-57.143 37.143-75.143 36.857q14.286 30.286 25.143 54.286 1.143 3.429 3.714 10t4.286 9.429q20.571-2.857 42.571-4t42-1.143 39.429 0.857 36.571 2.286 32.286 3.143 27.429 3.714 20.857 3.429 14.286 2.571zM950.856 512q0 119.429-58.857 220.286t-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857 220.286 58.857 159.714 159.714 58.857 220.286z"></path> </symbol> <symbol id="icon-foursquare" viewBox="0 0 731 1024"> <title>foursquare</title> <path class="path1" d="M571.429 284.571l21.143-110.857q2.857-13.143-5.143-22.857t-20-9.714h-406.857q-13.143 0-22 9.714t-8.857 21.143v629.143q0 4 3.429 0.571l166.286-201.143q13.143-14.857 21.714-19.143t27.429-4.286h136.571q12.571 0 21.143-8.286t10.286-16.857q13.714-74.286 21.143-109.143 2.286-12-6.571-22.857t-20.857-10.857h-168q-16.571 0-27.429-10.857t-10.857-27.429v-24q0-16.571 10.857-27.143t27.429-10.571h197.714q10.286 0 20-7.714t11.429-16.857zM701.143 157.714q-8.571 41.714-30.571 152.286t-39.714 200-20 99.143q-3.429 12.571-5.143 18.571t-8 18.571-14 18.857-22 12-33.143 5.714h-154.857q-7.429 0-12.571 5.714-4.571 5.143-243.429 282.286-12.571 14.286-33.429 16.286t-27.714-3.143q-31.429-12.571-31.429-56v-805.714q0-31.429 21.714-58.571t68.571-27.143h507.429q54.286 0 72.571 30.286t5.714 90.857zM701.143 157.714l-90.286 451.429q2.286-9.714 20-99.143t39.714-200 30.571-152.286z"></path> </symbol> <symbol id="icon-twitter" viewBox="0 0 951 1024"> <title>twitter</title> <path class="path1" d="M925.714 233.143q-38.286 56-92.571 95.429 0.571 8 0.571 24 0 74.286-21.714 148.286t-66 142-105.429 120.286-147.429 83.429-184.571 31.143q-154.857 0-283.429-82.857 20 2.286 44.571 2.286 128.571 0 229.143-78.857-60-1.143-107.429-36.857t-65.143-91.143q18.857 2.857 34.857 2.857 24.571 0 48.571-6.286-64-13.143-106-63.714t-42-117.429v-2.286q38.857 21.714 83.429 23.429-37.714-25.143-60-65.714t-22.286-88q0-50.286 25.143-93.143 69.143 85.143 168.286 136.286t212.286 56.857q-4.571-21.714-4.571-42.286 0-76.571 54-130.571t130.571-54q80 0 134.857 58.286 62.286-12 117.143-44.571-21.143 65.714-81.143 101.714 53.143-5.714 106.286-28.571z"></path> </symbol> <symbol id="icon-instagram" viewBox="0 0 1024 1024"> <title>instagram</title> <path class="path1" d="M851.428 814.857v-370.286h-77.143q11.429 36 11.429 74.857 0 72-36.571 132.857t-99.429 96.286-137.143 35.429q-112.571 0-192.571-77.429t-80-187.143q0-38.857 11.429-74.857h-80.571v370.286q0 14.857 10 24.857t24.857 10h610.857q14.286 0 24.571-10t10.286-24.857zM689.142 510.286q0-70.857-51.714-120.857t-124.857-50q-72.571 0-124.286 50t-51.714 120.857 51.714 120.857 124.286 50q73.143 0 124.857-50t51.714-120.857zM851.428 304.571v-94.286q0-16-11.429-27.714t-28-11.714h-99.429q-16.571 0-28 11.714t-11.429 27.714v94.286q0 16.571 11.429 28t28 11.429h99.429q16.571 0 28-11.429t11.429-28zM950.856 185.714v652.571q0 46.286-33.143 79.429t-79.429 33.143h-652.571q-46.286 0-79.429-33.143t-33.143-79.429v-652.571q0-46.286 33.143-79.429t79.429-33.143h652.571q46.286 0 79.429 33.143t33.143 79.429z"></path> </symbol> <symbol id="icon-facebook" viewBox="0 0 1024 1024"> <title>facebook</title> <path class="path1" d="M902.285 73.143q20 0 34.286 14.286t14.286 34.286v780.571q0 20-14.286 34.286t-34.286 14.286h-223.429v-340h113.714l17.143-132.571h-130.857v-84.571q0-32 13.429-48t52.286-16l69.714-0.571v-118.286q-36-5.143-101.714-5.143-77.714 0-124.286 45.714t-46.571 129.143v97.714h-114.286v132.571h114.286v340h-420q-20 0-34.286-14.286t-14.286-34.286v-780.571q0-20 14.286-34.286t34.286-14.286h780.571z"></path> </symbol> </defs> </svg> <div class="Timeline"> <div class="grid-sizer"></div> <div class="Activity Activity--text Activity--twitter"> <div class="Activity-content"> <p class="Activity-content_summary"> Son 10 yılda insanlık adına yapılan en iyi buluş, ıslak mendil. Her yerdeler. </p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon--line"> <use xlink:href="#icon-write"></use> </svg> <svg class="icon icon--solid"> <use xlink:href="#icon-write"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon"> <use xlink:href="#icon-twitter"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--photo Activity--instagram"> <div class="Activity-content"> <img class="Activity-content_photo" src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11258874_842474915801157_1524963267_n.jpg" alt="" draggable="false" /> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon"> <use xlink:href="#icon-like-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon"> <use xlink:href="#icon-instagram"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--link Activity--github"> <div class="Activity-content"> <h3 class="Activity-content_title"> IFTTT/JazzHands </h3> <p class="Activity-content_summary"> A simple, keyframe based animation framework for UIKit. Perfect for scrolling app intros. </p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--link Activity--delicious"> <div class="Activity-content"> <h3 class="Activity-content_title"> A blog about ifttt </h3> <p class="Activity-content_summary"> This Action will create WordPress blog. </p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon"> <use xlink:href="#icon-bookmark-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon"> <use xlink:href="#icon-delicious"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--link Activity--facebook"> <div class="Activity-content"> <h3 class="Activity-content_title"> Koyunuşağı Köyü - Keban (Elazığ) | adem ilter | VSCO Grid® </h3> <p class="Activity-content_summary"> Koyunuşağı Köyü - Keban (Elazığ) #VSCO </p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-write"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-facebook"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--dribbble"> <div class="Activity-content"> <p>dribbble-like</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--imdb"> <div class="Activity-content"> <p>imdb-watchlist</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--imdb"> <div class="Activity-content"> <p>imdb-checkin</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--codepen"> <div class="Activity-content"> <p>codepen-pen</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--foursquare"> <div class="Activity-content"> <p>foursquare-checkin</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--instapaper"> <div class="Activity-content"> <p>instapaper-save</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--vimeo"> <div class="Activity-content"> <p>vimeo-like</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--youtube"> <div class="Activity-content"> <p>youtube-like</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> <div class="Activity Activity--soundcloud"> <div class="Activity-content"> <p>soundcloud-like</p> </div> <footer class="Activity-footer"> <a class="Activity-time" href=""> <time>5 dakika önce</time> </a> <div class="Activity-icons"> <a class="Activity_icon Activity_icon--action" href=""> <svg class="icon icon-write"> <use xlink:href="#icon-star-o"></use> </svg> </a> <a class="Activity_icon Activity_icon--source" href=""> <svg class="icon icon-twitter"> <use xlink:href="#icon-github"></use> </svg> </a> </div> </footer> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://isotope.metafizzy.co/isotope.pkgd.js'></script> <script >/*$('.Timeline').isotope({ itemSelector: '.Activity', percentPosition: true, masonry: { columnWidth: '.grid-sizer' } });*/ //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: