HTML, Moving Problem of Bar and Footer Sections

Issue

I had 2 questions. These are like as below:
First, How can I move the animation of the moving bar (blue colored) above the border at the top? Second, How can I move text (get in touch with me) and logos (LinkedIn and StackOverflow) centered to the bottom of the page? I have added some descriptions to the image.

intended effect

The code:

.headerStyle {
  border-color: black;
}
body {
  border-style: solid;
  border-width: 10px;
  border-radius: 5px;
  padding: 10px;
  transition: 5s;
}

body {
  margin: 0;
  padding: 0;
  animation: pulse 5s infinite;
}

.container {
  position: relative;
  width: 100%;
  margin: 0px auto;
  padding: 0px 0px;
}

.Loading {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 10px;
  background: #f1f1f1;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.Loading:after {
  content: "";
  position: absolute;
  background: blue;
  width: 10%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  animation: load 5s infinite;
}

@keyframes load {
  0% {
    left: 0%;
  }

  25% {
    width: 50%;
    left: 50%;
  }

  50% {
    width: 10%;
    left: 90%;
  }

  75% {
    width: 50%;
    left: 0%;
  }

  100% {
    width: 10%;
    left: 0%;
  }
}

@keyframes pulse {
  0% {
    border-color: red;
  }

  25% {
    border-color: orange;
  }

  50% {
    border-color: brown;
  }

  75% {
    border-color: #d94d5f;
  }

  100% {
    border-color: #ffcccb;
  }
}
<html>

<body>
  <div class="footer">
    <p class="headerStyle"><b>Get In Touch With Me</b></p>
    <a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60"></a>
    <a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
    </a>
    <div class="container">
      <div class="Loading"></div>
    </div>
  </div>
</body>

</html>

Solution

By "moving the loading bar above the border", I am assuming that you want the loading bar instead of the top border!

You can set the border-top: none for the body tag and move the loading div to the top most part.

For centering the text you can use text-align and for the images use the flex property.

<html>
<html>
<style>
    .headerStyle {
        border-color: black;
        text-align: center;
        margin-top: 85vh;
    }

    .flex-box {
        display: flex;
        justify-content: center;
    }

    body {
        border-style: solid;
        border-top: none;
        border-width: 10px;
        border-radius: 5px;
        padding: 10px;
        transition: 5s;
        margin: 0;
        padding: 0;
        animation: pulse 5s infinite;
    }

    .container {
        position: relative;
        width: 100%;
        margin: 0px auto;
        padding: 0px 0px;
    }

    .Loading {
        position: relative;
        width: 100%;
        height: 10px;
        background: #f1f1f1;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
        border-radius: 4px;
        overflow: hidden;
    }

    .Loading:after {
        content: '';
        position: absolute;
        background: blue;
        width: 10%;
        height: 100%;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        animation: load 5s infinite;
    }

    @keyframes load {
        0% {
            left: 0%;

        }

        25% {
            width: 50%;
            left: 50%
        }

        50% {
            width: 10%;
            left: 90%
        }

        75% {
            width: 50%;
            left: 0%
        }

        100% {
            width: 10%;
            left: 0%
        }
    }

    @keyframes pulse {
        0% {
            border-color: red;
        }

        25% {
            border-color: orange;
        }

        50% {
            border-color: brown;
        }

        75% {
            border-color: #d94d5f;
        }

        100% {
            border-color: #ffcccb;
        }
    }
</style>

<body>

    <div class="footer">
        <div class="container">
            <div class="Loading"></div>
        </div>


        <p class="headerStyle"><b>Get In Touch With Me</b></p>

        <div class="flex-box">
            <a href="https://stackoverflow.com/"><img class="image1"
                    src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60"
                    height="60"></a>
            <a href="https://www.linkedin.com"><img class="image2"
                    src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60"
                    height="60">
            </a>
        </div>


    </div>



</body>

</html>

Answered By – Mani

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

Leave a Reply

(*) Required, Your email will not be published