HTML card and Image doesnt love each other-CodePudding

I just need to finish my code,and i want to put a photo to a card,but the photo doesnt show up,just the little browser picture icon.I tryed a lot of solution,but didnt help me out. I want to put the picture to the last card,i marked.If you can just put the right command,or you can place the orders to the correct way....I would be very grateful! Please help mee! :) Thanks!

My code:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-16">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9.A</title>

    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: Arial;
          padding: 20px;
          background: #020202;
        }
        
        .header {
          padding: 30px;
          font-size: 40px;
          text-align: center;
          background: rgb(85, 85, 85);
        }
        
        .leftcolumn {   
          float: left;
          width: 75%;
        }

        .leftcolumn {   
          float: left;
          width: 75%;
        }

        .leftcolumn {   
          float: left;
          width: 75%;
        }
        
        .rightcolumn {
          float: left;
          width: 25%;
          padding-left: 20px;
        }
        
        .fakeimg {
          background-color: #aaa;
          width: 100%;
          padding: 20px;
        }
        
        .card {
           background-color: white;
           padding: 20px;
           margin-top: 20px;
        }
        
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
      
        .footer {
          padding: 20px;
          text-align: center;
          background: #ddd;
          margin-top: 20px;
        }
        
        @media screen and (max-width: 800px) {
          .leftcolumn, .rightcolumn {   
            width: 100%;
            padding: 0;
          }
        }
        </style>

</head>
<body>

    <div >
        <h2 style="color:white " >  9.A </h2>
      </div>
      
      <div >
        <div >
          <div >
            <h2>Az A osztályok, avagy az Elektrotechnika</h2>
            <p>Iskolánk 1962-es megalapítása óta folyamatosan képzünk villamosipari szakembereket. Kezdetben finommechanikai műszerész, később elektronikai műszerész osztályaink voltak, majd a technikusképzés bevezetése után ipari elektronikai technikusokat, jelenleg pedig elektronikai technikusokat képzünk. Az évek során esti munkarendben több erősáramú elektrotechnikus osztályunk is végzett, amely szakképesítés oktatására az iskolának jelenleg is van lehetősége.
                 </p>

          </div>
          <div >
            <h2>Milyen szakképzési feladatokat tudnak ellátni az itt ballagott diákok?</h2>
            <p>Az elektronikai technikus feladatai közé tartozik az elektronikai áramkörök tervezése, építése, az áramkörök működőképességének méréssel történő vizsgálata, áramkörök javítása, áramkörökhöz kapcsolódó dokumentáció készítése éppúgy, mint irányítástechnikai rendszerek programozása, vagy automatikus gyártósorok, robotok üzemeltetése, karbantartása.
            </p>
          </div>

        <div >
          <h2>Milyen munkafeladatokat tud elvégezni?</h2>
          <p>Az iparban egy gyártósor végén végezhet minőségellenőrzési, vagy javítási feladatokat, dolgozhat szervizesként, középvezetőként irányíthatja egy kisebb munkacsoport munkáját, de elhelyezkedhet mint ipari elektronikai technikus, gyengeáramú villamosipari technikus, jelzőberendezés technikus, koncert fénytechnikus, koncert színpadtechnikus vagy világítástechnikus.
          </p>
        </div>

        </div>
        <div >
          <div >          
            <img src="IMG/el_900.png" alt="Avatar">
            <p> i need the picture here</p> ---------------------
          </div>
      </div>
  

</body>
</html>

CodePudding user response：

Your code is completely okay but the problem is your image file location. This path will work when your html file and image file location will be the same that means both file keep in a folder. I tried it using online image source

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-16">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9.A</title>

    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: Arial;
          padding: 20px;
          background: #020202;
        }
        
        .header {
          padding: 30px;
          font-size: 40px;
          text-align: center;
          background: rgb(85, 85, 85);
        }
        
        .leftcolumn {   
          float: left;
          width: 75%;
        }

        .leftcolumn {   
          float: left;
          width: 75%;
        }

        .leftcolumn {   
          float: left;
          width: 75%;
        }
        
        .rightcolumn {
          float: left;
          width: 25%;
          padding-left: 20px;
        }
        
        .fakeimg {
          background-color: #aaa;
          width: 100%;
          padding: 20px;
        }
        
        .card {
           background-color: white;
           padding: 20px;
           margin-top: 20px;
        }
        
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
      
        .footer {
          padding: 20px;
          text-align: center;
          background: #ddd;
          margin-top: 20px;
        }
        
        @media screen and (max-width: 800px) {
          .leftcolumn, .rightcolumn {   
            width: 100%;
            padding: 0;
          }
        }
        </style>

</head>
<body>

    <div >
        <h2 style="color:white " >  9.A </h2>
      </div>
      
      <div >
        <div >
          <div >
            <h2>Az A osztályok, avagy az Elektrotechnika</h2>
            <p>Iskolánk 1962-es megalapítása óta folyamatosan képzünk villamosipari szakembereket. Kezdetben finommechanikai műszerész, később elektronikai műszerész osztályaink voltak, majd a technikusképzés bevezetése után ipari elektronikai technikusokat, jelenleg pedig elektronikai technikusokat képzünk. Az évek során esti munkarendben több erősáramú elektrotechnikus osztályunk is végzett, amely szakképesítés oktatására az iskolának jelenleg is van lehetősége.
                 </p>

          </div>
          <div >
            <h2>Milyen szakképzési feladatokat tudnak ellátni az itt ballagott diákok?</h2>
            <p>Az elektronikai technikus feladatai közé tartozik az elektronikai áramkörök tervezése, építése, az áramkörök működőképességének méréssel történő vizsgálata, áramkörök javítása, áramkörökhöz kapcsolódó dokumentáció készítése éppúgy, mint irányítástechnikai rendszerek programozása, vagy automatikus gyártósorok, robotok üzemeltetése, karbantartása.
            </p>
          </div>

        <div >
          <h2>Milyen munkafeladatokat tud elvégezni?</h2>
          <p>Az iparban egy gyártósor végén végezhet minőségellenőrzési, vagy javítási feladatokat, dolgozhat szervizesként, középvezetőként irányíthatja egy kisebb munkacsoport munkáját, de elhelyezkedhet mint ipari elektronikai technikus, gyengeáramú villamosipari technikus, jelzőberendezés technikus, koncert fénytechnikus, koncert színpadtechnikus vagy világítástechnikus.
          </p>
        </div>

        </div>
        <div >
          <div >          
            <img src="https://i.ibb.co/0JfYTnM/social-square-eab77323.jpg" alt="Avatar">
            <p> i need the picture here</p> ---------------------
          </div>
      </div>
  

</body>
</html>