Kevin Powell - Community•10mo ago

How can I reproduce this design (frontendmentor.io)

Hello, I'm doing a frontendmentor's challenge, and I have difficulties with the circle in the background. I have the full circle as a svg, I've tried to place it as a background-image and position it with background-position but it's not really responsive. Does anyone has an idea ?

12 Replies

Zoë•10mo ago

Are there any more screens provided? I’d want to see what the designer expected to happen when the screen gets wider or thinner

MarkBoots•10mo ago

https://www.frontendmentor.io/challenges/payapi-multipage-website-FDLR1Y11e

Frontend Mentor

Frontend Mentor | PayAPI multi-page website coding challenge

This 4-page website will be a great test for your HTML & CSS skills. You'll be building out a marketing site, complete with custom form validation throughout.

OzzoOP•10mo ago

That's for mobile,

OzzoOP•10mo ago

Tablet

OzzoOP•10mo ago

Laptop

OzzoOP•10mo ago

So for mobile/tablet it's kind of the same, and it changes for laptop

Zoë•10mo ago

You'll want something along the lines of

:root {
  --circle-color: #D2DBE3;
  --circle-size: 60vw;
}
body {
  /*For mobile and tablet*/
  background-image: radial-gradient(circle at 50% calc(0% - 4rem), var(--circle-color), var(--circle-color) var(--circle-size), white var(--circle-size));

  /*For desktop*/
  --circle-size-desktop: calc(var(--circle-size) * (2/3));
  background-image: radial-gradient(circle at 75% calc(0% + 20vw), var(--circle-color), var(--circle-color) var(--circle-size-desktop), white var(--circle-size-desktop));
}

:root {
  --circle-color: #D2DBE3;
  --circle-size: 60vw;
}
body {
  /*For mobile and tablet*/
  background-image: radial-gradient(circle at 50% calc(0% - 4rem), var(--circle-color), var(--circle-color) var(--circle-size), white var(--circle-size));

  /*For desktop*/
  --circle-size-desktop: calc(var(--circle-size) * (2/3));
  background-image: radial-gradient(circle at 75% calc(0% + 20vw), var(--circle-color), var(--circle-color) var(--circle-size-desktop), white var(--circle-size-desktop));
}

(note I included the 0% in the calc to encourage you to tweak the positioning to get it exact, that doesn't do anything currently)

OzzoOP•10mo ago

Ok thanks I will test that I'm not sure to understand how I can adapt this to my case. Because I have a svg and I'm not making the circle using radial-gradient. I'm trying to use calc to make the circle's placement responsive

Pat66•10mo ago

try this: https://bennettfeely.com/clippy/ the tutorial :

Pat66•10mo ago

https://www.youtube.com/watch?v=ybW7yUbOHN8&t=606s

CSS Weekly

YouTube

Creative Section Breaks Using CSS Clip-Path

Learn how to use CSS clip-path and Clip Path editor in Firefox DevTools to create beautiful, fluid section breaks, dividers, and separators. 🔗 Links Demo: https://codepen.io/ZoranJambor/pen/vYjKoOw/d375ef391d10cc4f4219ae82419d27bc Clip-Path on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path Clip-Path Converter: https://yoksel.g...

Choo♚𝕂𝕚𝕟𝕘•10mo ago

This may look like you need to use clip-path, but you don't, because the straight sides are actually the result of overflow being hidden. The shape is just an ordinary circle that is larger than the container.

Zoë•10mo ago

I'm using the radial-gradient in place of the SVG. It's a background element that doesn't need to be an SVG

Gaming

Programming

How can I reproduce this design (frontendmentor.io)