Project Based on the Html and Css on the Media Queries (Project-2)
Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device.
The website will automatically response for the different screen sizes. This may termed as an Responsive web design.
Here is the code for the responsive website . Here i am including the css in the tag name <style>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="mediaq.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Girassol&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Media Quary Project</title>
</head>
<body>
<nav>
<a href="#">home</a>
<ul>
<li><a href="#">Learn More</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#">Signup</a>
</nav>
<h1>
Media Queries
</h1>
</body>
</html>
<style>
body{
font-family: 'Girassol', cursive;
}
h1{
font-size: 6em;
text-align: center;
}
nav{
font-size:1.5em;
display: flex;
justify-content:space-between;
text-decoration: none;
}
nav ul{
border:1px solid hotpink;
flex:1;
max-width: 50%;
display: flex;
justify-content: space-evenly;
}
ul, li{
display:inline;
margin:0;
padding:0;
}
/* @media (min-width:600px)and (max-width:800px){
h1{
color: purple;
}
} */
/* Here order matters first 1500px next 1000px next 500px*/
/* @media(max-width:1500px){
h1{
color:yellow;
}
}
@media(max-width:1000px){
h1{
color: green;
}
}
@media(max-width:500px) {
h1{
color:red;
}
} */
/* another form*/
h1{
color: red;
}
@media(min-width:500px){
h1{
color:purple;
}
}
@media(min-width:1000px){
h1{
color:seagreen;
}
}
@media(min-width:1500px){
h1{
color:steelblue;
}
}
/* to rotate a screen*/
/* @media(orientation:landscape){
body{
background-color: grey;
}
} */
/* Responsive Nav*/
@media(max-width:564px){
h1{
font-size: 4em;
}
nav, nav ul{
flex-direction: column;
align-items: center;
}
}
@media(max-width:379px){
h1{
font-size: 2em;
}
}
</style>
0 comments:
Post a Comment