Web dev help

[LukeS]

Hi There,

Just a question for more experienced guys,
Is it possible to create a layout as below? Home page with the links next to the arrows
Also, maybe you could advise how?

ATS-Web-layout hosted at ImgBB

Image ATS-Web-layout hosted in ImgBB

ibb.co

 

[x3llo]

Hi There,

Just a question for more experienced guys,
Is it possible to create a layout as below? Home page with the links next to the arrows
Also, maybe you could advise how?

ATS-Web-layout hosted at ImgBB

Image ATS-Web-layout hosted in ImgBB

ibb.co

The amount of effort that will be needed to create that and deal with different screen sizes ect, just no.. rather dont

 

[dk27]

To simplify it..
Use canvas to draw and css grid for placement or static SVG for the arrows?

You could have a div take up the whole page and within it’s divided by a grid with multiple rows for each link and 5 columns.

First and last column will contain the text as a link, center column the hands image and in between columns the arrows that are maybe straight arrows instead of these curved arrows.

Or you could still do the curved lines to the outside columns and use an animation with canvas to go from the start near the center and draw out to the ends / coordinate of the links.

Maybe remove the canvas on smaller screens and have the links as an overlay on top of the image / resize grid to one column, add z depth to image.

Draw Arrows

https://codepen.io/airen/pen/OpZvOK

https://codepen.io/GrantCuster/pen/bpKWLO

https://codepen.io/longthinhtran/pen/NYgvwx

 

[Oj0]

To simplify it..
Use canvas to draw and css grid for placement or static SVG for the arrows?

You could have a div take up the whole page and within it’s divided by a grid with multiple rows for each link and 5 columns.

First and last column will contain the text as a link, center column the hands image and in between columns the arrows that are maybe straight arrows instead of these curved arrows.

Or you could still do the curved lines to the outside columns and use an animation with canvas to go from the start near the center and draw out to the ends / coordinate of the links.

Maybe remove the canvas on smaller screens and have the links as an overlay on top of the image / resize grid to one column, add z depth to image.

Draw Arrows

https://codepen.io/airen/pen/OpZvOK

https://codepen.io/GrantCuster/pen/bpKWLO

https://codepen.io/longthinhtran/pen/NYgvwx

Why not just use a static image with divs for the links, using percentages to get their exact location? Container div with the image, sub-divs with the links. That will scale with screen size.

 

[dk27]

Why not just use a static image

Period

Photoshop & transparent divs/SVGs as links.