├── collage.html ├── flex.html ├── grid.html ├── images ├── A.jpg ├── B.jpg ├── C.jpg ├── D.jpg ├── E.jpg ├── F.jpg ├── G.jpg ├── H.jpg ├── I.jpg ├── grid-area-responsive.png ├── grid-area.png ├── grid.png └── output.png ├── layout.html └── styles ├── collage.css └── layout.css /collage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Picture Collage 8 | 9 | 10 | 11 | 12 |
13 |

My Picture Collage

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 | 41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Flex 7 | 34 | 35 | 36 |

Flexible Flex

37 |
38 |
39 |

First Box

40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit explicabo ipsum voluptates totam nisi, inventore, fuga, laboriosam corporis ipsam rem voluptate illum esse atque iusto. Commodi incidunt adipisci repellendus sit!

41 |
42 |
43 |

Second Box

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit explicabo ipsum voluptates totam nisi, inventore, fuga, laboriosam corporis ipsam rem voluptate illum esse atque iusto. Commodi incidunt adipisci repellendus sit!

45 |
46 |
47 |
48 |
Item - 1
49 |
Item - 2
50 |
Item - 3
51 |
Item - 4
52 |
Item - 5
53 |
Item - 6
54 |
Item - 7
55 |
Item - 8
56 |
Item - 9
57 |
Item - 10
58 |
59 | 60 | -------------------------------------------------------------------------------- /grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 24 | 25 | 26 | 27 |
28 |
Box - 1
29 |
Box - 2
30 |
Box - 3
31 |
Box - 4
32 |
Box - 5
33 |
Box - 6
34 |
Box - 7
35 |
Box - 8
36 |
Box - 9
37 |
Box - 10
38 |
Box - 11
39 |
Box - 12
40 |
41 | 42 | -------------------------------------------------------------------------------- /images/A.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/A.jpg -------------------------------------------------------------------------------- /images/B.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/B.jpg -------------------------------------------------------------------------------- /images/C.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/C.jpg -------------------------------------------------------------------------------- /images/D.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/D.jpg -------------------------------------------------------------------------------- /images/E.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/E.jpg -------------------------------------------------------------------------------- /images/F.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/F.jpg -------------------------------------------------------------------------------- /images/G.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/G.jpg -------------------------------------------------------------------------------- /images/H.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/H.jpg -------------------------------------------------------------------------------- /images/I.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/I.jpg -------------------------------------------------------------------------------- /images/grid-area-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/grid-area-responsive.png -------------------------------------------------------------------------------- /images/grid-area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/grid-area.png -------------------------------------------------------------------------------- /images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/grid.png -------------------------------------------------------------------------------- /images/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/batch9-simple-responsive-examples/2ca3b74973f879defc691015b22fddda29145c47/images/output.png -------------------------------------------------------------------------------- /layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid Area Layout 7 | 8 | 9 | 10 |
11 |

The Header

12 |
13 | 20 |
21 | 22 |
23 |

Main Article 1

24 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus unde, laborum delectus sit quod eos, veniam, assumenda saepe fugiat error adipisci accusantium exercitationem harum. Alias minima excepturi sequi numquam obcaecati!

25 |
26 |
27 |

Main Article 2

28 |

Numquam rem aspernatur aut corporis vitae dolore nihil cum aliquam iusto ratione vero, accusamus, quos ipsum hic quasi porro maxime laboriosam consequatur sequi maiores nisi ab nobis in? Vel, cupiditate.

29 |
30 |
31 | 32 |
33 |

Sidebar

34 |
35 | 38 | 39 | 42 | 43 | -------------------------------------------------------------------------------- /styles/collage.css: -------------------------------------------------------------------------------- 1 | img{ 2 | width: 100%; 3 | height: 100%; 4 | } 5 | .row{ 6 | height: 400px; 7 | display: flex; 8 | gap: 5px; 9 | margin-bottom: 5px; 10 | } 11 | .row > div{ 12 | flex: 1; 13 | } 14 | .vertical-collage img{ 15 | height: calc( (100% - 5px)/2 ); 16 | } 17 | .square-collage{ 18 | display: grid; 19 | grid-template-columns: repeat(2, 1fr); 20 | gap: 5px; 21 | } 22 | 23 | /* Responsive Media Query */ 24 | @media screen and (max-width:576px) { 25 | .row{ 26 | flex-direction: column; 27 | height: auto; 28 | } 29 | .square-collage{ 30 | grid-template-columns: 1fr; 31 | } 32 | } 33 | 34 | /* medium devices */ 35 | @media screen and (min-width: 576px) and (max-width: 992px) { 36 | .row{ 37 | flex-direction: column; 38 | height: auto; 39 | } 40 | } -------------------------------------------------------------------------------- /styles/layout.css: -------------------------------------------------------------------------------- 1 | .header, .nav, .main, .sidebar, .advertise, .footer{ 2 | background-color: bisque; 3 | border: 2px solid tomato; 4 | padding: 5px; 5 | border-radius: 5px; 6 | } 7 | .header { 8 | grid-area: header; 9 | } 10 | .nav{ 11 | grid-area: nav; 12 | } 13 | .main{ 14 | grid-area: main; 15 | } 16 | .sidebar{ 17 | grid-area: sidebar; 18 | } 19 | .advertise{ 20 | grid-area: advertise; 21 | } 22 | .footer{ 23 | grid-area: footer; 24 | } 25 | 26 | .container{ 27 | display: grid; 28 | gap: 20px; 29 | grid-template-areas: 30 | "header header header header" 31 | "nav main main sidebar" 32 | "nav main main advertise" 33 | "footer footer footer footer" 34 | ; 35 | } 36 | 37 | @media screen and (max-width: 576px) { 38 | .container{ 39 | grid-template-areas: 40 | "header" 41 | 42 | "nav" 43 | "main" 44 | "sidebar" 45 | "advertise" 46 | "footer" 47 | ; 48 | } 49 | } 50 | 51 | @media screen and (min-width:576px) and (max-width:992px) { 52 | .container{ 53 | grid-template-areas: 54 | "header header header" 55 | "nav nav nav" 56 | "sidebar main main" 57 | "advertise footer footer" 58 | ; 59 | } 60 | } --------------------------------------------------------------------------------