Is there a way to create a footer similar to this one?

I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this.

Even though I can create a footer, I still encounter some issues.

This is the code I have right now:

.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  background-color: #ffde6a;
  color: #262626;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Circle {
  height: 66px;
  width: 66px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

.input-icon {
  display: flex;
  align-items: center;
}
<div class="Footer">
  <div class="Circle">
    <div class="input-icon">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="#262626" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z" stroke="none" stroke-width="1.5"stroke-linejoin="round"/>
                        <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="none" stroke-width="1.5"/>
                    </svg>
    </div>
    Profile
  </div>

If you have any suggestions on how to create a footer similar to the image, please help me out! I would greatly appreciate it. Have a nice day!

htmlcss

Answer №1

The translateY() CSS function allows for vertical repositioning of an element within the 2D plane.

.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  background-color: #ffde6a;
  color: #262626;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Circle {
  height: 66px;
  width: 66px;
  background-color: #bbb;
  border-radius: 50%;
  transform: translateY(-50%);
}
<div class="Footer">
  <div class="Circle">
    <div class="input-icon">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="#262626" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z" stroke="none" stroke-width="1.5"stroke-linejoin="round"/>
        <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="none" stroke-width="1.5"/>
      </svg>
    </div>
    Profile
  </div>
</div>

Answer №2

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Profile</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="Footer">
        <div class="Circle">
            <div class="input-icon">
                <svg width="36" height="36" viewBox="0 0 24 24" fill="#262626" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z" stroke="none" stroke-width="1.5"stroke-linejoin="round"/>
                        <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="none" stroke-width="1.5"/>
                    </svg>
            </div>
            Profile
        </div>
</body>

</html>

CSS:

body {
  margin: 0;
  padding: 0;
  background-color: #262626;
}

.Footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px;
  background: #fadf7c;
  font-family: verdana;
}

.Circle {
  text-align: center;
  background-color: #fadf7c;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  padding: 12px;
  margin: 0 auto;
  transform: translateY(-50%);
}

Hope this information is beneficial for you!https://i.sstatic.net/ZtgIx.png

Answer №3

.Footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 72px;
    background-color: #ffde6a;
    color: #262626;
    text-align: center;
}

.Circle {
    height: 66px;
    width: 66px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    background-color: #ffde6a;
    margin-top: -66px;
}

.input-icon {
    display: flex;
    align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <footer class="Footer">
      <div class="Circle">
        <div class="input-icon">
          <svg
            width="36"
            height="36"
            viewBox="0 0 24 24"
            fill="#262626"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z"
              stroke="none"
              stroke-width="1.5"
              stroke-linejoin="round"
            />
            <path
              d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"
              stroke="none"
              stroke-width="1.5"
            />
          </svg>
        </div>
      </div>
      Profile
    </footer>
  </body>
</html>

For precise circle positioning, applying a negative margin-top equal to the circle's height is recommended. In this case, use `margin-top: -66px;`. It is also advised to utilize the HTML footer element in place of a div for better coding practices.

Answer №4

I suggest trying something along these lines:

.Footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 72px;
    background-color: #ffde6a;
    color: #262626;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .Circle {
    height: 66px;
    width: 66px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: absolute;
    top: -33px;
    background-color: #ffde6a;
  }
  
  .input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .profile-text{
    font-size: inherit;
  }
  
  .input-icon,
  .profile-text{
    transform: translateY(50%);
  }
<div class="Footer">
  <div class="Circle">
    <div class="input-icon">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="#262626" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z" stroke="none" stroke-width="1.5"stroke-linejoin="round"/>
        <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="none" stroke-width="1.5"/>
      </svg>
    </div>
    <h1 class="profile-text">
      Profile
    </h1>
  </div>
</div>
Feel free to customize it to your liking, but this is the approach I recommend without making drastic changes to your existing code.

NOTE: When the footer is set as fixed, it will always remain at the bottom of your screen, not the document. This means that even when you scroll, it will consistently stay at the bottom of the screen.

Answer №5

html {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  background-color: #ffde6a;
  color: #262626;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Circle {
  height: 100px;
  width: 100px;
  background-color: #ffde6a;
  border-radius: 50%;
  transform: translateY(-30%);
  border: 1.5rem solid #ffde6a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="Footer">
    <div class="Circle">
      <div class="input-icon">
        <svg width="70" height="70" viewBox="0 0 24 24" fill="#262626" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 22H21C21 17.5817 16.9706 14 12 14C7.02944 14 3 17.5817 3 22Z" stroke="none" stroke-width="1.5"
            stroke-linejoin="round" />
          <path
            d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"
            stroke="none" stroke-width="1.5" />
        </svg>
      </div>
      Profile
    </div>
    <script src="script.js"></script>

    <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
    <script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>

</html>

output of the CSS code

View the code and its output on replit: Replit Code Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent drag and drop functionality in QtWebkit

As I work on creating an HTML GUI for my application using Qt's WebKit, everything is going smoothly with one minor issue. I am trying to prevent users from dragging and dropping images from the GUI itself. While I have successfully disabled text sele ...

javascripthtmlqtwebkitqtwebkit

Using FieldSet in ASP.net Forms

Utilizing the FieldSet element in my web application requires me to customize its style. I aim to change the border color to blue and make the legend bold in color. Any guidance on how to achieve this would be greatly appreciated. Thank you in advance. ...

htmlcss

Create a copy of a div element once the value of a select element has

After modifying a select option, I'm attempting to replicate a div similar to the example shown in this link: http://jsfiddle.net/ranell/mN6nm/5/ However, instead of my expected lists, I am seeing [object]. Any suggestions on how to resolve this issue ...

javascriptjqueryhtml

Activate unresponsive state when clicked

Struggling to implement a mobile responsive menu, my primary issue is the navigation buttons not toggling upon clicking. Here's what I have so far in terms of HTML and JQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery. ...

htmlcssmenunavigationhamburger-menu

Show the user's username after they have successfully signed in

Hello, I am trying to display the username after a user logs in. Here is the code for the page where I would like to show it: index.php <?php require_once 'classes/Membership.php'; $membership = New Membership(); $membership->confirm_Me ...

phphtmlauthentication

Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

I am currently using Bootstrap 4 to design a desktop chatbot inspired by Google's Bard. My goal is to have a container that spans the height of the screen, with the text input located at the bottom of the container. Additionally, I want the container ...

htmlcssbootstrap-4

Pass various checkboxes data in an email using PHP and $_POST

I'm having trouble sending my checkbox values via my email form as it keeps returning as "None" every time. Any assistance would be greatly appreciated! Code snippet: <form method="post" name="sentMessage" id="contactForm" novalidate> ...

phphtmlpost

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

htmlioscsscloud

Issue with DIV positioning in IE when another DIV is animated downwards

Here's how my page structure looks like: <header> <div class="slide"> <!---- some elements here ---> </div> <nav> <ul> <li id="open"></li> <! --- other parts of the navigation ...

jqueryhtmlcssinternet-explorer

Having Trouble Operating Virtual Tour in Flash

I recently used a third-party software to create a virtual tour for my client's website. The virtual tour works perfectly fine on its own, as you can see here: However, when I tried to include the virtual_tour.html page on the index page of the websi ...

htmlxmlflashactionscript

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

javascripthtmlgoogle-mapspolygonlatitude-longitude

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below: https://i.sstatic.net/a4hCQ.jpg Here is the code I have tried so far: <p>Some Text</p> p{ -webkit-transform: perspective(158px) rotateX(338deg ...

htmlcssbordercss-shapes

Most efficient method to upload numerous images without any lag

I have a website where images are loaded only when they are slightly below the viewport. This method allows the site to load initially without images and then determine which ones need to be loaded based on the user's viewpoint. When a user scrolls ...

javascripthtmlimage

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

javascripthtml

Excess spacing in image on top of CSS background overlay

While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upp ...

htmlcsspaddingmargins

Horizontal Panning Feature for D3 Horizontal Bar Charts

I am working on a D3 Bar Chart and I would like it to have horizontal panning functionality similar to this example: https://jsfiddle.net/Cayman/vpn8mz4g/1/. However, I am facing an overflow issue on the left side that I need to resolve. Below is the CSV ...

javascripthtmld3.jsdata-visualizationvisualization

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task. Unable to find a way to access ...

javascriptjqueryhtmlcsshtml-table

Manipulate inherited CSS styles from an external source

Currently, I am working on creating a pagination using the NG-Bootstrap pagination component. However, I encountered an issue where I need to modify or specifically remove some CSS properties that are applied by default in the NG-Bootstrap library. Is ther ...

htmlcssangularbootstrap-4

React Alert: Please be advised that whitespace text nodes are not allowed as children of <tr> elements

Currently, I am encountering an error message regarding the spaces left in . Despite my efforts to search for a solution on Stack Overflow, I have been unable to find one because my project does not contain any or table elements due to it being built with ...

javascripthtmlnode.jsreactjsvalidation

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons. The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. ...

javascriptcssnode.jsexpressfont-awesome