Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Manohar-1
Manohar-1 committed Jan 3, 2023
0 parents commit ee64f2b
Show file tree
Hide file tree
Showing 28 changed files with 2,516 additions and 0 deletions.
58 changes: 58 additions & 0 deletions MQ-2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!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>Document</title>
<style>
#navigation{
font-family: sans-serif;
font-weight: bold;
width:100%;
height:50px;
font-size: 40px;
padding:10px;
background-color: yellow;
}
#boxes{
display:grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(1,300px);
gap:30px;
justify-content: space-around;
border:0px solid red;
margin-top:30px;
}
#boxes>div{
font-family: sans-serif;
color:grey;
font-weight: bold;;
}
#boxes>div:nth-child(1){
background-color: #d80707;;
}
#boxes>div:nth-child(2){
background-color: green;;
}
@media all and (min-width:321px) and (max-width:480px){
#boxes{

grid-template-columns: repeat(1,1fr);
grid-template-rows:repeat(2,200px);
gap:30px;

}
}
</style>
</head>
<body>
<div id="navigation">
Navigation
</div>
<div id="boxes">
<div>Right Box</div>
<div>Left Box</div>
</div>
</body>
</html>
12 changes: 12 additions & 0 deletions MQ-3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!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>Document</title>
</head>
<body>

</body>
</html>
94 changes: 94 additions & 0 deletions MQ-4.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!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>Media query</title>
<style>
body{
width:95%;
}
#navigation{
width:100%;
height:60px;
border:1px solid red;
margin:auto;
margin-bottom: 50px;
background-color: yellow;
}
#boxes{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows: repeat(3,50px);
gap:20px;
border:1px solid green;
}
#boxes>div{
border:1px solid green;
}
#boxes>div:nth-child(1){
background-color: red;
grid-row:1/span 3;
}
#boxes>div:nth-child(2){
background-color:green;
}
#boxes>div:nth-child(3){
background-color:green;
}
#boxes>div:nth-child(4){
background-color:green;
}

@media all and (min-width:481px) and (max-width:761px){

#boxes{
grid-template-columns:repeat(3,1fr);
grid-template-rows: repeat(4,50px);
}
#boxes>div:nth-child(1){
background-color: red;
grid-column:1/span 3;
}
#boxes>div:nth-child(2){
background-color:green;
}
#boxes>div:nth-child(3){
background-color:green;
}
#boxes>div:nth-child(4){
background-color:green;
}
}
@media all and (min-width:321px) and (max-width:480px){
#boxes{
grid-template-columns:repeat(1,1fr);
grid-template-rows: repeat(6,50px);
}
#boxes>div:nth-child(1){
background-color: red;
}
#boxes>div:nth-child(2){
background-color:green;
}
#boxes>div:nth-child(3){
background-color:green;
}
#boxes>div:nth-child(4){
background-color:green;
}
}
</style>
</head>
<body>
<div id="navigation">Navigation</div>
<div id="boxes">
<div>LEFT BOX</div>
<div>RIGHT BOX-1</div>
<div>RIGHT BOX-2</div>
<div>RIGHT BOX-3</div>
</div>

</body>
</html>
202 changes: 202 additions & 0 deletions MQ-5.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
text-align:center;
font-family:sans-serif;
}
#board{
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows:repeat(1,130px);

border:0px solid green;
margin:auto;
margin-bottom:30px;
}
#board>div{
border:0px solid green;
}
#board img{
width:100%;
}
#investors img{
width:100%;
height:200px;
border-radius: 5px;
}
#investors>div>p+img{
width:50%;
}
#investors>div>p{
color:grey;
}
#investors{
width:90%;
margin:auto;
display:grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows:repeat(5,400px);
justify-content: space-evenly;
gap:30px;
background-color: white;
}
#investors>div{
border:0px solid red;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
@media all and (min-width:481px) and (max-width:761px){
#board{
grid-template-columns: repeat(3,1fr);
grid-template-rows:auto;
}

#investors{
grid-template-columns: repeat(3,1fr);
grid-template-rows:auto;
}
}
@media all and (min-width:320px) and (max-width:480px){

#board{
grid-template-columns: repeat(1,1fr);
grid-template-rows:auto;
}

#investors{
grid-template-columns: repeat(2,1fr);
grid-template-rows:auto;
}
}
</style>
</head>
<body>
<h1>Board Members</h1>
<div id="board">
<div>
<img src="https://www.masaischool.com/img/our-investors/india-q-borderless.svg" alt="">
</div>
<div>
<img src="https://www.masaischool.com/img/our-investors/unitus-borderless.svg" alt="">
</div>
<div>
<img src="https://www.masaischool.com/img/our-investors/omidyar-borderless.svg" alt="">
</div>
</div>
<h1>Strategic Investors</h1>
<div id="investors">
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
<div>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Vijay_Shekhar_Sharma_Paytm_96f52579b8.jpg" alt="">
<h4>Vijay Shekhar Sharma</h4>
<p>Founder & CEO</p>
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/paytm_rect_06df45a24f.svg" alt="">
</div>
</div>

</body>
</html>
Loading

0 comments on commit ee64f2b

Please sign in to comment.