index.html

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/styles/style.css">
</head>

<body>
    <div class="container">
        <header class="container p-3">
            <div class="d-flex justify-content-between">
                <div class="d-flex gap-2 align-items-center">
                    <svg width="30" height="30" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M32.5 8.33337H67.5C80.8333 8.33337 91.6667 19.1667 91.6667 32.5V67.5C91.6667 73.9094 89.1205 80.0563 84.5884 84.5885C80.0563 89.1206 73.9094 91.6667 67.5 91.6667H32.5C19.1667 91.6667 8.33334 80.8334 8.33334 67.5V32.5C8.33334 26.0906 10.8795 19.9438 15.4116 15.4116C19.9437 10.8795 26.0906 8.33337 32.5 8.33337ZM31.6667 16.6667C27.6884 16.6667 23.8731 18.2471 21.0601 21.0601C18.247 23.8732 16.6667 27.6885 16.6667 31.6667V68.3334C16.6667 76.625 23.375 83.3334 31.6667 83.3334H68.3333C72.3116 83.3334 76.1269 81.753 78.9399 78.94C81.753 76.1269 83.3333 72.3116 83.3333 68.3334V31.6667C83.3333 23.375 76.625 16.6667 68.3333 16.6667H31.6667ZM71.875 22.9167C73.2563 22.9167 74.5811 23.4654 75.5579 24.4422C76.5346 25.4189 77.0833 26.7437 77.0833 28.125C77.0833 29.5064 76.5346 30.8311 75.5579 31.8079C74.5811 32.7846 73.2563 33.3334 71.875 33.3334C70.4937 33.3334 69.1689 32.7846 68.1921 31.8079C67.2154 30.8311 66.6667 29.5064 66.6667 28.125C66.6667 26.7437 67.2154 25.4189 68.1921 24.4422C69.1689 23.4654 70.4937 22.9167 71.875 22.9167ZM50 29.1667C55.5253 29.1667 60.8244 31.3616 64.7314 35.2686C68.6384 39.1757 70.8333 44.4747 70.8333 50C70.8333 55.5254 68.6384 60.8244 64.7314 64.7314C60.8244 68.6384 55.5253 70.8334 50 70.8334C44.4747 70.8334 39.1756 68.6384 35.2686 64.7314C31.3616 60.8244 29.1667 55.5254 29.1667 50C29.1667 44.4747 31.3616 39.1757 35.2686 35.2686C39.1756 31.3616 44.4747 29.1667 50 29.1667ZM50 37.5C46.6848 37.5 43.5054 38.817 41.1612 41.1612C38.817 43.5054 37.5 46.6848 37.5 50C37.5 53.3152 38.817 56.4947 41.1612 58.8389C43.5054 61.1831 46.6848 62.5 50 62.5C53.3152 62.5 56.4946 61.1831 58.8388 58.8389C61.183 56.4947 62.5 53.3152 62.5 50C62.5 46.6848 61.183 43.5054 58.8388 41.1612C56.4946 38.817 53.3152 37.5 50 37.5Z"
                            fill="black" />
                    </svg>
                    <h3>Instagram</h3>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-success" data-toggle="modal" data-target="#post-modal">Create a new
                        post</button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                            <svg width="20" height="20" viewBox="0 0 100 100" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M82.9167 52.75C82.2487 51.9896 81.8803 51.0121 81.8803 50C81.8803 48.9879 82.2487 48.0103 82.9167 47.25L88.25 41.25C88.8377 40.5944 89.2026 39.7696 89.2925 38.8937C89.3823 38.0179 89.1924 37.1362 88.75 36.375L80.4167 21.9583C79.9788 21.198 79.312 20.5953 78.5115 20.2362C77.7109 19.877 76.8174 19.7798 75.9583 19.9583L68.125 21.5416C67.1283 21.7476 66.0906 21.5816 65.2079 21.075C64.3251 20.5683 63.6583 19.7561 63.3333 18.7916L60.7917 11.1666C60.5121 10.339 59.9796 9.62024 59.2693 9.11181C58.559 8.60338 57.7068 8.33105 56.8333 8.3333H40.1667C39.2581 8.28588 38.3589 8.53716 37.6065 9.04878C36.8541 9.56039 36.2899 10.3042 36 11.1666L33.6667 18.7916C33.3417 19.7561 32.6749 20.5683 31.7921 21.075C30.9094 21.5816 29.8717 21.7476 28.875 21.5416L20.8333 19.9583C20.019 19.8432 19.1888 19.9717 18.4473 20.3276C17.7058 20.6835 17.0863 21.2509 16.6667 21.9583L8.33333 36.375C7.87984 37.1277 7.67593 38.0045 7.75076 38.8801C7.8256 39.7556 8.17534 40.5851 8.75 41.25L14.0417 47.25C14.7097 48.0103 15.0781 48.9879 15.0781 50C15.0781 51.0121 14.7097 51.9896 14.0417 52.75L8.75 58.75C8.17534 59.4148 7.8256 60.2443 7.75076 61.1199C7.67593 61.9954 7.87984 62.8723 8.33333 63.625L16.6667 78.0416C17.1046 78.802 17.7713 79.4046 18.5719 79.7638C19.3724 80.1229 20.2659 80.2201 21.125 80.0416L28.9583 78.4583C29.9551 78.2523 30.9927 78.4183 31.8755 78.925C32.7582 79.4316 33.425 80.2438 33.75 81.2083L36.2917 88.8333C36.5816 89.6957 37.1458 90.4395 37.8982 90.9512C38.6506 91.4628 39.5497 91.7141 40.4583 91.6666H57.125C57.9985 91.6689 58.8506 91.3966 59.561 90.8881C60.2713 90.3797 60.8038 89.6609 61.0833 88.8333L63.625 81.2083C63.95 80.2438 64.6168 79.4316 65.4995 78.925C66.3823 78.4183 67.4199 78.2523 68.4167 78.4583L76.25 80.0416C77.1091 80.2201 78.0026 80.1229 78.8031 79.7638C79.6037 79.4046 80.2704 78.802 80.7083 78.0416L89.0417 63.625C89.4841 62.8638 89.674 61.982 89.5841 61.1062C89.4943 60.2304 89.1294 59.4055 88.5417 58.75L82.9167 52.75ZM76.7083 58.3333L80.0417 62.0833L74.7083 71.3333L69.7917 70.3333C66.7907 69.7199 63.669 70.2296 61.0191 71.7658C58.3692 73.302 56.3756 75.7576 55.4167 78.6666L53.8333 83.3333H43.1667L41.6667 78.5833C40.7077 75.6743 38.7141 73.2187 36.0642 71.6825C33.4143 70.1463 30.2926 69.6365 27.2917 70.25L22.375 71.25L16.9583 62.0416L20.2917 58.2916C22.3415 55.9999 23.4747 53.033 23.4747 49.9583C23.4747 46.8836 22.3415 43.9167 20.2917 41.625L16.9583 37.875L22.2917 28.7083L27.2083 29.7083C30.2093 30.3217 33.331 29.812 35.9809 28.2758C38.6308 26.7396 40.6244 24.284 41.5833 21.375L43.1667 16.6666H53.8333L55.4167 21.4166C56.3756 24.3256 58.3692 26.7813 61.0191 28.3175C63.669 29.8536 66.7907 30.3634 69.7917 29.75L74.7083 28.75L80.0417 38L76.7083 41.75C74.6815 44.0365 73.5624 46.9861 73.5624 50.0416C73.5624 53.0971 74.6815 56.0468 76.7083 58.3333ZM48.5 33.3333C45.2036 33.3333 41.9813 34.3108 39.2405 36.1421C36.4997 37.9735 34.3635 40.5765 33.102 43.6219C31.8405 46.6673 31.5105 50.0185 32.1536 53.2515C32.7967 56.4845 34.384 59.4542 36.7149 61.7851C39.0458 64.116 42.0155 65.7033 45.2485 66.3464C48.4815 66.9895 51.8326 66.6594 54.8781 65.398C57.9235 64.1365 60.5265 62.0003 62.3578 59.2595C64.1892 56.5187 65.1667 53.2963 65.1667 50C65.1667 45.5797 63.4107 41.3405 60.2851 38.2149C57.1595 35.0892 52.9203 33.3333 48.5 33.3333ZM48.5 58.3333C46.8518 58.3333 45.2407 57.8446 43.8702 56.9289C42.4998 56.0132 41.4317 54.7117 40.801 53.189C40.1703 51.6663 40.0052 49.9907 40.3268 48.3742C40.6483 46.7577 41.442 45.2729 42.6074 44.1074C43.7729 42.942 45.2577 42.1483 46.8742 41.8268C48.4908 41.5052 50.1663 41.6702 51.689 42.301C53.2117 42.9317 54.5132 43.9998 55.4289 45.3702C56.3446 46.7406 56.8333 48.3518 56.8333 50C56.8333 52.2101 55.9554 54.3297 54.3926 55.8925C52.8298 57.4553 50.7101 58.3333 48.5 58.3333Z"
                                    fill="white" />
                            </svg>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Profile</a>
                            <a class="dropdown-item" href="#">Accessbility</a>
                            <a class="dropdown-item" href="#">Privacy and Data</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item text-danger" href="#">Log out</a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="container p-3">
            <div class="d-flex gap-3 justify-content-center">
                <button class="grid-btn">
                    <svg width="30" height="30" class="view-item" viewBox="0 0 100 100" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M16.6667 91.6667C14.375 91.6667 12.4139 90.8514 10.7833 89.2209C9.15 87.5875 8.33333 85.625 8.33333 83.3334V16.6667C8.33333 14.375 9.15 12.4125 10.7833 10.7792C12.4139 9.14865 14.375 8.33337 16.6667 8.33337H83.3333C85.625 8.33337 87.5875 9.14865 89.2208 10.7792C90.8514 12.4125 91.6667 14.375 91.6667 16.6667V83.3334C91.6667 85.625 90.8514 87.5875 89.2208 89.2209C87.5875 90.8514 85.625 91.6667 83.3333 91.6667H16.6667ZM16.6667 66.6667V83.3334H33.3333V66.6667H16.6667ZM41.6667 66.6667V83.3334H58.3333V66.6667H41.6667ZM66.6667 83.3334H83.3333V66.6667H66.6667V83.3334ZM16.6667 58.3334H33.3333V41.6667H16.6667V58.3334ZM41.6667 58.3334H58.3333V41.6667H41.6667V58.3334ZM66.6667 58.3334H83.3333V41.6667H66.6667V58.3334ZM33.3333 16.6667H16.6667V33.3334H33.3333V16.6667ZM41.6667 33.3334H58.3333V16.6667H41.6667V33.3334ZM66.6667 33.3334H83.3333V16.6667H66.6667V33.3334Z"
                            fill="gray" />
                    </svg>
                </button>
                <button class="column-btn">
                    <svg width="30" height="30" class="view-item active" viewBox="0 0 100 100" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M20.8333 87.5C18.5417 87.5 16.5792 86.6847 14.9458 85.0542C13.3153 83.4208 12.5 81.4583 12.5 79.1667V20.8333C12.5 18.5417 13.3153 16.5792 14.9458 14.9458C16.5792 13.3153 18.5417 12.5 20.8333 12.5H79.1667C81.4583 12.5 83.4208 13.3153 85.0542 14.9458C86.6847 16.5792 87.5 18.5417 87.5 20.8333V79.1667C87.5 81.4583 86.6847 83.4208 85.0542 85.0542C83.4208 86.6847 81.4583 87.5 79.1667 87.5H20.8333Z"
                            fill="gray" />
                    </svg>
                </button>
            </div>
            <div class="d-flex flex-column gap-3 align-items-center pt-5" id="blog-list">
                
            </div>
        </div>
        <div class="modal fade" id="post-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Create a new post</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="comment">Caption:</label>
                            <textarea placeholder="Add the caption of your post here" name="caption"
                                class="form-control" rows="5" id="post-caption"></textarea>
                        </div>
                        <div class="d-flex pt-2 gap-2">
                            <button class="btn btn-outline-light" id="upload-post">
                                <svg width="20" height="20" viewBox="0 0 100 100" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M50.0002 72.9167C55.2085 72.9167 59.6363 71.0944 63.2835 67.45C66.9279 63.8028 68.7502 59.375 68.7502 54.1667C68.7502 48.9583 66.9279 44.5306 63.2835 40.8833C59.6363 37.2389 55.2085 35.4167 50.0002 35.4167C44.7918 35.4167 40.3641 37.2389 36.7168 40.8833C33.0724 44.5306 31.2502 48.9583 31.2502 54.1667C31.2502 59.375 33.0724 63.8028 36.7168 67.45C40.3641 71.0944 44.7918 72.9167 50.0002 72.9167ZM45.4168 49.5833L48.1252 43.75C48.4724 42.9167 49.0974 42.5 50.0002 42.5C50.9029 42.5 51.5279 42.9167 51.8752 43.75L54.5835 49.5833L60.4168 52.2917C61.2502 52.6389 61.6668 53.2639 61.6668 54.1667C61.6668 55.0694 61.2502 55.6944 60.4168 56.0417L54.5835 58.75L51.8752 64.5833C51.5279 65.4167 50.9029 65.8333 50.0002 65.8333C49.0974 65.8333 48.4724 65.4167 48.1252 64.5833L45.4168 58.75L39.5835 56.0417C38.7502 55.6944 38.3335 55.0694 38.3335 54.1667C38.3335 53.2639 38.7502 52.6389 39.5835 52.2917L45.4168 49.5833ZM16.6668 87.5C14.3752 87.5 12.4141 86.6847 10.7835 85.0542C9.15016 83.4208 8.3335 81.4583 8.3335 79.1667V29.1667C8.3335 26.875 9.15016 24.9139 10.7835 23.2833C12.4141 21.65 14.3752 20.8333 16.6668 20.8333H29.7918L35.0002 15.2083C35.764 14.3056 36.6835 13.6278 37.7585 13.175C38.8363 12.725 39.9654 12.5 41.146 12.5H58.8543C60.0349 12.5 61.164 12.725 62.2418 13.175C63.3168 13.6278 64.2363 14.3056 65.0002 15.2083L70.2085 20.8333H83.3335C85.6252 20.8333 87.5877 21.65 89.221 23.2833C90.8515 24.9139 91.6668 26.875 91.6668 29.1667V79.1667C91.6668 81.4583 90.8515 83.4208 89.221 85.0542C87.5877 86.6847 85.6252 87.5 83.3335 87.5H16.6668Z"
                                        fill="black" />
                                </svg>
                            </button>
                            <input type="file" name="file" id="post-img">
                            <button class="btn btn-outline-light">
                                <svg width="20" height="20" viewBox="0 0 100 100" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M49.9998 49.9999C52.2915 49.9999 54.254 49.1832 55.8873 47.5499C57.5179 45.9194 58.3332 43.9583 58.3332 41.6666C58.3332 39.3749 57.5179 37.4124 55.8873 35.7791C54.254 34.1485 52.2915 33.3333 49.9998 33.3333C47.7082 33.3333 45.7471 34.1485 44.1165 35.7791C42.4832 37.4124 41.6665 39.3749 41.6665 41.6666C41.6665 43.9583 42.4832 45.9194 44.1165 47.5499C45.7471 49.1832 47.7082 49.9999 49.9998 49.9999ZM49.9998 91.6666C38.8193 82.1527 30.4693 73.3152 24.9498 65.1541C19.4276 56.9958 16.6665 49.4444 16.6665 42.4999C16.6665 32.0833 20.0179 23.7846 26.7207 17.6041C33.4207 11.4235 41.1804 8.33325 49.9998 8.33325C58.8193 8.33325 66.579 11.4235 73.279 17.6041C79.9818 23.7846 83.3332 32.0833 83.3332 42.4999C83.3332 49.4444 80.5734 56.9958 75.054 65.1541C69.5318 73.3152 61.1804 82.1527 49.9998 91.6666Z"
                                        fill="black" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button class="btn btn-success publish-post" data-dismiss="modal">Publish</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="./assets/js/util.js"></script>
</body>

</html>