Add files via upload

2023-04-24 00:15:16 +03:00 · 2023-04-24 00:15:16 +03:00 · 3f977d6d66
commit 3f977d6d66
parent 5861eb7f95
13 changed files with 199 additions and 0 deletions
--- a/100_projects/62-music-website/css/bootstrap.min.css
+++ b/100_projects/62-music-website/css/bootstrap.min.css
--- a/100_projects/62-music-website/css/bootstrap.min.css.map
+++ b/100_projects/62-music-website/css/bootstrap.min.css.map
--- a/100_projects/62-music-website/css/style.css
+++ b/100_projects/62-music-website/css/style.css
@ -0,0 +1,109 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+.container{
+  height: 100vh;
+  max-width:100%;
+  background-image: url(../media/image.png);
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+.logo{
+  position: relative;
+  font-size: 35px;
+  color: #fff;
+  font-weight: 700;
+  font-style: italic;
+  z-index: 999;
+  transition: .3s;
+}
+.logo:hover{
+  color: #C1E4DE;
+}
+.navbar-toggler{
+  background-color: #fff;
+  color: #5f5f5f;
+}
+.menu-icon{
+  width: 30px;
+  color: #5f5f5f;
+}
+.logo::before{
+  content: '';
+  position: absolute;
+  top: -40px;
+  left: 50px;
+  border: 50px solid ;
+  border-color: transparent transparent #FACDC6 transparent;
+  border-radius: 10px;
+  z-index: -1;
+  transform: skewX(15deg);
+}
+.navColor ul li a{
+  color: #5f5f5f;
+  text-transform: uppercase;
+  font-size: 15px;
+  text-decoration: none;
+}
+.navColor ul li a:hover{
+  color: #ECA8A7;
+}
+.content{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 80px;
+}
+.left{
+  margin-left: 6%;
+}
+.left h1{
+  font-size: 70px;
+  color: #fff;
+  line-height: 80px;
+}
+.right{
+  margin-right: 6%;
+  display: flex;
+  align-items: center;
+}
+.right p{
+  color: #5f5f5f;
+  margin-bottom: 0;
+  font-size: 18px;
+  font-weight: 400;
+  margin-right: 10px;
+}
+#icon{
+  width: 80px;
+  cursor: pointer;
+}
+@media(max-width:767px){
+  .left{
+    margin-left: 0;
+  }
+  .left h1{
+    font-size: 40px;
+    line-height: 70px
+  }
+  .right{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-right:0;
+  }
+}
+@media(min-width:992px){
+  .flex-end{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .nav{
+    margin: 10px 50px;
+  }
+}
--- a/100_projects/62-music-website/index.html
+++ b/100_projects/62-music-website/index.html
@ -0,0 +1,57 @@
+<!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>Document</title>
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/all.min.css" />
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="container">
+    <nav class="navbar navbar-expand-lg">
+      <div class="nav container-fluid">
+        <a class="logo navbar-brand" href="#">ANaMa</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"><img src="list.svg" alt="menu" class="menu-icon"></span>
+        </button>
+        <div class="navColor flex-end collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Specifications</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Products</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">About</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Contact</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div class="content">
+      <div class="left">
+        <h1>The<br>Real<br>Sound</h1>
+      </div>
+      <div class="right">
+        <p>Click Here To Listen</p>
+        <img src="media/play.png" alt="play" id="icon">
+      </div>
+    </div>
+    <audio id="song">
+      <source src="media/rain.mp3" type="audio/mp3">
+    </audio>
+  </div>
+  <script src="js/main.js"></script>
+  <script src="js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
--- a/100_projects/62-music-website/js/bootstrap.bundle.min.js
+++ b/100_projects/62-music-website/js/bootstrap.bundle.min.js
--- a/100_projects/62-music-website/js/bootstrap.bundle.min.js.map
+++ b/100_projects/62-music-website/js/bootstrap.bundle.min.js.map
--- a/100_projects/62-music-website/js/main.js
+++ b/100_projects/62-music-website/js/main.js
@ -0,0 +1,14 @@
+var song = document.getElementById("song");
+var icon = document.getElementById("icon");
+// icon.onclick = function(){
+//   song.play();
+// }
+icon.onclick = function(){
+  if (song.paused){
+    song.play();
+    icon.src = "media/pause.png";
+  } else{
+    song.pause();
+    icon.src = "media/play.png";
+  }
+}
--- a/100_projects/62-music-website/list.svg
+++ b/100_projects/62-music-website/list.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+</svg>
--- a/100_projects/62-music-website/media/image.png
+++ b/100_projects/62-music-website/media/image.png
--- a/100_projects/62-music-website/media/logo.png
+++ b/100_projects/62-music-website/media/logo.png
--- a/100_projects/62-music-website/media/pause.png
+++ b/100_projects/62-music-website/media/pause.png
--- a/100_projects/62-music-website/media/play.png
+++ b/100_projects/62-music-website/media/play.png
--- a/100_projects/62-music-website/media/rain.mp3
+++ b/100_projects/62-music-website/media/rain.mp3