diff --git a/Vishal Singh/Column Drop/index.html b/Vishal Singh/Column Drop/index.html new file mode 100644 index 0000000..8eb9d23 --- /dev/null +++ b/Vishal Singh/Column Drop/index.html @@ -0,0 +1,20 @@ + + + + + Class 4 part 2 + + + + +
+
Main Box
+
+
Box1
+
Box2
+
Box3
+
Box4
+
+
+ + \ No newline at end of file diff --git a/Vishal Singh/Column Drop/styles.css b/Vishal Singh/Column Drop/styles.css new file mode 100644 index 0000000..a5bbde6 --- /dev/null +++ b/Vishal Singh/Column Drop/styles.css @@ -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%; + } +} \ No newline at end of file diff --git a/Vishal Singh/Layout Shifter/index.html b/Vishal Singh/Layout Shifter/index.html new file mode 100644 index 0000000..a6c5982 --- /dev/null +++ b/Vishal Singh/Layout Shifter/index.html @@ -0,0 +1,25 @@ + + + + + Title + + + +
+
+
+grgr +
+
+
+grgr +
+
+rgrgr +
+
+
+
+ + \ No newline at end of file diff --git a/Vishal Singh/Layout Shifter/style.css b/Vishal Singh/Layout Shifter/style.css new file mode 100644 index 0000000..7dcdfb9 --- /dev/null +++ b/Vishal Singh/Layout Shifter/style.css @@ -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; + } +} \ No newline at end of file diff --git a/Vishal Singh/Mostly Fluid/index.html b/Vishal Singh/Mostly Fluid/index.html new file mode 100644 index 0000000..857752a --- /dev/null +++ b/Vishal Singh/Mostly Fluid/index.html @@ -0,0 +1,20 @@ + + + + + Class 4 part 2 + + + + +
+
+
Box1
+
Box2
+
Box3
+
Box4
+
Box5
+
+
+ + \ No newline at end of file diff --git a/Vishal Singh/Mostly Fluid/styles.css b/Vishal Singh/Mostly Fluid/styles.css new file mode 100644 index 0000000..dd0eb0f --- /dev/null +++ b/Vishal Singh/Mostly Fluid/styles.css @@ -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%; + } +} \ No newline at end of file