From 4ebd89f412691ebcdec9b15698233df98f7088fd Mon Sep 17 00:00:00 2001
From: Manuela Chamoso <89460249+manuelachamoso@users.noreply.github.com>
Date: Fri, 31 Mar 2023 17:49:58 +0200
Subject: [PATCH] Create mchamoso.html

---
 submissions/mchamoso.html | 129 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 submissions/mchamoso.html
diff --git a/submissions/mchamoso.html b/submissions/mchamoso.html
new file mode 100644
index 0000000..edd48ec
--- /dev/null
+++ b/submissions/mchamoso.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sounds Good</title>
+  <style>
+      * {
+    padding: 0;
+    margin: 0;
+  }
+
+  .hero {
+    width: 100%;
+    height: 100vh;
+    background-image: url(img/main.jpg);
+    background-position: center;
+    background-size: cover;
+    position: relative;
+  }
+
+  .navbar {
+    width: 88%;
+    margin: auto;
+    padding: 15px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .navbar ul li {
+    list-style: none;
+    display: inline-block;
+    margin: 0 15px;
+  }
+
+  .navbar ul li a {
+    text-decoration: none;
+    color: #ffff;
+    font-family: sans-serif;
+    font-weight: bold;
+  }
+
+  .content {
+    width: 100%;
+    position: absolute;
+    top: 30%;
+  }
+  
+  .left {
+    margin-left: 6%;
+  }
+
+  .left h1 {
+    font-size: 85px;
+    color: #fff;
+    line-height: 110px;
+    float: left;
+  }
+
+  h2 {
+    display: none;
+  }
+
+  .right {
+    float: right;
+    margin-right: 8%;
+    margin-top: 120px;
+    display: flex;
+    align-items: center;
+  }
+
+  .right p {
+    font-size: 20px;
+    color: #fff;
+    font-family: sans-serif;
+    margin-right: 15px;
+  }
+
+  #icon {
+    width: 40px;
+    cursor: pointer;
+  }
+
+  </style>
+</head>
+<body>
+    <div class="hero">
+        <div class="navbar">
+            <img src="/img/logo.png" alt="logo" class="logo">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">New Song</a></li>
+                <li><a href="#">Album</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </div>
+        <div class="content">
+            <div class="left">
+                <h1>Unleash your <br>inner beat</h1>
+                <h2>Unleash your inner beat</h2>
+            </div>
+            <div class="right">
+                <p>Click to play</p>
+                <img src="img/play.png" alt="play" id="icon">
+            </div>
+        </div>
+    </div>
+    <audio id="mysong">
+        <source src="music/pozeanos80.mp3" type="audio/mp3">
+    </audio>
+    <script>
+        const thesong = document.getElementById("mysong");
+        const iconPressed = document.getElementById("icon");
+
+        icon.onclick= function() {
+            if(mysong.paused){
+                thesong.play();
+                iconPressed.src="img/pause.png"
+            } else {
+                thesong.pause();
+                iconPressed.src="img/play.png"
+            }
+        }
+    </script>
+</body>
+</html>
