added readme file

Sagar-Sharma-7 · Sep 19, 2023 · 9bf8c68 · 9bf8c68
1 parent 03657fe
commit 9bf8c68
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,43 @@
-# Replica1-Spotify
+# Spotify Clone (Replica)
+### link: https://sagar-sharma-7.github.io/Replica1-Spotify
+
+### This is a replica/clone of spotify website.
+### ```NOTE: Replica is event organised by OSS Club of AIT Pune.```
+
+-----
+### Given Design to replicate
+<img src="public/images/Replica-design.png">
+
+----
+
+![vscode](https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=black)
+
+<p float="left">
+
+ ![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
+ ![css](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
+
+</p>
+<hr>
+<hr>
+
+## Fonts used in Color Palette
+```css 
+
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
+
+body{
+    font-family: "Montserrat", sans-serif;
+}
+```
+
+ ## Cloning this repositary using command line
+ 1. Open **Git Bash**.
+ 1. Change the current working directory to the location where you want the cloned directory.
+ 1. Type `git clone https://github.com/Sagar-Sharma-7/Replica1-Spotify.git`
+ 1. Press **Enter** to create the clone of this repositary.
+
+ -----
+ -----
+  ## How to reach me?
+ [ ![ForTheBadge makes-people-smile](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:0503sagarsharma@gmail.com)
diff --git a/index.html b/index.html
@@ -14,13 +14,15 @@
     <meta property="og:description" content="Spotify is a digital music service that gives you access to millions of songs.">
     <meta property="og:type" content="Replica-Spotify">
     <meta property="og:locale" content="en_UK" />
+    <link rel="shortcut icon" href="./public/images/favicon.png" type="image/png">
     <link rel="shortcut icon" href="./public/img/logo.png" type="image/png">
     <link rel="stylesheet" href="./public/style/style.css">
     <title>Spotify</title>
 </head>
 <body>
 
     <div class="main-container">
+        <!-- left side container -->
         <div class="left-container">
             <div class="logo-wrap">
                 <img src="./public/images/Spotify-logo.png" alt="Spotify logo">
@@ -54,6 +56,7 @@
                 <img src="./public/images/assets/download-icon.svg" alt="Download icon"> <span>Install App</span>
             </div>
         </div>
+        <!-- right side container -->
         <div class="right-container">
             <div class="searchbar-wrap">
                 <button class="arrow-btn left-btn">
@@ -92,6 +95,7 @@ <h2 class="browse-heading">Browse all</h2>
                 </div>
             </div>
         </div>
+        <!-- bottom music player container -->
         <div class="player-container">
             <div class="left-player">
                 <img src="./public/images/music-album.jpeg" alt="song image">
@@ -112,7 +116,6 @@ <h2 class="browse-heading">Browse all</h2>
                 <div class="slider-wrap">
                     <div class="time slider-text">2:11</div>
                     <div class="slider">
-                        <!-- <input type="range" min="0" max="100" value="90" class="slider"> -->
                         <div class="bg-slider"></div>
                         <div class="fg-slider"></div>
                     </div>

diff --git a/public/images/favicon.png b/public/images/favicon.png
diff --git a/public/style/style.css b/public/style/style.css
@@ -3,6 +3,7 @@
     <!-- Collage Email: sagarsharma_230113@aitpune.edu.in--> 
 */
 
+/* color variables */
 :root{
   --primary: #080808;
   --gray: #161616;