<html>
<head>
<title>@Media Query Girfa</title>
<style>
.container h1
{
margin-top:15%;
font-size:4em;
line-height:
1.2em;
text-transform:
uppercase;
font-weight:
bold;
color:#000066;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif
}
@media(max-width:1000px){
body{
background-color:#FFFF00;
}
}
@media(max-width:1000px){
.container h1 {
font-size: 3em;
color:#00FF33;
}
}
@media
(max-width: 700px){
.container h1 {
font-size: 2em;
color:#FF99FF;
}
}
@media
(max-width: 700px){
body{
background-color:#CCFFFF;
}
}
</style>
</head>
<body>
<div class="container">
<h1>
Girfa Student Help
</h1>
</div>
</body>
</html>
Add External file with responsive media query
@import url(bootstrap.min.css') only screen and (max-width: 700px);
No comments:
Post a Comment