Tips for effectively arranging images in a spiral formation

I'm striving to replicate the layout showcased in this screenshot : https://i.sstatic.net/RBg62.jpg

My attempt involved utilizing columns with bootstrap 4. Initially, the layout appeared intact, but the elements being within a container-fluid caused issues when resizing the window slightly.

Below is the snippet of my code :

.secondary-title {
  color: #CABB9D;
  font-size: 1.4em;
  line-height: 1.9em;
  & span {
    color: #18161A;
    font-family: 'PTSans';
    font-weight: bold;
    font-size: 2.2em;
  }
}

.two-points {
  border-top: 10px dotted #C1B89C;
  width: 40px;
  margin-left: 0;
  margin-top: 0;
}

.cf-square-pic {
  & .bloc-title {
    width: 445px;
    margin: 50px 0 110px 20px;
  }
  & .photo-4 {
    margin-top: 50px;
  }
}
<div class="container-fluid cf-square-pic px-0">
  <div class="row no-gutters">
    <div class="col-lg-7">
      <img src="/assets/img/photo/photo-1.jpg" alt="" class="d-block w-100 photo-1">
    </div>
    <div class="col-lg-5">
      <div class="bloc-title px-3">
        <h2 class="secondary-title mb-1">
          <span>LOREM IPSUM DOLOR</span>
        </h2>
        <hr class="two-points" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec purus urna. Pellentesque varius facilisis tellus nec ullamcorper. Ut sit amet vulputate mauris.
        </p>
      </div>
      <img src="/assets/img/photo/photo-4.jpg" alt="" class="d-block w-100 photo-4">
    </div>
    <div class="col-lg-5">
      <img src="/assets/img/photo/photo-2.jpg" alt="" class="d-block w-100 photo-2">
    </div>
    <div class="col-lg-7">
      <img src="/assets/img/photo/photo-3.jpg" alt="" class="d-block w-100 photo-3">
    </div>
  </div>
</div>

Any suggestions on how I can position the last image at the bottom left beneath the top left image, without disrupting the layout upon resizing?

Your assistance is greatly appreciated!

htmlcssbootstrap-4

Answer №1

I managed to figure it out! Here is the successful code snippet that I used:

    <div class="container-fluid cf-square-pic px-0">
        <div class="row no-gutters row-flex">
              <img src="/assets/img/photo/photo-1.jpg" alt="" class="d-block w-100 photo-1">
              <img src="/assets/img/photo/photo-2.jpg" alt="" class="d-block w-100 photo-2">
              <div class="bloc-title px-3">
                  <h2 class="secondary-title mb-1">
                      <span>LOREM IPSUM DOLOR</span>
                  </h2>
                  <hr class="two-points"/>
                  <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec purus urna. Pellentesque varius facilisis tellus nec ullamcorper. Ut sit amet vulputate mauris.
                  </p>
              </div>
              <img src="/assets/img/photo/photo-4.jpg" alt="" class="d-block w-100 photo-4">
              <img src="/assets/img/photo/photo-3.jpg" alt="" class="d-block w-100 photo-3">
        </div>
    </div>

.cf-square-pic {
    & .bloc-title {
        width: 445px;
        margin: 50px 0 80px 20px;
    }
    & .row-flex {
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        max-height: 95vw;
        & .photo-1 { width: 54%; }
        & .photo-2 {
            width: 35%;
            border-top: 4px solid #fff;
            border-right: 4px solid #fff;
        }
        & .photo-3 {
            width: 65%;
            margin-left: -19%;
        }
        & .photo-4 {
            width: 46%;
            border-bottom: 4px solid #fff;
            border-left: 4px solid #fff;
        }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript function to substitute instead of writing

function replaceHTML(a,b) { var x = document.getElementById("canvas_html").contentDocument; x.innerHTML = b; } Although the current function works fine, I would like to update it to directly replace the existing content instead of writing new con ...

javascripthtml

What is the best way to prevent the navbar from covering content? The navbar-static-top option helps, but it doesn't allow for fixed-scroll

I am facing an issue with my navigation bar while using asp.net. When I apply the class navbar-fixed-top, the navigation bar becomes fixed and scrolls with the page, but it overlaps the content in the contentplaceholder However, when I switch to the clas ...

jqueryhtmlasp.netcss

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss

What is causing this code to keep iterating endlessly?

I have a basic jquery script embedded in my HTML code that utilizes the cycle plugin for jQuery. The problem I'm facing is that when I interact with the slideshow using the "next" or "previous" buttons, it continues to loop automatically after that in ...

javascriptjqueryhtmlwebcycle

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

htmlcsstailwind-css

What is the best way to showcase the current element using jQuery?

I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...

jqueryhtmlcss

retrieve all entries from a paginated grid

Currently, I am utilizing the datatable feature in bootstrap4 with a table that has pagination set to display 10 items per page. I have implemented a function to retrieve values from the table, however I am facing an issue where I am only able to retriev ...

javascripthtmljquerybootstrap-4bootstrap-table

Using Javascript to Trigger Events on Selection

I have a unique situation: 1) One of my dropdown's choices features various car names. 2) Another dropdown has two options: When selecting each option in the second dropdown, the following should occur: a) Choose UserInput - This action will hide ...

javascriptjqueryhtmlcss

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Retrieve the previous cost from an Amazon product listing

While working with Python's BeautifulSoup to extract the previous price from an Amazon page, I encountered a problem where my code was displaying the current price instead of the previous one. This is the code snippet I tried: priceold = soup.find(cl ...

pythonhtmlweb-scrapingbeautifulsoup

Calculate the sum of a column in a table that is dynamically populated

I'm using jQuery to load a table with data: function getSales(customerId, fromDate, toDate){ $.ajax({ type: 'POST', url: 'ajax/sale_pl.php', data:{customer_id:customerId, from_date:fromD ...

htmljqueryjsonajaxdom

Tips for forwarding an image uploaded using Flask Dropzone to a different page

I recently used Flask Dropzone to upload an image into the uploads folder. My goal is to pass this uploaded image to my makeMeme page so that I can display it using the html img tag. Despite my efforts, when I attempt to reference the file for displaying, ...

pythonhtmlflaskfile-uploaddropzone.js

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

javascripthtmlcsscanvashtml5-canvas

Angular 7 compile error NG8002: Unable to bind object as it is not recognized as a valid property

Currently working on an Angular 7/8 test App. Encountering a compile error Can't bind 'discounter' since it isn't a known property of 'paDiscountEditor' The HTML where the error is occurring is simple... Below are all the nec ...

htmlangulartypescriptcompiler-errors

Tips on adjusting CSS code to ensure that a single accordion panel is open when the page first loads

I have a code that is functioning perfectly. However, I need to make a modification so that there is a default panel open when the page loads or refreshes. #acc-label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px ...

htmlcssaccordion

Repositioning a variable number of divs as the cursor hovers over the target area

Can anyone show me how to generate div elements in a loop using jQuery and change their position with the "mouseover" function? I've tried some code, but the positioning isn't changing correctly. Any suggestions on what needs fixing? var r, g, ...

javascriptjqueryhtmlcss

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

After using a CSS stylesheet to position my textboxes correctly, I noticed that in Chrome everything appeared fine. However, when attempting to print the site (Ctrl+P), each sentence and textbox shifted. How can I ensure they remain in place? <!-- #cap ...

phpcssprinting

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

javascripthtmlangularjsjson

Tips for achieving horizontal alignment of headers

My webpage has two headers positioned as 'CompanyName' on the top left and 'Date' at the top middle but I am struggling to align them horizontally. I attempted to enclose them inside a div element, however, this did not work. Can someon ...

htmlcssasp.net-mvc

Stylized with different images scattered across the browser window

Is there a way to ensure that all my randomly positioned images stay within the bounds of their 100% wrap without being cut off? Currently, some images are getting cut off due to the overflow: hidden setting. Also, is it possible to prevent the images from ...

jqueryhtmlcss