diff options
Diffstat (limited to 'rannak/mangud/arimees/muusika/index.html')
| -rwxr-xr-x | rannak/mangud/arimees/muusika/index.html | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/rannak/mangud/arimees/muusika/index.html b/rannak/mangud/arimees/muusika/index.html new file mode 100755 index 0000000..916e7e9 --- /dev/null +++ b/rannak/mangud/arimees/muusika/index.html @@ -0,0 +1,269 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <title>Muusika</title> + <!-- Bootstrap - CSS only --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + + + <!-- Button trigger modal --> + <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> + Sissejuhatus + </button> + + <div class="container text-white text-center"> + <h1>Muusika</h1> + <p> + Vajuta lingile ja vaata muusikavideosid, või kuula siinsamas, + <br/> + ning järjesta siis need vastavalt oma eelistustele. + </p> + + <div class="text-center"> + + <div class="col"> + <button class="moveOn" disabled>Liigu Edasi</button> + </div> + + </div> + </div> + + + <!-- Modal --> + <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + + <div class="modal-header"> + <div class="modalHeaderWrapper"> + <h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5> + </div> + <img class="avatar" alt="avatar" src="pildid/avatar.png"/> + </div> + + <div class="modal-body"> + + <p> + Tsau jälle! Ma sain eelmisel nädalal tutika playeri! Sellega on nüüd süngelt + hea mussi kuulata. Kui laeval olen või Viru juures somme ootan, siis panen + musa peale ja väga mõnus on. Eks ma kuulan rohkem välismaa punte, lindistan + neid otse Luxembourgi raadiost või Soome televisioonist, aga Eestis on ka + päris kuulatavat kraami. Valisin mõned lood oma kassetidelt kuulata. + Vaata, kas tunned ära, kes laulab? Ühe loo panin oma mampsi kassetilt ka. + </p> + <br/> + <p> + <strong> + Ja noh, minul on siin nimekirjas omad lemmikud, aga millised on sinu? + Tee oma edetabel ning põhjenda paari lausega esikoha valikut. + </strong> + </p> + + </div> + + </div> + </div> + </div> + + + <!-- Main Stuff --> + <div class="main"> + <ul> + + <li> + <div class="laul"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1">1.</option> + <option value="2">2.</option> + <option value="3">3.</option> + <option value="4">4.</option> + <option value="5">5.</option> + <option value="6">6.</option> + </select> + + <div class="info"> + <h2>Ivo Linna ja In Spe</h2> + <a target="_blank" href="https://www.youtube.com/watch?v=Wcf7it9O0OU"> + "Eestlane olen ja eestlaseks jään" + </a> + </div> + + <audio controls> + <source src="laulud/EestlaneOlen.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + </div> + </li> + + + + + <li> + <div class="laul"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1">1.</option> + <option value="2">2.</option> + <option value="3">3.</option> + <option value="4">4.</option> + <option value="5">5.</option> + <option value="6">6.</option> + </select> + + <div class="info"> + <h2>JMKE</h2> + <a target="_blank" href="https://www.youtube.com/watch?v=HDUFL_HW_7A"> + "Tere, perestroika!" + </a> + </div> + + <audio controls> + <source src="laulud/TerePerestroika.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + </div> + </li> + + + + + <li> + <div class="laul"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1">1.</option> + <option value="2">2.</option> + <option value="3">3.</option> + <option value="4">4.</option> + <option value="5">5.</option> + <option value="6">6.</option> + </select> + + <div class="info"> + <h2>Jäääär</h2> + <a target="_blank" href="https://www.youtube.com/watch?v=85rgjwf2ZtQ"> + "Õhk kõnnib tänaval" + </a> + </div> + + <audio controls> + <source src="laulud/OhkKonnibTanaval.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + </div> + </li> + + + + + <li> + <div class="laul"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1">1.</option> + <option value="2">2.</option> + <option value="3">3.</option> + <option value="4">4.</option> + <option value="5">5.</option> + <option value="6">6.</option> + </select> + + <div class="info"> + <h2>Kare Kauks</h2> + <a target="_blank" href="https://www.youtube.com/watch?v=VlORhJq3UKE"> + "Mägede hääl" + </a> + </div> + + <audio controls> + <source src="laulud/MagedeHaal.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + </div> + </li> + + + + + <li> + <div class="laul"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1">1.</option> + <option value="2">2.</option> + <option value="3">3.</option> + <option value="4">4.</option> + <option value="5">5.</option> + <option value="6">6.</option> + </select> + + <div class="info"> + <h2>Sõnajalg</h2> + <a target="_blank" href="https://www.youtube.com/watch?v=Zd6fwliA7_k"> + "Tulge kõik" + </a> + </div> + + <audio controls> + <source src="laulud/TulgeKoik.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + </div> + </li> + + + + + <li> + <div class="laul"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1">1.</option> + <option value="2">2.</option> + <option value="3">3.</option> + <option value="4">4.</option> + <option value="5">5.</option> + <option value="6">6.</option> + </select> + + <div class="info"> + <h2>Vennaskond</h2> + <a target="_blank" href="https://www.youtube.com/watch?v=AnBPT4hEPM4"> + "Appi, ma vajan armastust" + </a> + </div> + + <audio controls> + <source src="laulud/AppiMaVajanArmastust.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + </div> + </li> + + </ul> + </div> + <!-- Main End --> + + + <script src="script.js"></script> + + <!-- JavaScript Bundle with Popper --> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> + +</body> +</html> |