oyo clone code source HTML and CSS

MAU Ka LADKA


Mujhe ye clone banana sabse jada aasan saga bas navigation me time laga or jo ham hover karte hai usme uska arow bhi turn hota hai vo mujhe laga ki JS se karna padega lekin maine css se hi kar diya. Or mujhse ye website responsive nhi bani hai lekin banane ke bad pata chala ki mujhe dusri properties ka use karna chahiy tha jisase ye website responsive ban gae hoti but still jaisa bhi huaa maine kar diya.Agar aapko chije aati hai to aap meri galtiyo se sikh sakte hai kyuki mai khud apni galtiyo se sikhta hu.

Pngs and images --









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>OYO:Hotel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="navbar">
            <div class="logo"><h2>OYO</h2></div>
            <!-- box1 -->
            <div class="hdrBox1">
                <div class="hdrimg1"><img src="bagLogo.svg"></div>
                <div class="hdrtext">
                    <p class="p1">OYO for Business</p>
                    <p class="p2">Trusted by 5000 Corporates</p>
                </div>
            </div>
            <!-- box 2 -->
            <div class="hdrBox1 hdrBox2">
                <div class="hdrimg2"><img  src="bildingLogo.svg"></div>
                <div class="hdrtext">
                    <p class="p1">List your property</p>
                    <p class="p2">Start earning in 30 mins</p>
                </div>
            </div>
            <!-- box3 -->
            <div class="hdrBox1 hdrBox4">
                <div class="hdrimg3"><img src="phonLogo.svg"></div>
                <div class="hdrtext">
                    <p class="p1">0124-6201611</p>
                    <p class="p2">Call us to Book now</p>
                </div>
            </div>

            <!-- box4 -->
            <div class="hdrBox1 hdrBox5">
                <div class="hdrimg4"><img src="prithviLogo.svg"></div>
                <div class="hdrtext">
                    <p class="p3">English <img src="arow.png"></p>
                   
                </div>
            </div>

            <!-- box5 -->
            <div class="hdrBox1 hdrBox6">
                <div class="hdrimg5"><img src="manLogo1.png"></div>
                <div class="hdrtext">
                    <p class="p3">Login / Signup</p>
                </div>
            </div>
        </div>
        <!-- first navbar khatam second nav bar start -->
         <div class="nav2">
            <p>Banglore <img src="arowHalf2.png"></p>
            <p>Chinnai <img src="arowHalf2.png"></p>
            <p>Dilhi <img src="arowHalf2.png"></p>
            <p>Gurgaow <img src="arowHalf2.png"></p>
            <p>Hederabad <img src="arowHalf2.png"></p>
            <p>Kolkata <img src="arowHalf2.png"></p>
            <p>Mumbai <img src="arowHalf2.png"></p>
            <p>Noida <img src="arowHalf2.png"></p>
            <p>Pune <img src="arowHalf2.png"></p>
            <div class="allCities">All Cities</div>
         </div>
    </header>
    <main>
        <div class="m_image1">
            <div class="m_text">
                <p>Over 174,000+ hotels and homes across 35+ countries</p>
                <div class="m_input">
                    <div class="search">
                        <input type="text" placeholder="Made By Amar">
                        <button><img src="location.png">Near me</button>
                    </div>
                    <div class="m_date"><p>Sat, 1 Mar - Sun, 2 Mar</p></div>
                    <div class="m_room"><p>1 Room, 1 Guest</p></div>
                    <div class="m_Search"><button>Search</button></div>
                </div>
            </div>
        </div>

        <div class="main_container">
            <div class="img_box1"></div>
            <div class="img_box1 img_box2"></div>
            <div class="img_box3">
                <div class="fire_img">
                    <img src="fireLogo.png" >
                </div>
                <div class="deal">
                    <p>Get access to exclusive deals</p>
                    <p>Only the best deals reach your inbox</p>
                </div>
                <div class="email_box">
                    <input type="text" placeholder="Made By Amar">
                    <button>Notify me</button>
                </div>
            </div>
        </div>
        <div class="oyo_around">
            <div class="oyo_img">
                <img src="pincuresLogo.avif" >
            </div>
            <div class="oyo_around_citis">
                <div class="oyo_text">
                    <p>There's an OYO around. Always.</p>
                    <p>More Destinations. More Ease. More Affordable.</p>
                    <div class="oyoNOof_hotels">
                        <div class="oyo_citis">
                            <p>35+</p>
                            <p>Countries</p>
                        </div>
                        <p class="das">/</p>
                        <div class="oyo_homes">
                            <p>174,000+</p>
                            <p>Hotels & Homes</p>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
    </main>

    <footer>
        <div class="ftr_main_container">
            <p><a href="https://www.youtube.com/@MAUKaLADKA0" target="_blank">MAU KA LADKA...</a></p>
           
        </div>
        <div class="blog">
            <h4><a href="https://maukaladka.blogspot.com/" target="_blank">mau ka ladka blogs...</a></h4>
        </div>
    </footer>
</body>
</html>


CSS source code -- 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif, sans-serif;
    list-style-type: none;
}

header .navbar {
    height: 70px;
    display: flex;
}

.navbar .logo {
    height: 100%;
    width: 235px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .logo h2 {
    font-weight: 900;
    font-size: 40px;
}

.hdrBox1 {
    border-left: 1px solid gray;
    display: flex;
    width: 250px;
    padding: 0px 10px;
    cursor: pointer;

}

.hdrBox1:hover {
    background-color: rgb(238, 238, 238);
}

.hdrBox1 .hdrimg1 {
    height: 100%;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.hdrBox1 .hdrimg1 img {
    height: 21px;
}

.hdrBox1 .hdrtext {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hdrtext .p1 {
    font-weight: bold;
    font-size: 14px;
}

.hdrtext .p2 {
    font-size: 12px;
    color: gray;
}

.hdrimg2 {
    height: 100%;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdrimg2 img {
    height: 25px;
}

.hdrBox2 {
    width: 210px;
}

.hdrimg3 {
    height: 100%;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdrimg3 img {
    height: 25px;
}

.hdrBox4 {
    width: 180px;
}

.hdrimg4 {
    height: 100%;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdrimg4 img {
    height: 25px;
}

.p3 {
    font-size: 16px;
    font-weight: bold;
    display: flex;
}

.p3 img {
    height: 17px;
    width: 18px;
    margin-left: 3px;
}


.hdrBox5 {
    width: 150px;
}

.hdrimg5 {
    height: 100%;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdrimg5 img {
    height: 30px;
}

.nav2 {
    display: flex;
    /* height: 40px; */
    background-color: rgb(239, 238, 238);
    align-items: center;
    justify-content: space-evenly;
    font-size: 15px;
    color: gray;
    border-top: 1px solid lightgray;
}

.nav2 p {
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;


}

.nav2 p:hover {
    background-color: rgb(246, 246, 246);
}

.allCities:hover {
    color: red;
    cursor: pointer;

}

.nav2 p img {
    height: 12px;
    margin-left: 5px;
}

.nav2 p img {
    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.nav2 p img:hover {
    transform: rotate(180deg);
}

.m_image1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    background-image: url(bg.avif);
}

.m_text {
    font-size: 30px;
    font-family: serif;
    color: white;
    font-weight: 900;
}

.m_text>p {
    margin: 20px;
    margin-left: 98px;
}

.m_input {
    height: 60px;
    width: 1100px;
    border-radius: 5px;
    background-color: white;
    display: flex;
}

.search {
    height: 100%;
    border-right: 1px solid gray;
    width: 430px;
    padding-left: 5px;
    display: flex;
    align-items: center;


}

.search img {
    height: 15px;
    margin-right: 5px;

}

.search input {
    padding: 5px;
    width: 300px;
    border: none;
    font-size: 15px;
    margin-left: 10px;
    margin-right: 2px;
    outline: none;
}

.search button {
    padding: 8px 12px;
    border-radius: 30px;
    border: none;
    display: flex;
    align-items: center;
    margin-right: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;

}

.m_date {
    height: 100%;
    border-right: 1px solid gray;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.m_date p {
    font-size: 16px;
    color: black;
    font-weight: 600;
}

.m_room {
    height: 100%;
    width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.m_room p {
    font-size: 16px;
    color: black;
    font-weight: 600;
}

.m_Search {
    height: 100%;
    width: 192px;
    background-color: rgb(86, 181, 86);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0px 5px 5px 0px;
}

.m_Search button {
    font-size: 17px;
    font-weight: bold;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.m_Search:hover {
    background-color: rgb(58, 148, 58);
    transition: 0.4s;
}

.main_container {
    width: 95vw;
    margin: auto;
    height: 125vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 40px;
    gap: 48px;
}

.img_box1 {
    width: 90vw;
    height: 38vh;
    border-radius: 5px;
    background-image: url(scaner.avif);
    background-size: 1150px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
}

.img_box2 {
    background-image: url(bgImg.avif);
    background-size: 1150px;
}

.img_box3 {
    height: 17vh;
    width: 90vw;
    border: 1px solid gray;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 10px;

}

.fire_img {
    height: 62px;
    width: 62px;
    border-radius: 50%;
    background-color: rgba(220, 139, 109, 0.238);
    margin-left: 10px;
}

.fire_img img {
    height: 65px;

}

.deal {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    margin-left: 30px;
}

.deal> :nth-child(1) {
    font-size: 20px;
    font-weight: bold;

}

.deal> :nth-child(2) {
    font-size: 17px;
    color: gray;

}

.email_box {
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-left: 180px;
    width: 500px;
}

.email_box input {
    height: 50px;
    padding: 10px;
    padding-left: 15px;
    outline: none;
    font-size: 16px;
    margin-right: 15px;
    width: 320px;
    border: 1px solid gray;
    border-radius: 8px;

}
.email_box button {
    padding: 16px 30px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    background-color: red;
    color: white;
    border-radius: 8px;
    cursor: pointer;


}
.oyo_around {
    height: 70vh;
    background-color: #f3f5f7;
    display: flex;
    align-items: center;
}
.oyo_img {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 20px;
}
.oyo_img img {
    height: 50vh;
    margin-bottom: 80px;

}
.oyo_around_citis {
    height: 100%;
    width: 50vw;
    margin-left: 3px;
    padding: 30px;
}
.oyo_text {
    height: 40vh;

}
.oyo_text > :nth-child(1) {
    font-size: 27px;
    font-weight: bold;
    margin: 30px 0px;
}
.oyo_text > :nth-child(2) {
    font-size: 18px;
    margin: 30px 0px;
   
}
.oyoNOof_hotels {
    display: flex;
    align-items: center;
}
.oyoNOof_hotels .das {
    font-size: 70px;
    margin: 0px 30px;
}

.oyo_citis > :nth-child(1) {
    font-size: 35px;
    font-weight: bold;
}
.oyo_citis > :nth-child(2) {
    font-size: 15px;
    color: gray;
   
}
.oyo_homes > :nth-child(1) {
    font-size: 35px;
    font-weight: bold;
}
.oyo_homes > :nth-child(2) {
    font-size: 15px;
    color: gray;
   
}

.ftr_main_container {
    height: 60px;
    background-color: #6d787d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ftr_main_container p a {
    font-size: 55px;
    font-weight: bold;
    color: white;
    text-decoration: none;

}
.blog {
    background-color: #6d787d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;


}
.blog h4 a {
    font-size: 16px;
    font-weight: bold;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
   
}




टिप्पणियाँ

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

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

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 »