Monday

How can I make footer like this?

Issue

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!

Solution

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 helps<3

Answered By - Envy

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Monday

How can I make footer like this?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels