kaiserdev/testpage.html at master · Kaiser69/kaiserdev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE .<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Kaiser's Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <link rel="stylesheet" href="gallery.css">
    <script src="main.js"></script>
    <link rel="stylesheet" href="testpage.css">
</head>
<body>
<body>
	<main>
		<h1>Thumbnail with Animated Captions</h1>
		<section id="container">
			<div class="thumbnail"
				data-title="Title"
				data-description="Bacon ipsum dolor amet filet mignon alcatra short ribs, sausage shoulder tail biltong rump chicken ground round ham hock porchetta tri-tip. Boudin bresaola andouille, leberkas pork ball tip turducken beef ribs">
				<img src="media/kai1.png" alt="Illustration of Vulture" width="300">
			</div>
		</section>
    </main>


    <audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
    <a onclick="playSound();">play</a>

                  <script>

                  function playSound () {
    document.getElementById('audio').play();
}

                  </script>


    <div class="container">
            <div class="box box-1">
                <div class="cover"><img src="https://upload-images.jianshu.io/upload_images/3433202-893bc9989a52eba0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></div>
                <button><div></div></button>
            </div>
            <div class="box box-2">
                <div class="cover"><img src="https://upload-images.jianshu.io/upload_images/3433202-964edcf0f07211b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></div>
                <button><div></div></button>
            </div>
            <div class="box box-3">
                <div class="cover"><img src="https://upload-images.jianshu.io/upload_images/3433202-2ebb2b6f93add843.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></div>
                <button><div></div></button>
            </div>
            <div class="box box-4">
                <div class="cover"><img src="https://upload-images.jianshu.io/upload_images/3433202-f79c4cc8de2f84ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></div>
                <button><div></div></button>
            </div>

        </div>

    <a href="https://dribbble.com/YancyMin" class="dr-url" target="_blank"><img class="dr" src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>


           <a onclick="myAudioFunction('push.png');">
                <img src="push.png">
            </a>
            <a onclick="myAudioFunction('push.png');">
                <img src="push.png">
            </a>

           <script>
                var aAudio = new Audio('audio/button-3.mp3');
                var bAudio = new Audio('audio/button-3.mp3');
                function myAudioFunction(letter) {
                    if(letter == 'push.png') {
                        aAudio.play();
                    } else if(letter == 'push.png') {
                        bAudio.play();
                    }
                }
            </script>

    <h1>Byt background färg</h1>
    <label for="colorWell">Färg</label>
    <br>
    <input type="color" value="#ff0000" id="colorWell">


</body>
</html>