Search code examples
htmlcssbulma

How would I duplicate the placement in this image?

I'm trying to build this view and I'm having trouble placing the circle and car images on that path(line). I have individual files for each part of the car path image. There are also two sections of text that are each on their side and not exactly aligned.

How would I recreate this with things staying in line?

enter image description here

enter image description here enter image description here enter image description here enter image description here

Solution

  • Because we do not have the wavy line as a mathematical formula but contained within a png, and with wide margins above and below the line, we'll have to use measurement, and hence fractions, to work out where in relation to the line png the car and circles are to be placed.

    This snippet makes all four pngs into the background of the element below the heading. In this way the two columns can be placed at the same distance left as the two circles (i.e. in relation to the width of the content). If these are to change then the calculation of the vertical position of the circles must also change.

    The car is placed in the center horizontally and again the vertical position adjusted so it appears on top of the line.

    The result is:

    enter image description here

    It is responsive as everything is calculated in terms of the width of the viewport ultimately.

    h1 {
  text-align: center;
}

.content {
  width: 100vw;
  height: 100vh;
  position: relative;
  --h: calc(754 / 1400 * 100vw);
  /* the height of the wavy line image file */
  --top: calc(var(--h) * -0.45);
  /* the position of the top of the wavy line image */
  background-image: url(https://i.sstatic.net/rbWbW.png), url(https://i.sstatic.net/9DQ8A.png), url(https://i.sstatic.net/qKOxp.png), url(https://i.sstatic.net/fQ3el.png);
  background-repeat: no-repeat no-repeat;
  background-size: 10% auto, 1% auto, 1% auto, 100% auto;
  background-position: 50% calc(var(--top) + (0.48 * var(--h))), 12% calc(var(--top) + (0.56 * var(--h))), 62% calc(var(--top) + (0.475 * var(--h))), 0 var(--top);
}

.col1 {
  width: 35%;
  position: absolute;
  top: calc(var(--top) + (0.7 * var(--h)));
  left: 12%;
  margin: 0;
  padding: 0;
}

.col2 {
  width: 35%;
  position: absolute;
  top: calc(var(--top) + (0.6 * var(--h)));
  left: 62%;
  margin: 0;
  padding: 0;
}
    <h1>Our Services</h1>
<div class="content">
  <div class="col1">content of column 1</div>
  <div class="col2">content of column2</div>
</div>