Spotify Clone ll Source code HTML & CSS

MAU Ka LADKA

 


Mau Ka Ladka

Images and pngs...right click to save images.
















Jaha par white hai vaha par png images hai. Vaha par click karke download kariye.

HTML Source Code....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify.com</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="contener">
                <div class="spotifylogo">
                    <img src="spotify2.png" alt="" width="20px">
                </div>
                <div class="homelogo">
                    <img class="up" src="home logo.png" alt="">
                </div>

                <div class="search">
                        <div class="searchlogo">
                            <img src="search.png" alt="">
                        </div>
                        <input type="text" placeholder="Made by amar  ">
                        <div class="brwserlogo">
                            <img class="up" src="browser22.png" alt="">
                        </div>
                </div>

                <div class="links1">
                    <p class="up">Premium</p>
                    <p class="up">Help</p>
                    <p class="up">Download</p>
                </div>

                <div class="links2">
                    <img class="up" src="download2.png" alt="">
                    <p class="p1 up">Install</p>
                    <p class="p2 up">Sign up</p>
                    <button class="btn up">Sign in</button>
                </div>

            </div>
        </nav>
    </header>
    <!-- nav bar khatam -->
     <main>
        <!-- left div -->
        <div class="leftContainer">
            <div class="plylist">
                <img src="home logo.png">
                <p>My Library</p>
                <span>+</span>
            </div>
            <!-- heding khatam -->

            <div class="scrolbox">
                <div class="box1">
                    <p class="p1">Apni Pahali Plylist Banay </p>
                    <p class="p2">Ham Aapki Madat Karenge</p>
                    <button class="up">Creat Plylist</button>
                </div>
                <div class="box2">
                    <p class="p1">Finde And Follow Pordcast</p>
                    <p class="p2">I Send You Notificatons</p>
                    <button class="up">Brows Pordcast</button>
                </div>
            </div>
            <div class="notificaton">
                <p class="p3">
                    <span>kanuni</span>
                    <span>surachha or privice seting</span>
                    <span>privice polici</span>
                    <span>kuki</span>
                </p>
                <p class="p4">
                    <span>vigyapano ke bare me</span>
                    <span>jagaha tak pahuchne ki suvidha</span>
                </p>
               
                <div class="hindi up">
                    <img src="browser22.png">
                    <button>Hindi</button>
                </div>
            </div>

        </div>
        <!-- left div khatam  -->



        <!-- right div -->
        <div class="rightContainer">
           
            <div class="boxses">

                <div class="populer">
                    <p>Populer Singers</p>
                </div>

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="pritam.jpg">
                    </div>
                    <p>Pritam</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="arijits.jpg">
                    </div>
                    <p>Arijit Shingh</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="arr.jpg">
                    </div>
                    <p>A.R.Rhaman</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="sachi.jpg">
                    </div>
                    <p>Sachin-Gigar</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="ss4ssss.jpg">
                    </div>
                    <p>Vishal-Shekhar</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="arif.jpg">
                    </div>
                    <p>Atif Aslam</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="anirudh.jpg">
                    </div>
                    <p>Anirudh Ravichander</p>
                    <p>Singer</p>
                </div>
               

                <div class="main_box1">
                    <div class="img_singers">
                        <img src="vishsal.jpg">
                    </div>
                    <p>Vishal Mishra</p>
                    <p>Singer</p>
                </div>
                <!-- main khatam -->
                <!-- footer start -->

                <div class="ftr_container">
                    <div class="ftrLogo">
                        <img src="spotify2.png" >
                        <p>Spotify</p>
                    </div>
                    <div class="ftrHedings">
                        <p>Company</p>
                        <p>Communities</p>
                        <p>Useful Links</p>
                        <p>Sporify Plans</p>
                    </div>
                    <div class="ftrLinks">
                        <div class="ftrBox ftrbox1">
                            <p>About</p>
                            <p>Jobs</p>
                            <p>For the Record</p>
                        </div>
                            <div class="ftrBox ftrbox2">
                                <p>For Artists</p>
                                <p>Developers</p>
                                <p>Advertising</p>
                                <p>Investors</p>
                                <p>Vendors</p>
                            </div>
                            <div class="ftrBox ftrbox3">
                                <p>Support</p>
                                <p>Web Player</p>
                                <p>Free Mobile App</p>
                                <p>Contact Spotify</p>
                               
                            </div>
                            <div class="ftrBox ftrbox4">
                                <p>Premium Individual</p>
                                <p>Premium Duo</p>
                                <p>Premium Family</p>
                                <p>Premium Student</p>
                                <p>Spotify Free</p>
                            </div>
                        </div>
                </div>
            </div>
        </div>
     </main>
     <div class="amar">
        <h2 class="up">Made By Amar</h2>
     </div>
</body>
</html>

CSS Source Code...

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
body {
    background-color: black;
}

header nav {
    height: 65px;
    background-color: black;
}
.contener {
    display: flex;
    align-items: center;
   
}
.spotifylogo img {
    width: 80px ;
    height: 50px;
    margin-top: 6px;
    cursor: pointer;
}
.homelogo img{
    width: 40px ;
    height: 40px;
    margin-top: 6px;
    cursor: pointer;
}
.search{
    height: 50px;
    width: 465px ;
    display: flex;
    margin-left: 20px;
    background-color: rgb(35, 34, 34);
    border-radius: 50px;
    padding: 4px 10px;
    margin-top: 5px;

}
.search input {
    width: 350px;
    height: 28px;
    margin: 7px;
    font-size: 20px;
    background-color: rgb(35, 34, 34);
    color: white;
    border-left: 2px solid gray;
    outline: none;
    border: none;
    padding: 5px;
   
   
}

.searchlogo img {
    width: 30px ;
    height: 30px;
    margin: 6px 6px;
    cursor: pointer;
   
}
.brwserlogo img {
    width: 40px ;
    height: 40px;
    margin-top:2.5px;
    cursor: pointer;
   
}
.links1 {
    display: flex;
    width: 267px;
    margin-top: 6px;
    font-family: Arial, Helvetica, sans-serif;
    border-right: 2px solid gray;
   
   
}
.up {
    transition-property:transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
}
.up:hover {
    transform: scale(105%);
}
.links1 p {
    font-weight: bold;
    margin-left: 15px;
    font-size: 17px;
    color: gray;
    cursor: pointer;
   
}
.links1 p:hover {
    color: white;
}
.links2 {
    display: flex;
    align-items: center;
    margin: 6px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-left: 30px;
    font-size: 17px;
    color: gray;  
}


.links2 > img {
    width: 35px;
    height: 35px;
    margin: 6px 3px;
    margin-top: 13px;
    cursor: pointer;
   
}
.links2 .p1 {
    margin-right:30px;
    margin-top: 6px;
    cursor: pointer;

}
.links2 .p1:hover {
    color: white;
}

.links2 .p2 {
    margin-right: 20px;
    margin-top: 6px;
    cursor: pointer;
}
.links2 .p2:hover {
    color: white;
}

.links2 .btn {
    width: 130px;
    margin-left:  20px;
    padding: 15px;
    border-radius: 50px;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
/* yaha se nav bar khatam hota hai. */

/* yaha se meain suru hota hai matalba niche ka content */

main {
    display: flex;

}
.leftContainer {
    width: 33vw;
    height: 80vh;
    margin: 5px;
    background-color:rgb(11, 11, 11);;
    border-radius: 10px;
    border: none;

}


.plylist {
    display: flex;
    padding: 5px;
    border: 2px solid black;
    margin: 4px;
    align-items: center;
    width: 100%;
    border: none;


}
.plylist img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    cursor: pointer;
}
.plylist p {
    font-size: 27px;
    font-family: sans-serif;
    font-weight: bold;
    color: gray;
}
.plylist span {
    margin-left: 47%;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: gray;
}

.plylist p:hover {
    color: white;
    cursor: pointer;
}
.plylist span:hover {
    color: white;
    cursor: pointer;
}
.scrolbox {
    max-width: 400px;
    max-height: 180px;
    margin: 10px;
    border: 2px solid black;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0px;
    background-color: rgb(11, 11, 11);
    border: none;
}
::-webkit-scrollbar {
    display: none;
}
.box1,.box2 {
    border: 2px solid black;
    width: 375px;
    height: 130px;
    border-radius: 10px;
    margin: 0px 10px;
    color: white;
    background-color: rgb(35, 34, 34);
    border: none;
   
}
.box2 {
    margin-top: 30px;
}

.box1 {
    font-size: 20px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
   
}
.box1 .p2 {
    margin-top: 8px;
    font-size: 16px;
}
.box1 button {
    margin-top: 12px;
    padding: 8px 25px;
    border-radius: 20px;
    border: none;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
   
}

.box2 {
    font-size: 20px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
   
}
.box2 .p2 {
    margin-top: 8px;
    font-size: 16px;
}
.box2 button {
    margin-top: 12px;
    padding: 8px 25px;
    border-radius: 20px;
    border: none;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
   
}
.notificaton {
    max-width: 400px;
    height: 180px;
    margin: 30px 10px;
    padding: 20px;

}
.notificaton .p3 span {
    margin: 0px 5px;
    font-size: 13px;
    color: gray;
    font-weight: bold;
    cursor: pointer;

}
.notificaton .p4 span {
    margin: 0px 5px;
    font-size: 13px;
    color: gray;
    font-weight: bold;
    cursor: pointer;

}
.p4 {
    margin-top: 10px;
}

.notificaton .hindi{
    height: 37px;
    width: 105px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 30px;
    border: 2px solid white;
    cursor: pointer;

}
.notificaton .hindi img {
    width: 30px;
    height: 30px;
    margin-right: 4px;
   
}
.notificaton .hindi button {
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background:none;
    border: none;
    cursor: pointer;
   
}
.populer {
    height: 70px;
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
}
.populer p {
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
   
}

.boxses {
    padding: 5px;
    height: 512px;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: hidden;

}

.rightContainer {
    margin: 5px;
    width: 65%;
    height: 80vh;
    border-radius: 10px;
    border: none;
    background-color: rgb(11, 11, 11);;;
}
.rightContainer .main_box1 {
    width: 200px;
    height: 260px;
    margin: 2px;
    border-radius: 10px;
    margin-top: 20px;
}
.main_box1:hover {
    background-color: rgb(23, 23, 23);
}
.main_box1 {
    padding: 20px;  
}


.main_box1 .img_singers {
    width: 170px;
    height: 170px;
    /* border: 2px solid rgb(255, 255, 255); */
    border-radius: 50%;
    box-shadow: 1px 3px 10px black;

   
}
.main_box1 p {
    margin-top: 10px;
    font-family: sans-serif;
    color: white;
   
}
.img_singers {
    display: flex;
    justify-content: center;
    align-items: center;
}
.img_singers p {
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bold;
}

/* image style  */

.main_box1 img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
}

/* main khatam  */


.ftr_container {
    margin-top: 30px;
    background-color: black;
    width: 100%;
    height: 350px;
    border-radius: 10px;

}
.ftrLogo {
    height: 50px;
    display: flex;
    align-items: center;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 23px;
}
.ftrLogo img {
    width: 65px;
    height: 40px;
}
.ftrHedings {
    height: 50px;
    display: flex;
    align-items: center;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    justify-content: space-around;
    font-size: 11px;
    color: gray;
}

.ftrLinks {
    padding: 5px 0px;
    height: 239px;
    display: flex;
    color: white;
    font-size: 13px;
    font-family: arial;
    justify-content: space-around;
}

.ftrBox {
    height: 240px;
    width: 115px;
    padding: 10px;
   
}
.ftrBox p {
    padding-top: 15px;
    cursor: pointer;

}
.ftrbox1 p{
    margin-left: 15px;
    cursor: pointer;
}
.ftrbox2 p{
    margin-left: 4px;
    cursor: pointer;
}

.ftrbox3 p{
    margin-left: 8px;
    cursor: pointer;
}

.ftrbox4 p{
    margin-left: 13px;
    cursor: pointer;
}

.amar {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.amar h2 {
    color: gray;
    font-family: arial;
    cursor: pointer;
}
.amar h2:hover {
    color: white;
}

टिप्पणियाँ

एक टिप्पणी भेजें

इस ब्लॉग से लोकप्रिय पोस्ट

Creat Your profile using HTML & CSS with my Source code.

MAU Ka LADKA
चित्र
 USING HTML & CSS CREAT YOUR PROFLE LIKE THIS. HTML Source Code : - <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title >My profile</ title >     < link rel =" stylesheet " href =" style.css "> </ head > < body >     < header >         < nav >             < ul >                 < li >Home</ li >                 < li >About</ li >                 < li >Contect</ li >                 < li >Login</ li >             </ ul >      ...
Read more »

Holi Project Shree Ram Website

MAU Ka LADKA
चित्र
Html sorce code copy and past ...  <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title >Shree Ram</ title >     < link rel =" stylesheet " href =" style.css "> </ head > < body >     < div class =" navbar ">         < h2 >Shree Ram</ h2 >         < h2 >Holi</ h2 >     </ div >     < div class =" container ">         < div class =" shreeRamimg ">             < img src =" images/shree main photo.png " alt ="">         </ div >         < div class =" holitext ">Hamare Taraf se Aap Sabhi ko < b >Holi</ b > ki Hardik Shubhkamn...
Read more »

Common Problems for Coding jurny and Solution.

MAU Ka LADKA
  Pura Padhne ke bad problems se Pyar ho jayga. Ham HTML,CSS,JS ak bar comlite kar lete hai or uski notes bhi bana lete hai or hamne thodi bahut practice bhi ki hoti hai jaise nav bar, form, table, etc.. ab jab sab complite ho jata hai to ham wesite bane jate hai lekin jab banana suru karte hai or nav bar ki width height bg color dete hai to yha tak to sab thik hota hai lekin jab nav bar ke andar ke element ko set karne ki bari aati hai to hamara dimag kam karna band kar deta hai or sabse jaruri chij jo hame karni chahiy vo ham nhi karte hai. !notes dekhna ye ham dekhte hi nhi hai or dekh bhi liya or problem ka solution hame mil bhi gya to vo aply hi nhi hota hai uske bad ham file ko close karke start karte hai to bhi thik nhi hota hai fir online search karte hai tab jakar thik hota hai tabtak hamari anargy khatam ho chuki hoti hai or motivation bhi khatam ho jata hai.  Aise hi ham nav bar banana jab achhe se sikh lete haai or div ki sahayta ase thoda content apne page par dal...
Read more »