Html Question posted in
Some basic documentation can be found here.

Html – How can I make footer like this?

This is a footer that I have to create a footer.
But I don’t know how to make the circle stay at half on top footer like this

footer

Now I can create a footer like this but still has a problem

footer that I can't handle with TT

and this is my code 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 anyone knows how to create footer like the first pic please help me TT.
I will really really appreciate Hope every one has a nice day!

Tags:

2

Answers


  1. 0

    The translateY() CSS function repositions an element vertically on 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>
    Login or Signup to reply.
  2. 0 
    .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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Circle {
    height: 66px;
    width: 66px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    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>

    Since you are using a fixed amout of pixels for the circle, you can give the circle the same amount of pixels as a negative margin-top. In this case margin-top: -66px;. You should also use the html footer element instead of a div, for best practice.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search