<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link rel="stylesheet" href="main.css" />
<title>Instagram</title>
</head>
<body>
<header>
<div class="logo">
<svg
width="112"
height="41"
viewBox="0 0 112 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.6347 6.98461C6.47333 7.88933 4.09726 10.4453 3.34682 13.6535C2.39645 17.7185 6.35139 19.4375 6.67578 18.8739C7.05758 18.2116 5.9671 17.9877 5.74263 15.8785C5.45253 13.1545 6.71895 10.1106 8.31279 8.77503C8.60906 8.52689 8.59497 8.87225 8.59497 9.51107C8.59497 10.6534 8.53185 20.9083 8.53185 23.0486C8.53185 25.9445 8.41223 26.859 8.19741 27.7627C7.97974 28.6784 7.62981 29.2972 7.89497 29.5355C8.19122 29.8021 9.45612 29.168 10.1884 28.1459C11.0665 26.9202 11.3738 25.4481 11.429 23.8495C11.4957 21.9224 11.4928 18.8645 11.4957 17.1203C11.4984 15.5206 11.5226 10.8364 11.4676 8.02037C11.4542 7.32967 9.5386 6.60501 8.63459 6.98377L8.6347 6.98461ZM85.3849 20.5376C85.3152 22.0431 84.982 23.2199 84.5684 24.0499C83.7676 25.6569 82.1061 26.1559 81.4006 23.8458C81.0162 22.5866 80.9982 20.4836 81.2746 18.7265C81.556 16.9364 82.3416 15.5845 83.6425 15.7064C84.9256 15.8269 85.5262 17.4803 85.3849 20.5375V20.5376ZM63.7535 29.8784C63.7361 32.3799 63.3424 34.5733 62.4981 35.2103C61.3007 36.1136 59.6912 35.436 60.0245 33.6106C60.3193 31.9953 61.7139 30.3456 63.7569 28.33C63.7569 28.33 63.7612 28.7897 63.7536 29.8784H63.7535ZM63.4265 20.523C63.3532 21.8942 62.9978 23.2718 62.6099 24.0501C61.8094 25.6571 60.1357 26.1594 59.4422 23.846C58.968 22.2654 59.0815 20.2197 59.3162 18.9307C59.6206 17.2583 60.3586 15.7068 61.6841 15.7068C62.9727 15.7068 63.6081 17.1205 63.4265 20.5231V20.523ZM50.8954 20.502C50.8168 21.9543 50.5335 23.1684 50.0788 24.0501C49.2562 25.646 47.6288 26.1521 46.9111 23.846C46.3937 22.1831 46.5698 19.9157 46.785 18.6909C47.1045 16.8733 47.9043 15.5847 49.153 15.7068C50.4356 15.8321 51.0591 17.4805 50.8954 20.5021V20.502ZM108.323 22.1984C108.009 22.1984 107.866 22.5216 107.748 23.0656C107.337 24.9571 106.905 25.3842 106.349 25.3842C105.727 25.3842 105.168 24.4476 105.025 22.5727C104.912 21.0984 104.93 18.3841 105.074 15.6842C105.104 15.1295 104.951 14.5806 103.463 14.0401C102.823 13.8076 101.892 13.4653 101.429 14.5838C100.12 17.7439 99.6072 20.2528 99.4867 21.272C99.4805 21.3247 99.4158 21.3355 99.4044 21.2122C99.3277 20.3959 99.156 18.9126 99.1346 15.796C99.1305 15.188 99.0017 14.6704 98.3305 14.2466C97.895 13.9717 96.5726 13.4854 96.0965 14.0639C95.6839 14.5371 95.2061 15.8104 94.7097 17.3198C94.3062 18.5466 94.0252 19.3765 94.0252 19.3765C94.0252 19.3765 94.0305 16.0664 94.0353 14.8108C94.0375 14.3371 93.7126 14.1793 93.6146 14.1507C93.1736 14.0227 92.3048 13.8089 91.936 13.8089C91.481 13.8089 91.3696 14.0632 91.3696 14.4338C91.3696 14.4823 91.2977 18.7919 91.2977 21.8053C91.2977 21.9362 91.2977 22.0791 91.2991 22.2308C91.0474 23.6158 90.2312 25.4959 89.3435 25.4959C88.4548 25.4959 88.0355 24.7099 88.0355 21.1174C88.0355 19.0216 88.0984 18.1103 88.1294 16.5945C88.1473 15.7214 88.182 15.051 88.18 14.8988C88.1735 14.4323 87.3667 14.1971 86.9913 14.1102C86.6141 14.0226 86.2864 13.9886 86.0304 14.0032C85.6682 14.0236 85.4119 14.2613 85.4119 14.5881C85.4119 14.7634 85.4139 15.0967 85.4139 15.0967C84.9473 14.3635 84.1969 13.8532 83.6976 13.7053C82.3528 13.3059 80.9495 13.6598 79.891 15.1409C79.0498 16.3178 78.5427 17.6507 78.343 19.5657C78.1971 20.9657 78.2448 22.3854 78.5041 23.5861C78.1907 24.9409 77.609 25.4959 76.9719 25.4959C76.0471 25.4959 75.3767 23.9864 75.4545 21.3758C75.5059 19.6587 75.8495 18.4537 76.2251 16.7104C76.3852 15.9673 76.2551 15.5782 75.9287 15.2053C75.6294 14.8633 74.9917 14.6886 74.0749 14.9035C73.4219 15.0567 72.4882 15.2214 71.6339 15.348C71.6339 15.348 71.6855 15.1423 71.7278 14.7798C71.95 12.8783 69.8837 13.0325 69.2244 13.6399C68.8309 14.0025 68.5631 14.4301 68.4614 15.1991C68.3002 16.4193 69.2954 16.9948 69.2954 16.9948C68.9688 18.4894 68.1685 20.4419 67.3421 21.8536C66.8996 22.6099 66.561 23.1704 66.1239 23.7661C66.1223 23.5443 66.1211 23.3225 66.1203 23.1017C66.1103 19.9593 66.1521 17.4862 66.1706 16.5948C66.1885 15.7217 66.2235 15.0691 66.2216 14.9169C66.2167 14.5757 66.0174 14.4468 65.6029 14.2836C65.2364 14.1393 64.803 14.0394 64.3535 14.0046C63.7861 13.9603 63.4443 14.2612 63.4532 14.6171C63.455 14.6843 63.455 15.0968 63.455 15.0968C62.9884 14.3636 62.2379 13.8533 61.7387 13.7054C60.3938 13.3062 58.9906 13.6601 57.9321 15.1411C57.091 16.3179 56.5402 17.9693 56.3841 19.5512C56.2387 21.0256 56.2656 22.2785 56.4638 23.334C56.2499 24.3908 55.6351 25.496 54.94 25.496C54.0513 25.496 53.5456 24.71 53.5456 21.1175C53.5456 19.0217 53.6085 18.1104 53.6394 16.5948C53.6574 15.7217 53.692 15.0511 53.6901 14.8991C53.6835 14.4326 52.8767 14.1974 52.5013 14.1103C52.1085 14.0195 51.7694 13.9861 51.509 14.0053C51.1654 14.0309 50.9238 14.3385 50.9238 14.568V15.0968C50.4573 14.3636 49.7068 13.8533 49.2076 13.7054C47.8628 13.3062 46.4673 13.6658 45.401 15.1411C44.7057 16.103 44.1428 17.1695 43.853 19.5303C43.7693 20.2125 43.7323 20.8513 43.7371 21.4485C43.4599 23.1442 42.2352 25.0986 41.2334 25.0986C40.6472 25.0986 40.089 23.9616 40.089 21.5384C40.089 18.3106 40.2887 13.7148 40.3225 13.2719C40.3225 13.2719 41.5882 13.2504 41.8333 13.2475C42.4647 13.2406 43.0365 13.2555 43.8774 13.2125C44.2992 13.191 44.7055 11.6774 44.2702 11.49C44.0729 11.4052 42.6785 11.3309 42.1257 11.3192C41.6609 11.3087 40.367 11.2129 40.367 11.2129C40.367 11.2129 40.483 8.16248 40.51 7.84024C40.533 7.57167 40.1855 7.43339 39.9862 7.34948C39.5017 7.14455 39.0682 7.04643 38.5543 6.94049C37.8444 6.79404 37.5223 6.93729 37.4594 7.53647C37.3647 8.44581 37.3156 11.1093 37.3156 11.1093C36.7947 11.1093 35.0151 11.0075 34.4939 11.0075C34.0098 11.0075 33.4872 13.0897 34.1566 13.1153C34.9268 13.1452 36.2689 13.1709 37.1587 13.1978C37.1587 13.1978 37.119 17.8692 37.119 19.3115C37.119 19.4649 37.1204 19.6127 37.1206 19.756C36.631 22.3084 34.9061 23.6872 34.9061 23.6872C35.2765 21.9986 34.5199 20.7306 33.157 19.6572C32.6548 19.2617 31.6635 18.5128 30.5544 17.6922C30.5544 17.6922 31.1968 17.0591 31.7665 15.7854C32.1701 14.8832 32.1875 13.8507 31.1968 13.623C29.5598 13.2465 28.21 14.4488 27.8074 15.7323C27.4955 16.7266 27.6618 17.4644 28.2729 18.2308C28.3175 18.2868 28.3659 18.344 28.4158 18.4016C28.0463 19.1139 27.5387 20.0728 27.1087 20.8164C25.9153 22.8811 25.0138 24.5142 24.3325 24.5142C23.7879 24.5142 23.7952 22.8562 23.7952 21.3038C23.7952 19.9655 23.894 17.9535 23.9729 15.8704C23.9991 15.1814 23.6546 14.789 23.0771 14.4335C22.7263 14.2175 21.9774 13.7929 21.5437 13.7929C20.8946 13.7929 19.0217 13.8812 17.2521 19.0001C17.0291 19.6453 16.591 20.8209 16.591 20.8209L16.6287 14.6653C16.6287 14.5209 16.5518 14.3814 16.3758 14.286C16.0776 14.124 15.2812 13.7929 14.573 13.7929C14.2355 13.7929 14.0671 13.9499 14.0671 14.2627L14.0054 23.8932C14.0054 24.6249 14.0244 25.4786 14.0968 25.8519C14.1689 26.2257 14.2857 26.5299 14.4303 26.7108C14.5747 26.8914 14.7417 27.0291 15.0172 27.086C15.2735 27.1388 16.6772 27.319 16.7502 26.7826C16.8376 26.1397 16.8409 25.4444 17.578 22.8511C18.7255 18.8136 20.2216 16.8437 20.9249 16.1441C21.0479 16.0218 21.1883 16.0145 21.1815 16.2147C21.1515 17.0998 21.0459 19.3117 20.9749 21.1908C20.7843 26.2195 21.6991 27.1516 23.0065 27.1516C24.0066 27.1516 25.4165 26.1578 26.9278 23.6422C27.8701 22.0745 28.7849 20.5374 29.4422 19.4295C29.9003 19.8535 30.4143 20.3099 30.928 20.7974C32.1217 21.9304 32.5136 23.007 32.2536 24.0283C32.0547 24.809 31.3057 25.6137 29.9726 24.8316C29.584 24.6034 29.4182 24.4272 29.0275 24.1699C28.8176 24.0317 28.4971 23.9904 28.305 24.1352C27.8059 24.5115 27.5204 24.9902 27.3575 25.5828C27.1989 26.1594 27.7764 26.4642 28.375 26.7308C28.8905 26.9603 29.9984 27.1682 30.7049 27.1919C33.4578 27.284 35.6631 25.8627 37.1982 22.1966C37.473 25.3628 38.6426 27.1544 40.6745 27.1544C42.033 27.1544 43.3951 25.3984 43.9907 23.671C44.1617 24.3752 44.4148 24.9875 44.7417 25.5053C46.3074 27.9861 49.3449 27.4521 50.8706 25.3456C51.3424 24.6946 51.4142 24.4607 51.4142 24.4607C51.6367 26.4498 53.2385 27.1448 54.1557 27.1448C55.1829 27.1448 56.2435 26.6592 56.9868 24.9858C57.0739 25.1674 57.169 25.3408 57.2728 25.5052C58.8385 27.986 61.876 27.4521 63.4017 25.3455C63.4737 25.2467 63.5361 25.157 63.5907 25.0766L63.6355 26.3831C63.6355 26.3831 62.765 27.1816 62.2307 27.6714C59.8792 29.8289 58.0911 31.4657 57.9596 33.3718C57.7907 35.8023 59.7619 36.7056 61.2532 36.824C62.8368 36.9497 64.193 36.0748 65.0267 34.8505C65.7598 33.7728 66.2398 31.4535 66.2046 29.1627C66.1905 28.2454 66.1674 27.079 66.1493 25.8288C66.9758 24.869 67.907 23.6558 68.7644 22.2359C69.6988 20.6884 70.7002 18.6102 71.213 16.9929C71.213 16.9929 72.0831 17.0004 73.0116 16.9396C73.3086 16.9203 73.3939 16.9809 73.339 17.1986C73.2727 17.4617 72.1659 21.7307 73.176 24.5746C73.8674 26.5214 75.4261 27.1478 76.3502 27.1478C77.4319 27.1478 78.4667 26.3309 79.0213 25.1178C79.0881 25.253 79.158 25.3839 79.2342 25.5047C80.8 27.9855 83.8268 27.4483 85.3632 25.345C85.71 24.8704 85.9067 24.4601 85.9067 24.4601C86.2364 26.5188 87.8374 27.1547 88.7543 27.1547C89.7095 27.1547 90.616 26.7631 91.3515 25.0229C91.3823 25.7891 91.4306 26.4157 91.5071 26.6132C91.5536 26.734 91.8251 26.8856 92.0225 26.9589C92.8963 27.2829 93.7875 27.1297 94.1172 27.063C94.3456 27.0168 94.5237 26.8336 94.5481 26.3604C94.6121 25.118 94.5728 23.0305 94.9494 21.4792C95.5817 18.8756 96.1714 17.8657 96.4512 17.3657C96.6078 17.0855 96.7845 17.0393 96.7909 17.3358C96.8041 17.9357 96.8339 19.6973 97.0788 22.0642C97.2587 23.8049 97.499 24.8338 97.6837 25.1594C98.2107 26.0906 98.8616 26.1347 99.3916 26.1347C99.7288 26.1347 100.434 26.0415 100.371 25.4489C100.34 25.1601 100.394 23.375 101.017 20.81C101.424 19.1349 102.103 17.6214 102.348 17.0681C102.438 16.8641 102.48 17.0249 102.478 17.0563C102.427 18.2098 102.311 21.983 102.781 24.0466C103.418 26.8421 105.261 27.1549 105.903 27.1549C107.274 27.1549 108.395 26.1121 108.773 23.3681C108.864 22.7078 108.729 22.1979 108.326 22.1979"
fill="#262626"
/>
</svg>
</div>
<div class="actions">
<div class="add">
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 12.4369V15.8869C2 18.7359 2.698 19.8919 3.606 20.8309C4.546 21.7399 5.704 22.4389 8.552 22.4389H15.448C18.296 22.4389 19.454 21.7389 20.394 20.8309C21.302 19.8919 22 18.7369 22 15.8869V8.98889C22 6.13989 21.302 4.98289 20.394 4.04389C19.454 3.13689 18.296 2.43689 15.448 2.43689H8.552C5.704 2.43689 4.546 3.13589 3.606 4.04389C2.698 4.98389 2 6.13989 2 8.98889V12.4369Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.545 12.4379H17.455"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.003 6.9819V17.8919"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="like">
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.792 4.34089C18.1064 4.41356 19.3389 5.00279 20.2207 5.9802C21.1026 6.9576 21.5624 8.24394 21.5 9.55889C21.5 12.6309 18.848 14.5179 16.303 16.7809C13.791 19.0239 12.438 20.2499 12 20.5329C11.523 20.2239 9.857 18.7099 7.697 16.7809C5.141 14.5089 2.5 12.6039 2.5 9.55889C2.43756 8.24394 2.89739 6.9576 3.77926 5.9802C4.66113 5.00279 5.89357 4.41356 7.208 4.34089C7.93614 4.31882 8.65756 4.48607 9.30171 4.82629C9.94586 5.16651 10.4907 5.66805 10.883 6.28189C11.723 7.45689 11.863 8.04489 12.003 8.04489C12.143 8.04489 12.281 7.45689 13.113 6.27889C13.5031 5.66221 14.0481 5.15868 14.6937 4.81861C15.3393 4.47853 16.0628 4.3138 16.792 4.34089ZM16.792 2.34089C15.8839 2.31182 14.981 2.48798 14.1504 2.85624C13.3199 3.22451 12.5831 3.7754 11.995 4.46789C11.4074 3.77742 10.6721 3.2278 9.84354 2.85964C9.01498 2.49149 8.11428 2.31421 7.208 2.34089C5.36287 2.41304 3.62138 3.21288 2.36434 4.56549C1.1073 5.9181 0.436992 7.71343 0.499998 9.55889C0.499998 13.1689 3.05 15.3859 5.515 17.5289C5.798 17.7749 6.084 18.0229 6.368 18.2759L7.395 19.1939C8.51504 20.2597 9.68926 21.267 10.913 22.2119C11.2368 22.4215 11.6143 22.5331 12 22.5331C12.3857 22.5331 12.7632 22.4215 13.087 22.2119C14.3497 21.2382 15.56 20.1984 16.713 19.0969L17.635 18.2729C17.928 18.0129 18.225 17.7539 18.52 17.4989C20.854 15.4739 23.5 13.1789 23.5 9.55889C23.563 7.71343 22.8927 5.9181 21.6357 4.56549C20.3786 3.21288 18.6371 2.41304 16.792 2.34089Z"
fill="black"
/>
</svg>
</div>
<div class="messages" data="2">
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 3.43689L9.21799 10.5199"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
/>
<path
d="M11.698 20.7709L22 3.4379H2L9.218 10.5209L11.698 20.7709Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</header>
<section class="stories">
<ul>
<li>
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/c8b8af14cf766622f3895ba6d31b37e3.jpg"
alt=""
/>
<svg
width="24"
height="24"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="9" cy="9" r="8.5" fill="#5792E7" stroke="white" />
<path
d="M6 9.00055H12"
stroke="white"
stroke-width="1.09991"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9.00165 6V12"
stroke="white"
stroke-width="1.09991"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<span>Your Story</span>
</a>
</li>
<li>
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/photo-1534528741775-53994a69daeb.jpg"
alt=""
/>
</div>
<span>Tracy Taylor</span>
</a>
</li>
<li>
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/IMG_20190924_190031-min.jpg"
alt=""
/>
</div>
<span>Nina Lee</span>
</a>
</li>
<li>
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/photo-1491616569293-e27f7f4cd41a.jpg"
alt=""
/>
</div>
<span>Tracy Ward</span>
</a>
</li>
<li>
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/6fde85b86c86526af5e99ce85f57432e.jpg"
alt=""
/>
</div>
<span>Susan Gray</span>
</a>
</li>
<li>
<a href="#">
<div class="avatar">
<img src="https://cdn.zaferinci.com.tr/im2ages.jpg" alt="" />
</div>
<span>Tiffany Kirk</span>
</a>
</li>
</ul>
</section>
<section class="post">
<div class="header">
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/IMG_20190924_190031-min.jpg"
alt=""
/>
</div>
<span>ninalee911</span>
</a>
<div class="dot">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content">
<img
src="https://cdn.zaferinci.com.tr/IMG_20190924_190031-min.jpg"
alt=""
/>
</div>
<div class="bottom">
<div class="actions">
<div class="like">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.792 4.34089C18.1064 4.41356 19.3389 5.00279 20.2207 5.9802C21.1026 6.9576 21.5624 8.24394 21.5 9.55889C21.5 12.6309 18.848 14.5179 16.303 16.7809C13.791 19.0239 12.438 20.2499 12 20.5329C11.523 20.2239 9.857 18.7099 7.697 16.7809C5.141 14.5089 2.5 12.6039 2.5 9.55889C2.43756 8.24394 2.89739 6.9576 3.77926 5.9802C4.66113 5.00279 5.89357 4.41356 7.208 4.34089C7.93614 4.31882 8.65756 4.48607 9.30171 4.82629C9.94586 5.16651 10.4907 5.66805 10.883 6.28189C11.723 7.45689 11.863 8.04489 12.003 8.04489C12.143 8.04489 12.281 7.45689 13.113 6.27889C13.5031 5.66221 14.0481 5.15868 14.6937 4.81861C15.3393 4.47853 16.0628 4.3138 16.792 4.34089ZM16.792 2.34089C15.8839 2.31182 14.981 2.48798 14.1504 2.85624C13.3199 3.22451 12.5831 3.7754 11.995 4.46789C11.4074 3.77742 10.6721 3.2278 9.84354 2.85964C9.01498 2.49149 8.11428 2.31421 7.208 2.34089C5.36287 2.41304 3.62138 3.21288 2.36434 4.56549C1.1073 5.9181 0.436992 7.71343 0.499998 9.55889C0.499998 13.1689 3.05 15.3859 5.515 17.5289C5.798 17.7749 6.084 18.0229 6.368 18.2759L7.395 19.1939C8.51504 20.2597 9.68926 21.267 10.913 22.2119C11.2368 22.4215 11.6143 22.5331 12 22.5331C12.3857 22.5331 12.7632 22.4215 13.087 22.2119C14.3497 21.2382 15.56 20.1984 16.713 19.0969L17.635 18.2729C17.928 18.0129 18.225 17.7539 18.52 17.4989C20.854 15.4739 23.5 13.1789 23.5 9.55889C23.563 7.71343 22.8927 5.9181 21.6357 4.56549C20.3786 3.21288 18.6371 2.41304 16.792 2.34089Z"
fill="black"
></path>
</svg>
</div>
<div class="comment">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.656 16.4449C20.8711 14.343 21.2795 11.8706 20.8048 9.4896C20.3301 7.1086 19.0048 4.98185 17.0765 3.50666C15.1482 2.03147 12.7488 1.30874 10.3266 1.47349C7.90429 1.63823 5.62485 2.67919 3.91406 4.4019C2.20327 6.1246 1.17816 8.41121 1.03022 10.8346C0.882288 13.2579 1.62165 15.6522 3.11019 17.5702C4.59873 19.4882 6.73462 20.7987 9.11886 21.2569C11.5031 21.7151 13.9726 21.2896 16.066 20.0599L21 21.4369L19.656 16.4449Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="messages">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 3.43689L9.21799 10.5199"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
></path>
<path
d="M11.698 20.7709L22 3.4379H2L9.218 10.5209L11.698 20.7709Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="save">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 21.4369L12 13.8769L4 21.4369V3.43689H20V21.4369Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<span class="likes"> 2,994,430 likes </span>
<p class="description">
<span class="username">ninalee911 </span>
I have filmed a small vlog of north Dhaka, and I’m very excited to
post on YouTube, will<span class="more">...more</span>
</p>
<span class="comments">View all 9,629 comments</span>
<div class="add-comment">
<img
src="https://cdn.zaferinci.com.tr/c8b8af14cf766622f3895ba6d31b37e3.jpg"
/>
<span>Add a comment...</span>
<img
src="https://cdn.zaferinci.com.tr/heart-emote-instagram.png"
class="emote"
/>
<img
src="https://cdn.zaferinci.com.tr/hand-emote-instagram.png"
class="emote"
/>
<img
src="https://cdn.zaferinci.com.tr/add-new-emote.svg"
class="emote"
/>
</div>
</div>
</section>
<section class="post">
<div class="header">
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/photo-1491616569293-e27f7f4cd41a.jpg"
/>
</div>
<span>tracy_world</span>
</a>
<div class="dot">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content">
<img
src="https://cdn.zaferinci.com.tr/photo-1559583985-c80d8ad9b29f.jpg"
/>
</div>
<div class="bottom">
<div class="actions">
<div class="like">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.792 4.34089C18.1064 4.41356 19.3389 5.00279 20.2207 5.9802C21.1026 6.9576 21.5624 8.24394 21.5 9.55889C21.5 12.6309 18.848 14.5179 16.303 16.7809C13.791 19.0239 12.438 20.2499 12 20.5329C11.523 20.2239 9.857 18.7099 7.697 16.7809C5.141 14.5089 2.5 12.6039 2.5 9.55889C2.43756 8.24394 2.89739 6.9576 3.77926 5.9802C4.66113 5.00279 5.89357 4.41356 7.208 4.34089C7.93614 4.31882 8.65756 4.48607 9.30171 4.82629C9.94586 5.16651 10.4907 5.66805 10.883 6.28189C11.723 7.45689 11.863 8.04489 12.003 8.04489C12.143 8.04489 12.281 7.45689 13.113 6.27889C13.5031 5.66221 14.0481 5.15868 14.6937 4.81861C15.3393 4.47853 16.0628 4.3138 16.792 4.34089ZM16.792 2.34089C15.8839 2.31182 14.981 2.48798 14.1504 2.85624C13.3199 3.22451 12.5831 3.7754 11.995 4.46789C11.4074 3.77742 10.6721 3.2278 9.84354 2.85964C9.01498 2.49149 8.11428 2.31421 7.208 2.34089C5.36287 2.41304 3.62138 3.21288 2.36434 4.56549C1.1073 5.9181 0.436992 7.71343 0.499998 9.55889C0.499998 13.1689 3.05 15.3859 5.515 17.5289C5.798 17.7749 6.084 18.0229 6.368 18.2759L7.395 19.1939C8.51504 20.2597 9.68926 21.267 10.913 22.2119C11.2368 22.4215 11.6143 22.5331 12 22.5331C12.3857 22.5331 12.7632 22.4215 13.087 22.2119C14.3497 21.2382 15.56 20.1984 16.713 19.0969L17.635 18.2729C17.928 18.0129 18.225 17.7539 18.52 17.4989C20.854 15.4739 23.5 13.1789 23.5 9.55889C23.563 7.71343 22.8927 5.9181 21.6357 4.56549C20.3786 3.21288 18.6371 2.41304 16.792 2.34089Z"
fill="black"
></path>
</svg>
</div>
<div class="comment">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.656 16.4449C20.8711 14.343 21.2795 11.8706 20.8048 9.4896C20.3301 7.1086 19.0048 4.98185 17.0765 3.50666C15.1482 2.03147 12.7488 1.30874 10.3266 1.47349C7.90429 1.63823 5.62485 2.67919 3.91406 4.4019C2.20327 6.1246 1.17816 8.41121 1.03022 10.8346C0.882288 13.2579 1.62165 15.6522 3.11019 17.5702C4.59873 19.4882 6.73462 20.7987 9.11886 21.2569C11.5031 21.7151 13.9726 21.2896 16.066 20.0599L21 21.4369L19.656 16.4449Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="messages">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 3.43689L9.21799 10.5199"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
></path>
<path
d="M11.698 20.7709L22 3.4379H2L9.218 10.5209L11.698 20.7709Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="save">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 21.4369L12 13.8769L4 21.4369V3.43689H20V21.4369Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="pagination">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<span class="likes"> 23,046 likes </span>
<p class="description">
<span class="username">tracy_world</span> “The greatest pleasure in
life is doing what other people<span class="more">...more</span>
</p>
<span class="comments">View all 1,012 comments</span>
<div class="add-comment">
<img
src="https://cdn.zaferinci.com.tr/c8b8af14cf766622f3895ba6d31b37e3.jpg"
/>
<span>Add a comment...</span>
<img
src="https://cdn.zaferinci.com.tr/heart-emote-instagram.png"
class="emote"
/>
<img
src="https://cdn.zaferinci.com.tr/hand-emote-instagram.png"
class="emote"
/>
<img
src="https://cdn.zaferinci.com.tr/add-new-emote.svg"
class="emote"
/>
</div>
</div>
</section>
<section class="suggestions">
<h2>
Suggested for You
<a href="#">See All</a>
</h2>
<ul>
<li>
<a>
<div class="close-btn">
<svg
width="14"
height="15"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1.66189L12.775 0.43689L7 6.21189L1.225 0.43689L0 1.66189L5.775 7.43689L0 13.2119L1.225 14.4369L7 8.66189L12.775 14.4369L14 13.2119L8.225 7.43689L14 1.66189Z"
fill="black"
fill-opacity="0.4"
/>
</svg>
</div>
<div class="avatar">
<img src="https://cdn.zaferinci.com.tr/mdbgldn6yg1gg88jomci.jpg" />
</div>
<div class="username">
Nike Football(Soccer)
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52"
style="enable-background: new 0 0 52 52"
>
<style type="text/css">
.st0 {
fill: #3da3d5;
}
.st1 {
fill: #ffffff;
}
</style>
<g>
<polygon
class="st0"
points="6.6,18.8 5.1,10.2 13.7,8.5 17.8,0.5 25.7,4.2 33.4,0.5 37.4,8.2 46,10.3 45.1,18.8 51,25.4 45,32.9 46.3,41.4 38,43 33.7,50.7 25.8,47.4 17.8,51.2 13.3,43.2 5.1,41.5 6.1,32.6 0.4,25.8"
/>
<polygon
class="st1"
points="13.1,29.4 16.9,25.3 21.2,29.4 34.8,15 39.6,19 21.7,37.9"
/>
</g>
</svg>
</div>
<span>Popular</span>
<button>Follow</button>
</a>
</li>
<li>
<a>
<div class="close-btn">
<svg
width="14"
height="15"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1.66189L12.775 0.43689L7 6.21189L1.225 0.43689L0 1.66189L5.775 7.43689L0 13.2119L1.225 14.4369L7 8.66189L12.775 14.4369L14 13.2119L8.225 7.43689L14 1.66189Z"
fill="black"
fill-opacity="0.4"
/>
</svg>
</div>
<div class="avatar">
<img src="https://cdn.zaferinci.com.tr/p7zz5dxZ.jpg" />
</div>
<div class="username">
apple
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52"
style="enable-background: new 0 0 52 52"
>
<style type="text/css">
.st0 {
fill: #3da3d5;
}
.st1 {
fill: #ffffff;
}
</style>
<g>
<polygon
class="st0"
points="6.6,18.8 5.1,10.2 13.7,8.5 17.8,0.5 25.7,4.2 33.4,0.5 37.4,8.2 46,10.3 45.1,18.8 51,25.4 45,32.9 46.3,41.4 38,43 33.7,50.7 25.8,47.4 17.8,51.2 13.3,43.2 5.1,41.5 6.1,32.6 0.4,25.8"
/>
<polygon
class="st1"
points="13.1,29.4 16.9,25.3 21.2,29.4 34.8,15 39.6,19 21.7,37.9"
/>
</g>
</svg>
</div>
<span>Popular</span>
<button>Follow</button>
</a>
</li>
<li>
<a>
<div class="close-btn">
<svg
width="14"
height="15"
viewBox="0 0 14 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1.66189L12.775 0.43689L7 6.21189L1.225 0.43689L0 1.66189L5.775 7.43689L0 13.2119L1.225 14.4369L7 8.66189L12.775 14.4369L14 13.2119L8.225 7.43689L14 1.66189Z"
fill="black"
fill-opacity="0.4"
/>
</svg>
</div>
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/279888098_1075234800009723_3463029797919918074_n.jpg"
/>
</div>
<div class="username">
Zafer
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52"
style="enable-background: new 0 0 52 52"
>
<style type="text/css">
.st0 {
fill: #3da3d5;
}
.st1 {
fill: #ffffff;
}
</style>
<g>
<polygon
class="st0"
points="6.6,18.8 5.1,10.2 13.7,8.5 17.8,0.5 25.7,4.2 33.4,0.5 37.4,8.2 46,10.3 45.1,18.8 51,25.4 45,32.9 46.3,41.4 38,43 33.7,50.7 25.8,47.4 17.8,51.2 13.3,43.2 5.1,41.5 6.1,32.6 0.4,25.8"
/>
<polygon
class="st1"
points="13.1,29.4 16.9,25.3 21.2,29.4 34.8,15 39.6,19 21.7,37.9"
/>
</g>
</svg>
</div>
<span>Popular</span>
<button
onclick="document.location="https://instagram.com/zafernci""
>
Follow
</button>
</a>
</li>
</ul>
</section>
<section class="post last">
<div class="header">
<a href="#">
<div class="avatar">
<img
src="https://cdn.zaferinci.com.tr/photo-1491616569293-e27f7f4cd41a.jpg"
/>
</div>
<span>tracy_world</span>
</a>
<div class="dot">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content">
<img src="https://cdn.zaferinci.com.tr/EPTV3119.png" />
</div>
<div class="bottom">
<div class="actions">
<div class="like">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.792 4.34089C18.1064 4.41356 19.3389 5.00279 20.2207 5.9802C21.1026 6.9576 21.5624 8.24394 21.5 9.55889C21.5 12.6309 18.848 14.5179 16.303 16.7809C13.791 19.0239 12.438 20.2499 12 20.5329C11.523 20.2239 9.857 18.7099 7.697 16.7809C5.141 14.5089 2.5 12.6039 2.5 9.55889C2.43756 8.24394 2.89739 6.9576 3.77926 5.9802C4.66113 5.00279 5.89357 4.41356 7.208 4.34089C7.93614 4.31882 8.65756 4.48607 9.30171 4.82629C9.94586 5.16651 10.4907 5.66805 10.883 6.28189C11.723 7.45689 11.863 8.04489 12.003 8.04489C12.143 8.04489 12.281 7.45689 13.113 6.27889C13.5031 5.66221 14.0481 5.15868 14.6937 4.81861C15.3393 4.47853 16.0628 4.3138 16.792 4.34089ZM16.792 2.34089C15.8839 2.31182 14.981 2.48798 14.1504 2.85624C13.3199 3.22451 12.5831 3.7754 11.995 4.46789C11.4074 3.77742 10.6721 3.2278 9.84354 2.85964C9.01498 2.49149 8.11428 2.31421 7.208 2.34089C5.36287 2.41304 3.62138 3.21288 2.36434 4.56549C1.1073 5.9181 0.436992 7.71343 0.499998 9.55889C0.499998 13.1689 3.05 15.3859 5.515 17.5289C5.798 17.7749 6.084 18.0229 6.368 18.2759L7.395 19.1939C8.51504 20.2597 9.68926 21.267 10.913 22.2119C11.2368 22.4215 11.6143 22.5331 12 22.5331C12.3857 22.5331 12.7632 22.4215 13.087 22.2119C14.3497 21.2382 15.56 20.1984 16.713 19.0969L17.635 18.2729C17.928 18.0129 18.225 17.7539 18.52 17.4989C20.854 15.4739 23.5 13.1789 23.5 9.55889C23.563 7.71343 22.8927 5.9181 21.6357 4.56549C20.3786 3.21288 18.6371 2.41304 16.792 2.34089Z"
fill="black"
></path>
</svg>
</div>
<div class="comment">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.656 16.4449C20.8711 14.343 21.2795 11.8706 20.8048 9.4896C20.3301 7.1086 19.0048 4.98185 17.0765 3.50666C15.1482 2.03147 12.7488 1.30874 10.3266 1.47349C7.90429 1.63823 5.62485 2.67919 3.91406 4.4019C2.20327 6.1246 1.17816 8.41121 1.03022 10.8346C0.882288 13.2579 1.62165 15.6522 3.11019 17.5702C4.59873 19.4882 6.73462 20.7987 9.11886 21.2569C11.5031 21.7151 13.9726 21.2896 16.066 20.0599L21 21.4369L19.656 16.4449Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="messages">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 3.43689L9.21799 10.5199"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
></path>
<path
d="M11.698 20.7709L22 3.4379H2L9.218 10.5209L11.698 20.7709Z"
stroke="black"
stroke-width="2"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="save">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 21.4369L12 13.8769L4 21.4369V3.43689H20V21.4369Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="pagination">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<span class="likes"> 12,326 likes </span>
<p class="description">
<span class="username">tracy_world</span> “If it is important to you,
you will find a way. If not<span class="more">...more</span>
</p>
<span class="comments">View all 549 comments</span>
<div class="add-comment">
<img
src="https://cdn.zaferinci.com.tr/c8b8af14cf766622f3895ba6d31b37e3.jpg"
/>
<span>Add a comment...</span>
<img
src="https://cdn.zaferinci.com.tr/heart-emote-instagram.png"
class="emote"
/>
<img
src="https://cdn.zaferinci.com.tr/hand-emote-instagram.png"
class="emote"
/>
<img
src="https://cdn.zaferinci.com.tr/add-new-emote.svg"
class="emote"
/>
</div>
</div>
</section>
<footer>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 23.0001H15.999C15.7338 23.0001 15.4794 22.8947 15.2919 22.7072C15.1044 22.5196 14.999 22.2653 14.999 22.0001V16.5451C15.0063 16.1469 14.9341 15.7514 14.7868 15.3814C14.6395 15.0115 14.4199 14.6747 14.141 14.3906C13.862 14.1064 13.5292 13.8808 13.162 13.7267C12.7949 13.5727 12.4007 13.4933 12.0025 13.4933C11.6043 13.4933 11.2101 13.5727 10.843 13.7267C10.4758 13.8808 10.143 14.1064 9.86403 14.3906C9.58506 14.6747 9.3655 15.0115 9.21818 15.3814C9.07086 15.7514 8.99873 16.1469 9.006 16.5451V22.0001C9.006 22.2653 8.90064 22.5196 8.71311 22.7072C8.52557 22.8947 8.27122 23.0001 8.006 23.0001H2C1.73478 23.0001 1.48043 22.8947 1.29289 22.7072C1.10536 22.5196 1 22.2653 1 22.0001V11.5431C1.00009 11.4077 1.02761 11.2738 1.08088 11.1493C1.13416 11.0249 1.2121 10.9125 1.31 10.8191L11.31 1.27605C11.4961 1.09899 11.7431 1.00024 12 1.00024C12.2569 1.00024 12.5039 1.09899 12.69 1.27605L22.69 10.8191C22.7879 10.9125 22.8658 11.0249 22.9191 11.1493C22.9724 11.2738 22.9999 11.4077 23 11.5431V22.0001C23 22.2653 22.8946 22.5196 22.7071 22.7072C22.5196 22.8947 22.2652 23.0001 22 23.0001Z"
fill="black"
/>
</svg>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 10.5C19 12.1811 18.5015 13.8245 17.5675 15.2223C16.6335 16.6202 15.306 17.7096 13.7528 18.353C12.1996 18.9963 10.4906 19.1647 8.84173 18.8367C7.19289 18.5087 5.67834 17.6992 4.48959 16.5104C3.30085 15.3217 2.4913 13.8071 2.16333 12.1583C1.83535 10.5094 2.00368 8.80036 2.64702 7.24719C3.29037 5.69402 4.37984 4.3665 5.77765 3.43251C7.17547 2.49852 8.81886 2 10.5 2C12.7543 2 14.9163 2.89553 16.5104 4.48959C18.1045 6.08365 19 8.24566 19 10.5Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.511 16.511L22 22"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 12.4369V15.8869C2 18.7359 2.698 19.8919 3.606 20.8309C4.546 21.7399 5.704 22.4389 8.552 22.4389H15.448C18.296 22.4389 19.454 21.7389 20.394 20.8309C21.302 19.8919 22 18.7369 22 15.8869V8.98889C22 6.13989 21.302 4.98289 20.394 4.04389C19.454 3.13689 18.296 2.43689 15.448 2.43689H8.552C5.704 2.43689 4.546 3.13589 3.606 4.04389C2.698 4.98389 2 6.13989 2 8.98889V12.4369Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M6.545 12.4379H17.455"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M12.003 6.9819V17.8919"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.792 4.34089C18.1064 4.41356 19.3389 5.00279 20.2207 5.9802C21.1026 6.9576 21.5624 8.24394 21.5 9.55889C21.5 12.6309 18.848 14.5179 16.303 16.7809C13.791 19.0239 12.438 20.2499 12 20.5329C11.523 20.2239 9.857 18.7099 7.697 16.7809C5.141 14.5089 2.5 12.6039 2.5 9.55889C2.43756 8.24394 2.89739 6.9576 3.77926 5.9802C4.66113 5.00279 5.89357 4.41356 7.208 4.34089C7.93614 4.31882 8.65756 4.48607 9.30171 4.82629C9.94586 5.16651 10.4907 5.66805 10.883 6.28189C11.723 7.45689 11.863 8.04489 12.003 8.04489C12.143 8.04489 12.281 7.45689 13.113 6.27889C13.5031 5.66221 14.0481 5.15868 14.6937 4.81861C15.3393 4.47853 16.0628 4.3138 16.792 4.34089ZM16.792 2.34089C15.8839 2.31182 14.981 2.48798 14.1504 2.85624C13.3199 3.22451 12.5831 3.7754 11.995 4.46789C11.4074 3.77742 10.6721 3.2278 9.84354 2.85964C9.01498 2.49149 8.11428 2.31421 7.208 2.34089C5.36287 2.41304 3.62138 3.21288 2.36434 4.56549C1.1073 5.9181 0.436992 7.71343 0.499998 9.55889C0.499998 13.1689 3.05 15.3859 5.515 17.5289C5.798 17.7749 6.084 18.0229 6.368 18.2759L7.395 19.1939C8.51504 20.2597 9.68926 21.267 10.913 22.2119C11.2368 22.4215 11.6143 22.5331 12 22.5331C12.3857 22.5331 12.7632 22.4215 13.087 22.2119C14.3497 21.2382 15.56 20.1984 16.713 19.0969L17.635 18.2729C17.928 18.0129 18.225 17.7539 18.52 17.4989C20.854 15.4739 23.5 13.1789 23.5 9.55889C23.563 7.71343 22.8927 5.9181 21.6357 4.56549C20.3786 3.21288 18.6371 2.41304 16.792 2.34089Z"
fill="black"
></path>
</svg>
<img
src="https://cdn.zaferinci.com.tr/c8b8af14cf766622f3895ba6d31b37e3.jpg"
alt=""
/>
</footer>
</body>
<script src="https://zaferinci.com.tr/workspace/js/jquery.min.js"></script>
<script src="https://zaferinci.com.tr/workspace/js/width.js"></script>
</html>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
@import "../reset.scss";
body,
input,
textarea,
select,
button {
font-family: "Roboto", sans-serif;
}
html,
body {
height: 100%;
background: #fafafa;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 15px 0;
z-index: 99;
background: #fff;
border-bottom: 1px solid rgba(#000, 0.02);
.actions {
display: flex;
align-items: center;
.add,
.like,
.messages {
margin-right: 20px;
&:last-child {
margin: 0;
}
}
.messages {
position: relative;
&::after {
content: attr(data);
position: absolute;
top: -7px;
right: -7px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 50%;
font-weight: 700;
font-size: 11px;
color: #fff;
}
}
}
}
.stories {
background: #fff;
padding: 66px 0 15px;
/*margin: 0 0 10px 0;*/
ul {
display: flex;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
li {
margin: 0 9px;
a {
display: flex;
flex-direction: column;
align-items: center;
width: 72px;
.avatar {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
border-radius: 50%;
img {
width: 60px;
height: 60px;
outline: 3px solid #fff;
object-fit: cover;
border-radius: 50%;
}
}
span {
line-height: 22px;
font-size: 13px;
font-weight: 400;
color: #000;
}
}
&:first-child {
a {
.avatar {
position: relative;
background: none;
svg {
position: absolute;
bottom: 3px;
right: 3px;
}
}
}
}
}
}
}
.post {
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-bottom: 1px solid rgba(#000, 0.075);
.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 15px;
a {
display: flex;
align-items: center;
.avatar {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
border-radius: 50%;
img {
width: 32px;
height: 32px;
outline: 2px solid #fff;
object-fit: cover;
border-radius: 50%;
}
}
span {
line-height: 22px;
font-size: 17px;
font-weight: 400;
margin-left: 7px;
color: #000;
}
}
.dot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 35px;
width: 35px;
span {
width: 3px;
height: 3px;
margin: 1px 0;
border-radius: 50%;
background: #000;
}
}
}
.content {
min-height: 350px;
width: 100%;
height: 550px;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.bottom {
width: 100%;
padding: 10px 15px;
.actions {
display: flex;
position: relative;
width: 100%;
.like,
.comment,
.save,
.messages {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-right: 7px;
svg {
width: 26px;
height: 26px;
}
}
.comment {
svg {
width: 24px;
height: 24px;
}
}
.save {
margin-left: auto;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 45%;
left: 50%;
width: 30%;
height: 100%;
transform: translate(-50%, -50%);
span {
width: 6px;
height: 6px;
background: #c4c4c4;
border-radius: 50%;
margin-left: 3px;
&:first-child {
width: 7px;
height: 7px;
background: #5792e7;
border-radius: 50%;
}
&:last-child {
width: 4px;
height: 4px;
}
}
}
}
.likes {
display: block;
font-size: 15px;
font-weight: 600;
margin-top: 10px;
}
.description {
margin-top: 5px;
font-size: 16px;
.username {
font-weight: 600;
}
.more {
color: rgba(#000, 0.6);
}
}
.comments {
display: block;
margin-top: 8px;
font-size: 16px;
color: rgba(#000, 0.55);
font-weight: 500;
}
.add-comment {
display: flex;
align-items: center;
margin: 12px 0 5px;
img {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
span {
margin-left: 9px;
font-size: 14px;
font-weight: 500;
color: rgba(#000, 0.4);
}
img:nth-child(3) {
margin-left: auto;
}
.emote {
width: 15px;
height: 15px;
object-fit: cover;
margin: 0 3px;
border-radius: 0;
}
}
}
&.last {
padding-bottom: 44px;
}
}
.suggestions {
padding: 16px;
display: flex;
flex-direction: column;
h2 {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 500;
color: #000;
a {
display: block;
margin-left: auto;
color: #5792e7;
}
}
ul {
display: flex;
align-items: center;
margin-top: 16px;
overflow-x: scroll;
margin: 16px -16px 0;
&::-webkit-scrollbar {
display: none;
}
li {
&:first-child {
margin-left: 16px;
}
a {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 10px;
margin-right: 10px;
min-width: 200px;
border: 1px solid rgba(#000, 0.11);
background: #fff;
border-radius: 4px;
position: relative;
.close-btn {
position: absolute;
top: 9px;
right: 9px;
}
.avatar {
width: 140px;
height: 140px;
margin-bottom: 12px;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
}
.username {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
color: #000;
svg {
margin-left: 2px;
width: 16px;
height: 16px;
}
}
span {
color: rgba(#000, 0.6);
margin: 3px 0 17px 0;
font-size: 14px;
}
button {
width: 100%;
height: 25px;
color: #fff;
font-size: 14px;
font-weight: 500;
border-radius: 4px;
background: #5793ea;
}
}
}
}
}
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 32px 13px;
background: #fff;
border-top: 1px solid rgba(#000, 0.05);
svg {
width: 24px;
height: 24px;
}
img {
width: 24px;
height: 24px;
border-radius: 50%;
}
}
.warning {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: #fff;
z-index: 9999 !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
img {
margin-top: -100px;
}
h2 {
font-size: 48px;
margin-bottom: 10px;
}
p {
font-size: 20px;
color: rgba(#000, 0.65);
max-width: 600px;
span {
cursor: pointer;
color: rgb(255, 123, 0);
}
}
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
outline: 0;
-webkit-overflow-scrolling: touch;
text-decoration: none;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-width: auto;
scrollbar-color: #ccc #fff;
-webkit-tap-highlight-color: transparent;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
border: 4px solid transparent;
}
*::before,
*::after {
box-sizing: border-box;
}
body,
input,
textarea,
select,
button {
font-family: "Roboto", sans-serif;
}
html,
body {
height: 100%;
background: #fafafa;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 15px 0;
z-index: 99;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}
header .actions {
display: flex;
align-items: center;
}
header .actions .add,
header .actions .like,
header .actions .messages {
margin-right: 20px;
}
header .actions .add:last-child,
header .actions .like:last-child,
header .actions .messages:last-child {
margin: 0;
}
header .actions .messages {
position: relative;
}
header .actions .messages::after {
content: attr(data);
position: absolute;
top: -7px;
right: -7px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 50%;
font-weight: 700;
font-size: 11px;
color: #fff;
}
.stories {
background: #fff;
padding: 66px 0 15px;
/*margin: 0 0 10px 0;*/
}
.stories ul {
display: flex;
overflow-x: auto;
}
.stories ul::-webkit-scrollbar {
display: none;
}
.stories ul li {
margin: 0 9px;
}
.stories ul li a {
display: flex;
flex-direction: column;
align-items: center;
width: 72px;
}
.stories ul li a .avatar {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
border-radius: 50%;
}
.stories ul li a .avatar img {
width: 60px;
height: 60px;
outline: 3px solid #fff;
object-fit: cover;
border-radius: 50%;
}
.stories ul li a span {
line-height: 22px;
font-size: 13px;
font-weight: 400;
color: #000;
}
.stories ul li:first-child a .avatar {
position: relative;
background: none;
}
.stories ul li:first-child a .avatar svg {
position: absolute;
bottom: 3px;
right: 3px;
}
.post {
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
.post .header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 15px;
}
.post .header a {
display: flex;
align-items: center;
}
.post .header a .avatar {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
border-radius: 50%;
}
.post .header a .avatar img {
width: 32px;
height: 32px;
outline: 2px solid #fff;
object-fit: cover;
border-radius: 50%;
}
.post .header a span {
line-height: 22px;
font-size: 17px;
font-weight: 400;
margin-left: 7px;
color: #000;
}
.post .header .dot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 35px;
width: 35px;
}
.post .header .dot span {
width: 3px;
height: 3px;
margin: 1px 0;
border-radius: 50%;
background: #000;
}
.post .content {
min-height: 350px;
width: 100%;
height: 550px;
}
.post .content img {
object-fit: cover;
width: 100%;
height: 100%;
}
.post .bottom {
width: 100%;
padding: 10px 15px;
}
.post .bottom .actions {
display: flex;
position: relative;
width: 100%;
}
.post .bottom .actions .like,
.post .bottom .actions .comment,
.post .bottom .actions .save,
.post .bottom .actions .messages {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-right: 7px;
}
.post .bottom .actions .like svg,
.post .bottom .actions .comment svg,
.post .bottom .actions .save svg,
.post .bottom .actions .messages svg {
width: 26px;
height: 26px;
}
.post .bottom .actions .comment svg {
width: 24px;
height: 24px;
}
.post .bottom .actions .save {
margin-left: auto;
}
.post .bottom .actions .pagination {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 45%;
left: 50%;
width: 30%;
height: 100%;
transform: translate(-50%, -50%);
}
.post .bottom .actions .pagination span {
width: 6px;
height: 6px;
background: #c4c4c4;
border-radius: 50%;
margin-left: 3px;
}
.post .bottom .actions .pagination span:first-child {
width: 7px;
height: 7px;
background: #5792e7;
border-radius: 50%;
}
.post .bottom .actions .pagination span:last-child {
width: 4px;
height: 4px;
}
.post .bottom .likes {
display: block;
font-size: 15px;
font-weight: 600;
margin-top: 10px;
}
.post .bottom .description {
margin-top: 5px;
font-size: 16px;
}
.post .bottom .description .username {
font-weight: 600;
}
.post .bottom .description .more {
color: rgba(0, 0, 0, 0.6);
}
.post .bottom .comments {
display: block;
margin-top: 8px;
font-size: 16px;
color: rgba(0, 0, 0, 0.55);
font-weight: 500;
}
.post .bottom .add-comment {
display: flex;
align-items: center;
margin: 12px 0 5px;
}
.post .bottom .add-comment img {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.post .bottom .add-comment span {
margin-left: 9px;
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.4);
}
.post .bottom .add-comment img:nth-child(3) {
margin-left: auto;
}
.post .bottom .add-comment .emote {
width: 15px;
height: 15px;
object-fit: cover;
margin: 0 3px;
border-radius: 0;
}
.post.last {
padding-bottom: 44px;
}
.suggestions {
padding: 16px;
display: flex;
flex-direction: column;
}
.suggestions h2 {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 500;
color: #000;
}
.suggestions h2 a {
display: block;
margin-left: auto;
color: #5792e7;
}
.suggestions ul {
display: flex;
align-items: center;
margin-top: 16px;
overflow-x: scroll;
margin: 16px -16px 0;
}
.suggestions ul::-webkit-scrollbar {
display: none;
}
.suggestions ul li:first-child {
margin-left: 16px;
}
.suggestions ul li a {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 10px;
margin-right: 10px;
min-width: 200px;
border: 1px solid rgba(0, 0, 0, 0.11);
background: #fff;
border-radius: 4px;
position: relative;
}
.suggestions ul li a .close-btn {
position: absolute;
top: 9px;
right: 9px;
}
.suggestions ul li a .avatar {
width: 140px;
height: 140px;
margin-bottom: 12px;
}
.suggestions ul li a .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.suggestions ul li a .username {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
color: #000;
}
.suggestions ul li a .username svg {
margin-left: 2px;
width: 16px;
height: 16px;
}
.suggestions ul li a span {
color: rgba(0, 0, 0, 0.6);
margin: 3px 0 17px 0;
font-size: 14px;
}
.suggestions ul li a button {
width: 100%;
height: 25px;
color: #fff;
font-size: 14px;
font-weight: 500;
border-radius: 4px;
background: #5793ea;
}
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 32px 13px;
background: #fff;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
footer svg {
width: 24px;
height: 24px;
}
footer img {
width: 24px;
height: 24px;
border-radius: 50%;
}
.warning {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: #fff;
z-index: 9999 !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.warning img {
margin-top: -100px;
}
.warning h2 {
font-size: 48px;
font-weight: 700;
margin-bottom: 10px;
}
.warning p {
font-size: 20px;
color: rgba(0, 0, 0, 0.65);
max-width: 600px;
}
.warning p span {
cursor: pointer;
color: #ff7b00;
}
Tweet
Share
Post
