IntroductionToWebPart5
How To make a responsive web desgin demo
Html page ➢responsiveDemo.html
<html>
<head>
<title>Responsive web design</title>
<link rel="stylesheet" href="cssStyle.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- this meta tag we should add to understand the particular page is
responsive //-->
</head>
<body>
<center><h1>Responsive Web design</h1></center>
<div id="div1">
<center><div class="ice">
<h2>Icecreams</h2>
<p>Very delicius with different flavours.</p>
<p>Very delicius with different flavours.Very delicius with different flavours.</p>
<p>Very delicius with different flavours.Very delicius with different flavours.</p>
</div>
</center>
<center><img src="cool.png" width="300px" height="300px;"/></center>
</div>
</body>
</html>
CssSheet ➢cssStyle.css
.ice {
float: left;
width: 300px;
height: 300px;
border: 1px solid black;
margin-left:2%;
}
.ice:hover{
border-radius:10%;
}
img:hover{
border-radius:50%;
}
@media only screen and (min-width: 150px) and (max-width: 660px){
.ice{
float:none;
width:98%;
margin-left:1%;
margin-right:1%;
}
.ice:hover{
border-radius:5%;
}
img{
width:98%;
margin-top:1%;
margin-left:1%;
margin-right:1%;
}
img:hover{
border-radius:5%;
}
}
Comments
Post a Comment