Skip to content

Instantly share code, notes, and snippets.

@hazratbilal0079

hazratbilal0079/css file

Created September 11, 2024 12:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hazratbilal0079/94d546c5599b44842a7390b74cbf27e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hazratbilal0079/94d546c5599b44842a7390b74cbf27e2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hazratbilal0079 created this gist Sep 11, 2024.
    107 changes: 107 additions & 0 deletions css file
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    .masonry-horizontal {
    display: flex;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    }

    .masonry-image {
    width: 30%;
    height: 100%;
    flex-shrink: 0;
    }

    .masonry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    .masonry-content {
    width: 70%;
    padding: 20px;
    box-sizing: border-box;
    }

    .masonry-title {
    margin-top: 0;
    font-size: 20px;
    color: #333;
    }

    .fields {
    margin-bottom: 20px;
    }

    .field-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between fields */
    margin-bottom: 10px;
    }

    .field {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    width: calc(33.33% - 20px); /* 3 columns per row */
    border-radius: 4px;
    }

    .buttons {
    display: flex;
    gap: 10px;
    }

    .buttons button {
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    }

    .buttons .edit {
    background-color: #007bff;
    }

    .buttons .delete {
    background-color: #dc3545;
    }

    .buttons .publish {
    background-color: #28a745;
    }

    @media (max-width: 768px) {
    .masonry-horizontal {
    flex-direction: column;
    }

    .masonry-image {
    width: 100%;
    height: auto; /* Adjust height for mobile */
    }

    .masonry-content {
    width: 100%;
    padding: 10px; /* Adjust padding for mobile */
    }

    .field-container {
    flex-direction: column;
    gap: 10px; /* Adjust space between fields in a single column */
    }

    .field {
    width: 100%; /* Full width for single-column layout */
    }

    .buttons {
    flex-direction: column;
    gap: 5px;
    }
    }
    40 changes: 40 additions & 0 deletions html file
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <div class="masonry-horizontal">
    <div class="masonry-image">
    <img src="https://vipprops.ae/wp-content/uploads/jet-form-builder/2172fde49301047270b2897085e4319d/2024/09/Ocean-terrace.jpg" alt="Ocean Terrace">
    </div>
    <div class="masonry-content">
    <h3 class="masonry-title">Hazrat Bilal Timber/Twing Card Layout 01 with 3 fields in row</h3>
    <div class="fields">
    <div class="field-container">
    <div class="field">Field 1: Value</div>
    <div class="field">Field 2: Value</div>
    <div class="field">Field 3: Value</div>
    </div>
    <div class="field-container">
    <div class="field">Field 4: Value</div>
    <div class="field">Field 5: Value</div>
    <div class="field">Field 6: Value</div>
    </div>
    <div class="field-container">
    <div class="field">Field 7: Value</div>
    <div class="field">Field 8: Value</div>
    <div class="field">Field 9: Value</div>
    </div>
    <div class="field-container">
    <div class="field">Field 10: Value</div>
    <div class="field">Field 11: Value</div>
    <div class="field">Field 12: Value</div>
    </div>
    <div class="field-container">
    <div class="field">Field 13: Value</div>
    <div class="field">Field 14: Value</div>
    <div class="field">Field 15: Value</div>
    </div>
    </div>
    <div class="buttons">
    <button class="publish">View Details</button>
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
    </div>
    </div>
    </div>