0

How do i recreate this half circle design at the footer of my web page as shown in the image below

enter image description here

I have only tried recreating the half circle, but im not able to push it down the bottom of the page with footer details like the image above. heres my own version

enter image description here

Heres my html and css code

body{
    padding: 0;
    margin: 0;
}
    
.container {
    background-color: #11012B;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.semicircle {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    height: 125px;
    width: 250px;
    border-radius: 125px 125px 0 0;
}
<div class="container">
    <div class="semicircle"></div>
</div>
David
  • 208,112
  • 36
  • 198
  • 279
Bruno
  • 135
  • 1
  • 11
  • 3
    If it's always fixed to the bottom of the viewport then it doesn't even need to be a "half" circle. It can just be a circle, positioned mostly out of the viewport. – David Jul 12 '22 at 17:49
  • ive updated my question with my code snippets and what ive tried – Bruno Jul 12 '22 at 17:49
  • This seems like it's not all your code. Where is your footer? We need a more of your actual code. There are many ways to do this. – disinfor Jul 12 '22 at 18:34
  • Look into [absolute positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) and other ways of positioning in order to move it to where you want it to be. – Sean Jul 12 '22 at 18:35

2 Answers2

0

the best way to do that is using svg. below code is your answer.please place this code before your </body> tag

<div style="height: 150px; overflow: hidden;" >
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<path d="M4.80,148.53 C183.68,-35.02 316.31,-28.11 499.72,156.42 L497.45,155.44 L7.05,148.53 Z" style="stroke: none; fill: #08f;"></path>
</svg>
</div>

You can create this type svg in website

https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

Firooz Meysami
  • 96
  • 5
0

you just need two more css properties to do the trick

body{
    padding: 0;
    margin: 0;
}
    
.container {
    background-color: #11012B;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.semicircle {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    height: 280px;
    width: 350px;
    border-radius: 50%;
    /* you can also choose to use absolute rather than fixed depending on your html       structure */
    position: fixed; /* add this */
    bottom: -50%; /* add this */
}
<div class="container">
    <div class="semicircle"></div>
</div>
Anthony phillips
  • 152
  • 3
  • 13