**FIX THIS PLEASE**
Tags: webdev, help, css
Published: 2023-08-01 09:33:09

Could anyone help me please, my image is'nt loading and also the content is aligned in bottom of the page.

------------------------------------------------------------------

Here's the code:

```
<!DOCTYPE html>
<html>
<head>
  <title> Informative Website </title>
  </head>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Jost&family=Nunito:wght@300&family=Poppins:wght@300&family=Raleway&display=swap');
      body{
        background-color: black;
      }
      .top{
        text-align: center;
        align-content: center;
        justify-content: center;

      }

      .topnav{
        margin-top: 10px;
        display: flex;
        align-content: center;
        justify-content: center;
        padding: 10px;
        text-decoration: none;
          border-bottom: 1.5px solid #0081ff;
          border-top: 1.5px solid #0081ff;
          font-family: "Raleway";
        }

      .topnav a:hover {
        border-bottom: 1.5px solid #0081ff;
      }
      .topnav a::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1.75px;
        background-color: #0081ff;
        transition: width 0.5s;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .topnav a:hover::after {
        width: 100%;
      }

      /* Media Queries for Responsiveness */
      @media (max-width: 768px) {
        .header {
          flex-direction: column;
        }
        .topnav {
          flex-direction: column;
        }
        .logo {
          margin-bottom: 10px;
        }
      }
      a{
        position: relative;
        margin-left: 20px;
        margin-right: 20px;
        text-decoration: none;
        color: white;
        font-family: "Raleway";
        width: 100px;
      }
      .i{
        height: 100px;
        width: 100px;
      }

      .dds-txt{
        font-family: "Nunito";
        text-align: center;
        color: white;
      }
      .please-help-me{
        text-align: center;
        margin-top: 50px;
      }
.search{
  width: 500px;
  height: 40px;
  border-top: 1.5px solid #0081ff;
  border-bottom: 1.5px solid #0081ff;
  text-align: center;
  color: white;
  font-family: 'Nunito';
  background-color: transparent;
  border-left : 0px solid white;
  border-right:  0px solid white;

}
.search:hover{
  width: 650px;
  border-top: 1.5px solid #0081ff;
  border-bottom: 1.5px solid #0081ff;
  border-left : 0px solid white;
  border-right:  0px solid white;
box-shadow: -2px 2px 50px -7.5px #0081ff;
        transition-duration: 400ms;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
header{
 background-repeat: no-repeat;
 background-size: cover;
 height: 800px;
}
.s{
  font-family: "Poppins";
  color: white;
  margin-right: 10px;
}
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    font-family: "Nunito", sans-serif;
    margin-top: 100px;
    font-weight: 20px;
    color: white;
    font-size: 15px;
    background-color: white;
    display: flex;
    font-family: "Fredoka";
    height: auto;
    text-decoration: none;
    color: black;
    margin-top: auto;
    position: fixed;
 bottom: 0;
 width: 100%;
}

footer-left {
    flex: 1;
}
.youtube-button {
    display: inline-block;
    padding: 8px 20px;
    font-size: 16px;
    color: #007bff;
    border: 2px solid #007bff;
    background-color: transparent;
text-align: center;
    border-radius: 99px;
    border-style: solid;
    width: 150px;
    text-decoration: none;
    margin-right: 20px;
}

    .main-container {
      display: flex;
      align-items: center;
      padding: 40px;
    }
    .image-container img {
      max-width: 500px;
      height: auto;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.605);
      text-align: right;
    }
    .text-container {
      padding:30px;
    }
    @import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');

.heading {
  font-family: "Jost";
  font-size: 36px;
  margin-bottom: 20px;
  color: white;
}

    .sub-heading {
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 30px;
      color: white;
      font-family: "Nunito";
    }
    .button-container {
      text-align: left;
    }
    .hire-button {
      border: 2px solid #0081ff;
      border-radius: 999px;
      background-color: transparent;
      color: #0081ff;
      font-size: 18px;
      padding: 10px 30px;
      text-decoration: none;
      display: inline-block;
      width: 200px;
      text-align: center;
      margin-right: 50px;
      margin-bottom: 50px;
      font-family: "Nunito";
    }
.hire-button:hover{
  background-color: #0081ff;
  border-color: white;
  color: black;
  transform: translateY(5);
  transition-duration: 350ms;
  box-shadow: 0px 0px 200px -10px #0081ff;
}

@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap'); 

.youtube-button:hover {
  box-shadow: 0 0 100px -2px #007bff;
  transition-duration: 300ms;
  background-color: transparent;
  border-color: #007bff;
  color: #007bff;
}

html, body {
    height: 100%;
}
.c{
  color: black;
}
      </style>
      <header>
      <div class="top">
      <div class="topnav-before">
        <img class="i"src="https://lh3.googleusercontent.com/fife/AKsag4PQSNb5QpX5PuySenEVRH2dh05j7idtuNGXQ8LTdO3XCeU5fY3eDlo7lgF1f_8dLnWG4uniilxRbudM0Ilg3Gp5pNaNer-FYBQQ11Y3acdABEBtDekXsX4iW39JQbMFVyJVQPRKzyX-ga64UZkU1cMme6laxwJeymFUl_kap2DCG9e-8CNn8K9oQLyP1jYPX93jbvXFZ0FddeKgAzghg2XsRV1__UXu_5-pFsGVrKyIqhQzGUNjQD1Xx4gtkBpbkuUqJ1uXgUQkfekkgdmFlu9IunsC6EXHXQs-FFcGgOTnaOJ8F0MICjhMHn6gh0sX3l8JOkSqxr2oHNyfMyD1y1_guVxdatU0q_lzfNxSKHZykKK7sdfgz649KDqi_5jLFcEd3o2WFs1ePe5qMzQ_aT1_M3lXBhTrYwutc5toiBgO_yFRls_Sp-aYY_XSp2_I05gy4kbOoEc1kK6yAEN1-NtdpHMg49qRVgCycutxlVRGsNXK0BvwRa1VXcjlwsGQYzW4yvGDtV65cYSv-4OPaICq9WzWnekBrdcJNitCJ2Ah2bKupXZidAdjsimQvnUArw2Q1YMZXBuU0-YvFi3ENrhy6lIBlvnQzZzl2noNkm1ZdN0WdTcWRj1q8GE8dx6cGNf0X70wRIWIhkQJ7NT2adSSz84sopggbKnmlfv7OUT1keIBnwzoTg7Je4V0Xt-U0bIWTRPDv4lw8IS17NFsJeyFnMfzY5F0idogk14m5eXwOIdl4IAvZgJz_OQ8heGyZbyHYUsfv7CSSMS4ONWC8sDaTHAExGdrxlwtk1q2k_5ek2fNaivOBAc5iFTv4sRiInbaFxeQYj3Yvpx6iPFXMckiKjwzRUVfcRUnggFpn-malGwqkv1AahNuK5hKExgvJDt2JxL0Sw5cWRcPlbipW0GDzyw1nYdLjrWw8UdwqfHZVh2pzxmtjSvPlDFnlqJ1q3qdfWiwJCFob8tIJa0FRzTcneDfyAK7NMWKBd35XfExBv33-OztpFPI2TYBygEU_Hhvl4FK4jfks1jvQH5Il5RlWKjpUH16HXRnEWw6xH5dlNmFdvuNywoFvmdFr-1qZtbz6NmEj2j7FA0Hr02OlXGxWEkuWOtbA0XI4IdlAuo7VOXXuEXzwteNI47LxRweWStuFhLPJgywLZi2ZCZegD29sw1oJcHEYy0r49MdQjhocRvmAdVcXKOvmkawW2aJ_NiWIpWR0epDf0wbZXXSj-bGG_w-eiF1eL54lYwzyKTLkbQJJ-O3asKbSMKz_rxX-BlXiXqg4CeXy1irh6skpjvcJRCZjjS1Ng5mXKA8Bi_0lKVj72fzUPa9B9J0iTYHlThVK44d6ye6ov8cfCfL339Xo5jkrjVl_mZAyFlHrU0WDcPbvRrVaKxS6aRpL_YRFs2j3AJDKP9lwRaYBPHBBfwUVgKwBgDiGQB_FG33ijw1QKNf9jgu9Z6NNbSm_917IVzCTB8PWjwf-ianqfKM5RuC0wpHzSO9d9Rg29ZQYgjEyc7KJyjf_ToFD-ImXbeVgRyhQ7SXQ5M0Wk6qMdIP4gc6_94hxxVrwgg=s947-w947-h947-s-no?authuser=0">
        </div>
      <div class="topnav">
        <div class="t">
        <a href="#home">HOME</a>
        <a href="#about-us">ABOUT US</a>
        <a href="#services">SERVICES</a>
        </div>
        </div>
        </div>
       

      </header>
        <div class="main-container">
          <div class="image-container">
            <img src="https://lh3.googleusercontent.com/fife/AKsag4PQSNb5QpX5PuySenEVRH2dh05j7idtuNGXQ8LTdO3XCeU5fY3eDlo7lgF1f_8dLnWG4uniilxRbudM0Ilg3Gp5pNaNer-FYBQQ11Y3acdABEBtDekXsX4iW39JQbMFVyJVQPRKzyX-ga64UZkU1cMme6laxwJeymFUl_kap2DCG9e-8CNn8K9oQLyP1jYPX93jbvXFZ0FddeKgAzghg2XsRV1__UXu_5-pFsGVrKyIqhQzGUNjQD1Xx4gtkBpbkuUqJ1uXgUQkfekkgdmFlu9IunsC6EXHXQs-FFcGgOTnaOJ8F0MICjhMHn6gh0sX3l8JOkSqxr2oHNyfMyD1y1_guVxdatU0q_lzfNxSKHZykKK7sdfgz649KDqi_5jLFcEd3o2WFs1ePe5qMzQ_aT1_M3lXBhTrYwutc5toiBgO_yFRls_Sp-aYY_XSp2_I05gy4kbOoEc1kK6yAEN1-NtdpHMg49qRVgCycutxlVRGsNXK0BvwRa1VXcjlwsGQYzW4yvGDtV65cYSv-4OPaICq9WzWnekBrdcJNitCJ2Ah2bKupXZidAdjsimQvnUArw2Q1YMZXBuU0-YvFi3ENrhy6lIBlvnQzZzl2noNkm1ZdN0WdTcWRj1q8GE8dx6cGNf0X70wRIWIhkQJ7NT2adSSz84sopggbKnmlfv7OUT1keIBnwzoTg7Je4V0Xt-U0bIWTRPDv4lw8IS17NFsJeyFnMfzY5F0idogk14m5eXwOIdl4IAvZgJz_OQ8heGyZbyHYUsfv7CSSMS4ONWC8sDaTHAExGdrxlwtk1q2k_5ek2fNaivOBAc5iFTv4sRiInbaFxeQYj3Yvpx6iPFXMckiKjwzRUVfcRUnggFpn-malGwqkv1AahNuK5hKExgvJDt2JxL0Sw5cWRcPlbipW0GDzyw1nYdLjrWw8UdwqfHZVh2pzxmtjSvPlDFnlqJ1q3qdfWiwJCFob8tIJa0FRzTcneDfyAK7NMWKBd35XfExBv33-OztpFPI2TYBygEU_Hhvl4FK4jfks1jvQH5Il5RlWKjpUH16HXRnEWw6xH5dlNmFdvuNywoFvmdFr-1qZtbz6NmEj2j7FA0Hr02OlXGxWEkuWOtbA0XI4IdlAuo7VOXXuEXzwteNI47LxRweWStuFhLPJgywLZi2ZCZegD29sw1oJcHEYy0r49MdQjhocRvmAdVcXKOvmkawW2aJ_NiWIpWR0epDf0wbZXXSj-bGG_w-eiF1eL54lYwzyKTLkbQJJ-O3asKbSMKz_rxX-BlXiXqg4CeXy1irh6skpjvcJRCZjjS1Ng5mXKA8Bi_0lKVj72fzUPa9B9J0iTYHlThVK44d6ye6ov8cfCfL339Xo5jkrjVl_mZAyFlHrU0WDcPbvRrVaKxS6aRpL_YRFs2j3AJDKP9lwRaYBPHBBfwUVgKwBgDiGQB_FG33ijw1QKNf9jgu9Z6NNbSm_917IVzCTB8PWjwf-ianqfKM5RuC0wpHzSO9d9Rg29ZQYgjEyc7KJyjf_ToFD-ImXbeVgRyhQ7SXQ5M0Wk6qMdIP4gc6_94hxxVrwgg=s947-w947-h947-s-no?authuser=0" alt="DevDynamos Image">
          </div>
          <div class="text-container">
            <div class="heading">DEVDYNAMOS</div>
            <div class="sub-heading">
              Journey through the enigmatic realm of DevDynamos, where reality fractures and digital dreams manifest. Unleashing websites steeped in ethereal enchantment, designs born from hypothetical realms, and animations that whisper enigmatic secrets. Enter the labyrinth of infinite creativity and mystery.
            </div>
            <div class="button-container">
              <a href="#" class="hire-button">HIRE US</a>
              <a href="#" class="hire-button">CONTACT</a>
            </div>
          </div>
        </div>
        <footer>
          <label class="c">   Developed by DevDynamos   |   Contact: devdynamos.co@gmail.com   |</label>
          <a href="https://www.youtube.com/@devdynamos-co" class="youtube-button">YouTube</a>
          </footer>
      </body>
</html>
{% embed  %}
```