CSS-tutorial
CSS media
<!DOCTYPE html>
<html lang="en">
<head>
<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>,edia query+css grid</title>
</head>
<style>
body{
background-color:red;
}
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'nav nav nav nav'
'section section section aside'
'section section section aside'
'footer footer footer footer';
}
.box{
border: 2px solid black;
background-color: green;
padding: 25px;
}
nav{
grid-area: nav;
}
section{
grid-area: section;
}
aside{
grid-area: aside;
}
footer{
grid-area: footer;
grid-gap: 1rem;
text-align: center;
}
/* mediaquery */
@media (max-width: 450px){
body{
background-color: yellow;
}
}
@media (min-width:300px ) and (max-width: 541px){
body{
background-color: blue;
}
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'nav nav nav nav '
'section section section section'
/* 'aside aside aside aside' */
'footer footer footer footer';
}
aside{
display: none;
}
span{
display: block;
/* align-items: center;
justify-content: center; */
text-align: center;
content-visibility: 20%;
}
}
@media (max-width:300px){
body{
background-color: brown;
}
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'nav nav nav nav '
'aside section section section'
'aside section section section'
'footer footer footer footer';
}
/* aside{
display: none;
} */
footer{
overflow:auto;
display:table-caption;
}
span{
display: block;
/* align-items: center;
justify-content: center; */
text-align: center;
content-visibility: 20%;
}
}
</style>
<body>
<div class="container">
<nav class="box">
<!-- Home About Contact blogs -->
<span>Home</span>
<span>About</span>
<span>Contact</span>
<span>Blogs</span>
</nav>
<section class=box>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quos saepe nulla sed, eius cumque possimus, labore vero consequuntur rem modi, debitis incidunt velit quis.
</section>
<aside class="box">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, ad.
</aside>
</div>
<footer class="box">
copyright:©www.myupensite.com. All Right Reserved!
</footer>
</body>
</html>
CSS Grid
<!DOCTYPE html>
<html lang="en">
<head>
<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>css grid tut</title>
</head>
<style>
.container{
display: grid;
grid-template-columns: 3fr 9fr ;
}
.items{
background-color: blue;
border: 2px solid black;
margin: 5px;
padding: 2px 5px;
;
}
.container2{
display: grid;
grid-template-columns: 3fr 9fr ;
}
.items1{
background-color: red;
border: 2px solid black;
margin: 2px;
padding: 5px 5px;
height: 100%;
width: 100%;
}
</style>
<body>
<!-- div.container -->
<div class="container">
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<!-- <!-- <div class="items">this is grids items</div>
<div class="items">this is grids items</div> -->
<!-- <div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div>
<div class="items">this is grids items</div> --> -->
</div>
<div class="container2">
<div class="items1">this is a grid item</div>
<div class="items1">this is a grid item</div>
</div>
</body>
</html>
No comments:
Post a Comment