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!

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

Looping through two arrays of objects using Angular's NgFor directive

I need to iterate through two separate arrays using ngFor in order to display their content in an html format. <div class="form-check ml-5" *ngFor="let item of competencias.competencias; let i = index"> <input class=" ...

htmlarraysangularngfor

If you want to retrieve the calculated value of a div using jQuery

I have a scenario where I have 3 list items (li) under an unordered list (ul). I am interested in finding the height of these list items, but without explicitly defining their height. So far, when inspecting with Firebug, I noticed that the computed height ...

javascriptjqueryhtmlheight

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

matching patterns within HTML div elements

Within my Notepad++ text editor, I am attempting to remove all spaces within a div tag except for those between the comma and the last name. This is what the input looks like: <div class="n"> Joe , Williams </div> And this is the desire ...

htmlregexnotepad++

There seems to be a problem with the while loop in the PHP code while creating a forum

Encountered a new error that says: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') AND type='o'' at line 1. Can someone assist in fixing this issu ...

phphtmlmysqlcssforum

Ways to quickly change a class when clicking (without waiting for mouse button release)

Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...

jqueryhtmlcsstoggleclass

Having difficulties with my online form

Each page of my website features the following form: <section class="footer-one"> <form action="sendmail.php" method="post" onsubmit="return validateForm()"> <div> <div class="row half"> <div class="6u"> <input type="text ...

phphtml

Executing jQuery on page update can be achieved by utilizing event handlers to trigger

I have implemented jQuery multi-select to enhance the user experience of my Django app's multiselect feature. Upon initially rendering my page, I included the following script to bind any elements with the class 'multiselect' to the jQuery m ...

javascriptjquerypythonhtmldjango

Creating an insert query in Node.js with frontend HTML and connecting it to a PostgreSQL database is a crucial task in web

I am new to working with Node.js, PostgreSQL. Currently, I am tackling the login form code and facing several issues related to the POST method. I am using HTML, Node.js, and PostgreSQL for this project. Please assist me with solving these problems by revi ...

htmlnode.jspostgresql

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

htmlcss

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

htmlcss

Incorporating HTML with ng-binds through transclusion

I have been developing an angular directive to enhance the functionality of ng-table by adding filtering and exporting features. The main goal is to make this directive reusable for multiple tables, which requires the <td> elements to be dynamic. To ...

javascripthtmlangularjsngtableangular-directive

Font compatibility issue in email template on mobile devices

When I send out my email template, Agency FB font displays correctly in the desktop view, but reverts back to PT-sans in device view. I've ensured that the font family is set to Agency FB and included the URL link. My emails are sent using MailChimp. ...

htmlcssfontsmailchimpemail-templates

Optimizing HTML and Script loading sequences for efficient execution

I have a query regarding the loading order of scripts in web browsers. I am interested in knowing the most efficient way to redirect users to a mobile website on the client side. For example, if I place a mobile detection script within the <head> se ...

javascripthtmlperformancemobile

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

htmlcss

How does [name] compare to [attr.name]?

Question regarding the [attr.name] and [name], I am utilizing querySelectorAll in my Typescript as shown below: this._document.querySelectorAll("input[name='checkModel-']") However, when I define it in the HTML like this: <input [name]="check ...

htmlangulartypescript

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Adjust the code to enhance the functionality of web components in Sharepoint

I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...

javascriptjqueryhtmlcsssharepoint

JavaScript slice() method displaying the wrong number of cards when clicked

In my code, I have a section called .registryShowcase. This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button ...

javascripthtmljquerycss