$50+$50 as bonus - Simple Frontend task, create 3 sections using our design in HTML, CSS or javascript

  • Tila: Closed
  • Palkinto: $50
  • Vastaanotetut työt: 14
  • Voittaja: JakiZack

Kilpailun tehtävänanto

This contest has $50 guaranteed and $50 as bonus to the winner if the solution is good...

In this contest, we require a front end solution from the following scenario:

I want to start new content right after end of svg arc shape in such a way that the empty transparent space below arc should be filled by new div content (in other words one section should end with arc shape and other should start right after it keeping the empty (transparent) area below arc should be reserved by new section content).

In technical terms, it seems that I want to clip path using the arc.svg dynamically. I mean, user will add more sections (each section with different arc shape). And it should be responsive no mater which arc shape we use.

Below is a short code that you can use to produce solution:

<section style="background-image: url('pattern_1.jpg');">
Content goes here...
<img src="arc1.svg"/>
</section>
<section style="background-image: url('pattern_2.jpg');">
Content goes here...
<img src="arc2.svg"/>
</section>
<section style="background-image: url('pattern_3.jpg');">
Content goes here...
<img src="arc3.svg"/>
</section>

Here is the sample output that I want:
See attached file: (This is what we want.jpg)

This is what I have right now:
See attached file: (This is what we don't want.jpg)

PSD file
https://drive.google.com/file/d/1OgGiV5CaMVa6InXTG1HbJkYn7XNPh1g_/view?usp=sharing

Google link of grey patterns
https://www.google.com/search?q=gray%20pattern%20backgrounds&tbm=isch&hl=en&tbs=ic:gray%2Cisz:l&sa=X&ved=0CAEQpwVqFwoTCNinvuSR-PcCFQAAAAAdAAAAABAC&biw=1470&bih=1894

You can post the solution to stackoverflow (on following question) and send screenshot in contest as proof

This is the link to Stackoverflow POST (where you can write solution as answer)
https://stackoverflow.com/questions/72099136/is-it-possible-to-crop-bottom-of-div-section-using-svg-png-shape-in-html#

Why we need this solution?
We will create a CMS system and integrate this solution where we will be adding pages and their content dynamically.

Suositellut taidot

Työnantajan palaute

“A good coder that solved a great problem for us. Will use again”

Profiilikuva vw7966577vw, Vietnam.

Kilpailun parhaat työt

Näytä lisää töitä

Julkinen selvennystaulu

  • vw7966577vw
    Kilpailun järjestäjä
    • 2 kuukautta sitten

    I am about shutting down this contest soon. So no need anymore contenders.

    • 2 kuukautta sitten
    1. webkhanabir988
      webkhanabir988
      • 2 kuukautta sitten

      okay sir thank you

      • 2 kuukautta sitten
  • ksurat
    ksurat
    • 2 kuukautta sitten

    Good day! Can you share your arc svgs?

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      uploaded the svg arcs here:
      http://clawsandfins.com/svg_arcs.zip

      PSD arcs:
      http://clawsandfins.com/sof_images/arcs/

      • 2 kuukautta sitten
  • mayanksharma0707
    mayanksharma0707
    • 2 kuukautta sitten

    #18 Please check it out

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      Hi and thanks, I am not a coder so you must post the solution to stackoverflow so my freelancer coder needs to see your code.
      https://stackoverflow.com/questions/72099136/is-it-possible-to-crop-bottom-of-div-section-using-svg-png-shape-in-html#

      • 2 kuukautta sitten
  • youvpn220
    youvpn220
    • 2 kuukautta sitten

    Welcome
    I have already solved this contest using JavaScript language
    The solution will be dynamic.
    But if you want to see the solution online I need
    the SVG file to upload It online for you to see it.

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      Hi and thanks, I am not a coder so you must post the solution to stackoverflow so my freelancer coder needs to see your code.
      https://stackoverflow.com/questions/72099136/is-it-possible-to-crop-bottom-of-div-section-using-svg-png-shape-in-html#

      • 2 kuukautta sitten
  • daniyalhussain96
    daniyalhussain96
    • 2 kuukautta sitten

    Hey there, hope you are doing great. Please don't close the contest soon, I will submit my entry as well. Thank you.

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      Okay, No problems

      • 2 kuukautta sitten
    2. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      Keep in mind to post the solution to stackoverflow as my coder needs to see your code.
      https://stackoverflow.com/questions/72099136/is-it-possible-to-crop-bottom-of-div-section-using-svg-png-shape-in-html#

      • 2 kuukautta sitten
  • ariolancer
    ariolancer
    • 2 kuukautta sitten

    Hey! Just a question, I would love to know the amount of unique arcs that you have at the moment, on order to come up with the solution, it would be helpful to know how different are the arcs from each other.

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      They can be of many different shapes

      • 2 kuukautta sitten
  • dollsingha
    dollsingha
    • 2 kuukautta sitten

    Relax Contest Holder
    i'm working will update soon

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      Great

      • 2 kuukautta sitten
  • mdu6415
    mdu6415
    • 2 kuukautta sitten

    Hi, Do you want PSD to be coding as your instruction?

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      That PSD is just for design reference and they don't need to completely convert the PSD to html.. In this contest we just require a solution that should result in 3 sections converted to html from our design reference. We have also defined in the description, what we want and what we don't want the output to be and here the the sample code snippet that they can use to produce the solution:


      I could not paste code here, but is the same as in the description

      • 2 kuukautta sitten
  • tljafar
    tljafar
    • 2 kuukautta sitten

    Hi,

    it's complicated but we can try this on Adobe Illustrator export to SVG and manipulate using svg.js library.

    • 2 kuukautta sitten
    1. vw7966577vw
      Kilpailun järjestäjä
      • 2 kuukautta sitten

      That PSD is just for design reference and they don't need to completely convert the PSD to html.. In this contest we just require a solution that should result in 3 sections converted to html from our design reference. We have also defined in the description, what we want and what we don't want the output to be and here the the sample code snippet that they can use to produce the solution:


      I could not paste code here, but is the same as in the description

      • 2 kuukautta sitten
  • vw7966577vw
    Kilpailun järjestäjä
    • 2 kuukautta sitten

    That PSD is just for design reference and they don't need to completely convert the PSD to html.. In this contest we just require a solution that should result in 3 sections converted to html from our design reference. We have also defined in the description, what we want and what we don't want the output to be and here the the sample code snippet that they can use to produce the solution:

    I could not paste code here, but is the same as in the description

    • 2 kuukautta sitten
  • vw7966577vw
    Kilpailun järjestäjä
    • 2 kuukautta sitten

    Hi,

    Just so you know, i'm not a coder and I have no knowledge in coding. This contest is manage by our external freelancer. If any questions, ask them here and i will forward them to him.

    Thanks, Peter

    • 2 kuukautta sitten

Näytä lisää kommentteja

Kuinka päästä alkuun kilpailuiden kanssa

  • Ilmoita kilpailusi

    Ilmoita kilpailusi Nopeaa ja helppoa

  • Saat valtavasti töitä

    Vastaanota tonnikaupalla osallistumisia Ympäri maailmaa

  • Myönnä palkinto parhaalle työlle

    Myönnä palkinto parhaalle työlle Lataa tiedostot - Helppoa!

Ilmoita kilpailu nyt tai liity tänään!