I have tried fixing this one issue for over 4 hours now and it's getting quite frustrating, I am a beginner when it comes to HTML/CSS and I would greatly appreciate the help!

Goal: Place ".menuButton" on the bottom left corner ensure that the icon actually shows up

Please bear in mind that the code runs alot better on my end and everything is correctly positioned the social icons do show up, my only issue has been placing .menuButton on the bottom left, as I am not entirely sure why the positioning is so bad.

P.S This isn't a simple fix like trying a different display: option, positioning, or changing margins, trust me I have tried almost everything | Also ensure there are no issues with the background

P.S2 For a better interpratation of the code please check the codepen and test your answer there

https://codepen.io/jonathanz-10/pen/mdMLpXp

CSS:

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica', sans-serif;
    background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
}

h1 {
    font-size: 24px;
    margin: 10px 0 0 0;
    font-weight: lighter;
    text-transform: uppercase;
    color: #eeeeee;
}

p {
    font-size: 12px;
    font-weight: light;
    color: #333333;
}

span a {
    font-size: 18px;
    color: #cccccc;
    text-decoration: none;
    margin: 0 10px;
    transition: all 0.4s ease-in-out;
    &:hover {
        color: #ffffff;
    }
}

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
        transform: translatey(-20px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    }
}

 .container {
  height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 

.avatar {
  background: url("https://jonathanz-10.github.io/Website/images/avatar.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
    width: 150px;
    height: 150px;
    box-sizing: content-box;
    border: 5px white solid;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    animation: float 6s ease-in-out infinite;
}

.content {
    width: 100%;
    max-width: 600px;
    padding: 20px 40px;
    box-sizing: border-box;
    text-align: center;
}

 .menuButton{
  bottom: 0;
  left: 0;
  height: 200px;
  width: 200px;
  display: inline-block;
  text-align: center;
  border: 2px solid red;
  background-repeat: no-repeat;
  background-image: url("https://jonathanz-10.github.io/Website/images/avatar.png");
} 

<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<div class="container">
      <div class="avatar"></div>
      <div class="content">
        <h1>JZ</h1>
        <p>Follow me on:</p>
        <p>
          <span><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></span>
          <span><a href="https://github.com/" target="_blank"><i class="fa fa-github"></i></a></span>
          <span><a href="https://www.linkedin.com/in/" target="_blank"><i class="fa fa-linkedin"></i></a></span>
          <span><a href="https://codepen.io/" target="_blank"><i class="fa fa-codepen"></i></a></span>
        </p>
        <p>For more information scroll down</p>
      </div>
    </div>
    <div class="menuButtton">hi</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

there is typo in the class attribute ;)

change

<div class="menuButtton">hi</div>

to

<div class="menuButton">hi</div>