adityapooniya/media_query_responsive_image.html

## media_query_responsive_image.html
<!DOCTYPE html>
<html>
 <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,width=device-width,minimal-ui">

   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <title> Media-Query Responsive Image Demo </title>
   <meta name="keywords" content="">
   <meta name="description" content="">
   <meta name="referrer" content="default">
<style>
    body { background-color: #335; margin: 0;padding: 0;}
    div.article {background-color: #fff;float:left;width:60%;height: auto;}
    h1.text {
        background-color: #a40;
        color: #fff;
        text-indent: 5%;
    }
    div.img-wrap {
        float:right;
        width:40%;
        background-color: #fff;
    }
    @media screen and ( min-width: 1025px ) and ( max-width: 1366px ) {
        img.responsive { width: 400px; }
    }
    @media screen and ( min-width: 801px ) and ( max-width: 1024px) {
    img.responsive { width: 300px; }
    }
    @media screen and ( min-width: 401px ) and ( max-width: 800px) {
    img.responsive { width: 160px; }
    }
    @media screen and ( min-width: 201px ) and ( max-width: 400px) {
    img.responsive { width: 100px; }
    }
    @media screen and ( min-width: 100px ) and ( max-width: 200px) {
    img.responsive { width: 75px; }
    }
    img.responsive { height: auto;  border: 4px solid #ccc; border-radius: 100%;}

    p.U_Name {background-color: #fff; color: #ff8912;font-family: fantasy;font-size: 1.3em;font-size-adjust: auto;text-align: center;}

</style>
     <script>
         document.cookie = "screen_dimensions=" + screen.width + "X" + screen.height;
     </script>
 </head>
<body>
<div>
    <div class="article">
        <h1 class="text">Test Your Self-Confience </h1>
        <p>Take this test to get a better idea of the nature of your confidence. Answer "Yes" or "No" as the case may be.<br>
        <ol>
            <li>Do You blame others when you should blame yourself?</li>
            <li>Are you self-conscious in company?</li>
            <li>Do you avoid meeting new people?</li>
            <li>Do you exhibit mannerisms like running your hand frequently through your hair or twisting a handkerchief?</li>
            <li>Do you tend to bully others?</li>
            <li>Do you say "Yes" when you actually mean "No"?</li>
            <li>Are you averse to criticism?</li>
            <li>Do you frequently bury yourself in the happy memories of the past?</li>
            <li>Do you get easily disappointed?</li>
            <li>Are you often moody or imitable?</li>
        </ol>


        </p>
    </div>

    <div class="img-wrap" >
      <img alt="Teja Ram Pooniya image" class="responsive" src="images/Adi.jpg" >
      <p class="U_Name">My Name is Teja Ram Pooniya</p>
    </div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,width=device-width,minimal-ui">

	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title> Media-Query Responsive Image Demo </title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="referrer" content="default">
	<style>
	body { background-color: #335; margin: 0;padding: 0;}
	div.article {background-color: #fff;float:left;width:60%;height: auto;}
	h1.text {
	background-color: #a40;
	color: #fff;
	text-indent: 5%;
	}
	div.img-wrap {
	float:right;
	width:40%;
	background-color: #fff;
	}
	@media screen and ( min-width: 1025px ) and ( max-width: 1366px ) {
	img.responsive { width: 400px; }
	}
	@media screen and ( min-width: 801px ) and ( max-width: 1024px) {
	img.responsive { width: 300px; }
	}
	@media screen and ( min-width: 401px ) and ( max-width: 800px) {
	img.responsive { width: 160px; }
	}
	@media screen and ( min-width: 201px ) and ( max-width: 400px) {
	img.responsive { width: 100px; }
	}
	@media screen and ( min-width: 100px ) and ( max-width: 200px) {
	img.responsive { width: 75px; }
	}
	img.responsive { height: auto; border: 4px solid #ccc; border-radius: 100%;}

	p.U_Name {background-color: #fff; color: #ff8912;font-family: fantasy;font-size: 1.3em;font-size-adjust: auto;text-align: center;}

	</style>
	<script>
	document.cookie = "screen_dimensions=" + screen.width + "X" + screen.height;
	</script>
	</head>
	<body>
	<div>
	<div class="article">
	<h1 class="text">Test Your Self-Confience </h1>
	<p>Take this test to get a better idea of the nature of your confidence. Answer "Yes" or "No" as the case may be.<br>
	<ol>
	<li>Do You blame others when you should blame yourself?</li>
	<li>Are you self-conscious in company?</li>
	<li>Do you avoid meeting new people?</li>
	<li>Do you exhibit mannerisms like running your hand frequently through your hair or twisting a handkerchief?</li>
	<li>Do you tend to bully others?</li>
	<li>Do you say "Yes" when you actually mean "No"?</li>
	<li>Are you averse to criticism?</li>
	<li>Do you frequently bury yourself in the happy memories of the past?</li>
	<li>Do you get easily disappointed?</li>
	<li>Are you often moody or imitable?</li>
	</ol>


	</p>
	</div>

	<div class="img-wrap" >
	<img alt="Teja Ram Pooniya image" class="responsive" src="images/Adi.jpg" >
	<p class="U_Name">My Name is Teja Ram Pooniya</p>
	</div>
	</div>
	</body>
	</html>