├── Readme.txt ├── .gitignore ├── vatsala ├── README.md ├── vatsala.jpg └── LICENSE ├── Paavini ├── .gitignore └── layoutshifter.html ├── WinterBatch2018 ├── amritha anil │ ├── flexlayout.css │ └── flexlayout.html ├── Aakash │ ├── Column drop.html │ ├── Layout Shifter.html │ ├── Layout shifter css.css │ └── column drop css.css ├── Riya │ ├── columndrop │ │ ├── index.html │ │ └── style.css │ ├── LayoutShifter │ │ ├── index.html │ │ └── style.css │ └── CodeLab1 │ │ ├── index.html │ │ └── codelab1.css ├── Shruti │ ├── columnHW.html │ ├── layoutshifter.html │ ├── flexHW.html │ └── columnHW.css ├── Nikita Rai │ ├── Column Drop │ │ ├── Column_Drop.html │ │ └── cd.css │ ├── Mostly Fluid │ │ ├── Mostly_Fluid.html │ │ └── mf.css │ ├── Layout Shifter │ │ ├── Layout_Shifter.html │ │ └── ls.css │ └── Flex.html ├── Anshuman │ ├── column drop.html │ ├── mostly fluid.html │ ├── column drop style.css │ └── most fluid style.css ├── Dhruva │ └── Responsive Design │ │ ├── index.html │ │ ├── codelab-pattern1.css │ │ ├── layout-shifter.css │ │ ├── mostlyfluid.css │ │ └── columndrop.css ├── SakshamBhalla │ └── mostlyfluid.html └── aishanya │ ├── mostly fluid │ └── index.html │ └── couloumnDrop │ └── index.html ├── mansikhemka ├── blankpage ├── Column-Drop │ └── columndrop.html ├── Layout-shifter │ ├── layoutshifter.html │ └── style.css ├── Mostly-Fluid │ ├── mostlyfluid.html │ └── style.css └── Flex-layout-lab │ ├── flexdesign.html │ └── style.css ├── pratyush └── design │ ├── column-drop │ ├── Column-Drop.png │ ├── index.html │ └── column-drop.css │ ├── mostlyfluid │ ├── mostly-fluid.png │ └── index.html │ └── layout-shifting │ ├── layout-shifter.png │ └── index.html ├── Workshop ├── ParikanshAhluwalia │ ├── style.css │ ├── column.html │ ├── layoutshifter.html │ ├── fluid.html │ ├── index.html │ ├── columnstyle.css │ ├── shifterstyle.css │ └── fluidstyle.css ├── Anshul Wadhawan │ ├── Column Drop │ │ ├── index.html │ │ └── style.css │ ├── Layout-Shifter │ │ ├── index.html │ │ └── style.css │ └── Mostly Fluid │ │ └── index.html └── Rishabh Khanna │ ├── Column-Drop-Rishabhk07 │ ├── columndrop.html │ └── style.css │ └── Mostly-Fluid-Rishabhk07 │ ├── mostlyFluidMe.html │ └── style.css ├── Workspace ├── style.css ├── columndrop.html ├── layout-shifter.html ├── index.html └── mostlyfluid.html ├── ANSHUL ├── layoutshifter.html └── layoutshifter.css ├── Dipesh └── index.html ├── devank └── index.html ├── Roopal ├── layoutshift.css ├── layoutshift.html ├── coldrop.html └── coldrop.css ├── Arvind-Kalra ├── Column Drop │ ├── index.html │ └── CDStyle.css ├── Layout Shifter │ ├── index.html │ └── stylesheet.css └── MostlyFluid │ ├── index.html │ └── stylesheet.css ├── Practice Material ├── Column-Drop │ ├── columndrop.html │ └── style.css ├── Flex-layout-lab │ ├── style.css │ └── flexdesign.html ├── Layout-shifter │ ├── laayoutshifter.html │ └── style.css ├── Mostly-Fluid │ ├── mostlyfluid.html │ └── style.css └── Solutions │ ├── flexbox.css │ ├── columndrop.css │ └── layoutShifter.css ├── BhavyaTakkar ├── LayoutShifter.html ├── ColumnDrop.html ├── MostlyFluid.html ├── LayoutShifter.css ├── ColumnDrop.css └── MostlyFluid.css ├── Sonali ├── column layout │ ├── column_layout.html │ └── column_layout.css ├── fluid │ ├── mostly_fluid.html │ └── mostly_fluid.css └── layout shifter │ ├── layout_shifter.html │ └── layout.css ├── gopals ├── column_drop.html ├── layout_shifter.html ├── fluid.html ├── layout.css ├── fluid.css └── column.css ├── ChetanJain ├── columndrop.html ├── shifter.html ├── box.html ├── hw.css ├── columndrop.css └── viewport.css ├── pritam ├── column layout │ ├── column_layout.html │ └── column_layout.css ├── fluid │ ├── mostly_fluid.html │ └── mostly_fluid.css └── layout shifter │ ├── layout_shifter.html │ └── layout.css ├── Anuj ├── column drop.html ├── shifter.css └── types.css ├── Munish Grover ├── colDrop.html ├── index.html ├── layout.css ├── style.css └── colDrop.css ├── Rishabh Khanna └── Layout-Shifter-rishabhk07 │ ├── layoutshifter.html │ └── main.css ├── Piyush ├── layout-shifter.html ├── mostly-fluid.html ├── column-drop.html ├── layout-shifter.css ├── mostly-fluid.css └── column-drop.css ├── Sanket ├── Column Drop │ ├── column_drop.html │ └── column_drop_styles.css ├── Layoust Shifter │ ├── layout_shifter.html │ └── layout_shifter_styles.css └── Mostly Fluid │ ├── mostly_fluid.html │ └── mostly_fluid_styles.css ├── Avani ├── Layout shifter │ ├── index.html │ └── style.css ├── Mostly fluid │ ├── stylesheet.css │ └── index.html └── Column Drop │ └── index.html ├── SHRAYANSH JAIN ├── layout-shifter.html ├── column-drop.html ├── mostly-fluid.html ├── layout-shifter.css ├── fluid.css └── column-drop.css ├── Ayush ├── columnDrop │ ├── columnDrop.html │ └── columnDrop.css └── mostlyFluid │ └── mostlyFluid.html ├── Nitin ├── coloumn_drop.html └── coloumn_drop.css ├── PrashantVashisht ├── LayoutShifter.html ├── Fluid.html ├── ColumnDrop.html ├── layoutshifter.css ├── columndrop.css └── mostlyfluid.css ├── Puneet ├── columndrop.html └── columndrop.css ├── Yogi ├── Layout_shifter.html └── Layout_shifer.css ├── atif abdus samad ├── Layout-shifter.html ├── column-drop.html ├── fluid.html ├── Layout-shifter.css └── column-drop.css ├── Arwaz ├── ColumDrop │ ├── column.html │ └── column.css ├── LayoutShift │ ├── layoutshift.html │ └── shift.css └── MostlyFluid │ ├── flex.css │ └── flex.html ├── Ashoo Jain ├── columndrop.html └── columndrop.css ├── Kanav Bhatia ├── Column Drop │ ├── columndrop.html │ └── cd.css ├── Layout Shifter │ ├── layoutshifter.html │ └── ls.css └── Mostly Fluid │ └── mostlyfluid.html ├── pradeep ├── mostly-fluid.html └── mostly-fluid.css ├── pallavraj └── fluid.html ├── Devyendu Shekhar └── responsive design pattern │ ├── column-drop │ ├── index.html │ └── style.css │ ├── mostly-fliuid │ ├── index.html │ └── style.css │ └── layout-shifter │ ├── index.html │ └── style.css ├── scaars10 ├── layout_shifter.html └── layout_shifter.css ├── Rahul ├── layout shifter │ └── layoutshifter.html ├── mostlyfluid │ ├── mostlyfluid.html │ └── mostlyfluid.css └── columndrop │ ├── columndrop.html │ └── columndrop.css ├── Ishu Anand ├── column drop │ ├── index.html │ └── style.css ├── mostly-fluid │ ├── index.html │ └── style.css └── layout_shifter │ ├── index.html │ └── style.css ├── Udit Goel ├── Layout Shifter │ ├── LayoutShifter.html │ └── LayoutShifter.css ├── Column Drop │ ├── ResponsiveDesignAssignment1.html │ └── ResponsiveDesignAssignment1.css └── Mostly Fluid │ ├── MostlyFluid.html │ └── MostlyFluid.css ├── shivamyadav03 ├── trail.html ├── box.html ├── class.css └── trail.css ├── AnkitOjha ├── mostlyfluid │ └── fluid.css ├── columndrop │ └── cd.css └── layoutshifter │ └── ls.css ├── Yash Yadav ├── 23juneLayoutShifter.html ├── 23juneMostlyFluid.html └── 23juneColumnDrop.html ├── adarsh ├── 23juneLayoutShifter.html ├── 23juneMostlyFluid.html └── 23juneColumnDrop.html ├── Devansh └── column-drop.html ├── Sarthak Goel └── patterns-layoutshifter.html ├── deepak └── layout-shifter.html ├── git-proj └── layout-shifter-css.html ├── Kanishk └── layoutshifter.html ├── AkashTheGreat └── columndrop.html └── README.md /Readme.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /vatsala/README.md: -------------------------------------------------------------------------------- 1 | # portfolio -------------------------------------------------------------------------------- /Paavini/.gitignore: -------------------------------------------------------------------------------- 1 | ../.DS_Store -------------------------------------------------------------------------------- /WinterBatch2018/amritha anil/flexlayout.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mansikhemka/blankpage: -------------------------------------------------------------------------------- 1 | //CREATED BY MANSI KHEMKA 2 | -------------------------------------------------------------------------------- /vatsala/vatsala.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aayusharora/ResponsiveDesign/HEAD/vatsala/vatsala.jpg -------------------------------------------------------------------------------- /pratyush/design/column-drop/Column-Drop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aayusharora/ResponsiveDesign/HEAD/pratyush/design/column-drop/Column-Drop.png -------------------------------------------------------------------------------- /pratyush/design/mostlyfluid/mostly-fluid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aayusharora/ResponsiveDesign/HEAD/pratyush/design/mostlyfluid/mostly-fluid.png -------------------------------------------------------------------------------- /pratyush/design/layout-shifting/layout-shifter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aayusharora/ResponsiveDesign/HEAD/pratyush/design/layout-shifting/layout-shifter.png -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato:900'); 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | background: #b3e5fc; 6 | } 7 | h1 { 8 | font-family: 'Lato', sans-serif; 9 | color: #004d40; 10 | padding-top: 10%; 11 | } -------------------------------------------------------------------------------- /Workspace/style.css: -------------------------------------------------------------------------------- 1 | a { 2 | padding: 20px; 3 | background: silver; 4 | border-radius: 5px; 5 | text-align: center; 6 | display: table; 7 | margin: 10px auto; 8 | } 9 | 10 | a:hover { 11 | text-decoration: none; 12 | background: linear-gradient(silver,grey); 13 | } -------------------------------------------------------------------------------- /Workshop/Anshul Wadhawan/Column Drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Column Drop 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /WinterBatch2018/Aakash/Column drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /ANSHUL/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | LAYOUT SHIFTER 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Column Drop 4 | 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Dipesh/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | column drop 5 | 6 | 7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Workshop/Anshul Wadhawan/Layout-Shifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Workshop/Anshul Wadhawan/Mostly Fluid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mostly Fluid 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /devank/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | column drop 5 | 6 | 7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Roopal/layoutshift.css: -------------------------------------------------------------------------------- 1 | .container{display: flex;flex-wrap: wrap;max-width: 900px;margin: 0 auto;} 2 | .box{height: 200px;width: 100%;} 3 | .box2{width: 100%;height: 100%;} 4 | .box1{background-color: pink;} 5 | .box3{background-color: lightgreen;} 6 | .box4{background-color: brown;} 7 | 8 | 9 | @media screen and (min-width: 800px) 10 | { 11 | .box1{width: 20%;height: 400px;} 12 | .box2{width: 80%;height: 50%;} 13 | } -------------------------------------------------------------------------------- /Arvind-Kalra/Column Drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Column Drop 6 | 7 | 8 | 9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /Practice Material/Column-Drop/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Workspace/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ColumnDrop 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /BhavyaTakkar/LayoutShifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LayoutShifter 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 | 15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Sonali/column layout/column_layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Column Layout 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /WinterBatch2018/Riya/columndrop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Column Drop 5 | 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Workshop/Rishabh Khanna/Column-Drop-Rishabhk07/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /gopals/column_drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /ChetanJain/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | columndrop 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /WinterBatch2018/Aakash/Layout Shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /pritam/column layout/column_layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Column Layout 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Layout Shifter 4 | 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Anuj/column drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | column drop 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /Munish Grover/colDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Practice Material/Flex-layout-lab/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | } 6 | 7 | 8 | .box1,.box2,.box3,.box4,.box5 { 9 | /* add code */ 10 | } 11 | 12 | 13 | /* Small screen lesser than 720px*/ 14 | 15 | @media screen and (min-width: 480px) { 16 | 17 | /* add code */ 18 | } 19 | 20 | /* add media query for Screen more than 720px*/ 21 | -------------------------------------------------------------------------------- /Rishabh Khanna/Layout-Shifter-rishabhk07/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /WinterBatch2018/Shruti/columnHW.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ColumnHW 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Piyush/layout-shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | layout-shifter 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /Sanket/Column Drop/column_drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Column Drop 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Sonali/fluid/mostly_fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mostly fluid 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Column Drop/Column_Drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Column Drop 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |
16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /Arvind-Kalra/Layout Shifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /mansikhemka/Column-Drop/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flex Box 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Avani/Layout shifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Munish Grover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MostlyFluid 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /SHRAYANSH JAIN/layout-shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | layout-shifter 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /pratyush/design/column-drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /pritam/fluid/mostly_fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mostly fluid 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /Sonali/layout shifter/layout_shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Practice Material/Flex-layout-lab/flexdesign.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Practice Material/Layout-shifter/laayoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /Practice Material/Mostly-Fluid/mostlyfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /mansikhemka/Layout-shifter/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /mansikhemka/Mostly-Fluid/mostlyfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Ayush/columnDrop/columnDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | MostlyFluid 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /Workspace/layout-shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout-shifter 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /BhavyaTakkar/ColumnDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ColumnDrop 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /ChetanJain/shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HW 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Nitin/coloumn_drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /PrashantVashisht/LayoutShifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LayoutShifter 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Puneet/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | columndrop 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /pritam/layout shifter/layout_shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /WinterBatch2018/Anshuman/column drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cloumn Drop 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /WinterBatch2018/Riya/LayoutShifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout Shifter 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /Workshop/Rishabh Khanna/Mostly-Fluid-Rishabhk07/mostlyFluidMe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Yogi/Layout_shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /PrashantVashisht/Fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /WinterBatch2018/Shruti/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Mostly Fluid/Mostly_Fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /WinterBatch2018/Shruti/flexHW.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flexHW 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /atif abdus samad/Layout-shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout-shifter 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Arwaz/ColumDrop/column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /PrashantVashisht/ColumnDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ColumnDrop 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Sanket/Layoust Shifter/layout_shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout Shifter 6 | 7 | 8 | 9 | 10 |
11 | 14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /WinterBatch2018/Riya/CodeLab1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Media 5 | 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Workspace/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layouts 6 | 7 | 8 | 9 | 10 | Column-drop 11 | Layout-shifter 12 | Mostly-Fluid 13 | 14 | -------------------------------------------------------------------------------- /Sanket/Mostly Fluid/mostly_fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /pratyush/design/layout-shifting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Roopal/layoutshift.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout Shifter 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Ayush/mostlyFluid/mostlyFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | MostlyFluid 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /gopals/layout_shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /WinterBatch2018/Dhruva/Responsive Design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout Shifter 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /WinterBatch2018/SakshamBhalla/mostlyfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /gopals/fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Ashoo Jain/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | columndrop 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Piyush/mostly-fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly-Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /Kanav Bhatia/Column Drop/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Title 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Piyush/column-drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ColumnDrop 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /mansikhemka/Flex-layout-lab/flexdesign.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex Box 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /pradeep/mostly-fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly-Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /SHRAYANSH JAIN/column-drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ColumnDrop 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /SHRAYANSH JAIN/mostly-fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly-Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /WinterBatch2018/Riya/CodeLab1/codelab1.css: -------------------------------------------------------------------------------- 1 | .outer{ 2 | width:100%; 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | .inner{ 7 | height: 100px; 8 | width:100%; 9 | } 10 | .inner1{ 11 | background-color: red; 12 | } 13 | .inner2{ 14 | background-color: blue; 15 | } 16 | .inner3{ 17 | background-color: aqua; 18 | } 19 | .inner4{ 20 | background-color: yellow; 21 | } 22 | .inner5{ 23 | background-color: orange; 24 | } 25 | @media (min-width:480px) and (max-width:720px){ 26 | .inner{ 27 | width: 50%; 28 | } 29 | .inner1{ 30 | width:100%; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /atif abdus samad/column-drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | classwork 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Layout Shifter/Layout_Shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout Shifter 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Workspace/mostlyfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /pallavraj/fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | MOSTLY FLUID 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Arvind-Kalra/MostlyFluid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /Roopal/coldrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Column Drop 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /WinterBatch2018/Dhruva/Responsive Design/codelab-pattern1.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | height: 189px; 3 | margin: 0 auto; 4 | } 5 | .one{ 6 | background-color: #00ffd2; 7 | } 8 | .two{ 9 | background-color: #ff0000; 10 | } 11 | .three{ 12 | background-color: #ff9a00; 13 | } 14 | .four{ 15 | background-color: #ffb709; 16 | } 17 | .five{ 18 | background-color: #ffce00; 19 | } 20 | @media screen and (min-width:481px) and (max-width:720px){ 21 | .big-box{ 22 | display:flex; 23 | flex-wrap: wrap; 24 | } 25 | .box{ 26 | width:50%; 27 | } 28 | .box.one{ 29 | width:100%; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /BhavyaTakkar/MostlyFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MostlyFluid 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Devyendu Shekhar/responsive design pattern/column-drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | column drop 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Devyendu Shekhar/responsive design pattern/mostly-fliuid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | column drop 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Arwaz/LayoutShift/layoutshift.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /Avani/Mostly fluid/stylesheet.css: -------------------------------------------------------------------------------- 1 | .parent 2 | { 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | .box1, .box2, .box3, .box4 8 | { 9 | height: 50vh; 10 | /*margin: 10px;*/ 11 | } 12 | 13 | 14 | .box1 15 | { 16 | background-color: #006064; 17 | } 18 | 19 | 20 | .box2 21 | { 22 | background-color: #18ffff ; 23 | } 24 | 25 | .box3 26 | { 27 | background-color: #e0f7fa; 28 | } 29 | 30 | .box4 31 | { 32 | background-color: #00b8d4; 33 | } 34 | 35 | 36 | @media screen and (max-width:576px ) 37 | { 38 | .box1, .box4 39 | { 40 | height: 100vh; 41 | } 42 | .box2, .box3 43 | { 44 | height: 50vh; 45 | } 46 | } -------------------------------------------------------------------------------- /Arvind-Kalra/Layout Shifter/stylesheet.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-flow: wrap; 4 | flex-direction: row; 5 | } 6 | 7 | .container div{ 8 | min-height: 150px; 9 | min-width: 150px; 10 | } 11 | 12 | .box1, .box2, .box3{ 13 | width:100%; 14 | } 15 | 16 | .box1 { 17 | background-color: rgb(100,0,140); 18 | } 19 | 20 | .box2 { 21 | background-color: rgb(0,20,205); 22 | } 23 | 24 | .box3 { 25 | background-color: rgb(20,120,240); 26 | } 27 | 28 | @media screen and (min-width: 657px) { 29 | .box1{ 30 | width: 25% 31 | } 32 | .box2{ 33 | width: 75%; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Sonali/layout shifter/layout.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | .box{ 6 | width: 100%; 7 | height:700px; 8 | } 9 | .box1{ 10 | background-color: navy; 11 | } 12 | .box2{ 13 | background-color:blue; 14 | } 15 | .box3{ 16 | background-color: lightblue; 17 | } 18 | 19 | @media screen and (min-width: 700px){ 20 | .container{ 21 | margin:0 50px; 22 | } 23 | .box2{ 24 | height:49%; 25 | width:80%; 26 | order:2; 27 | } 28 | .box3{ 29 | height:49%; 30 | width:80%; 31 | order:3; 32 | } 33 | .box1{ 34 | height:100%; 35 | width:20%; 36 | order = 1; 37 | } 38 | } -------------------------------------------------------------------------------- /Arwaz/LayoutShift/shift.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .box{ 7 | width: 100%; 8 | height: 100vh; 9 | } 10 | .box1{ 11 | background: #1c4587; 12 | } 13 | .box3{ 14 | background: #3c78d8; 15 | } 16 | .box4{ 17 | background: #c9daf8; 18 | } 19 | .box1, .box3, .box4{ 20 | width: 100%; 21 | } 22 | .body{ 23 | margin: 0; 24 | } 25 | @media(min-width:600px){ 26 | .box1{ 27 | height: 20vh; 28 | width: 20vw; 29 | } 30 | .box2{ 31 | width: 80vw; 32 | } 33 | .box3, .box4{ 34 | height: 50vh; 35 | } 36 | 37 | } -------------------------------------------------------------------------------- /Roopal/coldrop.css: -------------------------------------------------------------------------------- 1 | .container{display: flex;flex-wrap: wrap;max-width: 900px;margin: 0 auto;} 2 | .box{height: 200px;width: 100%;} 3 | .box1{background-color: pink;} 4 | .box2{background-color: yellow;} 5 | .box3{background-color: lightgreen;} 6 | .box4{background-color: brown;} 7 | .box5{background-color: lightblue;} 8 | 9 | @media screen and (min-width: 600px) 10 | { 11 | .box1{width: 60%;order: 2;} 12 | .box2{width: 40%;order: 1;} 13 | .box3{order: 3;} 14 | .box4{order: 4;} 15 | .box5{order: 5;} 16 | } 17 | 18 | @media screen and (min-width: 800px) 19 | { 20 | .box1{width: 60%;} 21 | .box2,.box3{width: 20%;} 22 | } 23 | -------------------------------------------------------------------------------- /scaars10/layout_shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout Shifter 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /Kanav Bhatia/Layout Shifter/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Title 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Rahul/layout shifter/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /pratyush/design/mostlyfluid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MostylFluid 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Avani/Column Drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | FlexBox Mostly Fluid 4 | 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /Arwaz/ColumDrop/column.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .box{ 7 | width: 100%; 8 | height: 200px; 9 | 10 | } 11 | .box1{ 12 | background: green; 13 | 14 | } 15 | .box2{ 16 | background: blue; 17 | } 18 | .box3{ 19 | background: yellow; 20 | } 21 | @media(min-width:600px){ 22 | .box1{ 23 | width: 60%; 24 | order: 2; 25 | } 26 | .box2{ 27 | width: 40%; 28 | order:1; 29 | } 30 | .box3{ 31 | width:100%; 32 | order: 3; 33 | } 34 | } 35 | @media(min-width: 800px){ 36 | .box2{ 37 | width: 20% 38 | } 39 | .box3{ 40 | width: 20% 41 | } 42 | } -------------------------------------------------------------------------------- /Devyendu Shekhar/responsive design pattern/layout-shifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | layout-shifter 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /WinterBatch2018/Anshuman/mostly fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly fluid 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /Kanav Bhatia/Mostly Fluid/mostlyfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Title 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /atif abdus samad/fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | classwork 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /pritam/layout shifter/layout.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | .box{ 6 | width: 100%; 7 | height:700px; 8 | } 9 | .box1{ 10 | background-color: navy; 11 | } 12 | .box2{ 13 | background-color:blue; 14 | } 15 | .box3{ 16 | background-color: lightblue; 17 | } 18 | 19 | @media screen and (min-width: 700px){ 20 | .container{ 21 | margin:0 50px; 22 | } 23 | .box2{ 24 | height:49%; 25 | width:80%; 26 | order:2; 27 | } 28 | .box3{ 29 | height:49%; 30 | width:80%; 31 | order:3; 32 | } 33 | .box1{ 34 | height:100%; 35 | width:20%; 36 | order = 1; 37 | } 38 | } -------------------------------------------------------------------------------- /Ishu Anand/column drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | New HMTL document by NewJect 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /ChetanJain/box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | box 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /BhavyaTakkar/LayoutShifter.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | max-width: 1024px; 3 | margin: 0 auto; 4 | } 5 | .box{ 6 | background-color: yellow; 7 | width: 100%; 8 | height: 200px; 9 | } 10 | .box>.inner-box:nth-child(1){ 11 | background-color: blueviolet; 12 | height: 200px; 13 | 14 | } 15 | .box>.inner-box:nth-child(2){ 16 | background-color: green; 17 | height: 200px; 18 | 19 | } 20 | @media (min-width: 400px) and (max-width: 800px){ 21 | .container{ 22 | display: flex; 23 | flex-wrap: wrap; 24 | } 25 | .box:nth-child(1){ 26 | width:40%; 27 | } 28 | .box:nth-child(2){ 29 | width: 60%; 30 | } 31 | .box > .inner-box:nth-child(1),.box > .inner-box:nth-child(2){ 32 | height: 100px; 33 | } 34 | } -------------------------------------------------------------------------------- /Rahul/mostlyfluid/mostlyfluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Udit Goel/Layout Shifter/LayoutShifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 |
13 |
a
14 |
b
15 |
c
16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /BhavyaTakkar/ColumnDrop.css: -------------------------------------------------------------------------------- 1 | .bigbox 2 | { 3 | max-width: 1024px; 4 | margin:0 auto; 5 | } 6 | 7 | .bigbox>.box 8 | { 9 | 10 | height: 200px; 11 | width: 100%; 12 | } 13 | .box1{ 14 | background-color: red; 15 | } 16 | .box2{ 17 | background-color: green; 18 | } 19 | .box3{ 20 | background-color: blue; 21 | } 22 | @media(min-width: 600px) and (max-width: 900px){ 23 | .bigbox{ 24 | display: flex; 25 | flex-wrap: wrap; 26 | } 27 | .bigbox>.box2{ 28 | width: 40%; 29 | order: 1; 30 | } 31 | .bigbox>.box1{ 32 | width:60%; 33 | order: 2; 34 | } 35 | .bigbox>.box3{ 36 | order: 3; 37 | } 38 | } 39 | @media(min-width:751px){ 40 | .bigbox{ 41 | display: flex; 42 | flex-wrap: wrap; 43 | } 44 | . 45 | } 46 | -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | FlexBox Mostly Fluid 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Responsive Web Designs

11 | Mostly Fluid

12 | Column Drop

13 | Layout Shifter 14 |
15 | 16 | -------------------------------------------------------------------------------- /Ishu Anand/column drop/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | width: 100%; 5 | max-width: 800px; 6 | position: relative; 7 | margin: auto; 8 | 9 | } 10 | .box { 11 | width: 100%; 12 | height: 200px; 13 | } 14 | 15 | .box1 { 16 | background-color: rebeccapurple; 17 | 18 | } 19 | 20 | .box2 { 21 | background-color: red; 22 | } 23 | 24 | .box3 { 25 | background-color: yellow; 26 | } 27 | 28 | 29 | @media screen and (min-width:600px){ 30 | .box{ 31 | width: 100%; 32 | order:3; 33 | } 34 | .box1{ 35 | width: 80%; 36 | order:2; 37 | } 38 | .box2{ 39 | width: 20%; 40 | order:1; 41 | } 42 | } -------------------------------------------------------------------------------- /WinterBatch2018/Dhruva/Responsive Design/layout-shifter.css: -------------------------------------------------------------------------------- 1 | .outertwo{ 2 | min-width:120px; 3 | max-width: 800px; 4 | margin: 0px auto; 5 | } 6 | .outerone{ 7 | height:20px; 8 | background-color: grey; 9 | } 10 | .upper{ 11 | background-color: black; 12 | width: 100%; 13 | height:200px; 14 | } 15 | 16 | .a{ 17 | background-color:darkblue; 18 | width: 100%; 19 | height:200px; 20 | } 21 | .b{ 22 | background-color: #f2f2f2; 23 | width:100%; 24 | height:200px; 25 | } 26 | @media (min-width:650px){ 27 | .outertwo{ 28 | display: flex; 29 | flex-flow: wrap; 30 | 31 | } 32 | .upper{ 33 | height: 400px; 34 | width:20%; 35 | } 36 | 37 | .lower{ 38 | width:80%; 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /Rishabh Khanna/Layout-Shifter-rishabhk07/main.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-flow: row wrap; 4 | } 5 | 6 | .container div{ 7 | min-height: 150px; 8 | min-width: 150px; 9 | } 10 | 11 | .box1, .box2, .box3{ 12 | width:100%; 13 | } 14 | 15 | .box1 { 16 | background-color: rgb(100,0,140); 17 | } 18 | 19 | .box2 { 20 | background-color: rgb(0,20,205); 21 | } 22 | 23 | .box3 { 24 | background-color: rgb(20,120,240); 25 | } 26 | 27 | @media screen and (min-width: 657px) { 28 | .box1{ 29 | width: 25% 30 | } 31 | .box2{ 32 | width: 75%; 33 | } 34 | } 35 | 36 | @media screen and (min-width: 800px) { 37 | .container{ 38 | width: 800px; 39 | margin-right: auto; 40 | margin-left: auto; 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /Piyush/layout-shifter.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | .box{ 7 | width:100%; 8 | height: 200px; 9 | } 10 | .box1{ 11 | background-color: firebrick; 12 | } 13 | .box3{ 14 | background-color: aqua; 15 | } 16 | .box4{ 17 | background-color: lawngreen; 18 | } 19 | 20 | .box1, .box2, .box3,.box4{ 21 | width: 100%; 22 | } 23 | 24 | @media (min-width: 600px) { 25 | .box1 { 26 | width: 25%; 27 | height: 400px; 28 | } 29 | 30 | .box2 { 31 | width: 75%; 32 | height: 400px; 33 | } 34 | 35 | } 36 | 37 | @media (min-width: 800px) { 38 | .container { 39 | width: 800px; 40 | margin: 0 auto; 41 | } 42 | } -------------------------------------------------------------------------------- /PrashantVashisht/layoutshifter.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width:100%; 3 | height:400px; 4 | 5 | } 6 | .box.main{ 7 | height:400px; 8 | } 9 | .container{ 10 | width:400px; 11 | display:flex; 12 | flex-flow: wrap; 13 | } 14 | .one{ 15 | background-color: orangered; 16 | } 17 | .two{ 18 | background-color: red; 19 | } 20 | .three{ 21 | background-color: lightgreen; 22 | } 23 | @media screen and (min-width: 600px){ 24 | .one{ 25 | width:10%; 26 | height:400px; 27 | } 28 | .main{ 29 | width:90%; 30 | } 31 | .two,.three{ 32 | width:100%; 33 | height:50%; 34 | } 35 | } 36 | @media screen and (min-width: 720px){ 37 | .container{ 38 | margin:120px auto; 39 | } 40 | } -------------------------------------------------------------------------------- /Munish Grover/layout.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex ; 3 | flex-wrap: wrap; 4 | max-width: 900px; 5 | margin: 0 auto; /*for centere*/ 6 | } 7 | 8 | .box,.box6{ 9 | height: 200px; 10 | width: 100%; 11 | } 12 | 13 | 14 | .box1{ 15 | background-color: blue; 16 | max-height: 400px; 17 | overflow-x:scroll; 18 | } 19 | .box2{ 20 | background-color: grey; 21 | } 22 | .box3{ 23 | background-color: yellow; 24 | } 25 | /*.box4{ 26 | background-color: aqua; 27 | } 28 | .box5{ 29 | background-color: red; 30 | }*/ 31 | @media screen and (min-width: 600px){ 32 | .box1{ 33 | height: 400px; 34 | width: 30%; 35 | } 36 | .box6{ 37 | width: 70%; 38 | height: 200px; 39 | } 40 | } -------------------------------------------------------------------------------- /Rahul/columndrop/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 |
13 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /SHRAYANSH JAIN/layout-shifter.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | .box{ 7 | width:100%; 8 | height: 200px; 9 | } 10 | .box1{ 11 | background-color: firebrick; 12 | } 13 | .box3{ 14 | background-color: aqua; 15 | } 16 | .box4{ 17 | background-color: lawngreen; 18 | } 19 | 20 | .box1, .box2, .box3,.box4{ 21 | width: 100%; 22 | } 23 | 24 | @media (min-width: 600px) { 25 | .box1 { 26 | width: 25%; 27 | height: 400px; 28 | } 29 | 30 | .box2 { 31 | width: 75%; 32 | height: 400px; 33 | } 34 | 35 | } 36 | 37 | @media (min-width: 800px) { 38 | .container { 39 | width: 800px; 40 | margin: 0 auto; 41 | } 42 | } -------------------------------------------------------------------------------- /Ishu Anand/mostly-fluid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | New HMTL document by NewJect 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /gopals/layout.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | max-width: 1024px; 4 | height: 400px; 5 | display: flex; 6 | flex-wrap: wrap; 7 | } 8 | .nav{ 9 | width: 100%; 10 | height: 20%; 11 | } 12 | .content{ 13 | width: 100%; 14 | height: 80%; 15 | } 16 | .nav .box { 17 | 18 | height: 100%; 19 | } 20 | .content .box { 21 | height: 50%; 22 | } 23 | .box1{ 24 | background-color: darkblue; 25 | } 26 | 27 | .box2{ 28 | background-color: blue; 29 | } 30 | 31 | .box3{ 32 | background-color: lightblue; 33 | } 34 | 35 | @media (min-width: 800px){ 36 | .nav{ 37 | width: 20%; 38 | height: 100%; 39 | } 40 | .content{ 41 | width: 80%; 42 | height: 100%; 43 | } 44 | } 45 | 46 | -------------------------------------------------------------------------------- /Ishu Anand/layout_shifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | New HMTL document by NewJect 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /ANSHUL/layoutshifter.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | width: 50%; 5 | height:400px; 6 | margin : 100px auto; 7 | } 8 | .box{ 9 | width: 100%; 10 | height: 50%; 11 | } 12 | .box1{ 13 | background-color: orange; 14 | width: 100%; 15 | height: 50%; 16 | 17 | 18 | } 19 | .content{ 20 | display: flex; 21 | flex-wrap: wrap; 22 | width: 100%; 23 | height: 50%; 24 | 25 | } 26 | .box2{ 27 | background-color: yellow; 28 | } 29 | .box3{ 30 | background-color: green; 31 | } 32 | @media screen and (min-width: 720px){ 33 | .container{ 34 | display: flex; 35 | width: 50%; 36 | } 37 | .box1{ 38 | width: 20%; 39 | height:100%; 40 | } 41 | .content{ 42 | display: flex; 43 | flex-wrap: wrap; 44 | width: 80%; 45 | height: 100%; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Anuj/shifter.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | width:100%; 5 | max-width: 900px; 6 | margin:0 auto; 7 | } 8 | .cont 9 | { width: 100%; 10 | min-height:50px; 11 | } 12 | .cont1{overflow-y: scroll; 13 | color:grey; 14 | background-color: #161616; 15 | } 16 | .cont2{ 17 | width:100%; 18 | height:200px; 19 | } 20 | .cont21{ 21 | background-color: blue; 22 | } 23 | .cont22{ 24 | background-color: darkgoldenrod; 25 | } 26 | @media(min-width: 600px) 27 | { 28 | .con1,.cont21,.cont22{ 29 | width:100%; 30 | } 31 | } 32 | @media(min-width: 900px) 33 | { 34 | .cont1{ 35 | height:200px; 36 | width:16%; 37 | } 38 | .cont2 { 39 | height:100px; 40 | width:80%; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /Devyendu Shekhar/responsive design pattern/layout-shifter/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin: 0px ; 3 | } 4 | .container1{ 5 | display : flex ; 6 | flex-wrap : wrap ; 7 | } 8 | .container2{ 9 | display : flex ; 10 | flex-wrap : wrap ; 11 | } 12 | 13 | .box{ 14 | width : 100%; 15 | height : 40vh; 16 | } 17 | .box1{ 18 | height : 20vh; 19 | background-color : #060f75 ; 20 | } 21 | .box2{ 22 | background-color: blue ; 23 | } 24 | .box3{ 25 | background-color: skyblue ; 26 | } 27 | 28 | @media screen and (min-width : 700px ){ 29 | .container1{ 30 | flex-direction: column ; 31 | } 32 | .box1{ 33 | width : 20vw ; 34 | height : 100vh ; 35 | } 36 | .box2 , .box3{ 37 | width : 80vw ; 38 | height : 50vh; 39 | } 40 | .container{ 41 | display: flex ; 42 | } 43 | 44 | } 45 | 46 | 47 | -------------------------------------------------------------------------------- /Munish Grover/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex ; 3 | flex-wrap: wrap; 4 | max-width: 900px; 5 | margin: 0 auto; /*for centere*/ 6 | } 7 | .box{ 8 | height: 200px; 9 | width: 100%; 10 | } 11 | .box1{ 12 | background-color: blue; 13 | } 14 | .box2{ 15 | background-color: grey; 16 | } 17 | .box3{ 18 | background-color: yellow; 19 | } 20 | .box4{ 21 | background-color: aqua; 22 | } 23 | .box5{ 24 | background-color: red; 25 | } 26 | @media screen and (min-width: 600px) { 27 | .box2,.box3,.box4,.box5{ 28 | width: 50%; 29 | } 30 | } 31 | @media screen and (min-width: 800px){ 32 | .box1{ 33 | width: 60%; 34 | } 35 | .box2{ 36 | width: 30%; 37 | } 38 | .box3,.box4,.box5{ 39 | width: 30%; 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /WinterBatch2018/Riya/LayoutShifter/style.css: -------------------------------------------------------------------------------- 1 | 2 | .grey{ 3 | width: 100%; 4 | height: 20px; 5 | background-color: grey; 6 | } 7 | .outer{ 8 | min-width:120px; 9 | max-width: 800px; 10 | margin: 0px auto; 11 | 12 | } 13 | .upper{ 14 | background-color: black; 15 | width: 100%; 16 | height:200px; 17 | } 18 | 19 | .a{ 20 | background-color:darkblue; 21 | width: 100%; 22 | height:200px; 23 | } 24 | .b{ 25 | background-color: #f2f2f2; 26 | width:100%; 27 | height:200px; 28 | } 29 | @media (min-width:650px){ 30 | .outer{ 31 | display: flex; 32 | flex-flow: wrap; 33 | 34 | } 35 | .upper{ 36 | height: 400px; 37 | width:20%; 38 | } 39 | 40 | .lower{ 41 | width:80%; 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /Udit Goel/Column Drop/ResponsiveDesignAssignment1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 |
13 |
a
14 |
b
15 |
c
16 |
d
17 | 18 |
e
19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /shivamyadav03/trail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /WinterBatch2018/Riya/columndrop/style.css: -------------------------------------------------------------------------------- 1 | .outer{ 2 | min-width: 10px; 3 | width: 100%; 4 | display: flex; 5 | flex-flow: wrap; 6 | } 7 | .inner{ 8 | width: 100%; 9 | min-height: 300px; 10 | } 11 | .inner1{ 12 | background-color: darkblue; 13 | } 14 | .inner2{ 15 | background-color: royalblue; 16 | } 17 | .inner3{ 18 | background-color: lightblue; 19 | } 20 | @media (min-width:500px) and (max-width:720px){ 21 | .inner1{ 22 | width:70%; 23 | order:1; 24 | } 25 | .inner2{ 26 | width:30%; 27 | order:0; 28 | } 29 | .inner3{ 30 | order:3; 31 | } 32 | } 33 | @media (min-width:720px){ 34 | .inner1{ 35 | width:50%; 36 | order:1; 37 | } 38 | .inner2{ 39 | width:25%; 40 | order:0; 41 | } 42 | .inner3{ 43 | width:25%; 44 | order:3; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /shivamyadav03/box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /PrashantVashisht/columndrop.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width:100%; 3 | height:50px; 4 | 5 | } 6 | .container{ 7 | width:400px; 8 | display:flex; 9 | flex-wrap: wrap; 10 | } 11 | .one{ 12 | background-color: orangered; 13 | } 14 | .two{ 15 | background-color: red; 16 | } 17 | .three{ 18 | background-color: lightgreen; 19 | } 20 | .four{ 21 | background-color: blanchedalmond; 22 | } 23 | .five{ 24 | background-color: royalblue; 25 | } 26 | @media screen and (min-width: 600px){ 27 | .one{ 28 | width: 80%; 29 | order:2; 30 | } 31 | .two{ 32 | width:20%; 33 | order:1; 34 | } 35 | .three,.four,.five{ 36 | width:100%; 37 | } 38 | .three{ 39 | order:3 40 | } 41 | .four{ 42 | order:4; 43 | } 44 | .five{ 45 | order:5; 46 | } 47 | } -------------------------------------------------------------------------------- /Udit Goel/Mostly Fluid/MostlyFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
a
15 |
b
16 |
c
17 |
d
18 | 19 |
e
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Avani/Mostly fluid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mostly Fluid 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Devyendu Shekhar/responsive design pattern/mostly-fliuid/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display : flex ; 3 | flex-wrap : wrap ; 4 | } 5 | 6 | .box{ 7 | width : 100% ; 8 | height : 200px ; 9 | } 10 | 11 | .box1{ 12 | background-color: red ; 13 | } 14 | .box2{ 15 | background-color : orange ; 16 | } 17 | .box3{ 18 | background-color : blue; 19 | } 20 | .box4{ 21 | background-color : yellow ; 22 | } 23 | .box5{ 24 | background-color : pink ; 25 | } 26 | 27 | @media screen and (min-width: 600px){ 28 | .box{ 29 | width : 50% ; 30 | } 31 | .box1{ 32 | width : 100%; 33 | } 34 | } 35 | 36 | @media screen and (min-width: 720px){ 37 | .box{ 38 | width : 33% ; 39 | } 40 | .box1{ 41 | width : 60% ; 42 | } 43 | .box2{ 44 | width : 40% ; 45 | } 46 | } 47 | 48 | @media screen and (min-width: 990px){ 49 | .container{ 50 | margin : 25px auto ; 51 | } 52 | } -------------------------------------------------------------------------------- /scaars10/layout_shifter.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | /*flex-wrap: wrap;*/ 4 | margin: auto; 5 | flex-flow: row wrap; 6 | } 7 | .one{ 8 | background-color: #cecb84; 9 | } 10 | 11 | .two{ 12 | background-color: firebrick; 13 | } 14 | .three{ 15 | background-color: gainsboro; 16 | } 17 | .box{ 18 | width: 100%; 19 | height: 200px; 20 | display: block; 21 | } 22 | 23 | @media screen and (max-width: 2000px){ 24 | .one{ 25 | width:20%; 26 | height: 95vh; 27 | /*flex-flow: column nowrap;*/ 28 | /*justify-content: space-evenly;*/ 29 | } 30 | .two{ 31 | width:80%; 32 | height: 49vh; 33 | /*flex-direction: column;*/ 34 | /*flex:1;*/ 35 | } 36 | .three{ 37 | width:80%; 38 | height: 49vh; 39 | /*flex:1;*/ 40 | } 41 | .container{ 42 | width:90%; 43 | } 44 | } -------------------------------------------------------------------------------- /WinterBatch2018/Dhruva/Responsive Design/mostlyfluid.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | height: 189px; 3 | margin: 0 auto; 4 | } 5 | .box.one{ 6 | background-color: #00ffd2; 7 | height:400px; 8 | } 9 | .two{ 10 | background-color: #ff0000; 11 | } 12 | .three{ 13 | background-color: #ff9a00; 14 | } 15 | .four{ 16 | background-color: #ffb709; 17 | } 18 | .five{ 19 | background-color: #ffce00; 20 | } 21 | @media screen and (min-width:801px) and (max-width: 1200px){ 22 | .big-box{ 23 | display:flex; 24 | flex-wrap: wrap; 25 | } 26 | .box.one{ 27 | width:100%; 28 | } 29 | .box{ 30 | width:50%; 31 | } 32 | } 33 | @media screen and (min-width:1201px){ 34 | .big-box{ 35 | display:flex; 36 | flex-wrap: wrap; 37 | width:1200px; 38 | margin: 0 auto; 39 | } 40 | .box.one{ 41 | width:60%; 42 | } 43 | .box.two{ 44 | width:40%; 45 | height:400px; 46 | } 47 | .box{ 48 | width:33%; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Devyendu Shekhar/responsive design pattern/column-drop/style.css: -------------------------------------------------------------------------------- 1 | /*order by default is 0 */ 2 | .container{ 3 | display : flex ; 4 | flex-wrap : wrap ; 5 | } 6 | 7 | .box{ 8 | width : 100% ; 9 | height : 200px ; 10 | } 11 | 12 | .box1{ 13 | background-color: red ; 14 | } 15 | .box2{ 16 | background-color : orange ; 17 | } 18 | .box3{ 19 | background-color : blue; 20 | } 21 | .box4{ 22 | background-color : yellow ; 23 | } 24 | .box5{ 25 | background-color : pink ; 26 | } 27 | 28 | @media screen and (min-width: 600px){ 29 | .box1{ 30 | width : 20% ; 31 | order : 2; 32 | } 33 | .box2{ 34 | width : 80% ; 35 | order : 1 ; 36 | } 37 | .box3 , .box4 , .box5 { 38 | width : 100% ; 39 | } 40 | .box3{ 41 | order : 3 ; 42 | } 43 | .box4{ 44 | order : 4 ; 45 | } 46 | .box5{ 47 | order : 5 ; 48 | } 49 | } 50 | 51 | @media screen and (min-width: 990px){ 52 | .container { 53 | margin : 20px auto ; 54 | } 55 | } -------------------------------------------------------------------------------- /Practice Material/Column-Drop/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: ; 6 | display: -webkit-flex; 7 | flex-flow: ; 8 | -webkit-flex-flow: row wrap; 9 | } 10 | 11 | .container div { 12 | min-height: 150px; 13 | min-width: 150px; 14 | } 15 | 16 | .box1, .box2, .box3 { 17 | width: 100%; 18 | } 19 | 20 | /* Small screen lesser than 600px*/ 21 | 22 | @media screen and (min-width: 600px) { 23 | 24 | /* add code */ 25 | .box1 { 26 | /* width -> 60 and order will be 2 */ 27 | } 28 | 29 | .box2 { 30 | 31 | } 32 | 33 | .box3 { 34 | 35 | } 36 | } 37 | 38 | 39 | 40 | /* add media query for Screen more than 720px*/ 41 | @media screen and (min-width: 800px) { 42 | 43 | } -------------------------------------------------------------------------------- /Piyush/mostly-fluid.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | 7 | .box { 8 | width: 100%; 9 | height: 200px; 10 | } 11 | 12 | .box1 { 13 | background-color: palevioletred; 14 | } 15 | 16 | .box2 { 17 | background-color: indianred; 18 | } 19 | 20 | .box3 { 21 | background-color: green; 22 | } 23 | 24 | .box4 { 25 | background-color: gold; 26 | } 27 | 28 | .box5 { 29 | background-color: greenyellow; 30 | } 31 | 32 | .box6 { 33 | background-color: aquamarine; 34 | } 35 | 36 | @media screen and (min-width: 600px) { 37 | .box1 { 38 | width: 60%; 39 | height: 400px; 40 | } 41 | 42 | .box2 { 43 | width: 40%; 44 | height: 400px; 45 | } 46 | 47 | .box3, .box4, .box5, .box6 { 48 | width: 50%; 49 | } 50 | } 51 | 52 | @media screen and (min-width: 800px) { 53 | .container { 54 | margin: 0 auto; 55 | } 56 | } -------------------------------------------------------------------------------- /SHRAYANSH JAIN/fluid.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | 7 | .box { 8 | width: 100%; 9 | height: 200px; 10 | } 11 | 12 | .box1 { 13 | background-color: palevioletred; 14 | } 15 | 16 | .box2 { 17 | background-color: indianred; 18 | } 19 | 20 | .box3 { 21 | background-color: green; 22 | } 23 | 24 | .box4 { 25 | background-color: gold; 26 | } 27 | 28 | .box5 { 29 | background-color: greenyellow; 30 | } 31 | 32 | .box6 { 33 | background-color: aquamarine; 34 | } 35 | 36 | @media screen and (min-width: 600px) { 37 | .box1 { 38 | width: 60%; 39 | height: 400px; 40 | } 41 | 42 | .box2 { 43 | width: 40%; 44 | height: 400px; 45 | } 46 | 47 | .box3, .box4, .box5, .box6 { 48 | width: 50%; 49 | } 50 | } 51 | 52 | @media screen and (min-width: 800px) { 53 | .container { 54 | margin: 0 auto; 55 | } 56 | } -------------------------------------------------------------------------------- /WinterBatch2018/Aakash/Layout shifter css.css: -------------------------------------------------------------------------------- 1 | #top{ 2 | height: 50px; 3 | background-color: #362424; 4 | } 5 | #mid{ 6 | height: 200px; 7 | background-color: green; 8 | } 9 | #bottom{ 10 | height: 300px; 11 | background-color: gray; 12 | } 13 | @media screen and (min-width: 480px) and (max-width: 1080px) { 14 | #top{ 15 | height: 100%; 16 | width: 25%; 17 | } 18 | .container{ 19 | display: flex; 20 | flex-wrap: wrap; 21 | } 22 | .block{ 23 | width: 75%; 24 | } 25 | } 26 | @media screen and (min-width: 1080px){ 27 | body{ 28 | text-align: center; 29 | } 30 | #top{ 31 | height: 500px; 32 | width: 20%; 33 | } 34 | .container{ 35 | margin: 0 auto; 36 | width: 800px; 37 | display: flex; 38 | flex-wrap: wrap; 39 | flex-direction: row; 40 | } 41 | .block{ 42 | width: 80%; 43 | } 44 | 45 | } -------------------------------------------------------------------------------- /atif abdus samad/Layout-shifter.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | margin: 0 auto; 6 | } 7 | 8 | .box1{ 9 | width: 100%; 10 | height: 50px; 11 | background-color: red; 12 | } 13 | 14 | .box2{ 15 | width: 100%; 16 | } 17 | 18 | 19 | .inner1{ 20 | height: 200px; 21 | background-color: green; 22 | } 23 | 24 | .inner2{ 25 | height: 200px; 26 | background-color: aqua; 27 | } 28 | 29 | @media screen and (min-width: 250px){ 30 | 31 | .box1{ 32 | height: 60px; 33 | } 34 | 35 | .inner1,.inner2{ 36 | height: 150px; 37 | } 38 | 39 | } 40 | 41 | @media screen and (min-width: 480px){ 42 | .box1{ 43 | height: 400px; 44 | width: 20%; 45 | } 46 | 47 | .box2{ 48 | height:400px ; 49 | width: 80%; 50 | } 51 | 52 | .inner1,.inner2{ 53 | height: 50%; 54 | width: 100%; 55 | } 56 | 57 | } -------------------------------------------------------------------------------- /pradeep/mostly-fluid.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | 7 | .box { 8 | width: 100%; 9 | height: 200px; 10 | } 11 | 12 | .box1 { 13 | background-color: palevioletred; 14 | } 15 | 16 | .box2 { 17 | background-color: indianred; 18 | } 19 | 20 | .box3 { 21 | background-color: green; 22 | } 23 | 24 | .box4 { 25 | background-color: gold; 26 | } 27 | 28 | .box5 { 29 | background-color: greenyellow; 30 | } 31 | 32 | .box6 { 33 | background-color: aquamarine; 34 | } 35 | 36 | @media screen and (min-width: 600px) { 37 | .box1 { 38 | width: 60%; 39 | height: 400px; 40 | } 41 | 42 | .box2 { 43 | width: 40%; 44 | height: 400px; 45 | } 46 | 47 | .box3, .box4, .box5, .box6 { 48 | width: 50%; 49 | } 50 | } 51 | 52 | @media screen and (min-width: 800px) { 53 | .container { 54 | margin: 0 auto; 55 | } 56 | } -------------------------------------------------------------------------------- /Ayush/columnDrop/columnDrop.css: -------------------------------------------------------------------------------- 1 | .container { 2 | font-size: 0px; 3 | display: flex; 4 | flex-wrap: wrap; 5 | max-width: 800px; 6 | } 7 | 8 | .box { 9 | width: 100%; 10 | height: 50px; 11 | } 12 | 13 | .box1 { 14 | background-color: rgb(40, 40, 40); 15 | } 16 | 17 | .box2 { 18 | background-color: rgb(100, 100, 100); 19 | } 20 | 21 | .box3 { 22 | background-color: rgb(150, 150, 150); 23 | } 24 | 25 | .box4 { 26 | background-color: rgb(200, 200, 200); 27 | } 28 | 29 | .box5 { 30 | background-color: rgb(250, 250, 250); 31 | } 32 | 33 | @media screen and (min-width: 500px) { 34 | .box { 35 | width: 100%; 36 | } 37 | 38 | .box1 { 39 | width: 80%; 40 | order: 2; 41 | } 42 | 43 | .box2 { 44 | width: 20%; 45 | order: 1; 46 | } 47 | 48 | .box3 { 49 | width: 20%; 50 | order: 4; 51 | } 52 | 53 | .box4 { 54 | width: 80%; 55 | order: 5; 56 | } 57 | 58 | .box5 { 59 | order: 3; 60 | } 61 | 62 | .container { 63 | margin: 0 auto; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Munish Grover/colDrop.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex ; 3 | flex-wrap: wrap; 4 | max-width: 900px; 5 | margin: 0 auto; /*for centere*/ 6 | } 7 | .box{ 8 | height: 200px; 9 | width: 100%; 10 | } 11 | .box1{ 12 | background-color: blue; 13 | } 14 | .box2{ 15 | background-color: grey; 16 | } 17 | .box3{ 18 | background-color: yellow; 19 | } 20 | .box4{ 21 | background-color: aqua; 22 | } 23 | .box5{ 24 | background-color: red; 25 | } 26 | @media screen and (min-width: 600px) { 27 | .box1{ 28 | order: 2; 29 | width: 60% 30 | 31 | } 32 | .box2{ 33 | width: 40%; 34 | order: 1; 35 | } 36 | .box3{ 37 | order: 3; 38 | } 39 | .box4{ 40 | order: 4; 41 | } 42 | .box5{ 43 | order: 5; 44 | } 45 | } 46 | @media screen and (min-width: 1000px){ 47 | .box1{ 48 | width: 60%; 49 | } 50 | .box2,.box3{ 51 | width: 20%; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /Practice Material/Mostly-Fluid/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | 3 | display : -webkit-flex; 4 | display: flex; 5 | -webkit-flex-flow: row wrap; 6 | flex-flow: row wrap; 7 | } 8 | 9 | .box1 { 10 | background-color: blue; 11 | } 12 | 13 | .box2 { 14 | background-color: red; 15 | } 16 | 17 | .box3 { 18 | background-color: green; 19 | } 20 | 21 | .box4 { 22 | background-color: orange; 23 | } 24 | 25 | .box5 { 26 | background-color: gray; 27 | } 28 | 29 | .box1, .box2 , .box3 ,.box4 , .box5 { 30 | width : 100%; 31 | height: 200px; 32 | } 33 | 34 | @media (min-width: 600px) { 35 | .box2, .box3 , .box4, .box5 { 36 | width: 50%; 37 | } 38 | } 39 | 40 | @media (min-width: 800px) { 41 | .box1 { 42 | width: 60%; 43 | } 44 | 45 | .box2 { 46 | width: 40%; 47 | } 48 | 49 | .box3, .box4, .box5 { 50 | width : 33.33%; 51 | } 52 | } 53 | 54 | @media (min-width: 800px) { 55 | .container { 56 | width : 800px; 57 | margin-left: auto; 58 | margin-right: auto; 59 | } 60 | } -------------------------------------------------------------------------------- /mansikhemka/Mostly-Fluid/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | 3 | display : -webkit-flex; 4 | display: flex; 5 | -webkit-flex-flow: row wrap; 6 | flex-flow: row wrap; 7 | } 8 | 9 | .box1 { 10 | background-color: blue; 11 | } 12 | 13 | .box2 { 14 | background-color: red; 15 | } 16 | 17 | .box3 { 18 | background-color: green; 19 | } 20 | 21 | .box4 { 22 | background-color: orange; 23 | } 24 | 25 | .box5 { 26 | background-color: gray; 27 | } 28 | 29 | .box1, .box2 , .box3 ,.box4 , .box5 { 30 | width : 100%; 31 | height: 200px; 32 | } 33 | 34 | @media (min-width: 600px) { 35 | .box2, .box3 , .box4, .box5 { 36 | width: 50%; 37 | } 38 | } 39 | 40 | @media (min-width: 800px) { 41 | .box1 { 42 | width: 60%; 43 | } 44 | 45 | .box2 { 46 | width: 40%; 47 | } 48 | 49 | .box3, .box4, .box5 { 50 | width : 33.33%; 51 | } 52 | } 53 | 54 | @media (min-width: 800px) { 55 | .container { 56 | width : 800px; 57 | margin-left: auto; 58 | margin-right: auto; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /BhavyaTakkar/MostlyFluid.css: -------------------------------------------------------------------------------- 1 | .bigbox 2 | { 3 | max-width: 1024px; 4 | margin:0 auto; 5 | } 6 | 7 | .bigbox>.box 8 | { 9 | 10 | height: 150px; 11 | width: 100%; 12 | } 13 | .box1{ 14 | background-color: red; 15 | } 16 | .box2{ 17 | background-color: green; 18 | } 19 | .box3{ 20 | background-color: blue; 21 | } 22 | .box4{ 23 | background-color: orange; 24 | } 25 | .box5{ 26 | background-color: yellow; 27 | } 28 | @media(min-width: 350px) and (max-width: 750px){ 29 | .bigbox{ 30 | display: flex; 31 | flex-wrap: wrap; 32 | } 33 | .bigbox>.box{ 34 | width: 50%; 35 | } 36 | .bigbox>.box1{ 37 | width: 100%; 38 | } 39 | } 40 | @media(min-width:751px){ 41 | .bigbox{ 42 | display: flex; 43 | flex-wrap: wrap; 44 | } 45 | .bigbox>.box1{ 46 | width: 60%; 47 | } 48 | .bigbox>.box2{ 49 | width: 40%; 50 | } 51 | .bigbox>.box3{ 52 | width: 33.3%; 53 | } 54 | .bigbox>.box4{ 55 | width: 33.3%; 56 | } 57 | .bigbox>.box5{ 58 | width: 33.3%; 59 | } 60 | 61 | 62 | } -------------------------------------------------------------------------------- /Sonali/column layout/column_layout.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex; 3 | flex-wrap:wrap; 4 | } 5 | .box{ 6 | width:100%; 7 | height:200px; 8 | } 9 | .box1{ 10 | background-color:navy; 11 | height: 700px; 12 | } 13 | .box2{ 14 | background-color:blue; 15 | height: 200px; 16 | } 17 | .box3{ 18 | background-color: lightblue; 19 | height:200px; 20 | } 21 | @media screen and (min-width: 480px){ 22 | .box1{ 23 | height:400px; 24 | } 25 | .box2{ 26 | height:400px; 27 | } 28 | .box3{ 29 | height:400px; 30 | } 31 | } 32 | @media screen and (min-width:720px){ 33 | .box1{ 34 | width:80%; 35 | height:700px; 36 | order: 2; 37 | } 38 | .box2{ 39 | width:20%; 40 | height:700px; 41 | order:1; 42 | } 43 | .box3{ 44 | order:3; 45 | height:200px; 46 | } 47 | } 48 | @media screen and (min-width: 1000px){ 49 | .box1{ 50 | width:60%; 51 | } 52 | .box2{ 53 | width:20%; 54 | } 55 | .box3{ 56 | width:20%; 57 | height:700px; 58 | } 59 | } -------------------------------------------------------------------------------- /Udit Goel/Column Drop/ResponsiveDesignAssignment1.css: -------------------------------------------------------------------------------- 1 | 2 | #div5{ 3 | background-color: blueviolet; 4 | } 5 | #div3{ 6 | background-color: green; 7 | } 8 | #div4{ 9 | background-color:orangered; 10 | } 11 | #div2{ 12 | background-color: blue; 13 | } 14 | #div1{ 15 | background-color: red; 16 | } 17 | @media(max-width:480px){ 18 | 19 | #div5{ 20 | background-color: blueviolet; 21 | } 22 | #div3{ 23 | background-color: green; 24 | } 25 | #div4{ 26 | background-color:orangered; 27 | } 28 | #div2{ 29 | background-color: blue; 30 | } 31 | #div1{ 32 | background-color: red; 33 | } 34 | } 35 | @media(min-width:481px) and (max-width:720px){ 36 | #div1{ 37 | background-color: red; 38 | width: 100%; 39 | } 40 | 41 | 42 | .item1{ 43 | width: 50%; 44 | } 45 | .container{ 46 | display: flex; 47 | flex-wrap: wrap; 48 | } 49 | } -------------------------------------------------------------------------------- /Arwaz/MostlyFluid/flex.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | } 7 | .box{ 8 | width: 200px; 9 | height: 200px; 10 | 11 | } 12 | .box1{ 13 | background: green; 14 | 15 | } 16 | .box2{ 17 | background: blue; 18 | } 19 | .box3{ 20 | background: yellow; 21 | } 22 | .box4{ 23 | background: violet; 24 | } 25 | .box5{ 26 | background: red; 27 | } 28 | .box1,.box2,.box3,.box4,.box5{ 29 | width: 100%; 30 | } 31 | @media(min-width:600px){ 32 | .box2,.box3,.box4,.box5{ 33 | width: 50% 34 | } 35 | } 36 | @media(min-width: 800px){ 37 | .container{ 38 | margin: 0px auto; 39 | } 40 | .box1{ 41 | width: 60%; 42 | } 43 | .box2{ 44 | width: 40%; 45 | } 46 | .box3, .box4, .box5{ 47 | width: 33.33%; 48 | } 49 | } 50 | @media(min-width: 800px){ 51 | .container{ 52 | width: 800px; 53 | margin-left: auto; 54 | margin-right: auto; 55 | } 56 | } -------------------------------------------------------------------------------- /AnkitOjha/mostlyfluid/fluid.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | margin: auto 5% auto 5%; 6 | } 7 | .box { 8 | width: 1000px; 9 | height: auto; 10 | } 11 | .box1 { 12 | background-color: skyblue; 13 | } 14 | .box2 { 15 | background-color: green; 16 | } 17 | .box3 { 18 | background-color: greenyellow; 19 | } 20 | 21 | @media(min-width: 1000px) 22 | { 23 | 24 | .box1 { 25 | width: 100%; 26 | } 27 | .box2 { 28 | width: 50%; 29 | } 30 | .box3 { 31 | width: 50%; 32 | } 33 | } 34 | @media(min-width: 600px) and (max-width: 1000px) 35 | { 36 | .container{ 37 | margin: 0px auto; 38 | } 39 | .box1 { 40 | width: 100%; 41 | } 42 | .box2 { 43 | width: 50%; 44 | } 45 | .box3 { 46 | width: 50%; 47 | } 48 | } 49 | @media(max-width: 600px) 50 | { 51 | .container{ 52 | margin: 0px auto; 53 | } 54 | .box1 { 55 | width: 100%; 56 | } 57 | .box2 { 58 | width: 100%; 59 | 60 | } 61 | .box3 { 62 | width: 100%; 63 | 64 | } 65 | } -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Column Drop/cd.css: -------------------------------------------------------------------------------- 1 | .big-box 2 | { 3 | display: flex; 4 | flex-direction: column; 5 | flex-wrap: wrap; /*All wrapped inside the container with same dimensions and responsive: no media queries*/ 6 | } 7 | 8 | .box 9 | { 10 | width: 100%; 11 | height: 280px; 12 | } 13 | 14 | .box0{ 15 | 16 | background: blue; 17 | } 18 | .box1{ 19 | 20 | background: lightblue; 21 | } 22 | .box2{ 23 | 24 | background: gray; 25 | } 26 | 27 | @media (min-width: 600px) 28 | { 29 | .big-box{ 30 | flex-direction: unset; 31 | } 32 | .box0 { 33 | width: 70%; 34 | order: 2; } 35 | 36 | .box1 { 37 | width: 30%; 38 | order: 1; } 39 | 40 | .box2 { 41 | width: 100%; 42 | order: 3; } 43 | 44 | } 45 | 46 | @media (min-width: 800px) 47 | { 48 | .big-box{ 49 | flex-direction: row; 50 | } 51 | .box1{ 52 | width: 20%; 53 | order: 1; 54 | } 55 | .box2{ 56 | width: 20%; 57 | order: 3; 58 | } 59 | .box0{ 60 | width: 60%; 61 | order: 2; 62 | } -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/columnstyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | #parent { 7 | display: flex; 8 | flex-wrap : wrap; 9 | } 10 | .box { 11 | width: 100%; 12 | } 13 | #first { 14 | height: 120%; 15 | background: #e65100; 16 | } 17 | #second { 18 | height: 70%; 19 | background: #ff9800; 20 | } 21 | #third { 22 | height: 70%; 23 | background: #ffcc80; 24 | } 25 | @media screen and (min-width : 550px) { 26 | #first { 27 | height: 60%; 28 | } 29 | } 30 | @media screen and (min-width : 900px) { 31 | #first { 32 | order: 2; 33 | height: 100%; 34 | width: 70%; 35 | } 36 | #second { 37 | order: 1; 38 | height: 100%; 39 | width: 30%; 40 | } 41 | #third { 42 | order: 3; 43 | width: 100%; 44 | height: 40%; 45 | } 46 | } 47 | @media screen and (min-width : 1200px) { 48 | #first { 49 | width: 60%; 50 | height: 100%; 51 | } 52 | #second { 53 | width: 20%; 54 | height: 100%; 55 | } 56 | #third { 57 | width: 20%; 58 | height: 100%; 59 | } 60 | } 61 | 62 | -------------------------------------------------------------------------------- /gopals/fluid.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | max-width: 1024px; 4 | } 5 | .box { 6 | width: 100%; 7 | height: 120px; 8 | /*border: 2px solid blue;*/ 9 | } 10 | 11 | .box:nth-child(1){ 12 | background-color: darkblue; 13 | } 14 | 15 | .box:nth-child(2){ 16 | background-color: blue; 17 | } 18 | 19 | .box:nth-child(3){ 20 | background-color: lightblue; 21 | } 22 | 23 | .box:nth-child(4){ 24 | background-color: lightcyan; 25 | } 26 | 27 | .box:nth-child(5){ 28 | background-color: lightgoldenrodyellow; 29 | } 30 | 31 | .box:nth-child(5){ 32 | background-color: lightgoldenrodyellow; 33 | } 34 | 35 | @media (min-width: 481px) and (max-width: 800px) { 36 | .box{ 37 | width: 50%; 38 | } 39 | .container{ 40 | display: flex; 41 | flex-wrap: wrap; 42 | } 43 | } 44 | 45 | @media (min-width: 801px) { 46 | .box{ 47 | width: 33%; 48 | } 49 | .container{ 50 | display: flex; 51 | flex-wrap: wrap; 52 | } 53 | } -------------------------------------------------------------------------------- /Yash Yadav/23juneLayoutShifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout Shifter 6 | 43 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 | -------------------------------------------------------------------------------- /Anuj/types.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | width:100%; 5 | max-width: 900px; 6 | margin:0 auto; 7 | } 8 | .cont 9 | { width: 100%; 10 | height:200px; 11 | } 12 | .cont1{ 13 | background-color: #161616; 14 | width:20%; 15 | } 16 | .cont2{ 17 | background-color: aqua; 18 | width:60%; 19 | } 20 | .cont3{ 21 | width:20%; 22 | background-color: blue; 23 | } 24 | 25 | @media screen and (min-width:600px ) 26 | { 27 | .cont1{ 28 | width:100%; 29 | } 30 | .cont2,.cont3{ 31 | width:100%; 32 | } 33 | } 34 | @media(min-width:900px ) 35 | { 36 | .cont2{order:1; 37 | width:30%; 38 | } 39 | .cont1 { 40 | order:2; 41 | 42 | width:70%; 43 | } 44 | .cont3{order:3; 45 | 46 | width:100%; 47 | } 48 | } 49 | @media (min-width: 1333px) 50 | { 51 | .cont2{order:2; 52 | width:60%; 53 | } 54 | .cont1{order:1; 55 | width:20%; 56 | } 57 | .cont3{order:3; 58 | width:20%; 59 | } 60 | } -------------------------------------------------------------------------------- /pritam/column layout/column_layout.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex; 3 | flex-wrap:wrap; 4 | } 5 | .box{ 6 | width:100%; 7 | height:200px; 8 | } 9 | .box1{ 10 | background-color:navy; 11 | height: 700px; 12 | } 13 | .box2{ 14 | background-color:blue; 15 | height: 200px; 16 | } 17 | .box3{ 18 | background-color: lightblue; 19 | height:200px; 20 | } 21 | @media screen and (min-width: 480px){ 22 | .box1{ 23 | height:400px; 24 | } 25 | .box2{ 26 | height:400px; 27 | } 28 | .box3{ 29 | height:400px; 30 | } 31 | } 32 | @media screen and (min-width:720px){ 33 | .box1{ 34 | width:80%; 35 | height:700px; 36 | order: 2; 37 | } 38 | .box2{ 39 | width:20%; 40 | height:700px; 41 | order:1; 42 | } 43 | .box3{ 44 | order:3; 45 | height:200px; 46 | } 47 | } 48 | @media screen and (min-width: 1000px){ 49 | .box1{ 50 | width:60%; 51 | } 52 | .box2{ 53 | width:20%; 54 | } 55 | .box3{ 56 | width:20%; 57 | height:700px; 58 | } 59 | } -------------------------------------------------------------------------------- /gopals/column.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | max-width: 1024px; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | .box { 8 | width: 100%; 9 | height: 120px; 10 | /*border: 2px solid blue;*/ 11 | } 12 | 13 | .box:nth-child(1){ 14 | background-color: darkblue; 15 | } 16 | 17 | .box:nth-child(2){ 18 | background-color: blue; 19 | } 20 | 21 | .box:nth-child(3){ 22 | background-color: lightblue; 23 | } 24 | 25 | @media (min-width: 481px) and (max-width: 800px) { 26 | .box:nth-child(1){ 27 | width: 60%; 28 | order: 2; 29 | } 30 | .box:nth-child(2){ 31 | width: 40%; 32 | order: 1; 33 | } 34 | .box:nth-child(3){ 35 | width: 100%; 36 | order: 3; 37 | } 38 | } 39 | 40 | @media (min-width: 801px) { 41 | .box:nth-child(1){ 42 | width: 40%; 43 | order: 2; 44 | } 45 | .box:nth-child(2){ 46 | width: 30%; 47 | order: 1; 48 | } 49 | .box:nth-child(3){ 50 | width: 30%; 51 | order: 3; 52 | } 53 | } -------------------------------------------------------------------------------- /Sanket/Layoust Shifter/layout_shifter_styles.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .container { 7 | width: 300px; 8 | height: 620px; 9 | } 10 | aside { 11 | width: 150px; 12 | height: 620px; 13 | } 14 | .box { 15 | width: inherit; 16 | height: 50%; 17 | } 18 | .box1 { 19 | background-color: #164388; 20 | width: inherit; 21 | height: inherit; 22 | } 23 | .box2 { 24 | background-color: #3979d9; 25 | } 26 | .box3 { 27 | background-color: #cadbf8; 28 | } 29 | 30 | @media(min-width: 720px) 31 | { 32 | .container { 33 | width: 70%; 34 | } 35 | .box { 36 | width: 100%; 37 | } 38 | aside { 39 | width: 20%; 40 | } 41 | .box1 { 42 | width: 100%; 43 | } 44 | 45 | } 46 | @media (max-width: 720px) 47 | { 48 | aside{ 49 | width: 100%; 50 | height: 140px; 51 | } 52 | .box1 { 53 | width: 100%; 54 | height: 100%; 55 | } 56 | .container { 57 | width: 100%; 58 | } 59 | .box2 { 60 | width: 100%; 61 | height: 400px; 62 | } 63 | .box3 { 64 | width: 100%; 65 | height: 600px; 66 | } 67 | } 68 | 69 | 70 | -------------------------------------------------------------------------------- /adarsh/23juneLayoutShifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout Shifter 6 | 43 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 | -------------------------------------------------------------------------------- /AnkitOjha/columndrop/cd.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .box { 7 | width: 1000px; 8 | height: auto; 9 | } 10 | .box1 { 11 | background-color: skyblue; 12 | order: 0; 13 | } 14 | .box2 { 15 | background-color: green; 16 | order:1; 17 | } 18 | .box3 { 19 | background-color: greenyellow; 20 | order: 2; 21 | } 22 | 23 | 24 | @media screen and (min-width:1000px){ 25 | .box1{ 26 | width: 20%; 27 | } 28 | .box2{ 29 | width: 60%; 30 | } 31 | .box3{ 32 | width: 20%; 33 | } 34 | } 35 | 36 | @media (min-width:700px) and (max-width:1000px){ 37 | .box1{ 38 | width: 20%; 39 | } 40 | .box2{ 41 | width: 80%; 42 | } 43 | .box3{ 44 | width: 100%; 45 | } 46 | } 47 | 48 | 49 | @media (max-width:700px){ 50 | .box1{ 51 | width: 100%; 52 | order: 1; 53 | } 54 | .box2{ 55 | width: 100%; 56 | order: 0; 57 | } 58 | .box3{ 59 | width: 100%; 60 | order: 2; 61 | } 62 | } -------------------------------------------------------------------------------- /mansikhemka/Flex-layout-lab/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: flex; 6 | display: -webkit-flex; /* for safari*/ 7 | flex-wrap: wrap; 8 | } 9 | 10 | 11 | .box1,.box2,.box3,.box4,.box5 { 12 | /* add code */ 13 | height: 200px; 14 | width:100%; 15 | transition: width .1s; 16 | 17 | } 18 | .box1{ 19 | background-color: lightsalmon; 20 | } 21 | .box2{ 22 | background-color: lightblue; 23 | } 24 | .box3{ 25 | background-color: lightseagreen; 26 | } 27 | .box4{ 28 | background-color: lightpink; 29 | } 30 | .box5{ 31 | background-color: lightyellow; 32 | } 33 | 34 | /* Small screen lesser than 720px*/ 35 | 36 | @media screen and (min-width: 480px) { 37 | .box2, .box3, .box4, .box5{ 38 | width: 50%; 39 | 40 | } 41 | 42 | /* add code */ 43 | } 44 | 45 | /* add media query for Screen more than 720px*/ 46 | -------------------------------------------------------------------------------- /Udit Goel/Layout Shifter/LayoutShifter.css: -------------------------------------------------------------------------------- 1 | #div1{ 2 | background-color: blue; 3 | } 4 | #div2{ 5 | background-color: lightseagreen; 6 | } 7 | #div3{ 8 | background-color: lightgreen; 9 | } 10 | @media(max-width:480px) 11 | { 12 | #div1{ 13 | width:100%; 14 | height: 10em; 15 | } 16 | #div2{ 17 | width:100%; 18 | height: 20em; 19 | } 20 | #div3{ 21 | width:100%; 22 | height: 30em; 23 | } 24 | } 25 | @media(min-width:481px) and (max-width:720px) 26 | { 27 | #div1{ 28 | width:100%; 29 | height: 8em; 30 | } 31 | #div2{ 32 | width:100%; 33 | height: 17em; 34 | } 35 | #div3{ 36 | width:100%; 37 | height: 26em; 38 | } 39 | } 40 | @media(min-width:721px) 41 | { 42 | #container{ 43 | 44 | width:900px; 45 | margin:0 auto; 46 | } 47 | #div1{ 48 | float: left; 49 | width:15%; 50 | height:38em; 51 | 52 | } 53 | #div2{ 54 | 55 | height: 19em; 56 | } 57 | #div3{ 58 | 59 | height: 19em; 60 | } 61 | } -------------------------------------------------------------------------------- /Puneet/columndrop.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | margin: 0 auto; 5 | } 6 | .box{ 7 | width: 100%; 8 | height: 200px; 9 | } 10 | .box1{background-color: pink; 11 | 12 | } 13 | .box2{background-color: red; 14 | 15 | } 16 | .box3{background-color: blue; 17 | 18 | } 19 | .box4{background-color: green; 20 | 21 | } 22 | .box5{background-color: grey; 23 | 24 | } 25 | .box6{background-color: yellow; 26 | 27 | } 28 | @media screen and (min-width:480px){ 29 | .box1{ 30 | width: 79%; 31 | order: 2;} 32 | .box2{width: 20%; 33 | order: 1;} 34 | .box3{ 35 | order: 3; 36 | } 37 | .box4{ 38 | order: 4; 39 | } 40 | .box5{ 41 | order: 5; 42 | } 43 | .box6{ 44 | order: 6; 45 | } 46 | .box3 .box4 .box5 .box6{ 47 | width: 100%; 48 | } 49 | @media screen and (min-width:720px){ 50 | .box1{ 51 | width: 50%; 52 | order: 2;} 53 | .box2{width: 25%; 54 | order: 1;} 55 | .box3{ width: 25%; 56 | order: 3; 57 | } 58 | .box4{ 59 | order: 4; 60 | } 61 | .box5{ 62 | order: 5; 63 | } 64 | .box6{ 65 | order: 6; 66 | } 67 | .box3 .box4 .box5 .box6{ 68 | width: 100%; 69 | } 70 | -------------------------------------------------------------------------------- /WinterBatch2018/Aakash/column drop css.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | height: 800px; 3 | display: flex; 4 | flex-wrap: wrap; 5 | flex-direction: column; 6 | } 7 | #top{ 8 | background-color: #ffed84; 9 | height: 20%; 10 | } 11 | #mid{ 12 | background-color: blue; 13 | height: 20%; 14 | } 15 | #bot{ 16 | background-color: grey; 17 | height: 60%; 18 | order: 3 19 | } 20 | @media screen and (min-width: 600px) and (max-width: 1080px) { 21 | #top{ 22 | width: 80%; 23 | order: 2; 24 | } 25 | #mid{ 26 | width: 20%; 27 | order: 1; 28 | } 29 | #bot{ 30 | width: 100%; 31 | height: 80%; 32 | } 33 | .container{ 34 | flex-direction: row; 35 | } 36 | } 37 | @media screen and (min-width: 1080px){ 38 | #top{ 39 | width: 20%; 40 | height: 100%; 41 | order: 2; 42 | } 43 | #mid{ 44 | width: 20%; 45 | height: 100%; 46 | order: 1; 47 | } 48 | #bot{ 49 | width: 60%; 50 | height: 100%; 51 | } 52 | .container{ 53 | flex-direction: row; 54 | } 55 | } -------------------------------------------------------------------------------- /Ishu Anand/mostly-fluid/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | width: 100%; 5 | position: relative; 6 | max-width:1200px; 7 | margin: 0 auto; 8 | 9 | } 10 | 11 | .box { 12 | width: 100%; 13 | height: 200px; 14 | transition: all 0.7s linear 0s; 15 | } 16 | 17 | 18 | .box1 { 19 | height: 500px; 20 | background-color: #154388; 21 | 22 | } 23 | 24 | .box2 { 25 | background-color: #3979D9; 26 | } 27 | 28 | .box3 { 29 | background-color: #CADBF8; 30 | } 31 | 32 | .box4 { 33 | background-color: #D6E0EF; 34 | } 35 | 36 | .box5 { 37 | background-color: #E0E2E6; 38 | } 39 | 40 | 41 | @media screen and (min-width:600px){ 42 | .box{ 43 | width:50%; 44 | } 45 | .box1{ 46 | height: 300px; 47 | width: 100% 48 | } 49 | 50 | } 51 | 52 | 53 | @media screen and (min-width:900px){ 54 | .box{ 55 | width:33.33%; 56 | 57 | } 58 | .box1{ 59 | height: 331px; 60 | width: 60% 61 | } 62 | .box2{ 63 | height: 331px; 64 | width: 40% 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /Rahul/mostlyfluid/mostlyfluid.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | /* border: 2px solid black; */ 6 | margin: 0 auto; 7 | } 8 | 9 | .box{ 10 | width: 25%; 11 | height: 200px; 12 | } 13 | 14 | .box1{ 15 | width: 60%; 16 | background-color: rebeccapurple; 17 | } 18 | 19 | .box2{ 20 | width: 40%; 21 | background-color: chartreuse; 22 | } 23 | 24 | .box3{ 25 | background-color: aqua; 26 | } 27 | 28 | .box4{ 29 | background-color: lightcoral; 30 | } 31 | 32 | .box5{ 33 | background-color: steelblue; 34 | } 35 | 36 | .box6{ 37 | background-color: slategrey; 38 | } 39 | 40 | @media(max-width: 480px){ 41 | .box{ 42 | width: 100%; 43 | } 44 | 45 | .box1{ 46 | height: 100vh; 47 | } 48 | } 49 | 50 | @media(min-width: 480px) and (max-width: 720px){ 51 | .box{ 52 | width: 50%; 53 | } 54 | .box1{ 55 | width: 100%; 56 | } 57 | .box6{ 58 | width: 100%; 59 | } 60 | } 61 | 62 | @media(min-width: 720px){ 63 | .container{ 64 | width: 720px; 65 | } 66 | } -------------------------------------------------------------------------------- /WinterBatch2018/Dhruva/Responsive Design/columndrop.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | height: 189px; 3 | } 4 | .box.one{ 5 | background-color: #00ffd2; 6 | height:400px; 7 | } 8 | .two{ 9 | background-color: #ff0000; 10 | } 11 | .three{ 12 | background-color: #ff9a00; 13 | } 14 | .four{ 15 | background-color: #ffb709; 16 | } 17 | .five{ 18 | background-color: #ffce00; 19 | } 20 | @media screen and (min-width:801px) and (max-width: 1200px){ 21 | .big-box{ 22 | display:flex; 23 | flex-wrap: wrap; 24 | } 25 | .box.one{ 26 | width:80%; 27 | order:1; 28 | } 29 | .box.two{ 30 | width:20%; 31 | order:0; 32 | height: 400px; 33 | } 34 | .box{ 35 | width:100%; 36 | order:2; 37 | } 38 | } 39 | @media screen and (min-width:1201px){ 40 | .big-box{ 41 | display:flex; 42 | flex-wrap: wrap; 43 | } 44 | .box.one{ 45 | width:60%; 46 | order:1; 47 | } 48 | .box.two{ 49 | width:20%; 50 | order:0; 51 | height: 400px; 52 | } 53 | .box.three{ 54 | width:20%; 55 | order:2; 56 | height: 400px; 57 | } 58 | .box{ 59 | width:100%; 60 | order:3; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Sonali/fluid/mostly_fluid.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap:wrap; 4 | max-width:800px; 5 | } 6 | .box{ 7 | width:100%; 8 | height: 700px; 9 | } 10 | .box1{ 11 | background-color:navy; 12 | height: 700px; 13 | } 14 | .box2{ 15 | background-color:blue; 16 | height: 200px; 17 | } 18 | .box3{ 19 | background-color: lightblue; 20 | height:200px; 21 | } 22 | .box4{ 23 | background-color:violet; 24 | height:100px; 25 | } 26 | @media screen and (min-width:480px){ 27 | .box1{ 28 | width:100%; 29 | height:600px; 30 | } 31 | .box2{ 32 | width:50%; 33 | height:300px; 34 | } 35 | .box3{ 36 | width:50%; 37 | height: 300px; 38 | } 39 | .box4{ 40 | width:100%; 41 | height:200px; 42 | } 43 | } 44 | @media screen and (min-width:720px){ 45 | .box1{ 46 | width:80%; 47 | height:400px; 48 | } 49 | .box2{ 50 | width:20%; 51 | height:400px; 52 | } 53 | .box3{ 54 | width:50%; 55 | height:300px; 56 | } 57 | .box4{ 58 | width:50%; 59 | height:300px; 60 | } 61 | } 62 | @media screen and (min-width:1000px){ 63 | .container{ 64 | margin:0 auto; 65 | } 66 | } -------------------------------------------------------------------------------- /vatsala/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 vatsalanarang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Layout Shifter/ls.css: -------------------------------------------------------------------------------- 1 | .big-box 2 | { 3 | width: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | 8 | .box 9 | { 10 | width: 100%; 11 | min-height: 150px; 12 | } 13 | 14 | .box0 15 | { 16 | background: blue; 17 | } 18 | 19 | .box1 20 | { 21 | background: lightblue; 22 | } 23 | 24 | .box2 25 | { 26 | background: green; 27 | } 28 | 29 | .box3 30 | { 31 | background: red; 32 | } 33 | 34 | @media screen and (min-width:500px) 35 | { 36 | .box0 37 | { 38 | width: 25%; 39 | } 40 | #inner-box 41 | { 42 | width: 75%; 43 | } 44 | } 45 | 46 | @media screen and (min-width:800px) { 47 | .big-box 48 | { 49 | 50 | width: 800px; 51 | margin-left: auto; 52 | margin-right: auto; 53 | } 54 | 55 | .box0 56 | { 57 | width:25%; 58 | } 59 | 60 | #inner-box 61 | { 62 | width:50%; 63 | } 64 | 65 | .box3 66 | { 67 | width: 25%; 68 | } 69 | } -------------------------------------------------------------------------------- /Yogi/Layout_shifer.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width: 100%; 3 | height: 200px; 4 | } 5 | .container{ 6 | display: flex; 7 | flex-wrap: wrap; 8 | max-width: 800px; 9 | height: 500px; 10 | margin: 0 auto; 11 | } 12 | .big 13 | { 14 | width: 90%; 15 | height: 100%; 16 | } 17 | .box1{ 18 | background-color: darkblue; 19 | height: 15%; 20 | 21 | } 22 | .box2{ 23 | background-color: darkslateblue; 24 | height: 55%; 25 | } 26 | .box3{ 27 | background-color: lightskyblue; 28 | height: 30%; 29 | } 30 | 31 | @media screen and (min-width: 400px) { 32 | .box1{ 33 | height: 20%; 34 | } 35 | .box2{ 36 | height: 45%; 37 | } 38 | .box3{ 39 | height:35% ; 40 | } 41 | .big{ 42 | width: 100%; 43 | } 44 | 45 | } 46 | @media screen and (min-width: 600px) { 47 | .box1{ 48 | height: 100%; 49 | width: 10%; 50 | float: left;; 51 | } 52 | .box2{ 53 | height: 50%; 54 | width: 90% 55 | } 56 | .box3 { 57 | height: 50%; 58 | width: 90%; 59 | } 60 | .big{ 61 | width: 90%; 62 | } 63 | 64 | 65 | } -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/shifterstyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #parent { 7 | width: 100%; 8 | display: flex; 9 | flex-wrap : wrap; 10 | } 11 | #parent2 { 12 | width: 100%; 13 | display: flex; 14 | flex-wrap : wrap; 15 | } 16 | #first { 17 | background: #b71c1c; 18 | height: 15%; 19 | width: 100%; 20 | } 21 | #second { 22 | width: 100%; 23 | height: 70%; 24 | background: #f44336; 25 | } 26 | #third { 27 | height: 100%; 28 | width: 100%; 29 | background: #ef9a9a; 30 | } 31 | @media screen and (min-width : 550px) { 32 | #first { 33 | height: 20%; 34 | } 35 | #second { 36 | height: 60%; 37 | } 38 | #third { 39 | height: 70%; 40 | } 41 | } 42 | @media screen and (min-width : 900px) { 43 | #parent { 44 | width: 100%; 45 | height: 100%; 46 | } 47 | #parent2 { 48 | width: 80%; 49 | height: 100%; 50 | } 51 | #first { 52 | height: 100%; 53 | width: 20%; 54 | } 55 | #second { 56 | width: 100%; 57 | height: 50%; 58 | } 59 | #third { 60 | width: 100%; 61 | height: 50%; 62 | } 63 | } 64 | @media screen and (min-width : 1100px) { 65 | #parent { 66 | max-width: 1100px; 67 | margin: 0 auto; 68 | } 69 | } -------------------------------------------------------------------------------- /Arvind-Kalra/Column Drop/CDStyle.css: -------------------------------------------------------------------------------- 1 | .parent{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: flex-start; 5 | } 6 | .block1{ 7 | height: 200px; 8 | background-color: #ff0e09; 9 | } 10 | .block2{ 11 | height: 200px; 12 | background-color: #c62828; 13 | } 14 | .block3{ 15 | height: 200px; 16 | background-color: #e53935; 17 | } 18 | @media screen and (max-width: 992px){ 19 | .block1,.block2,.block3{ 20 | width:100%; 21 | } 22 | } 23 | @media screen and (min-width: 992px) and (max-width: 1200px){ 24 | .block1{ 25 | order:2; 26 | width:75%; 27 | height: 400px; 28 | } 29 | .block2{ 30 | order:1; 31 | width: 25%; 32 | height: 400px; 33 | } 34 | .block3{ 35 | order:3; 36 | width:100%; 37 | } 38 | } 39 | @media screen and (min-width: 1200px){ 40 | .block1{ 41 | order:2; 42 | width:50%; 43 | height: 400px; 44 | } 45 | .block2{ 46 | order:1; 47 | width: 25%; 48 | height: 400px; 49 | } 50 | .block3{ 51 | order:3; 52 | width:25%; 53 | height: 400px; 54 | } 55 | } -------------------------------------------------------------------------------- /Piyush/column-drop.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | 7 | .box { 8 | width: 100%; 9 | height: 200px; 10 | } 11 | 12 | .box1 { 13 | background-color: palevioletred; 14 | 15 | } 16 | 17 | .box2 { 18 | background-color: indianred; 19 | 20 | } 21 | 22 | .box3 { 23 | background-color: green; 24 | 25 | } 26 | 27 | .box4 { 28 | background-color: gold; 29 | 30 | } 31 | 32 | .box5 { 33 | background-color: greenyellow; 34 | 35 | } 36 | 37 | .box6 { 38 | background-color: aquamarine; 39 | 40 | } 41 | 42 | 43 | @media screen and (min-width: 600px) { 44 | .box1 { 45 | width: 80%; 46 | order: 2; 47 | } 48 | 49 | .box2 { 50 | width: 20%; 51 | order: 1; 52 | } 53 | .box3, .box4, .box5, .box6 { 54 | width: 100%; 55 | } 56 | .box3 { 57 | order: 3; 58 | } 59 | .box4 { 60 | order:4; 61 | } 62 | .box5 { 63 | order: 5; 64 | 65 | } 66 | .box6 { 67 | order: 6; 68 | } 69 | } 70 | @media screen and (min-width:830px){ 71 | .container{ 72 | margin: 0 ; 73 | } 74 | } -------------------------------------------------------------------------------- /SHRAYANSH JAIN/column-drop.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | } 6 | 7 | .box { 8 | width: 100%; 9 | height: 200px; 10 | } 11 | 12 | .box1 { 13 | background-color: palevioletred; 14 | 15 | } 16 | 17 | .box2 { 18 | background-color: indianred; 19 | 20 | } 21 | 22 | .box3 { 23 | background-color: green; 24 | 25 | } 26 | 27 | .box4 { 28 | background-color: gold; 29 | 30 | } 31 | 32 | .box5 { 33 | background-color: greenyellow; 34 | 35 | } 36 | 37 | .box6 { 38 | background-color: aquamarine; 39 | 40 | } 41 | 42 | 43 | @media screen and (min-width: 600px) { 44 | .box1 { 45 | width: 80%; 46 | order: 2; 47 | } 48 | 49 | .box2 { 50 | width: 20%; 51 | order: 1; 52 | } 53 | .box3, .box4, .box5, .box6 { 54 | width: 100%; 55 | } 56 | .box3 { 57 | order: 3; 58 | } 59 | .box4 { 60 | order:4; 61 | } 62 | .box5 { 63 | order: 5; 64 | 65 | } 66 | .box6 { 67 | order: 6; 68 | } 69 | } 70 | @media screen and (min-width:830px){ 71 | .container{ 72 | margin: 0 ; 73 | } 74 | } -------------------------------------------------------------------------------- /WinterBatch2018/Shruti/columnHW.css: -------------------------------------------------------------------------------- 1 | .bigbox{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .box{ 7 | width:480px; 8 | height:600px; 9 | } 10 | .box1{ 11 | background-color: #1d3854; 12 | } 13 | .box2{ 14 | background-color: #6ea09d; 15 | } 16 | .box3 { 17 | background-color: #e2e5e9; 18 | 19 | } 20 | @media screen and (min-width: 440px) and (max-width:600px) 21 | { 22 | .box { 23 | height: 400px; 24 | width: 100% 25 | } 26 | } 27 | @media screen and (min-width: 600px) and (max-width:800px) 28 | { 29 | .box1{ 30 | width:66.6666%; 31 | height:600px; 32 | order:2; 33 | } 34 | .box2{ 35 | width:33.3333%; 36 | height:600px; 37 | order:1; 38 | } 39 | .box3 { 40 | width:100%; 41 | height:150px; 42 | order:3; 43 | } 44 | } 45 | @media screen and (min-width:800px) 46 | { 47 | .box{ 48 | height:600px; 49 | } 50 | .box1{ 51 | width:50%; 52 | order:2; 53 | } 54 | .box2{ 55 | width:25%; 56 | order:1; 57 | } 58 | .box3 { 59 | width:25%; 60 | order:3; 61 | } 62 | } -------------------------------------------------------------------------------- /PrashantVashisht/mostlyfluid.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex; 3 | flex-wrap: wrap; 4 | } 5 | .box{ 6 | width:100%; 7 | height:50px; 8 | 9 | } 10 | .container{ 11 | width:400px; 12 | display:flex; 13 | flex-wrap: wrap; 14 | } 15 | .one{ 16 | background-color: orangered; 17 | } 18 | .two{ 19 | background-color: red; 20 | } 21 | .three{ 22 | background-color: lightgreen; 23 | } 24 | .four{ 25 | background-color: blanchedalmond; 26 | } 27 | .five{ 28 | background-color: royalblue; 29 | } 30 | 31 | @media screen and (min-width: 320px) { 32 | .box{ 33 | width:50%; 34 | height:60px; 35 | } 36 | .box.one{ 37 | width:100%; 38 | height:100px; 39 | } 40 | .box.four{ 41 | height:30px; 42 | } 43 | .box.five{ 44 | height:30px; 45 | } 46 | 47 | } 48 | @media screen and (min-width: 420px) { 49 | .box{ 50 | width:33%; 51 | height:50%; 52 | } 53 | .box.one{ 54 | width:60%; 55 | } 56 | .box.two{ 57 | width:40%; 58 | } 59 | 60 | } 61 | @media screen and (min-width: 720px) { 62 | .container{ 63 | margin:0 auto; 64 | } 65 | 66 | } -------------------------------------------------------------------------------- /WinterBatch2018/amritha anil/flexlayout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | flex layout 10 | 41 | 42 | 43 | 44 |
45 |
1
46 |
2
47 |
3
48 |
4
49 |
5
50 |
6
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /pritam/fluid/mostly_fluid.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap:wrap; 4 | max-width:800px; 5 | } 6 | .box{ 7 | width:100%; 8 | height: 700px; 9 | } 10 | .box1{ 11 | background-color:navy; 12 | height: 700px; 13 | } 14 | .box2{ 15 | background-color:blue; 16 | height: 200px; 17 | } 18 | .box3{ 19 | background-color: lightblue; 20 | height:200px; 21 | } 22 | .box4{ 23 | background-color:violet; 24 | height:100px; 25 | } 26 | @media screen and (min-width:480px){ 27 | .box1{ 28 | width:100%; 29 | height:600px; 30 | } 31 | .box2{ 32 | width:50%; 33 | height:300px; 34 | } 35 | .box3{ 36 | width:50%; 37 | height: 300px; 38 | } 39 | .box4{ 40 | width:100%; 41 | height:200px; 42 | } 43 | } 44 | @media screen and (min-width:720px){ 45 | .box1{ 46 | width:80%; 47 | height:400px; 48 | } 49 | .box2{ 50 | width:20%; 51 | height:400px; 52 | } 53 | .box3{ 54 | width:50%; 55 | height:300px; 56 | } 57 | .box4{ 58 | width:50%; 59 | height:300px; 60 | } 61 | } 62 | @media screen and (min-width:1000px){ 63 | .container{ 64 | margin:0 auto; 65 | } 66 | } -------------------------------------------------------------------------------- /ChetanJain/hw.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap:wrap; 4 | } 5 | .box{ 6 | width:100%; 7 | height:100px; 8 | } 9 | .boxes{ 10 | width:100%; 11 | height:600px; 12 | } 13 | 14 | .box1{ 15 | width:100%; 16 | background-color: yellow; 17 | height:100px; 18 | } 19 | .box2{ 20 | background-color: violet; 21 | width: 100%; 22 | height:20%; 23 | } 24 | .box3{ 25 | background-color: silver; 26 | width: 100%; 27 | height:70%; 28 | } 29 | @media screen and (min-width:600px){ 30 | .box1{ 31 | height:190px; 32 | } 33 | .box2{ 34 | height:180px; 35 | } 36 | .box3{ 37 | height:450px; 38 | } 39 | } 40 | @media screen and (min-width: 900px){ 41 | .container{ 42 | margin: auto 20px; 43 | } 44 | .box1{ 45 | height:600px; 46 | width: 20%; 47 | } 48 | .boxes{ 49 | width:80%; 50 | height:600px; 51 | } 52 | .box2{ 53 | width:100%; 54 | height:50%; 55 | } 56 | .box3{ 57 | width:100%; 58 | height:50%; 59 | } 60 | 61 | } 62 | @media screen and (min-width:1200px){ 63 | .container{ 64 | margin:0 150px; 65 | } 66 | } -------------------------------------------------------------------------------- /Workshop/Anshul Wadhawan/Column Drop/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0; 3 | margin: 0; 4 | padding-top: 1vh; 5 | } 6 | .parent{ 7 | display: flex; 8 | flex-wrap: wrap; 9 | } 10 | #box1{ 11 | background-color: #0d47a1; 12 | height: 110vh; 13 | width: 100%; 14 | } 15 | #box2{ 16 | background-color: #2962ff; 17 | height: 50vh; 18 | width: 100%; 19 | } 20 | #box3{ 21 | background-color: #82b1ff ; 22 | height: 50vh; 23 | width: 100%; 24 | } 25 | 26 | 27 | @media screen and (min-width: 480px) and (max-width: 720px) 28 | { 29 | 30 | #box1,#box2,#box3{ 31 | height:54vh ; 32 | } 33 | 34 | 35 | } 36 | @media screen and (min-width: 720px) and (max-width: 900px) 37 | { 38 | 39 | #box1{ 40 | height: 99vh; 41 | width: 70%; 42 | order: 2; 43 | } 44 | #box2{ 45 | height:99vh ; 46 | width: 30%; 47 | order: 1; 48 | } 49 | #box3{ 50 | height: 40vh; 51 | order: 3; 52 | } 53 | } 54 | @media screen and (min-width: 900px) 55 | { 56 | 57 | #box1{ 58 | height:99vh ; 59 | width: 50%; 60 | order: 2; 61 | } 62 | #box2{ 63 | height:99vh ; 64 | width: 25%; 65 | order: 1; 66 | } 67 | #box3{ 68 | height: 99vh; 69 | width: 25%; 70 | order:3; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /Avani/Layout shifter/style.css: -------------------------------------------------------------------------------- 1 | .spar, .par 2 | { 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | 8 | .box1 9 | { 10 | background-color: #e1bee7; 11 | display: flex; 12 | } 13 | 14 | .box2 15 | { 16 | background-color:#9c27b0; 17 | } 18 | 19 | 20 | .box3 21 | { 22 | background-color: #ea80fc; 23 | } 24 | 25 | 26 | 27 | 28 | @media screen and (max-width: 768px) 29 | { 30 | .par, .box1, .box2, .box3 31 | { 32 | width: 100%; 33 | } 34 | .box1 35 | { 36 | height: 10vh; 37 | } 38 | 39 | 40 | .box2 41 | { 42 | height: 70vh; 43 | } 44 | 45 | .box3 46 | { 47 | height: 100vh; 48 | } 49 | } 50 | 51 | 52 | 53 | @media screen and (min-width: 768px) and (max-width: 992px) 54 | { 55 | .par, .box1, .box2, .box3 56 | { 57 | width: 100%; 58 | } 59 | .box1 60 | { 61 | height: 20vh; 62 | } 63 | 64 | 65 | .box2 66 | { 67 | height: 50vh; 68 | } 69 | 70 | .box3 71 | { 72 | height: 60vh; 73 | } 74 | 75 | } 76 | 77 | 78 | 79 | 80 | @media screen and (min-width: 992px) 81 | { 82 | .par 83 | { 84 | width:80%; 85 | } 86 | .box1 87 | { 88 | width: 20%; 89 | flex-direction: column; 90 | } 91 | 92 | .box2, .box3 93 | { 94 | height: 50vh; 95 | width: 100%; 96 | } 97 | 98 | } -------------------------------------------------------------------------------- /ChetanJain/columndrop.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex; 3 | flex-wrap:wrap; 4 | } 5 | .box{ 6 | width: 100%; 7 | height:200px; 8 | } 9 | .box1{ 10 | background-color: indianred; 11 | height:1400px; 12 | } 13 | .box2{ 14 | background-color: olive; 15 | height:800px; 16 | } 17 | .box3{ 18 | background-color: navy; 19 | height:600px; 20 | } 21 | @media screen and (min-width: 600px){ 22 | .box1{ 23 | height:400px; 24 | } 25 | .box2{ 26 | height:600px; 27 | } 28 | .box3{ 29 | height:600px; 30 | } 31 | } 32 | @media screen and (min-width: 900px){ 33 | .box1{ 34 | order:2; 35 | width:60%; 36 | height:990px; 37 | } 38 | .box2{ 39 | order:1; 40 | width:40%; 41 | height:990px; 42 | } 43 | .box3{ 44 | order:3; 45 | width:100%; 46 | height:300px; 47 | } 48 | } 49 | @media screen and (min-width:1200px){ 50 | .box1{ 51 | order:2; 52 | width:40%; 53 | height:628px; 54 | } 55 | .box2{ 56 | order:1; 57 | width:30%; 58 | height:628px; 59 | } 60 | .box3{ 61 | order:3; 62 | width:30%; 63 | height:628px; 64 | } 65 | } -------------------------------------------------------------------------------- /pratyush/design/column-drop/column-drop.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | .parent{ 6 | display: flex; 7 | flex-wrap: wrap; 8 | } 9 | .box1{ 10 | height: 100vh; 11 | width: 100%; 12 | background-color: #1b6d85; 13 | } 14 | .box2,.box3{ 15 | height: 50vh; 16 | width:100%; 17 | background-color: #1c82cc; 18 | } 19 | .box3{ 20 | background-color: wheat; 21 | } 22 | 23 | /*stage 2*/ 24 | @media screen and (max-width:820px ) and (min-width: 680px) { 25 | .box1,.box2,.box3{ 26 | height: 50vh; 27 | } 28 | } 29 | /*stage 3*/ 30 | @media screen and (max-width: 1025px) and (min-width:820px){ 31 | .box1{ 32 | order:2; 33 | width:75%; 34 | height: 100vh; 35 | } 36 | .box2{ 37 | order:1; 38 | width:25%; 39 | height:100vh; 40 | } 41 | .box3{ 42 | order:3; 43 | } 44 | } 45 | 46 | /*stage 4*/ 47 | @media screen and (min-width:1024px) { 48 | .box1{ 49 | width:50%; 50 | order:2; 51 | height: 100vh; 52 | } 53 | .box2{ 54 | order:1; 55 | width:25%; 56 | height: 100vh; 57 | } 58 | .box3{ 59 | order:3; 60 | width:25%; 61 | height: 100vh; 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /WinterBatch2018/aishanya/mostly fluid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 35 | 36 | 37 | 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 | -------------------------------------------------------------------------------- /Yash Yadav/23juneMostlyFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /Devansh/column-drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 41 | 42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 | -------------------------------------------------------------------------------- /atif abdus samad/column-drop.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 800px; 5 | margin: 0 auto; 6 | } 7 | 8 | .box{ 9 | width: 100%; 10 | height: 200px; 11 | 12 | } 13 | 14 | .box1{ 15 | background-color: red; 16 | } 17 | 18 | .box2{ 19 | background-color: green; 20 | } 21 | 22 | .box3{ 23 | background-color: aqua; 24 | } 25 | 26 | .box4{ 27 | background-color: darkorange; 28 | } 29 | 30 | .box5{ 31 | background-color: purple; 32 | } 33 | 34 | .box6{ 35 | background-color: brown; 36 | } 37 | 38 | @media screen and (min-width: 400px){ 39 | 40 | .box{ 41 | width: 100%; 42 | height: 150px; 43 | } 44 | 45 | } 46 | 47 | @media screen and (min-width: 600px){ 48 | 49 | .box{ 50 | width: 100%; 51 | height: 100px; 52 | } 53 | 54 | .box1{ 55 | order: 2; 56 | width: 80%; 57 | height: 200px; 58 | } 59 | 60 | .box2{ 61 | order: 1; 62 | width: 20%; 63 | height: 200px; 64 | } 65 | 66 | .box3{ 67 | order: 3; 68 | } 69 | 70 | .box4{ 71 | order: 4; 72 | } 73 | 74 | .box5{ 75 | order: 5; 76 | } 77 | 78 | .box6{ 79 | order: 6; 80 | } 81 | } -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flex+Media_Basic 6 | 65 | 66 | 67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | -------------------------------------------------------------------------------- /Practice Material/Solutions/flexbox.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | 8 | 9 | .box1,.box2,.box3,.box4,.box5 { 10 | height: 200px; 11 | width: 100%; 12 | transition: width .1s; 13 | } 14 | 15 | .box1 { 16 | background-color: red; 17 | } 18 | 19 | .box2 { 20 | background-color: blue; 21 | } 22 | 23 | .box3 { 24 | background-color: green; 25 | } 26 | 27 | .box4 { 28 | background-color: orange; 29 | } 30 | 31 | .box5 { 32 | background-color: gray; 33 | } 34 | 35 | /* Small screen lesser than 720px*/ 36 | 37 | @media screen and (min-width: 480px) { 38 | 39 | .box1 { 40 | width: 100%; 41 | 42 | } 43 | 44 | 45 | .box2, .box3 { 46 | width: 50%; 47 | 48 | } 49 | 50 | .box4, .box5 { 51 | width: 50%; 52 | 53 | } 54 | 55 | } 56 | 57 | /* Screen more than 720px*/ 58 | 59 | @media screen and (min-width: 720px) { 60 | 61 | .box1 { 62 | width: 100%; 63 | 64 | } 65 | 66 | 67 | .box2, .box3 ,.box4 ,.box5 { 68 | width: 25%; 69 | 70 | } 71 | 72 | } -------------------------------------------------------------------------------- /Practice Material/Solutions/columndrop.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: flex; 6 | display: -webkit-flex; 7 | flex-flow: row wrap; 8 | -webkit-flex-flow: row wrap; 9 | } 10 | 11 | 12 | .box1,.box2,.box3 { 13 | /* add code */ 14 | width: 100%; 15 | height: 600px; 16 | } 17 | 18 | .box1 { 19 | background-color: rgb(0,0,250); 20 | } 21 | .box2 { 22 | background-color: rgb(0,0,140); 23 | } 24 | 25 | .box3 { 26 | background-color: rgb(0,260,250); 27 | } 28 | 29 | /* Small screen lesser than 600px*/ 30 | 31 | @media screen and (min-width: 600px) { 32 | 33 | /* add code */ 34 | .box1 { 35 | width: 60%; 36 | order: 2; 37 | } 38 | 39 | .box2 { 40 | width: 40%; 41 | order: 1; 42 | } 43 | 44 | .box3 { 45 | width: 100%; 46 | order: 3; 47 | } 48 | } 49 | 50 | 51 | 52 | /* add media query for Screen more than 720px*/ 53 | @media screen and (min-width: 800px) { 54 | 55 | .box2 { 56 | width: 20%; 57 | } 58 | 59 | .box3 { 60 | width: 20%; 61 | } 62 | } -------------------------------------------------------------------------------- /Nitin/coloumn_drop.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | max-width: 920px; 5 | } 6 | .box{ 7 | height: 200px; 8 | width: 100%; 9 | } 10 | .box1{ 11 | background-color: red; 12 | } 13 | .box2{ 14 | background-color: pink; 15 | } 16 | .box3{ 17 | background-color: green; 18 | } 19 | .box4{ 20 | background-color: cyan; 21 | } 22 | .box5{ 23 | background-color: orange; 24 | } 25 | 26 | 27 | @media screen and (min-width:620px ){ 28 | .box1{ 29 | order:2; 30 | width: 80%; 31 | } 32 | .box2{ 33 | order:1; 34 | width:20%; 35 | } 36 | .box3,.box4,.box5{ 37 | width:100%; 38 | } 39 | .box3{ 40 | order:3; 41 | 42 | 43 | } 44 | .box4{ 45 | order:4; 46 | } 47 | .box5{ 48 | order:5; 49 | } 50 | } 51 | 52 | @media screen and (min-width:780px ){ 53 | .box1{ 54 | order:2; 55 | width: 50% 56 | } 57 | .box2{ 58 | order:1; 59 | width:25%; 60 | } 61 | .box3{ 62 | order:3; 63 | width: 25% 64 | 65 | } 66 | .box4,.box5{ 67 | width:100%; 68 | } 69 | 70 | 71 | 72 | 73 | .box4{ 74 | order:4; 75 | } 76 | .box5{ 77 | order:5; 78 | } 79 | 80 | 81 | } 82 | @media screen and (min-width: 920px){ 83 | .container{ 84 | margin: 0 auto; 85 | } 86 | -------------------------------------------------------------------------------- /WinterBatch2018/Anshuman/column drop style.css: -------------------------------------------------------------------------------- 1 | #box1{ 2 | background-color: blue; 3 | width: 100%; 4 | height: 300px; 5 | order: 1; 6 | } 7 | #box2{ 8 | background-color: red; 9 | width: 100%; 10 | height: 200px; 11 | order: 2; 12 | } 13 | #box3{ 14 | background-color: chartreuse; 15 | width: 100%; 16 | height: 100px; 17 | order: 3; 18 | } 19 | .block{ 20 | flex-wrap: wrap; 21 | justify-content: center; 22 | display: flex; 23 | flex-direction: column; 24 | } 25 | @media screen and (min-width: 480px) and (max-width: 780px){ 26 | #box1{ 27 | width: 75%; 28 | order: 2; 29 | } 30 | #box2{ 31 | width: 25%; 32 | height: 300px; 33 | order: 1; 34 | } 35 | #box3{ 36 | width: 100%; 37 | order: 3; 38 | } 39 | .block{ 40 | flex-direction: row; 41 | } 42 | } 43 | @media screen and (min-width: 780px) { 44 | #box1{ 45 | width: 50%; 46 | height: 300px; 47 | order: 2; 48 | } 49 | #box2{ 50 | width: 25%; 51 | height: 300px; 52 | order: 1; 53 | } 54 | #box3{ 55 | height: 300px; 56 | width: 25%; 57 | order: 3; 58 | } 59 | .block{ 60 | flex-direction: row; 61 | } 62 | } -------------------------------------------------------------------------------- /WinterBatch2018/Nikita Rai/Mostly Fluid/mf.css: -------------------------------------------------------------------------------- 1 | .big-box { 2 | width: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | flex-wrap: wrap; /*All wrapped inside the container with same dimensions and responsive: no media queries*/ 6 | } 7 | 8 | .box{ 9 | 10 | width: 100%; 11 | min-height: 60px; 12 | } 13 | 14 | .box0{ 15 | 16 | background: blue; 17 | } 18 | .box1{ 19 | 20 | background: lightblue; 21 | } 22 | .box2{ 23 | 24 | background: grey; 25 | } 26 | .box3 27 | { 28 | background: green; 29 | } 30 | 31 | .box4 32 | { 33 | background: yellow; 34 | } 35 | 36 | @media (min-width: 500px) and (max-width: 900px) 37 | { 38 | 39 | .big-box 40 | { 41 | flex-direction: unset; 42 | margin-left: auto; 43 | margin-right: auto; 44 | } 45 | 46 | .box0 47 | { 48 | width: 100%; 49 | } 50 | 51 | .box1,.box2,.box3, .box4 52 | { 53 | width: 50%; 54 | } 55 | } 56 | 57 | @media (min-width: 900px) 58 | { 59 | .big-box 60 | { 61 | flex-direction: row; 62 | margin-left: 0 auto; 63 | margin-right: 0 auto; 64 | } 65 | 66 | .box0 67 | { 68 | width: 60%; 69 | } 70 | 71 | .box1 72 | { 73 | width: 40%; 74 | } 75 | 76 | .box2, .box3, .box4 77 | { 78 | width: 33.33%; 79 | } 80 | } -------------------------------------------------------------------------------- /Workshop/ParikanshAhluwalia/fluidstyle.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding:0; 4 | } 5 | .parent { 6 | display: flex; 7 | flex-wrap : wrap; 8 | } 9 | .box { 10 | height: 40%; 11 | width: 100%; 12 | } 13 | #first { 14 | height: 110%; 15 | background: #004d40; 16 | } 17 | #second { 18 | background: #009688; 19 | } 20 | #third { 21 | background: #4db6ac; 22 | } 23 | #fourth { 24 | background: #b2dfdb; 25 | } 26 | #fifth { 27 | background: #b2ebf2 ; 28 | } 29 | @media screen and (min-width : 550px) { 30 | #first { 31 | height: 50%; 32 | } 33 | #second , #third { 34 | height: 40%; 35 | width: 50%; 36 | } 37 | #fourth , #fifth{ 38 | width: 100%; 39 | height: 80%; 40 | } 41 | } 42 | 43 | @media screen and (min-width : 900px) { 44 | .parent { 45 | margin : 0 auto; 46 | max-width: 1000px; 47 | } 48 | #first { 49 | height: 50%; 50 | width: 60%; 51 | } 52 | #second { 53 | height: 50%; 54 | width: 40%; 55 | } 56 | #third , #fourth , #fifth{ 57 | width: 33.33333%; 58 | height: 50%; 59 | } 60 | } 61 | @media screen and (min-width : 1200px) { 62 | /*.parent{ 63 | width: 1200px; 64 | margin: auto; 65 | }*/ 66 | #first { 67 | max-width: 720px; 68 | } 69 | #second { 70 | max-width: 480px; 71 | } 72 | #third , #fourth , #fifth { 73 | max-width: 400px; 74 | } 75 | } -------------------------------------------------------------------------------- /Sanket/Mostly Fluid/mostly_fluid_styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .box { 7 | width: 300px; 8 | height: 300px; 9 | } 10 | .box1 { 11 | background-color: #164388; 12 | } 13 | .box2 { 14 | background-color: #3979d9; 15 | } 16 | .box3 { 17 | background-color: #cadbf8; 18 | } 19 | .box4 { 20 | background-color: #d6e0ef; 21 | } 22 | .box5 { 23 | background-color: #e0e2e6; 24 | } 25 | 26 | @media(min-width: 720px) 27 | { 28 | .box1 { 29 | width: 50%; 30 | } 31 | .box2 { 32 | width: 30%; 33 | } 34 | .box3 { 35 | width: 26.6%; 36 | } 37 | .box4 { 38 | width: 26.6%; 39 | } 40 | .box5 { 41 | width: 26.6%; 42 | } 43 | } 44 | @media(min-width: 480px) and (max-width: 720px) 45 | { 46 | .box1 { 47 | width: 100%; 48 | } 49 | .box2 { 50 | width: 50%; 51 | } 52 | .box3 { 53 | width: 50%; 54 | } 55 | .box4 { 56 | width: 50%; 57 | } 58 | .box5 { 59 | width: 50%; 60 | } 61 | } 62 | @media(max-width: 480px) 63 | { 64 | .box1 { 65 | width: 100%; 66 | height: 630px; 67 | } 68 | .box2 { 69 | width: 100%; 70 | height: 310px; 71 | } 72 | .box3 { 73 | width: 100%; 74 | height: 310px; 75 | } 76 | .box4 { 77 | width: 100%; 78 | height: 310px; 79 | } 80 | .box5 { 81 | width: 100%; 82 | height: 310px; 83 | } 84 | } -------------------------------------------------------------------------------- /Practice Material/Layout-shifter/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: flex; 6 | display: -webkit-flex; 7 | flex-flow: row wrap; 8 | -webkit-flex-flow: row wrap; 9 | } 10 | 11 | .container div { 12 | min-height: 150px; 13 | min-width: 150px; 14 | } 15 | 16 | .box1, .box2, .box3,.box4 { 17 | width: 100%; 18 | } 19 | 20 | .box1 { 21 | background-color: rgb(0,0,250); 22 | } 23 | .box2 { 24 | background-color: rgb(0,0,140); 25 | } 26 | 27 | .box3 { 28 | background-color: rgb(0,260,250); 29 | } 30 | 31 | /* Small screen lesser than 600px*/ 32 | 33 | @media screen and (min-width: 657px) { 34 | 35 | /* add code */ 36 | .box1 { 37 | width: 25%; 38 | 39 | } 40 | 41 | .box2 { 42 | width: 75%; 43 | 44 | } 45 | 46 | } 47 | 48 | 49 | 50 | /* add media query for Screen more than 720px*/ 51 | @media screen and (min-width: 800px) { 52 | .container { 53 | width: 800px; 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | } -------------------------------------------------------------------------------- /Practice Material/Solutions/layoutShifter.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: flex; 6 | display: -webkit-flex; 7 | flex-flow: row wrap; 8 | -webkit-flex-flow: row wrap; 9 | } 10 | 11 | .container div { 12 | min-height: 150px; 13 | min-width: 150px; 14 | } 15 | 16 | .box1, .box2, .box3,.box4 { 17 | width: 100%; 18 | } 19 | 20 | .box1 { 21 | background-color: rgb(0,0,250); 22 | } 23 | .box2 { 24 | background-color: rgb(0,0,140); 25 | } 26 | 27 | .box3 { 28 | background-color: rgb(0,260,250); 29 | } 30 | 31 | /* Small screen lesser than 600px*/ 32 | 33 | @media screen and (min-width: 657px) { 34 | 35 | /* add code */ 36 | .box1 { 37 | width: 25%; 38 | 39 | } 40 | 41 | .box2 { 42 | width: 75%; 43 | 44 | } 45 | 46 | } 47 | 48 | 49 | 50 | /* add media query for Screen more than 720px*/ 51 | @media screen and (min-width: 800px) { 52 | .container { 53 | width: 800px; 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | } -------------------------------------------------------------------------------- /Sarthak Goel/patterns-layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LayoutShifter 6 | 51 | 52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /mansikhemka/Layout-shifter/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: flex; 6 | display: -webkit-flex; 7 | flex-flow: row wrap; 8 | -webkit-flex-flow: row wrap; 9 | } 10 | 11 | .container div { 12 | min-height: 150px; 13 | min-width: 150px; 14 | } 15 | 16 | .box1, .box2, .box3,.box4 { 17 | width: 100%; 18 | } 19 | 20 | .box1 { 21 | background-color: rgb(0,0,250); 22 | } 23 | .box2 { 24 | background-color: rgb(0,0,140); 25 | } 26 | 27 | .box3 { 28 | background-color: rgb(0,260,250); 29 | } 30 | 31 | /* Small screen lesser than 600px*/ 32 | 33 | @media screen and (min-width: 657px) { 34 | 35 | /* add code */ 36 | .box1 { 37 | width: 25%; 38 | 39 | } 40 | 41 | .box2 { 42 | width: 75%; 43 | 44 | } 45 | 46 | } 47 | 48 | 49 | 50 | /* add media query for Screen more than 720px*/ 51 | @media screen and (min-width: 800px) { 52 | .container { 53 | width: 800px; 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /adarsh/23juneMostlyFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mostly Fluid 6 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /Rahul/columndrop/columndrop.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | overflow-x: hidden; 4 | } 5 | 6 | .align{ 7 | width: 100%; 8 | height: 50px; 9 | background-color: black; 10 | } 11 | 12 | .container{ 13 | display: flex; 14 | flex-wrap: wrap; 15 | } 16 | 17 | .box{ 18 | width: 25%; 19 | height: 100vh; 20 | } 21 | 22 | .box2{ 23 | background-color: yellowgreen; 24 | width: 50%; 25 | } 26 | 27 | .box1{ 28 | background-color: #0dccfc; 29 | width: 25%; 30 | } 31 | 32 | .box3{ 33 | background-color: rgb(197, 12, 151); 34 | width: 25%; 35 | } 36 | 37 | @media(min-width: 720px) and (max-width: 900px){ 38 | .box1{ 39 | width: 33.33%; 40 | } 41 | 42 | .box2{ 43 | width: 66.66%; 44 | } 45 | 46 | .box3{ 47 | width: 100%; 48 | height: 200px; 49 | } 50 | } 51 | 52 | @media(min-width: 480px) and (max-width: 720px){ 53 | .box{ 54 | width: 100%; 55 | height: 321px 56 | } 57 | 58 | .box2{ 59 | order: 0; 60 | } 61 | 62 | .box1{ 63 | order: 1; 64 | } 65 | 66 | .box3{ 67 | order: 2; 68 | } 69 | } 70 | 71 | @media(max-width: 480px){ 72 | .box{ 73 | width: 100%; 74 | height: 200px; 75 | } 76 | 77 | .box1{ 78 | height: 120vh; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /Kanav Bhatia/Column Drop/cd.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | 7 | .box{ 8 | height: 200px; 9 | width: 100%; 10 | } 11 | .box1{ 12 | background-color: #06418e; 13 | height: 200px; 14 | order: 1; 15 | } 16 | .box2{ 17 | background-color: #2a77e0; 18 | order: 2; 19 | } 20 | .box3{ 21 | background-color: #c8dbfc; 22 | order: 3; 23 | } 24 | 25 | @media(max-width:480px) and (min-width:200px){ 26 | .box{ 27 | width: 100%; 28 | } 29 | .box1{ 30 | height: 400px; 31 | } 32 | } 33 | @media(min-width:600px) and (max-width:735px) { 34 | .box1{ 35 | width:70%; 36 | order: 2; 37 | height: 600px; 38 | 39 | } 40 | .box2{ 41 | width:30%; 42 | order: 1; 43 | height: 600px; 44 | } 45 | .box3{ 46 | width:100%; 47 | order: 3; 48 | height: 300px; 49 | } 50 | 51 | } 52 | @media(max-width:2560px) and (min-width:735px){ 53 | .box1{ 54 | width:50%; 55 | order: 2; 56 | height: 600px; 57 | 58 | } 59 | .box2{ 60 | width:25%; 61 | order: 1; 62 | height: 600px; 63 | } 64 | .box3{ 65 | width:25%; 66 | order: 3; 67 | height: 600px; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /ChetanJain/viewport.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex; 3 | flex-wrap:wrap; 4 | } 5 | .box{ 6 | width: 100%; 7 | height:200px; 8 | } 9 | .box1{ 10 | background-color: indianred; 11 | } 12 | .box2{ 13 | background-color: olive; 14 | } 15 | .box3{ 16 | background-color: navy; 17 | } 18 | .box4{ 19 | background-color: black; 20 | } 21 | .box5{ 22 | background-color: red; 23 | } 24 | .box6{ 25 | background-color: grey; 26 | } 27 | .box7{ 28 | background-color: yellow; 29 | } 30 | .box8{ 31 | background-color: violet; 32 | }.box9{ 33 | background-color: purple; 34 | } 35 | @media screen and (min-width:600px){ 36 | .box{ 37 | width:50%; 38 | } 39 | .box1{ 40 | width: 100%; 41 | } 42 | } 43 | @media screen and (min-width:900px){ 44 | .container{ 45 | width:90%; 46 | margin:0 auto; 47 | } 48 | .box{ 49 | width:33.3333%; 50 | } 51 | .box1{ 52 | width:56%; 53 | } 54 | .box2{ 55 | width:44%; 56 | } 57 | 58 | } 59 | @media screen and (min-width:1200px){ 60 | .container{ 61 | width: 70%; 62 | margin:0 auto; 63 | } 64 | .box{ 65 | width:33.333333%; 66 | } 67 | .box1{ 68 | width:56%; 69 | } 70 | .box2{ 71 | width:44%; 72 | } 73 | } 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /Workshop/Rishabh Khanna/Mostly-Fluid-Rishabhk07/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | display: flex; 5 | display: -webkit-flex; 6 | flex-wrap: wrap; 7 | flex-wrap: -webkit-wrap; 8 | /* add code */ 9 | } 10 | 11 | 12 | .box1,.box2,.box3,.box4,.box5 { 13 | /* add code */ 14 | height: 200px; 15 | width: 100%; 16 | transition: width .1s; 17 | } 18 | 19 | .box1{ 20 | background-color: red; 21 | } 22 | 23 | .box2{ 24 | background-color: blue; 25 | } 26 | 27 | .box3{ 28 | background-color: green; 29 | } 30 | 31 | .box4{ 32 | background-color: gray; 33 | } 34 | 35 | .box5{ 36 | background-color: yellow; 37 | } 38 | 39 | 40 | /* Small screen lesser than 720px*/ 41 | 42 | @media(min-width: 600px) { 43 | .box2 , .box3 , .box4 , .box5 { 44 | width: 50%; 45 | } 46 | 47 | @media(min-width: 800px){ 48 | .box1 { 49 | width: 60% 50 | } 51 | .box2 { 52 | width: 40%; 53 | } 54 | .box3, .box4, .box5 { 55 | width: 33.3% 56 | } 57 | } 58 | 59 | @media(min-width: 1200px){ 60 | .container { 61 | width: 800px; 62 | margin-left: auto; 63 | margin-right: auto; 64 | } 65 | } 66 | 67 | 68 | /* add code */ 69 | } 70 | 71 | /* add media query for Screen more than 720px*/ 72 | -------------------------------------------------------------------------------- /Arwaz/MostlyFluid/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /Workshop/Anshul Wadhawan/Layout-Shifter/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0; 3 | margin: 0; 4 | padding-top: 1vh; 5 | } 6 | .parent{ 7 | display: flex; 8 | flex-wrap: wrap; 9 | } 10 | .parent2{ 11 | width: 100%; 12 | display: flex; 13 | flex-wrap: wrap; 14 | } 15 | #box1{ 16 | background-color: #0d47a1; 17 | height: 15vh; 18 | width: 100%; 19 | } 20 | #box2{ 21 | background-color: #2962ff; 22 | height: 60vh; 23 | width: 100%; 24 | } 25 | #box3{ 26 | background-color: #82b1ff ; 27 | height: 120vh; 28 | width: 100%; 29 | } 30 | 31 | 32 | @media screen and (min-width: 480px) and (max-width: 720px) 33 | { 34 | #box1{ 35 | height:20vh ; 36 | } 37 | #box2{ 38 | height:45vh ; 39 | } 40 | #box3{ 41 | height:80vh ; 42 | } 43 | 44 | 45 | } 46 | @media screen and (min-width: 720px) and (max-width: 900px) 47 | { 48 | body{ 49 | margin-left:5%; 50 | margin-right:5%; 51 | } 52 | #box1{ 53 | height: 99vh; 54 | width: 20%; 55 | } 56 | .parent2{ 57 | width: 80%; 58 | } 59 | #box2,#box3{ 60 | height: 49.5vh; 61 | } 62 | 63 | } 64 | @media screen and (min-width: 900px) 65 | { 66 | body{ 67 | margin-left:10%; 68 | margin-right:10%; 69 | } 70 | #box1{ 71 | height: 99vh; 72 | width: 20%; 73 | } 74 | .parent2{ 75 | width: 80%; 76 | } 77 | #box2,#box3{ 78 | height: 49.5vh; 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /deepak/layout-shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | layout shifter 6 | 56 | 57 | 58 |
59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /Ishu Anand/layout_shifter/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | width: 100%; 5 | width: 1200px; 6 | position: relative; 7 | margin: auto; 8 | /* height: 500px;*/ 9 | } 10 | 11 | body, 12 | html { 13 | height: 100%; 14 | } 15 | 16 | .box { 17 | width: 100%; 18 | height: 200px; 19 | } 20 | 21 | .bbox { 22 | background: black; 23 | height: 300px; 24 | display: flex; 25 | flex-wrap: wrap; 26 | 27 | } 28 | 29 | 30 | .box1 { 31 | background-color: #154388; 32 | 33 | } 34 | 35 | .box2 { 36 | background-color: #3979d9; 37 | height: 300px; 38 | } 39 | 40 | .box3 { 41 | background-color: #cadbf8; 42 | height: 700px; 43 | } 44 | 45 | 46 | 47 | @media screen and (min-width:600px) { 48 | .box1 { 49 | height: 200px; 50 | } 51 | .box2 { 52 | height: 300px; 53 | } 54 | .box3 { 55 | height: 400px; 56 | } 57 | } 58 | 59 | 60 | @media screen and (min-width:900px) { 61 | 62 | 63 | .box1 { 64 | height: 100vh; 65 | width: 10%; 66 | /* float: left;*/ 67 | } 68 | .bbox { 69 | width: 90%; 70 | height: 100vh; 71 | transition: ease; 72 | /* float: left;*/ 73 | } 74 | .box2, 75 | .box3 76 | 77 | { 78 | height: 50vh; 79 | } 80 | 81 | 82 | } 83 | -------------------------------------------------------------------------------- /Sanket/Column Drop/column_drop_styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | .box { 7 | width: 300px; 8 | height: 300px; 9 | } 10 | .box1 { 11 | background-color: #164388; 12 | } 13 | .box2 { 14 | background-color: #3979d9; 15 | } 16 | .box3 { 17 | background-color: #cadbf8; 18 | } 19 | 20 | @media(min-width: 1000px) 21 | { 22 | .box1 { 23 | width: 60%; 24 | height: 640px; 25 | order: 2; 26 | } 27 | .box2 { 28 | width: 20%; 29 | height: 640px; 30 | order: 1; 31 | } 32 | .box3 { 33 | width: 20%; 34 | height: 640px; 35 | order: 3; 36 | } 37 | } 38 | @media(min-width: 720px) and (max-width: 1000px) 39 | { 40 | .box1 { 41 | width: 70%; 42 | height: 620px; 43 | order: 2; 44 | } 45 | .box2 { 46 | width: 30%; 47 | height: 620px; 48 | order: 1; 49 | } 50 | .box3 { 51 | width: 100%; 52 | order: 3; 53 | } 54 | } 55 | @media(min-width: 480px) and (max-width: 720px) 56 | { 57 | .box1 { 58 | width: 100%; 59 | height: 400px; 60 | } 61 | .box2 { 62 | width: 100%; 63 | height: 400px; 64 | } 65 | .box3 { 66 | width: 100%; 67 | height: 400px; 68 | } 69 | } 70 | @media(max-width: 480px) 71 | { 72 | .box1 { 73 | width: 100%; 74 | height: 620px; 75 | } 76 | .box2 { 77 | width: 100%; 78 | height: 620px; 79 | } 80 | .box3 { 81 | width: 100%; 82 | height: 620px; 83 | } 84 | } -------------------------------------------------------------------------------- /Udit Goel/Mostly Fluid/MostlyFluid.css: -------------------------------------------------------------------------------- 1 | #div5{ 2 | background-color: gray; 3 | } 4 | #div3{ 5 | background-color: lightblue; 6 | } 7 | #div4{ 8 | background-color:lightgreen; 9 | } 10 | #div2{ 11 | background-color: lightskyblue; 12 | } 13 | #div1{ 14 | background-color:darkblue; 15 | } 16 | @media(max-width:480px){ 17 | 18 | #div1{ 19 | width: 100%; 20 | height: 45em; 21 | } 22 | .item1{ 23 | width: 100%; 24 | height: 6em; 25 | } 26 | } 27 | @media(min-width:481px) and (max-width:720px){ 28 | .container{ 29 | display: flex; 30 | flex-wrap: wrap; 31 | 32 | } 33 | 34 | #div1{ 35 | width: 100%; 36 | height: 20em; 37 | } 38 | .item2{ 39 | width: 50%; 40 | height:11.5em; 41 | } 42 | .item3{ 43 | width:50%; 44 | height:6.5em; 45 | } 46 | } 47 | @media(min-width:721px) 48 | { 49 | .container{ 50 | display: flex; 51 | flex-wrap: wrap; 52 | 53 | } 54 | 55 | #div1{ 56 | width:75%; 57 | height:20em; 58 | } 59 | #div2{ 60 | width:23%; 61 | height:20em; 62 | } 63 | .item2{ 64 | width:32.5%; 65 | height:18em; 66 | } 67 | .item3{ 68 | width:32.7%; 69 | height:18em; 70 | } 71 | 72 | 73 | 74 | } -------------------------------------------------------------------------------- /WinterBatch2018/Anshuman/most fluid style.css: -------------------------------------------------------------------------------- 1 | #bigbox{ 2 | display:flex;; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | width: 900px; 6 | } 7 | 8 | #box1{ 9 | width: 100%; 10 | height: 500px; 11 | background-color:blue; 12 | } 13 | #box2{ 14 | width: 100%; 15 | height: 400px; 16 | background-color: cornflowerblue; 17 | } 18 | #box3{ 19 | width: 100%; 20 | height: 300px; 21 | background-color: cadetblue; 22 | } 23 | #box4{ 24 | width: 100%; 25 | height: 200px; 26 | background-color: aqua; 27 | } 28 | #box5{ 29 | width: 100%; 30 | height: 100px; 31 | background-color: aquamarine; 32 | } 33 | @media screen and (min-width:600px) and (max-width: 800px){ 34 | #box2{ 35 | width: 50%; 36 | } 37 | #box3{ 38 | width: 50%; 39 | height: 400px; 40 | } 41 | #box4{ 42 | width: 50%; 43 | } 44 | #box5{ 45 | width: 50%; 46 | height: 200px; 47 | } 48 | } 49 | @media screen and (min-width: 800px) { 50 | #box1{ 51 | width: 60%; 52 | } 53 | #box2{ 54 | width: 40%; 55 | height: 500px; 56 | } 57 | #box3{ 58 | width: 33.33%; 59 | } 60 | #box4{ 61 | width: 33.33%; 62 | height: 300px; 63 | } 64 | #box5{ 65 | width: 33.33%; 66 | height: 300px; 67 | } 68 | 69 | 70 | } -------------------------------------------------------------------------------- /AnkitOjha/layoutshifter/ls.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | margin: 0px auto; 6 | background: rgb(247, 57, 57) 7 | } 8 | 9 | .aside{ 10 | width: 20%; 11 | background: greenyellow; 12 | } 13 | 14 | .innercontainer{ 15 | width: 80%; 16 | background: yellow; 17 | display: flex; 18 | flex-wrap: wrap; 19 | justify-content: center; 20 | } 21 | 22 | .box1{ 23 | width: 100%; 24 | background: skyblue; 25 | } 26 | 27 | .box2{ 28 | width: 100%; 29 | background: grey; 30 | } 31 | 32 | @media screen and (min-width:1000px){ 33 | .container{ 34 | width:80%; 35 | 36 | } 37 | } 38 | 39 | @media (min-width:600px) and (max-width:1000px){ 40 | .container{ 41 | width:80%; 42 | } 43 | 44 | .aside{ 45 | width: 100%; 46 | height: 150px; 47 | } 48 | .innercontainer{ 49 | width: 100%; 50 | height: 600px; 51 | } 52 | 53 | .box1{ 54 | height: 700px; 55 | } 56 | } 57 | 58 | @media screen and (max-width:600px){ 59 | .container{ 60 | width:80%; 61 | } 62 | .aside{ 63 | width: 100%; 64 | height: 100px; 65 | } 66 | .innercontainer{ 67 | width: 100%; 68 | height: 650px; 69 | } 70 | 71 | .box1{ 72 | height: 750px; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /Workshop/Rishabh Khanna/Column-Drop-Rishabhk07/style.css: -------------------------------------------------------------------------------- 1 | /* Small screen lesser than 480px*/ 2 | 3 | .container { 4 | /* add code */ 5 | display: ; 6 | display: -webkit-flex; 7 | flex-flow: ; 8 | -webkit-flex-flow: row wrap; 9 | } 10 | 11 | .container div { 12 | min-height: 150px; 13 | min-width: 150px; 14 | } 15 | 16 | .box1, .box2, .box3, .box4, .box5 { 17 | width: 100%; 18 | height: 20px; 19 | } 20 | 21 | .box1{ 22 | background-color:red; 23 | } 24 | 25 | .box2 { 26 | background-color: yellow; 27 | } 28 | 29 | .box3 { 30 | background-color: blue; 31 | } 32 | /* Small screen lesser than 600px*/ 33 | 34 | @media screen and (min-width: 600px) and (max-width: 800px){ 35 | 36 | /* add code */ 37 | .box1 { 38 | width: 60%; 39 | order: 2; 40 | } 41 | 42 | .box2 { 43 | width: 40%; 44 | order: 1; 45 | } 46 | 47 | .box3 { 48 | width: 100%; 49 | order: 3 50 | } 51 | } 52 | 53 | 54 | 55 | /* add media query for Screen more than 720px*/ 56 | @media screen and (min-width: 800px) { 57 | .container{ 58 | width: 800px; 59 | margin-left: auto; 60 | margin-right: auto; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Arvind-Kalra/MostlyFluid/stylesheet.css: -------------------------------------------------------------------------------- 1 | .parent{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: flex-start; 5 | } 6 | div div{ 7 | height: 200px; 8 | } 9 | .box1{ 10 | background-color: aqua; 11 | } 12 | .box2{ 13 | background-color: blue; 14 | } 15 | .box3{ 16 | background-color: #dbff3c; 17 | } 18 | .box4{ 19 | background-color: #ff1ec8; 20 | } 21 | .box5{ 22 | background-color: #52ff0d; 23 | } 24 | .box6{ 25 | background-color: #ff0e09; 26 | } 27 | @media screen and (max-width: 600px){ 28 | .box1{ 29 | width:100%; 30 | } 31 | .box2{ 32 | width:100%; 33 | } 34 | .box3{ 35 | width:100%; 36 | } 37 | .box4{ 38 | width:100%; 39 | } 40 | .box5{ 41 | width:100%; 42 | } 43 | } 44 | @media screen and (min-width: 600px) and (max-width: 992px){ 45 | .box1{ 46 | width:100%; 47 | } 48 | .box2{ 49 | width:50%; 50 | } 51 | .box3{ 52 | width:50%; 53 | } 54 | .box4{ 55 | width:50%; 56 | } 57 | .box5{ 58 | width:50%; 59 | } 60 | } 61 | @media screen and (min-width: 992px){ 62 | .box1{ 63 | width:60%; 64 | } 65 | .box2{ 66 | width:40%; 67 | } 68 | .box3{ 69 | width:33.33%; 70 | } 71 | .box4{ 72 | width:33.33%; 73 | } 74 | .box5{ 75 | width:33.33%; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /Kanav Bhatia/Layout Shifter/ls.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | /* body{ 7 | margin: 0px; 8 | } */ 9 | 10 | .box{ 11 | height: 200px; 12 | width: 100%; 13 | } 14 | .box1{ 15 | background-color: #06418e; 16 | height: 250px; 17 | width: 100%; 18 | } 19 | .box2{ 20 | background-color: #2a77e0; 21 | height: 350px; 22 | } 23 | .box3{ 24 | background-color: #c8dbfc; 25 | height: 450px; 26 | } 27 | 28 | @media(max-width:480px) and (min-width:200px){ 29 | .box1{ 30 | width: 100%; 31 | height: 200px; 32 | } 33 | .box2{ 34 | height: 400px; 35 | } 36 | .box3{ 37 | height: 600px; 38 | } 39 | } 40 | @media(min-width:600px) and (max-width:735px) { 41 | .box1{ 42 | width:20%; 43 | height: 600px; 44 | 45 | } 46 | .box4{ 47 | width: 80%; 48 | } 49 | .box2{ 50 | height: 300px; 51 | } 52 | .box3{ 53 | height: 300px; 54 | } 55 | 56 | } 57 | @media(max-width:2560px) and (min-width:735px){ 58 | .box1{ 59 | width:20%; 60 | height: 800px; 61 | 62 | } 63 | .box4{ 64 | width: 80%; 65 | } 66 | .box2{ 67 | height: 400px; 68 | } 69 | .box3{ 70 | height: 400px; 71 | } 72 | .container{ 73 | width: 850px; 74 | } 75 | 76 | } 77 | -------------------------------------------------------------------------------- /Ashoo Jain/columndrop.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | .box{ 6 | width: 200px; 7 | height: 200px; 8 | }.box1 { background-color: red; 9 | 10 | } 11 | .box2{ 12 | background-color: blue; 13 | 14 | } 15 | .box3{ 16 | background-color: green; 17 | } 18 | .box4{ 19 | background-color: black; 20 | 21 | }.box5 { 22 | background-color: navy; 23 | }.box6{ 24 | background-color: indianred; 25 | 26 | } .box7 { 27 | background-color: grey; 28 | } 29 | .box8 { 30 | background-color: yellow; 31 | 32 | }.box9 { 33 | background-color: pink; 34 | } 35 | @media screen and (min-width: 500px) 36 | { 37 | .box {width: 100%;} 38 | } 39 | @media screen and (min-width:501px) { 40 | .box1 { 41 | width:20%; 42 | order: 2; 43 | } 44 | .box2{ 45 | width: 80%; 46 | order: 1; 47 | } 48 | .box3, .box4,.box5,.box6,.box7,.box8,.box9{ 49 | width: 100%; 50 | } 51 | .box3 { 52 | order: 3; 53 | } 54 | .box4 { 55 | order: 4; 56 | } .box5 { order: 5; } 57 | .box5 { 58 | order: 5; 59 | } 60 | .box6 { 61 | order: 6; 62 | } 63 | .box7 { 64 | order: 7; 65 | } 66 | .box8 { 67 | order: 8; 68 | } 69 | .box9{ 70 | order:9; 71 | } 72 | 73 | } 74 | @media screen and (min-width:801px ) 75 | { .box4, .box5, .box6, .box7, .box8, .box8 { 76 | width: 100%; 77 | } 78 | .box1 { 79 | width: 20%; 80 | } 81 | .box2 { 82 | width: 60%; 83 | } 84 | .box3 { 85 | width: 20%; 86 | } 87 | 88 | } -------------------------------------------------------------------------------- /git-proj/layout-shifter-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | layout-shifter 6 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Kanishk/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Layout Shifter 8 | 9 | 61 | 62 | 63 | 64 |
65 |
66 | 67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 | 79 | -------------------------------------------------------------------------------- /Paavini/layoutshifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Layout Shifter 8 | 9 | 61 | 62 | 63 | 64 |
65 |
66 | 67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 | 79 | -------------------------------------------------------------------------------- /WinterBatch2018/aishanya/couloumnDrop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 54 |
55 | 56 | -------------------------------------------------------------------------------- /shivamyadav03/class.css: -------------------------------------------------------------------------------- 1 | 2 | /*.color-text{ 3 | color: blue; 4 | } 5 | @media screen and (max-width: 600px){ 6 | .color-text{ 7 | color: red; 8 | } 9 | } 10 | 11 | .box { 12 | width: 32%; 13 | height: 200px; 14 | border: 1px dashed red; 15 | display: inline-block; 16 | 17 | } 18 | @media screen and (max-width: 700px){ 19 | .box{ 20 | width: 49% 21 | } 22 | 23 | 24 | } 25 | 26 | @media screen and (max-width: 480px){ 27 | .box{ 28 | width: 100%; 29 | } 30 | 31 | } 32 | */ 33 | .container{ 34 | display: flex; 35 | flex-wrap: wrap; 36 | width: 600px; 37 | 38 | } 39 | .box 40 | { 41 | width: 100%; 42 | height:200px; 43 | 44 | } 45 | .box1 46 | { 47 | background-color: red; 48 | } 49 | .box2{ 50 | background-color: navy; 51 | } 52 | .box3{ 53 | background-color: gold; 54 | } 55 | .box4{ 56 | background-color: orangered; 57 | } 58 | .box5{ 59 | background-color: pink; 60 | } 61 | .box6{ 62 | background-color: springgreen; 63 | } 64 | .box7{ 65 | background-color: aquamarine; 66 | } 67 | .box8{ 68 | background-color: chocolate; 69 | } 70 | .box9{ 71 | background-color: darkmagenta; 72 | } 73 | @media screen and (min-width: 420px) { 74 | .box.box1 { 75 | width: 100%; 76 | } 77 | .box{ 78 | width: 50%; 79 | } 80 | } 81 | 82 | 83 | @media screen and (min-width: 720px) { 84 | .container { 85 | margin: 0 auto; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /AkashTheGreat/columndrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 92 | COLUMN DROP 93 | 94 | 95 | 96 |
97 | 98 |
99 |
100 |
101 | 102 |
103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /Yash Yadav/23juneColumnDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Column-Drop 6 | 66 | 67 | 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | -------------------------------------------------------------------------------- /shivamyadav03/trail.css: -------------------------------------------------------------------------------- 1 | 2 | /*.color-text{ 3 | color: blue; 4 | } 5 | @media screen and (max-width: 600px){ 6 | .color-text{ 7 | color: red; 8 | } 9 | } 10 | 11 | .box { 12 | width: 32%; 13 | height: 200px; 14 | border: 1px dashed red; 15 | display: inline-block; 16 | 17 | } 18 | @media screen and (max-width: 700px){ 19 | .box{ 20 | width: 49% 21 | } 22 | 23 | 24 | } 25 | 26 | @media screen and (max-width: 480px){ 27 | .box{ 28 | width: 100%; 29 | } 30 | 31 | } 32 | */ 33 | .container{ 34 | display: flex; 35 | flex-wrap: wrap; 36 | width: 600px; 37 | 38 | } 39 | .box 40 | { 41 | width: 100%; 42 | height:200px; 43 | 44 | } 45 | .box1 46 | { 47 | background-color: red; 48 | } 49 | .box2{ 50 | background-color: navy; 51 | } 52 | .box3{ 53 | background-color: gold; 54 | } 55 | .box4{ 56 | background-color: orangered; 57 | } 58 | .box5{ 59 | background-color: pink; 60 | } 61 | .box6{ 62 | background-color: springgreen; 63 | } 64 | .box7{ 65 | background-color: aquamarine; 66 | } 67 | .box8{ 68 | background-color: chocolate; 69 | } 70 | .box9{ 71 | background-color: darkmagenta; 72 | } 73 | @media screen and (min-width: 720px) { 74 | .box.box1 { 75 | width: 30%; 76 | height: 100%; 77 | } 78 | .box{ 79 | width: 50%; 80 | } 81 | } 82 | 83 | 84 | @media screen and (min-width: 720px) { 85 | .container { 86 | margin: 0 auto; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Design Patterns 2 | 3 | ## About 4 | #### This repository will introduce you to the most common CSS Design Patterns with the working examples. We are covering four majorly used design patterns. 5 | //demo changes 6 | 7 | 8 | - Mostly Fluid 9 | - Column Drop 10 | - Layout Shifter 11 | 12 | #### You can also see the presentation for the quick review [Responsive Web Design](http://slides.com/aayusharora/deck-3?ref=share#/). 13 | 14 | ## How to learn from this repository ? 15 | 16 | - Practice Material/ 17 | - Mostly Fluid 18 | - Column-Drop 19 | - Layout-Shifter 20 | - Solutions 21 | 22 | All of these contain a html file ( already coded ) and to practice a partially complete CSS file. If you are familiar with FlexBox design 23 | you can complete the files. 24 | 25 | ## Submission 26 | I will be happy to review your submission and to provide the good practices to be followed when learning Flex layouts. 27 | To submit your work 28 | - Fork and Clone this repository 29 | - Make a folder by your name 30 | - Make all the changes of these files inside your folder. 31 | - Make a Pull Request providing your folder. 32 | 33 | ## Resources to learn Design Patterns 34 | - [CSS tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 35 | - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) 36 | - [Google Developers Guide](https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns) 37 | 38 | 39 | -------------------------------------------------------------------------------- /adarsh/23juneColumnDrop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Column-Drop 6 | 66 | 67 | 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | --------------------------------------------------------------------------------