├── calendar.html ├── flexbox.html ├── form.html ├── grid.html ├── images ├── food.webp └── tiger.jpg ├── media.html ├── media_query.html └── responsive.html /calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calendar 7 | 29 | 30 | 31 |

My personal Calendar

32 |
33 |
S
34 |
M
35 |
T
36 |
W
37 |
T
38 |
F
39 |
S
40 |
29
41 |
30
42 |
31
43 |
1
44 |
2
45 |
3
46 |
4
47 |
5
48 |
6
49 |
7
50 |
8
51 |
9
52 |
10
53 |
11
54 |
12
55 |
13
56 |
14
57 |
15
58 |
16
59 |
17
60 |
18
61 |
19
62 |
20
63 |
21
64 |
22
65 |
23
66 |
24
67 |
25
68 |
26
69 |
27
70 |
28
71 |
29
72 |
30
73 |
1
74 |
2
75 |
76 | 77 | -------------------------------------------------------------------------------- /flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FlexBox 7 | 23 | 24 | 25 |

Flexbox Layout

26 |
27 |
Box-1
28 |
Box-2
29 |
Box-3
30 |
Box-4
31 |
Box-4
32 |
Box-4
33 |
Box-5
34 |
Box-6
35 |
36 | 37 | -------------------------------------------------------------------------------- /form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form 8 | 36 | 37 | 38 | 39 | 48 | 49 |
50 |
51 |

Please Login

52 | 53 | 54 | 55 |
56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid Layout 7 | 24 | 25 | 26 |

Explore Grid Layout: 2D layout

27 | 28 |
29 |
item - 1
30 |
item - 2
31 |
item - 3
32 |
item - 4
33 |
item - 5
34 |
item - 6
35 |
item - 7
36 |
item - 8
37 |
item - 9
38 |
item - 10
39 |
item - 11
40 |
item - 12
41 |
item - 13
42 |
item - 14
43 |
item - 15
44 |
item - 16
45 |
item - 17
46 |
item - 18
47 |
item - 19
48 |
item - 20
49 |
50 | 51 | -------------------------------------------------------------------------------- /images/food.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Batch9-Simple-responsive-layout/e1702ebdc58f7fc095d51d2276a44a0e5698a74d/images/food.webp -------------------------------------------------------------------------------- /images/tiger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/Batch9-Simple-responsive-layout/e1702ebdc58f7fc095d51d2276a44a0e5698a74d/images/tiger.jpg -------------------------------------------------------------------------------- /media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 31 | 32 | 33 | 34 |
35 |
36 | 37 |

Food Item - 1

38 |

Price: $100

39 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quod molestiae facere, sequi ut at omnis inventore doloremque nobis sint?

40 |
41 |
42 | 43 |

Food Item - 2

44 |

Price: $200

45 |

A corporis ratione dolor pariatur est aliquid placeat eum, modi perferendis voluptatibus suscipit nihil sint tempore minus eligendi doloribus ipsum.

46 |
47 |
48 | 49 |

Food Item - 3

50 |

Price: $300

51 |

Unde blanditiis, atque laborum ut magni consequuntur cum possimus aliquid iste reiciendis incidunt eaque non modi eos. Assumenda, dolores autem?

52 |
53 |
54 | 55 |

Food Item - 4

56 |

Price: $400

57 |

Reiciendis accusantium, quis eveniet minus veritatis voluptatem? Sapiente ratione, voluptates vero adipisci, inventore et aut, nesciunt quod ipsum voluptatem ad.

58 |
59 |
60 | 61 |

Food Item - 5

62 |

Price: $500

63 |

Perferendis nihil corporis modi quam atque, facere adipisci nesciunt voluptatum, dolorem exercitationem placeat blanditiis inventore molestias pariatur iste, iure vel.

64 |
65 |
66 | 67 |

Food Item - 6

68 |

Price: $600

69 |

Ad quae saepe quibusdam modi similique id, doloremque corporis repudiandae dolorem. Ullam, tempore. Magni architecto facilis earum consectetur neque eum!

70 |
71 |
72 | 73 |

Food Item - 7

74 |

Price: $700

75 |

Possimus culpa ex quae cupiditate consequuntur optio, neque cumque voluptatibus explicabo at error esse, consequatur molestiae quibusdam suscipit magnam maiores!

76 |
77 |
78 | 79 |

Food Item - 8

80 |

Price: $800

81 |

Modi, quae quibusdam eius aliquam tempore consequuntur, laboriosam alias, voluptatum esse optio ipsa aperiam quod deleniti? Nemo voluptatibus dolores natus?

82 |
83 |
84 | 85 |

Food Item - 9

86 |

Price: $900

87 |

Veniam repellendus sint animi consectetur magnam eveniet accusamus reiciendis vero dolorum nesciunt? Asperiores quibusdam molestiae nostrum vel quam perspiciatis obcaecati.

88 |
89 |
90 | 91 |

Food Item - 10

92 |

Price: $1000

93 |

Placeat consectetur quae ab rerum, ex tempore esse dolorum ipsa nostrum veritatis asperiores voluptatum eius labore et tempora! Facilis, similique.

94 |
95 |
96 | 97 |

Food Item - 11

98 |

Price: $1100

99 |

Tempora ex corrupti aperiam, id aliquid voluptates excepturi? Beatae quos atque earum veniam iusto repudiandae cupiditate laudantium, aliquam hic perferendis?

100 |
101 |
102 | 103 |

Food Item - 12

104 |

Price: $1200

105 |

Consequatur, dolorum. Dolor aliquam possimus dolorum ea minus error, rerum consequatur recusandae voluptatem praesentium excepturi suscipit accusantium nihil, eaque autem?

106 |
107 |
108 | 109 | -------------------------------------------------------------------------------- /media_query.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Media query 7 | 37 | 38 | 39 | 40 |
41 |
42 | 43 |

Food Item - 1

44 |

Price: $100

45 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam neque ipsam harum accusamus id quisquam perferendis blanditiis corporis sint praesentium!

46 | 47 |
48 |
49 | 50 |

Food Item - 2

51 |

Price: $200

52 |

Quisquam eaque iure illum quibusdam omnis distinctio aut nostrum nulla, porro vel quo modi quae sed? Doloribus itaque officiis veritatis.

53 | 54 |
55 |
56 | 57 |

Food Item - 3

58 |

Price: $300

59 |

Perspiciatis asperiores tempora rem facilis debitis architecto quis accusantium, accusamus ea totam nihil quod ullam fugit qui veritatis ab quam!

60 | 61 |
62 |
63 | 64 |

Food Item - 4

65 |

Price: $400

66 |

Officiis quisquam omnis, totam dignissimos consectetur voluptas obcaecati hic consequatur mollitia? Expedita, officiis! Possimus necessitatibus impedit, voluptatibus sit itaque rerum.

67 | 68 |
69 |
70 | 71 |

Food Item - 5

72 |

Price: $500

73 |

Delectus amet ipsam, velit neque est maiores dicta in pariatur, deleniti accusantium dolorum aut quasi. Odit perferendis veniam ab perspiciatis!

74 | 75 |
76 |
77 | 78 |

Food Item - 6

79 |

Price: $600

80 |

Commodi deleniti facere quam qui aliquam error ratione animi perspiciatis dolore adipisci aspernatur iure, libero possimus culpa, laboriosam in consequuntur?

81 | 82 |
83 |
84 | 85 |

Food Item - 7

86 |

Price: $700

87 |

Eaque nam hic libero, porro quibusdam fugiat dicta quam placeat facere reprehenderit repudiandae? Aut deleniti, corrupti est voluptas esse sed.

88 | 89 |
90 |
91 | 92 |

Food Item - 8

93 |

Price: $800

94 |

Voluptatibus blanditiis aperiam vitae totam maxime quisquam nobis, dolore dignissimos numquam aspernatur, ipsam, ex asperiores excepturi inventore facere tempore cum.

95 | 96 |
97 |
98 | 99 |

Food Item - 9

100 |

Price: $900

101 |

Culpa veritatis eveniet ab eius suscipit laudantium sapiente esse? Quod quisquam obcaecati earum delectus illum, consectetur aliquam dolor nemo sapiente!

102 | 103 |
104 |
105 | 106 |

Food Item - 10

107 |

Price: $1000

108 |

Aut laudantium quaerat nulla soluta porro non debitis dolor eum distinctio fuga, deserunt impedit officiis natus ipsum praesentium dicta ea.

109 | 110 |
111 |
112 | 113 |

Food Item - 11

114 |

Price: $1100

115 |

Consequuntur hic modi nisi minus molestiae quo reprehenderit. Voluptatum magnam sed quis natus quos nam autem fugit! Quis, sint minus.

116 | 117 |
118 |
119 | 120 |

Food Item - 12

121 |

Price: $1200

122 |

Placeat consequatur ipsum laboriosam officiis soluta doloribus nisi architecto commodi qui fugit inventore voluptatem voluptate, aliquam itaque, assumenda quas ut.

123 | 124 |
125 |
126 | 127 | -------------------------------------------------------------------------------- /responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive WebSite 7 | 31 | 32 | 33 |
34 |

Responsive Website

35 |
    36 |
  1. Viewport meta tag
    2. 37 |
  2. CSS Relative Unit
    3. 38 |
  3. body max width and horizontal center align
    4. 39 |
  4. image fluid
    5. 40 |
  5. two column flex and use media query with flex direction column
    6. 41 |
  6. multi column: grid layout
    7. 42 |
  7. menu Responsive: will need Javascript
    8. 43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 | 56 |
57 | 58 | --------------------------------------------------------------------------------