diff --git a/index.html b/index.html index 9e54f2f2..b7689432 100644 --- a/index.html +++ b/index.html @@ -134,6 +134,13 @@

Weather Website

Portfolio

+ +
+
+

Music

+

Benzify

+
+
diff --git a/projects/Benzify/images/careless.jpg b/projects/Benzify/images/careless.jpg new file mode 100644 index 00000000..5ea3ed0f Binary files /dev/null and b/projects/Benzify/images/careless.jpg differ diff --git a/projects/Benzify/images/grateful.jpg b/projects/Benzify/images/grateful.jpg new file mode 100644 index 00000000..4070a43c Binary files /dev/null and b/projects/Benzify/images/grateful.jpg differ diff --git a/projects/Benzify/images/landscape.jpeg b/projects/Benzify/images/landscape.jpeg new file mode 100644 index 00000000..e99ae7c2 Binary files /dev/null and b/projects/Benzify/images/landscape.jpeg differ diff --git a/projects/Benzify/images/music.jpg b/projects/Benzify/images/music.jpg new file mode 100644 index 00000000..985070ff Binary files /dev/null and b/projects/Benzify/images/music.jpg differ diff --git a/projects/Benzify/index.html b/projects/Benzify/index.html new file mode 100644 index 00000000..adc8edde --- /dev/null +++ b/projects/Benzify/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + Benzify + + + +
+

Welcome to Benzify

+
+ +
+ +
+ + + +
+
+ + + \ No newline at end of file diff --git a/projects/Benzify/music/careless.mp3 b/projects/Benzify/music/careless.mp3 new file mode 100644 index 00000000..2d980d65 Binary files /dev/null and b/projects/Benzify/music/careless.mp3 differ diff --git a/projects/Benzify/music/grateful.mp3 b/projects/Benzify/music/grateful.mp3 new file mode 100644 index 00000000..aa261db9 Binary files /dev/null and b/projects/Benzify/music/grateful.mp3 differ diff --git a/projects/Benzify/music/landscape.mp3 b/projects/Benzify/music/landscape.mp3 new file mode 100644 index 00000000..e7b2d586 Binary files /dev/null and b/projects/Benzify/music/landscape.mp3 differ diff --git a/projects/Benzify/script.js b/projects/Benzify/script.js new file mode 100644 index 00000000..9b6da34d --- /dev/null +++ b/projects/Benzify/script.js @@ -0,0 +1,23 @@ +const audioPlayer = document.getElementById('audioPlayer'); +const play = document.getElementsByClassName('play'); +const pause = document.getElementsByClassName('pause'); +const next = document.getElementsByClassName('next'); +const img = document.getElementById('img'); + +const music = ["music/grateful","music/careless","music/landscape"] +const images = ["grateful.jpg","careless.jpg","landscape.jpeg"] +let i = 0; +let playMusic = () => { + audioPlayer.play(); +} + +let pauseMusic = () => { + audioPlayer.pause(); +} + +let nextMusic = () => { + audioPlayer.pause(); + img.src = "images/" + images[++i%3] ; + audioPlayer.src = music[i%3] + ".mp3"; + playMusic(); +} diff --git a/projects/Benzify/styles.css b/projects/Benzify/styles.css new file mode 100644 index 00000000..193a51c3 --- /dev/null +++ b/projects/Benzify/styles.css @@ -0,0 +1,37 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: blueviolet; + font-family: 'Mali'; +} +.main { + text-align: center; + background-color: aliceblue; + padding: 50px; +} + +.title { + font-size: 24px; + margin-bottom: 2rem; +} +button{ + height: 150px; + width: 250px; + margin: 30px; + font-family: 'Mali'; +} +.img{ + margin: 100px; +} +img{ + height: 500px; +} +h1{ + font-size: 5rem; +} +h2{ + font-size: 3rem; +} \ No newline at end of file