$50+$50 as bonus - Simple Frontend task, create 3 sections using our design in HTML, CSS or javascript
- 진행 현황: Closed
- 상금: $50
- 응모작 접수(건수): 12
- 수상자: JakiZack
콘테스트 개요
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.
추천된 기술
고용주 피드백
“A good coder that solved a great problem for us. Will use again”
vw7966577vw, Vietnam.
이 콘테스트의 최상위 응모작
-
rabinusd Bangladesh
-
rabinusd Bangladesh
-
ramkm7676 India
-
ramkm7676 India
-
mayanksharma0707 India
-
webkhanabir988 Bangladesh
-
webkhanabir988 Bangladesh
-
hasan8505 Bangladesh
공개 설명 게시판
콘테스트를 시작하는 방법
-
콘테스트 등록 신속하고 간편한 절차
-
응모작 접수 세계적인 참가 범위
-
최우수 응모작 선정 자료 파일의 다운로드(초간단!)