Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vishal Singh #46

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
20 changes: 20 additions & 0 deletions Vishal Singh/Column Drop/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class 4 part 2</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<div class="mainbox">Main Box</div>
<div class="container">
<div class="box box1">Box1</div>
<div class="box box2">Box2</div>
<div class="box box3">Box3</div>
<div class="box box4">Box4</div>
</div>
</main>
</body>
</html>
68 changes: 68 additions & 0 deletions Vishal Singh/Column Drop/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
*{
text-align: center;
}

main{
line-height: 100px;
font-size: 30px;
width: 684px;
margin: 0px auto;
box-shadow: 0px 10px 50px 0px rgba(0,0,0,0.5);
}

main:hover {
box-shadow: 0px 10px 50px 0px rgba(0,0,0,0.8);
}

.container{
line-height: 150px;
font-size: 20px;
display: flex;
flex-wrap: wrap;
}

.box{
width: 50%;
height: 150px;
}

.box1{
background-color: coral;
}
.box2{
background-color: yellow;
}
.box3{
background-color: red;
}
.box4{
background-color: brown;
}
.box5{
background-color: burlywood;
}
.box6{
background-color: rosybrown;
}.box7{
background-color: lime;
}
.box8{
background-color: lavender;
}
.mainbox{
height: 100px;
width: 100%;
background-color: aquamarine;
}

@media screen and (max-width: 700px) {
main{
width: 100%;
}
}

@media screen and (max-width: 450px){
.box{
width: 100%;
}
}
25 changes: 25 additions & 0 deletions Vishal Singh/Layout Shifter/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="flex-container">
<div class="mainbox1">
grgr
</div>
<div class="mainbox2">
<div class="subbox1">
grgr
</div>
<div class="subbox2">
rgrgr
</div>
</div>
</div>
</main>
</body>
</html>
62 changes: 62 additions & 0 deletions Vishal Singh/Layout Shifter/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
html { height: 100%; }
body {height: 100%;
margin: 0px}
main{
height: 100%;
}
.flex-container{
margin: 0px auto;
width: 900px;
height: 100%;
display: flex;
flex-wrap: wrap;
}

.mainbox1{
background-color: lightgrey;
height: 100%;
width: 20%
}

.mainbox2{
height: 100%;
width: 80%
}

.subbox1{
height: 50%;
background-color: red;
width: 100%
}

.subbox2{
height: 50%;
background-color: olivedrab;
width: 100%
}

@media screen and (max-width: 900px){
.flex-container {
width: 100%;
}
}

@media screen and (max-width:500px){

html { height: auto; }
body {height: auto;
}
main{
height: auto;
}


.mainbox1{
width: 100%;
height: 300px;
}
.mainbox2{
width: 100%;
height: 1000px;
}
}
20 changes: 20 additions & 0 deletions Vishal Singh/Mostly Fluid/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class 4 part 2</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<div class="container">
<div class="box box1">Box1</div>
<div class="box box2">Box2</div>
<div class="box box3">Box3</div>
<div class="box box4">Box4</div>
<div class="box box5">Box5</div>
</div>
</main>
</body>
</html>
102 changes: 102 additions & 0 deletions Vishal Singh/Mostly Fluid/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
*{
text-align: center;
}

main{
line-height: 100px;

width: 684px;
margin: 0px auto;
box-shadow: 0px 10px 50px 0px rgba(0,0,0,0.5);
}

.container{
display: flex;
flex-wrap: wrap;
font-size: 0px;
line-height: 150px;
}

.box{
order: 5;
margin: 0px;
font-size: 20px;
z-index: 1;
height: 150px;
}

.box:hover{
transition: 0.3s;
z-index: 100;
box-shadow: 0px 10px 50px 0px rgba(0,0,0,0.5);
}
.box1{
width: 60%;
background-color: #164388;
}
.box2{
width: 40%;
background-color: #3978d9;
}
.box3{
width: calc(100% /3);
background-color: #cadbf8;
}
.box4{
width: calc(100% /3);
background-color: #d6e0f0;
}
.box5{
width: calc(100% /3);
background-color: #e0e2e6;
}
/*
.mainbox{
height: 100px;
width: 100%;
background-color: aquamarine;
}*/

@media screen and (max-width: 700px) {
main{
width: 100%;
}
}

@media screen and (max-width: 550px){
.box1{
order: 2;
width: 50%;
}
.box2{
order: 1;
width: 100%;
}
.box3{
width: 50%;
}
.box4{
width: 50%;
}
.box5{
width: 50%;
}
}

@media screen and (max-width: 450px){
.box1{
width: 100%;
}
.box2{
width: 100%;
}
.box3{
width: 100%;
}
.box4{
width: 100%;
}
.box5{
width: 100%;
}
}