├── .DS_Store ├── Airbnb resources ├── .DS_Store ├── d1.webp ├── d2.webp ├── d3.webp ├── d4.webp ├── i1.jpeg ├── i10.jpeg ├── i11.jpeg ├── i2.jpeg ├── i3.jpeg ├── i4.jpeg ├── i5.jpeg ├── i6.jpeg ├── i7.jpeg ├── i8.jpeg ├── i9.jpeg ├── logo.svg └── svg │ ├── .DS_Store │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-0.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-11.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-3.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-5.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-6.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-8.svg │ ├── Holiday Homes & Apartment Rentals - Airbnb - Airbnb-9.svg │ ├── heart.svg │ └── start.svg ├── css-1 ├── index.html └── style.css ├── css-2 ├── index.html └── style.css ├── css-3 ├── index.html └── style.css ├── css-4 ├── index.html └── style.css ├── css-5 ├── icon-AppStore_lg30tv.webp ├── icon-GooglePlay_1_zixjxl.webp ├── index.html ├── instagram-text-icon.webp └── style.css ├── js-crash-course ├── app.js ├── index.html └── style.css └── m ├── icon-AppStore_lg30tv.webp ├── icon-GooglePlay_1_zixjxl.webp ├── index.html ├── instagram-text-icon.webp └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/.DS_Store -------------------------------------------------------------------------------- /Airbnb resources/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/.DS_Store -------------------------------------------------------------------------------- /Airbnb resources/d1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/d1.webp -------------------------------------------------------------------------------- /Airbnb resources/d2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/d2.webp -------------------------------------------------------------------------------- /Airbnb resources/d3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/d3.webp -------------------------------------------------------------------------------- /Airbnb resources/d4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/d4.webp -------------------------------------------------------------------------------- /Airbnb resources/i1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i1.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i10.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i11.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i2.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i3.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i4.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i5.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i6.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i7.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i8.jpeg -------------------------------------------------------------------------------- /Airbnb resources/i9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/i9.jpeg -------------------------------------------------------------------------------- /Airbnb resources/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/Airbnb resources/svg/.DS_Store -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-0.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-11.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-8.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/Holiday Homes & Apartment Rentals - Airbnb - Airbnb-9.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Airbnb resources/svg/start.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |

Welcome Back!

23 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /css-1/style.css: -------------------------------------------------------------------------------- 1 | /* h1{} => selector */ 2 | /* classname always starts with a dot */ 3 | .abc{ 4 | color: red; 5 | } 6 | .center{ 7 | text-align: center; 8 | } 9 | 10 | /* div => 1. to structure the code 11 | 2. to apply the css to all inner elements in one shot 12 | */ 13 | 14 | /* box model 15 | border => thickness, style, color 16 | padding => space inside the border 17 | margin => space outside the border 18 | */ 19 | 20 | 21 | .box{ 22 | border: 1px solid lightgray; 23 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 24 | width: 300px; 25 | padding: 10px; 26 | margin: 60px auto; 27 | border-radius: 14px; 28 | } 29 | .box-img{ 30 | width: 100%; 31 | border-radius: 14px; 32 | } 33 | .login{ 34 | width: 340px; 35 | margin: 160px auto; 36 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 37 | text-align: center; 38 | } 39 | .input{ 40 | width: 100%; 41 | margin-bottom: 10px; 42 | padding: 12px; 43 | box-sizing: border-box; 44 | font-size: 16px; 45 | border-radius: 0; 46 | border: 1px solid gray; 47 | } 48 | .btn{ 49 | width: 100%; 50 | box-sizing: border-box; 51 | background-color: black; 52 | color: white; 53 | border: none; 54 | padding: 13px; 55 | font-size: 16px; 56 | } 57 | 58 | /* box-sizing: border-box ensures that is the content is not gping out of the 59 | parent element if going out because of padding! */ 60 | .logo{ 61 | height: 46px; 62 | } -------------------------------------------------------------------------------- /css-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 44 | 45 | 46 | 47 | 48 |
49 | 50 |
51 |

Explore the diversity of India

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia mollitia consequuntur corporis autem, cum libero inventore.

53 | 54 |
55 | 56 |
57 | 58 | -------------------------------------------------------------------------------- /css-2/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | .card{ 5 | width: 270px; 6 | margin: 10px auto; 7 | padding: 10px; 8 | border: 1px solid lightgray; 9 | border-radius: 14px; 10 | } 11 | .card-img{ 12 | width: 100%; 13 | border-radius: 14px; 14 | } 15 | 16 | /* positions 17 | 1. fixed 18 | 2. sticky 19 | 3. absolute 20 | 4. relative 21 | */ 22 | 23 | .help-btn{ 24 | background-color: black; 25 | color: white; 26 | padding: 16px 30px; 27 | border-radius: 44px; 28 | border: none; 29 | font-size: 16px; 30 | position: fixed; 31 | bottom: 60px; 32 | right: 60px; 33 | } 34 | /* top, left, right and bottom => distance from that direction */ 35 | 36 | .banner{ 37 | background-color: #fff; 38 | position: sticky; 39 | top: 0; 40 | } 41 | 42 | .red{ 43 | height: 100px; 44 | width: 100px; 45 | background-color: red; 46 | } 47 | 48 | .black{ 49 | height: 70px; 50 | width: 70px; 51 | background-color: rgb(0, 0, 0); 52 | position: absolute; 53 | top: 0; 54 | right: 0; 55 | } 56 | 57 | .blue{ 58 | height: 100px; 59 | width: 100px; 60 | background-color: rgb(0, 21, 255); 61 | } 62 | 63 | 64 | .bg{ 65 | width: 644px; 66 | margin: 80px auto; 67 | position: relative; 68 | } 69 | .bg-img{ 70 | width: 100%; 71 | border-radius: 32px; 72 | /* filter: blur(2px); */ 73 | } 74 | .content{ 75 | position: absolute; 76 | bottom: 100px; 77 | left: 40px; 78 | color: white; 79 | } 80 | .btn{ 81 | background-color: #fff; 82 | padding: 16px 30px; 83 | border-radius: 80px; 84 | border: none; 85 | font-size: 16px; 86 | 87 | } 88 | /* position relative is used to ensure that the absolute can only move within the 89 | parent element */ -------------------------------------------------------------------------------- /css-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |

Manali, India

15 | 16 | 17 | 18 |
19 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

20 |
21 |
22 | 23 |
24 |

Manali, India

25 | 26 | 27 | 28 |
29 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

30 |
31 | 32 |
33 | 34 |
35 |

Manali, India

36 | 37 | 38 | 39 |
40 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

41 |
42 | 43 |
44 | 45 | -------------------------------------------------------------------------------- /css-3/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | .card{ 5 | border: 1px solid lightgray; 6 | width: 244px; 7 | padding: 10px; 8 | border-radius: 14px; 9 | } 10 | .card-img{ 11 | width: 100%; 12 | border-radius: 14px; 13 | } 14 | .flexbox{ 15 | display: flex; 16 | gap: 12px; 17 | justify-content: center; 18 | flex-wrap: wrap; 19 | } 20 | /* gap is used to create gap between the flex elements */ 21 | /* justify-content: is used to horizontally move the flex elements */ 22 | /* align-items: is used to vertically move the flex elements */ 23 | .flex{ 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | } -------------------------------------------------------------------------------- /css-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /css-4/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | @media(min-width: 600px){ 5 | .profile{ 6 | display: flex; 7 | gap: 24px; 8 | width: 600px; 9 | margin: 70px auto; 10 | } 11 | .user{ 12 | width: 220px; 13 | height: 220px; 14 | object-fit: cover; 15 | border-radius: 16px; 16 | transition: .25s; 17 | filter: grayscale(100); 18 | } 19 | .user:hover{ 20 | border-radius: 50%; 21 | transform: rotate(10deg); 22 | width: 170px; 23 | height: 170px; 24 | margin-left: 100px; 25 | filter: grayscale(0); 26 | } 27 | .btn{ 28 | background-color: black; 29 | color: white; 30 | padding: 14px 30px; 31 | border: 2px solid black; 32 | font-size: 16px; 33 | border-radius: 8px; 34 | transition: .25s; 35 | } 36 | .btn:hover{ 37 | background-color: white; 38 | color: black; 39 | } 40 | } 41 | @media(max-width:599px){ 42 | .profile{ 43 | margin: 70px auto; 44 | text-align: center; 45 | padding: 0 18px; 46 | } 47 | .user{ 48 | width: 120px; 49 | height: 120px; 50 | object-fit: cover; 51 | border-radius: 50%; 52 | } 53 | .btn{ 54 | background-color: rgb(0, 17, 255); 55 | color: white; 56 | padding: 16px 60px; 57 | border: none; 58 | font-size: 16px; 59 | border-radius: 44px; 60 | } 61 | } 62 | 63 | 64 | 65 | /* media query to make the things responsive*/ 66 | 67 | 68 | 69 | 70 | 71 | 72 | .demo{ 73 | height: 100px; 74 | width: 100px; 75 | background-color: orangered; 76 | margin-top: 200px; 77 | animation-name: msd; 78 | animation-duration: 1s; 79 | animation-iteration-count: infinite; 80 | animation-direction: alternate; 81 | } 82 | @keyframes msd{ 83 | to{ 84 | margin-left: 900px; 85 | border-radius: 50%; 86 | transform: rotate(360deg); 87 | background-color: blueviolet; 88 | height: 50px; 89 | width: 50px; 90 | } 91 | } -------------------------------------------------------------------------------- /css-5/icon-AppStore_lg30tv.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/css-5/icon-AppStore_lg30tv.webp -------------------------------------------------------------------------------- /css-5/icon-GooglePlay_1_zixjxl.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/css-5/icon-GooglePlay_1_zixjxl.webp -------------------------------------------------------------------------------- /css-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 |
17 |
18 | 19 |
Nivedita
20 |
21 |
22 | 23 |
Mayank
24 |
25 |
26 | 27 |
Teerath
28 |
29 |
30 | 31 |
Yashita
32 |
33 |
34 | 35 |
Prajwal
36 |
37 |
38 | 39 |
Aviral
40 |
41 |
42 | 43 |
Ramya
44 |
45 |
46 | 47 |
Kunal
48 |
49 |
50 | 51 |
Karthik
52 |
53 | 54 |
55 | 56 | 57 | 58 |
59 |
60 |
61 |
62 | 63 |
64 |
Yash goel
65 |
@iamyash
66 |
67 |
68 | 69 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet quis ratione ex facere!

70 |
71 |
72 | 73 | 74 | 75 |
76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 | 84 |
85 |
Mayank
86 |
@mayank78
87 |
88 |
89 | 90 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet quis ratione ex facere!

91 |
92 |
93 | 94 | 95 | 96 |
97 | 98 |
99 |
100 | 101 | 102 | 103 |
104 |
105 | 106 |
107 |
Nivedita
108 |
@nivedita3902
109 |
110 |
111 | 112 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eveniet quis ratione ex facere!

113 |
114 |
115 | 116 | 117 | 118 |
119 | 120 |
121 |
122 |
123 |
124 |

Download the mobile app for the best user experience!

125 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus deserunt eligendi quod eius reiciendis neque accusamus?

126 |
127 | 128 | 129 |
130 |
131 |
132 | 133 | -------------------------------------------------------------------------------- /css-5/instagram-text-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/css-5/instagram-text-icon.webp -------------------------------------------------------------------------------- /css-5/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | @media(min-width: 990px){ 5 | .container{ 6 | display: flex; 7 | width: 990px; 8 | margin: 60px auto; 9 | gap: 40px; 10 | } 11 | .feed{ 12 | width: 560px; 13 | margin-bottom:32px; 14 | padding: 10px; 15 | border: 1px solid lightgray; 16 | border-radius: 14px; 17 | } 18 | .feed-img{ 19 | width: 100%; 20 | border-radius: 14px; 21 | } 22 | .profile{ 23 | display: flex; 24 | gap: 8px; 25 | align-items: center; 26 | margin-bottom: 18px; 27 | } 28 | .user{ 29 | height: 50px; 30 | width: 50px; 31 | object-fit: cover; 32 | border-radius: 50%; 33 | } 34 | .bi{ 35 | font-size: 24px; 36 | } 37 | .reactions{ 38 | display: flex; 39 | justify-content: space-between; 40 | } 41 | .reactions-left{ 42 | display: flex; 43 | gap: 16px; 44 | } 45 | .sidebar-title{ 46 | margin-top: 0; 47 | } 48 | .links{ 49 | display: flex; 50 | gap: 8px; 51 | } 52 | .link{ 53 | height: 40px; 54 | } 55 | .story-container{ 56 | display: flex; 57 | gap: 16px; 58 | width: 990px; 59 | margin: 60px auto; 60 | } 61 | .story-img{ 62 | width: 90px; 63 | height: 90px; 64 | object-fit: cover; 65 | border-radius: 50%; 66 | } 67 | .navbar{ 68 | display: flex; 69 | width: 990px; 70 | margin: 10px auto; 71 | justify-content: space-between; 72 | align-items: center; 73 | } 74 | .logo{ 75 | height: 34px; 76 | } 77 | .btn{ 78 | background-color: #fff; 79 | padding: 14px 22px; 80 | border-radius: 8px; 81 | font-size: 16px; 82 | border: 1px solid lightgray; 83 | } 84 | } 85 | 86 | 87 | 88 | /* small screen */ 89 | 90 | @media(max-width: 989px){ 91 | .container{ 92 | 93 | margin: 60px auto; 94 | 95 | } 96 | .feed{ 97 | margin-bottom:20px; 98 | padding: 10px; 99 | border: 1px solid rgb(237, 237, 237); 100 | border-radius: 16px; 101 | } 102 | .feed-img{ 103 | width: 100%; 104 | border-radius: 16px; 105 | } 106 | .profile{ 107 | display: flex; 108 | gap: 8px; 109 | align-items: center; 110 | margin-bottom: 18px; 111 | } 112 | .user{ 113 | height: 50px; 114 | width: 50px; 115 | object-fit: cover; 116 | border-radius: 50%; 117 | } 118 | .bi{ 119 | font-size: 24px; 120 | } 121 | .reactions{ 122 | display: flex; 123 | justify-content: space-between; 124 | } 125 | .reactions-left{ 126 | display: flex; 127 | gap: 16px; 128 | } 129 | .sidebar{ 130 | text-align: center; 131 | 132 | } 133 | .sidebar-title{ 134 | margin-top: 16px; 135 | } 136 | .links{ 137 | display: flex; 138 | gap: 8px; 139 | justify-content: center; 140 | } 141 | .link{ 142 | height: 40px; 143 | } 144 | .story-container{ 145 | display: flex; 146 | gap: 16px; 147 | width: 100%; 148 | overflow-x:scroll; 149 | margin: 60px auto; 150 | } 151 | .story-container::-webkit-scrollbar{ 152 | display: none; 153 | } 154 | .story-img{ 155 | width: 70px; 156 | height: 70px; 157 | object-fit: cover; 158 | border-radius: 50%; 159 | } 160 | .navbar{ 161 | display: flex; 162 | margin: 10px auto; 163 | justify-content: space-between; 164 | align-items: center; 165 | } 166 | .logo{ 167 | height: 32px; 168 | } 169 | .btn{ 170 | background-color: #fff; 171 | padding: 10px 18px; 172 | border-radius: 8px; 173 | font-size: 14px; 174 | border: 1px solid lightgray; 175 | } 176 | } -------------------------------------------------------------------------------- /js-crash-course/app.js: -------------------------------------------------------------------------------- 1 | // variables 2 | // arrays 3 | // objects 4 | // conditionals 5 | // loops 6 | // functions 7 | // DOM 8 | // project 9 | // promises and fetch 10 | // how to use API's 11 | // project 12 | 13 | 14 | // hello, codekaro, fullstack, mango, => keywords 15 | // lapapa , dhfjksfks, ndmsadmad, 16 | 17 | // create a varaible => variables are lijke containers 18 | 19 | // var coffee = 'nescafe'; 20 | // var coffee = 'brew' 21 | // console.log(coffee) 22 | 23 | // es6 => ecma script 6 => let and const 24 | // let name = 'yash'; 25 | // let name = 'mayank'; 26 | 27 | // console.log(name) 28 | 29 | // const salary = 40000; 30 | // salary = 450000; 31 | // console.log(salary) 32 | 33 | 34 | // datatypes => what sort of data is being stored in the variable 35 | let name = "yash"; 36 | let age = 24; 37 | let isAlive = true; 38 | 39 | // arrays 40 | let hobbies = ['cooking', 'reading books', 'swimming'] 41 | // console.log(hobbies) 42 | // hobbies[0] = 'teaching'; 43 | // hobbies.push('travelling') 44 | // array.push is used to add new values to the array 45 | // array.pop is used to remove the value from the end of the array 46 | hobbies.pop() 47 | // console.log(hobbies) 48 | 49 | 50 | 51 | // objects => to store data of a user in a variables 52 | // name, email, phonenumber, address, gender 53 | 54 | // let user = ['yash', 24, 9876543210, 45000, 'Male', 'New Delhi']; 55 | // let user = { 56 | // name: 'yash', 57 | // age: 24, 58 | // gender : 'Male', 59 | // address: 'New Delhi', 60 | // hobbies: ['teaching', 'reading books'] 61 | // } 62 | // console.log(user) 63 | // user.name = 'Himanshu' 64 | // console.log(user.address) 65 | 66 | 67 | 68 | // conditionals => if the age of the user is grater than 18 years 69 | 70 | // if() => which gets converted to true or false 71 | 72 | // if(0){ 73 | // console.log('statement is true') 74 | // } 75 | // else{ 76 | // console.log('Statement is false!') 77 | // } 78 | 79 | // truthy and falsy 80 | //falsy => false, 0, -0, "", '', null, undefined 81 | // rest every other values will go in truthy 82 | 83 | 84 | // functions and Loops 85 | 86 | // function grinder(items){ 87 | // console.log('grinding...', items) 88 | // } 89 | 90 | // grinder('tomatoes'); 91 | // grinder('Coffee, Sugar, Milk'); 92 | 93 | 94 | function add(num1, num2){ 95 | console.log(num1 + num2) 96 | } 97 | 98 | // add(2,3) 99 | // add(12,45) 100 | 101 | // function sqr(n){ 102 | // console.log(n*n) 103 | // } 104 | 105 | // loops 106 | // for(initial point, condition, increment) 107 | 108 | // for(let i=1; i<=10; i++){ 109 | // sqr(i); 110 | // } 111 | 112 | const users = [ 113 | { name: "Aarav Sharma", age: 24, salary: 45000, email: "aarav.sharma@example.com" }, 114 | { name: "Priya Mehta", age: 28, salary: 52000, email: "priya.mehta@example.com" }, 115 | { name: "Rohan Verma", age: 31, salary: 60000, email: "rohan.verma@example.com" }, 116 | { name: "Anjali Singh", age: 26, salary: 48000, email: "anjali.singh@example.com" }, 117 | { name: "Vikram Patel", age: 35, salary: 75000, email: "vikram.patel@example.com" }, 118 | { name: "Sneha Iyer", age: 30, salary: 67000, email: "sneha.iyer@example.com" }, 119 | { name: "Karan Kapoor", age: 27, salary: 55000, email: "karan.kapoor@example.com" }, 120 | { name: "Neha Joshi", age: 29, salary: 59000, email: "neha.joshi@example.com" }, 121 | { name: "Amit Das", age: 32, salary: 63000, email: "amit.das@example.com" }, 122 | { name: "Ritika Chauhan", age: 25, salary: 47000, email: "ritika.chauhan@example.com" } 123 | ]; 124 | 125 | 126 | // calculate the inhand salary of these people 10% tds deduction 127 | 128 | 129 | function calculateInHandSalary(name, salary){ 130 | if(salary>50000){ 131 | let inHand = salary - (.1*salary); 132 | } 133 | else { 134 | inHand = salary 135 | } 136 | console.log(name, " : " , inHand) 137 | 138 | } 139 | // for(i=0; i<10; i++){ 140 | // calculateInHandSalary(users[i].name, users[i].salary) 141 | // } 142 | 143 | 144 | 145 | 146 | // DOM => Document Object model 147 | 148 | 149 | function attended(){ 150 | let heading = document.getElementById('heading') 151 | heading.innerText = 'Thanks for attending the Bootcamp!'; 152 | let btn = document.getElementById('btn'); 153 | btn.style.display = 'none' 154 | console.log(heading) 155 | } 156 | 157 | 158 | function split(){ 159 | let amount = document.getElementById('amount'); 160 | let persons = document.getElementById('persons'); 161 | let finalBill = document.getElementById('result') 162 | let result = amount.value / persons.value; 163 | finalBill.innerText = result; 164 | } 165 | 166 | 167 | let api = 'http://www.omdbapi.com/?apikey=61e576a4&t=' 168 | 169 | // promises 170 | 171 | let title = document.getElementById('title'); 172 | let desc = document.getElementById('desc'); 173 | let date = document.getElementById('date'); 174 | let actors = document.getElementById('actors'); 175 | let direactors = document.getElementById('direactors'); 176 | let ratings = document.getElementById('ratings'); 177 | let poster = document.getElementById('poster'); 178 | 179 | 180 | function searchMovie(){ 181 | let query = document.getElementById('movieName'); 182 | let finalApi = api + query.value 183 | fetch(finalApi).then(function(data){ 184 | return data.json() 185 | }).then(function(data){ 186 | console.log(data) 187 | title.innerText = data.Title; 188 | desc.innerText = data.Plot; 189 | date.innerText = data.Released; 190 | actors.innerText = data.Actors; 191 | direactors.innerText = data.Director; 192 | ratings.innerText = data.imdbRating; ; 193 | poster.src = data.Poster; 194 | 195 | }) 196 | } -------------------------------------------------------------------------------- /js-crash-course/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 | 37 | 38 |
39 |
40 |

Three Idiots

41 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aperiam ipsa esse nihil hic voluptas libero?

42 |

43 |

44 | 45 |

46 |

47 | 48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /js-crash-course/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | .container{ 5 | width: 360px; 6 | margin: 180px auto; 7 | text-align: center; 8 | } 9 | .movie-container{ 10 | width: 700px; 11 | margin: 40px auto; 12 | } 13 | .btn{ 14 | background-color: rgb(255, 5, 5); 15 | padding: 13px 30px; 16 | color: white; 17 | border: none; 18 | /* width: 100%; */ 19 | /* margin-top: 10px; */ 20 | border-radius: 8px; 21 | font-size: 16px; 22 | cursor: pointer; 23 | width: 25%; 24 | 25 | } 26 | .flex{ 27 | display: flex; 28 | gap: 10px; 29 | } 30 | input{ 31 | width: 75%; 32 | box-sizing: border-box; 33 | padding: 12px; 34 | font-size: 16px; 35 | border-radius: 8px; 36 | border: 1px solid lightgray; 37 | } 38 | input:focus{ 39 | border: 1px solid red; 40 | outline: none; 41 | } 42 | .search{ 43 | display: flex; 44 | align-items: center; 45 | gap: 10px; 46 | } 47 | .details{ 48 | display: flex; 49 | gap: 34px; 50 | margin-top: 24px; 51 | } 52 | #poster{ 53 | border-radius: 8px; 54 | } -------------------------------------------------------------------------------- /m/icon-AppStore_lg30tv.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/m/icon-AppStore_lg30tv.webp -------------------------------------------------------------------------------- /m/icon-GooglePlay_1_zixjxl.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/m/icon-GooglePlay_1_zixjxl.webp -------------------------------------------------------------------------------- /m/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 |
17 |
18 | 19 |
Nivedita
20 |
21 |
22 | 23 |
Mayank
24 |
25 |
26 | 27 |
teerath
28 |
29 |
30 | 31 |
Yashita
32 |
33 |
34 | 35 |
Prajawwal
36 |
37 |
38 | 39 |
Aviral
40 |
41 |
42 | 43 |
Ramya
44 |
45 |
46 | 47 |
Kunal
48 |
49 |
50 | 51 |
Pratheek
52 |
53 |
54 | 55 | 56 | 57 |
58 |
59 |
60 |
61 | 62 |
63 |
Yash Goel
64 |
@iamyash
65 |
66 |
67 | 68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam perferendis consequatur rem commodi labore!

69 |
70 |
71 | 72 | 73 | 74 |
75 | 76 |
77 |
78 | 79 | 80 |
81 |
82 | 83 |
84 |
Mayank
85 |
@mayank
86 |
87 |
88 | 89 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam perferendis consequatur rem commodi labore!

90 |
91 |
92 | 93 | 94 | 95 |
96 | 97 |
98 |
99 | 100 | 101 | 102 |
103 |
104 | 105 |
106 |
Nivedita
107 |
@nivedita121
108 |
109 |
110 | 111 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam perferendis consequatur rem commodi labore!

112 |
113 |
114 | 115 | 116 | 117 |
118 | 119 |
120 |
121 |
122 |
123 |

Download the mobile app for the best user experience!

124 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est perspiciatis vitae architecto! Nemo, laborum.

125 |
126 | 127 | 128 |
129 |
130 |
131 | 132 | -------------------------------------------------------------------------------- /m/instagram-text-icon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akshkgd/how-to-css/d55566c5ab3ac0ba82fa0d222aa779289099d232/m/instagram-text-icon.webp -------------------------------------------------------------------------------- /m/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | @media(min-width:990px){ 5 | 6 | .container{ 7 | width: 990px; 8 | display: flex; 9 | gap: 40px; 10 | margin: 60px auto; 11 | } 12 | .feed{ 13 | width: 560px; 14 | margin-bottom: 24px; 15 | padding: 10px; 16 | border: 1px solid lightgray; 17 | border-radius: 14px; 18 | } 19 | .feed-img{ 20 | width: 100%; 21 | border-radius: 14px; 22 | } 23 | .profile{ 24 | display: flex; 25 | gap: 8px; 26 | align-items: center; 27 | margin-bottom: 16px; 28 | } 29 | .user{ 30 | width: 50px; 31 | height: 50px; 32 | border-radius: 50%; 33 | object-fit: cover; 34 | } 35 | .bi{ 36 | font-size: 24px; 37 | } 38 | .reactions{ 39 | display: flex; 40 | justify-content: space-between; 41 | } 42 | .reactions-left{ 43 | display: flex; 44 | gap: 16px; 45 | } 46 | .links{ 47 | display: flex; 48 | gap: 8px; 49 | } 50 | .link{ 51 | height: 42px; 52 | } 53 | .sidebar-title{ 54 | margin-top: 0; 55 | } 56 | .story-container{ 57 | display: flex; 58 | margin: 60px auto; 59 | width: 990px; 60 | gap: 16px; 61 | } 62 | .story-img{ 63 | height: 90px; 64 | width: 90px; 65 | object-fit: cover; 66 | border-radius: 50%; 67 | } 68 | .story{ 69 | text-align: center; 70 | } 71 | .name{ 72 | font-size: 14px; 73 | } 74 | .navbar{ 75 | width: 990px; 76 | margin: 10px auto; 77 | display: flex; 78 | justify-content: space-between; 79 | align-items: center; 80 | } 81 | .logo{ 82 | height: 32px; 83 | } 84 | .btn{ 85 | background-color: #fff; 86 | border: 1px solid lightgray; 87 | border-radius: 8px; 88 | font-size: 16px; 89 | padding: 12px 22px; 90 | } 91 | } 92 | 93 | 94 | 95 | /* small screen */ 96 | 97 | 98 | 99 | @media(max-width:989px){ 100 | 101 | .container{ 102 | 103 | 104 | margin: 60px auto; 105 | } 106 | .feed{ 107 | 108 | margin-bottom: 16px; 109 | padding: 8px; 110 | border: 1px solid rgb(230, 230, 230); 111 | border-radius: 16px; 112 | } 113 | .feed-img{ 114 | width: 100%; 115 | border-radius: 16px; 116 | } 117 | .profile{ 118 | display: flex; 119 | gap: 8px; 120 | align-items: center; 121 | margin-bottom: 16px; 122 | } 123 | .user{ 124 | width: 50px; 125 | height: 50px; 126 | border-radius: 50%; 127 | object-fit: cover; 128 | } 129 | .bi{ 130 | font-size: 24px; 131 | } 132 | .reactions{ 133 | display: flex; 134 | justify-content: space-between; 135 | } 136 | .reactions-left{ 137 | display: flex; 138 | gap: 16px; 139 | } 140 | .links{ 141 | display: flex; 142 | gap: 8px; 143 | justify-content: center; 144 | } 145 | .link{ 146 | height: 42px; 147 | } 148 | .sidebar-title{ 149 | margin-top: 0; 150 | font-size: 20px; 151 | } 152 | .sidebar{ 153 | text-align: center; 154 | } 155 | .story-container{ 156 | display: flex; 157 | margin: 60px auto; 158 | width: 100%; 159 | gap: 14px; 160 | overflow: scroll; 161 | } 162 | .story-container::-webkit-scrollbar{ 163 | display: none; 164 | } 165 | .story-img{ 166 | height: 70px; 167 | width: 70px; 168 | object-fit: cover; 169 | border-radius: 50%; 170 | } 171 | .story{ 172 | text-align: center; 173 | } 174 | .name{ 175 | font-size: 14px; 176 | } 177 | .navbar{ 178 | margin: 10px auto; 179 | display: flex; 180 | justify-content: space-between; 181 | align-items: center; 182 | } 183 | .logo{ 184 | height: 32px; 185 | } 186 | .btn{ 187 | background-color: #fff; 188 | border: 1px solid lightgray; 189 | border-radius: 32px; 190 | font-size: 14px; 191 | padding: 10px 18px; 192 | } 193 | } --------------------------------------------------------------------------------