alphabet.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Mobile Web Basic Template" />

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/main.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>


</head>

<body>
    <div class="header">
    
    	<div  class=" "  > 				<a href="cours.html"><img id ="im"  width="20" height="20" src="images/left.png" alt="" title="" /></a>
</div>
	    <div class="title">
	    </div>
	    <div class="clear"></div>
    </div>
 <div class="container">
 	<div class="row-alphabet">
        <div  class="card" >
            <div class="text">
                <h1>A</h1>
        </div>
        <audio controls id="myAudio">
            <source  src="sounds/a.mp3" type="audio/mpeg">
			</audio>
        </div>

        <div class="card">
          <div class="text">
            <h1>B</h1>
          </div>
            <audio controls id="myAudio1" >
				<source src="sounds/b.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>

        </div>

        <div class="card">
          <div class="text">
            <h1>C</h1>
          </div>
            <audio controls id="myAudio2">
				<source src="sounds/c.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>D</h1>
          </div>
            <audio controls id="myAudio3">
				<source src="sounds/d.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>E</h1>
          </div>
            <audio controls id="myAudio4">
				<source src="sounds/e.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>
        
        <div class="card">
          <div class="text">
            <h1>F</h1>
          </div>
            <audio controls id="myAudio5">
				<source src="sounds/f.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>G</h1>
          </div>
            <audio controls id="myAudio6">
				<source src="sounds/g.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>H</h1>
          </div>
            <audio controls id="myAudio7">
				<source src="sounds/h.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>I</h1>
          </div>
            <audio controls id="myAudio8">
				<source src="sounds/i.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>J</h1>
          </div>
            <audio controls id="myAudio9">
				<source src="sounds/j.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>K</h1>
          </div>
            <audio controls id="myAudio10">
				<source src="sounds/k.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>L</h1>
          </div>
            <audio controls id="myAudio11">
				<source src="sounds/l.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>M</h1>
          </div>
            <audio controls id="myAudio12">
				<source src="sounds/m.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>N</h1>
          </div>
            <audio controls id="X">
				<source src="sounds/n.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>O</h1>
          </div>
            <audio controls id="myAudio14">
				<source src="sounds/o.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>P</h1>
          </div>
            <audio controls id="myAudio15">
				<source src="sounds/p.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>Q</h1>
          </div>
            <audio controls id="myAudio16">
				<source src="sounds/q.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>R</h1>
          </div>
            <audio controls id="myAudio17">
				<source src="sounds/r.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>S</h1>
          </div>
            <audio controls id="myAudio18">
				<source src="sounds/s.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>T</h1>
          </div>
            <audio controls id="myAudio19">
				<source src="sounds/t.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>U</h1>
          </div>
            <audio controls id="myAudio20">
				<source src="sounds/u.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>V</h1>
          </div>
            <audio controls id="myAudio21">
				<source src="sounds/v.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>W</h1>
          </div>
            <audio controls id="myAudio22">
				<source src="sounds/w.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>X</h1>
          </div>
            <audio controls id="myAudio23">
				<source src="sounds/x.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>Y</h1>
          </div>
            <audio controls id="myAudio24">
				<source src="sounds/y.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

        <div class="card">
          <div class="text">
            <h1>Z</h1>
          </div>
            <audio controls id="myAudio25">
				<source src="sounds/z.mp3" type="audio/mpeg">
				Your browser does not support the audio element.
			</audio>
          
        </div>

  	</div>
</div>
<div>
</div>
  
</body>
<script>
  var aud = document.getElementById("myAudio");
  var aud1 = document.getElementById("myAudio1");
  var aud2 = document.getElementById("myAudio2");
  var aud3 = document.getElementById("myAudio3");
  var aud4 = document.getElementById("myAudio4");
  var aud5 = document.getElementById("myAudio5");
  var aud6 = document.getElementById("myAudio6");
  var aud7 = document.getElementById("myAudio7");
  var aud8 = document.getElementById("myAudio8");
  var aud9 = document.getElementById("myAudio9");
  var aud10 = document.getElementById("myAudio10");
  var aud11 = document.getElementById("myAudio11");
  var aud12 = document.getElementById("myAudio12");
  var aud13 = document.getElementById("X");
  var aud14 = document.getElementById("myAudio14");
  var aud15 = document.getElementById("myAudio15");
  var aud16 = document.getElementById("myAudio16");
  var aud17 = document.getElementById("myAudio17");
  var aud18 = document.getElementById("myAudio18");
  var aud19 = document.getElementById("myAudio19");
  var aud20 = document.getElementById("myAudio20");
  var aud21 = document.getElementById("myAudio21");
  var aud22 = document.getElementById("myAudio22");
  var aud23 = document.getElementById("myAudio23");
  var aud24 = document.getElementById("myAudio24");
  var aud25 = document.getElementById("myAudio25");
 

  var modal = document.getElementById("myModal");
  aud.onplaying = function() {
    Swal.fire({
  title: 'apple',
  text: 'red apple',
  imageUrl: './images/aplle.jpg',
  imageWidth: 200,
  imageHeight: 200,
  imageAlt: 'Custom image',
  animation: false
})
     };
     aud1.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/b.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud2.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/c.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud3.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/d.jpg',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud4.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/e.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud5.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/f.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud6.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/g.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud7.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/h.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud8.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/i.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud9.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/j.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud10.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/k.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud11.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/l.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud12.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/m.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud13.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/n.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud14.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/o.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud15.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/p.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud16.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/q.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud17.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/r.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud18.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/s.png',
  imageHeight: 50,
  imagewight: 50,
  imageAlt: 'A tall image'
})
   };
        aud19.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/t.png',
  imageHeight: 50,
  imagewight: 50,
  imageAlt: 'A tall image'
})
   };
        aud20.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/O.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud21.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/v.png',
  imageHeight: 50,
  imagewight: 50,
  imageAlt: 'A tall image'
})
   };
        aud22.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/w.png',
  imageHeight: 50,
  imagewight: 50,
  imageAlt: 'A tall image'
})
   };
        aud23.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/x.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
        aud24.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/y.png',
  imageHeight: 50,
  imagewight: 50,
  imageAlt: 'A tall image'
})
   };
        aud25.onplaying = function() {
    Swal.fire({    
  imageUrl: './images/z.png',
  imageHeight: 200,
  imagewight: 200,
  imageAlt: 'A tall image'
})
   };
  </script>


<style>
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>