CSS Media Queries

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

<div class="india">

    <img class="img" src="https://source.unsplash.com/800x500/?temple" alt="">
    <div class="shade"></div>
   
    <div class="content">
        <h1 class="title">Welcome To Icecrem Temple</h5>
        <p>Lorem ipsum dolor, sit amet consectetur </p>
    </div>



</div>






</body>
</html>


//CSS File


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body{
    font-family: "Poppins", sans-serif;


}
/*
.india{
    width: 800px;
    height: 500px;
    margin: 20px auto;
    border-radius: 5px;
    position: relative;



} */

.img{
   
    width: 100%;
    height: 100%;
    border-radius: 5px;



}



.title{
    font-size: 2vmax;




}

@media(min-width: 800px){
    .india{
        width: 800px;
        height: 500px;
        margin: 20px auto;
        border-radius: 5px;
        position: relative;
   
   
   
    }

    .title{
        font-size: 2vmax;
   
   
   
   
    }
    .shade{
        background-color: rgba(0, 0, 0, 0.356);
        border-radius: 5px;
       
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
   
   
    }
    .content{
        padding: 15px;
        position: absolute;
        bottom: 150px;
        color: white;
        /* text-align: center; */
   
   
    }





}

@media(max-width: 800px){

    .india{
        /* width: 800px;
        height: 500px;
        margin: 20px auto;
        border-radius: 5px;
        position: relative; */
        padding: 5px;
   
   
   
    }

    .title{
        font-size: 3vmax;
   
   
   
   
    }
    .content{
        padding: 15px;
        position: absolute;
        bottom: 150px;
        color: rgb(10, 5, 5);
        /* text-align: center; */
   
   
    }


 

   
}

output :-




Comments

Post a Comment

Popular posts from this blog

Array Mapping and Filters Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title >Document</ title > </ head > < body >         < script src = "am.js" ></ script > </ body > </ html > // JAVA SCRIPT FILE const users = [     {         name : "Akash Sharma" ,         age : 17 ,         gender : "Male" ,         location : "Delhi, India"     },     {         name : "Neha Patel" ,         age : 16 ,         gender : "Female" ,         location : "Mumbai, India"     },     {         name : "Rajesh Singh" ,     ...
Read more

Rolling Dice

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < audio id = "diceaudio" src = "dice.mp3" ></ audio >         < h1 class = "heading" >Roll The Dice To Get Random Number</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</ p >         < div id = "dice" >6</ div >         < div class = "button" onclick = " roll ()" >Roll The Dice</ div >     </ div >     ...
Read more

Basics Of Java Script Till DOM Beggining

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more