Tuesday, 3 September 2019

Simple responsive style.css

Index.html
<!--- code start for index page -->
<html><head>
    <title>Test Style css</title>
    <LINK href="style.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head>
<body>
    <div id ="wrapper">
    <div id ="header"></div>
 
    <div id ="content">
    <div id ="left-panel">
        <div id ="navbar"></div>
        <div id ="news"></div>
    </div>
    <div id ="right-section"></div>
    </div>
    <div style="clear:both"></div>
    <div id ="footer"></div>
 
    </div>
 
</body></html>
<!--- code end for index page -->

<!--- code start for style page -->

/**autor raj **/
@media(min-width:1200px){
#wrapper{padding:10px;}
#header{background-color:#ff1a75; height:100px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;}
#content{margin-top:15px;}
#content :: after{content: " "; display:block; clear:both;}
#left-panel{
    width:20%;
    height:600px;
    float:left;}
#navbar{
    background-color:#ff1a75;
    height:400px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
#news{
    background-color:#ff1a75;
    height:200px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin-top:10px;
}
#right-section{
    background-color:#ff1a75;
    height:610px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
width:78.2%;
float:right;}
#footer{background-color:#ff1a75;
margin-top:10px;
height:100px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
    }
 
 
@media(min-width:992px) and (max-width:1199px){
    #wrapper{padding:10px;}
#header{background-color:#ff1a75; height:100px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;}
#content{margin-top:15px;}
#content :: after{content: " "; display:block; clear:both;}
#left-panel{
    width:20%;
    height:600px;
    float:left;}
#navbar{
    background-color:#ff1a75;
    height:400px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
#news{
    background-color:#ff1a75;
    height:200px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin-top:10px;
}
#right-section{
    background-color:#ff1a75;
    height:610px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
width:78.2%;
float:right;}
#footer{background-color:#ff1a75;
margin-top:10px;
height:100px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
}
@media(min-width:768px) and (max-width:991px){
    #wrapper{padding:10px;}
#header{background-color:#ff1a75; height:100px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;}
#content{display:table; width:100%; margin-top:15px;}
#left-panel :: after{content: " "; display:block; clear:both;}
#left-panel{
     display:table-footer-group;
 
    }
#navbar{
    background-color:#ff1a75;
    height:100px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
float:right;
width:78.2%;
}
#news{
    background-color:#ff1a75;
    height:100px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

float:left;
width:20%;
}
#right-section{
    background-color:#ff1a75;
    height:610px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin-bottom:10px;
}
#footer{background-color:#ff1a75;
margin-top:10px;
height:100px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
}
@media(max-width:767px){
    #wrapper{padding:10px;}
#header{background-color:#ff1a75; height:100px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;}
#content{display:table; width:100%; margin-top:15px;}
#left-panel :: after{content: " "; display:block; clear:both;}
#left-panel{
     display:table-footer-group;
 
    }
#navbar{
    background-color:#ff1a75;
    height:100px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

}
#news{
    background-color:#ff1a75;
    height:100px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin-top:10px;
}
#right-section{
    background-color:#ff1a75;
    height:610px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin-bottom:10px;
}
#footer{background-color:#ff1a75;
margin-top:10px;
height:100px;
    -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
}

<!--- code end for index page -->

No comments:

Post a Comment