├── LICENSE ├── README.md ├── Reastaurant Website ├── README.md ├── index.html └── style.css └── output └── restaurant website.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 AKASH KOBAL 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # front-end-full-stack-developement 2 | ## 🗒️ Description 3 | 4 | This intermediate repository focuses on empowering learner's to excel in front-end full-stack development, with a strong emphasis on essential employability skills. Throughout the repository, learner's will delve into key technologies and architectures necessary for designing and implementing front-end solutions. By successfully completing this repository, learner's will be well-equipped to pursue a career in full-stack development, with a comprehensive understanding of both front-end and back-end aspects. Moreover, learner's will cultivate robust problem-solving abilities, vital for navigating challenges in real-world development scenarios. 5 | ## Content 6 | ### 1. Restaurant Website ### 7 | ![alt text](https://github.com/AkashKobal/front-end-full-stack-developement/blob/main/output/restaurant%20website.png) 8 | 9 | This README serves as a comprehensive guide for learner's embarking on the front-end full-stack development journey, providing valuable resources and references to enhance their skills and knowledge in this dynamic field. 10 | 11 | -------------------------------------------------------------------------------- /Reastaurant Website/README.md: -------------------------------------------------------------------------------- 1 | # Restaurant Website # 2 | ![alt text](https://github.com/AkashKobal/front-end-full-stack-developement/blob/main/output/restaurant%20website.png) 3 | 4 | **HTML Code** 5 | ``` 6 | 7 | 8 | 9 | 10 | 11 | My Restaurant 12 | 13 | 14 | 15 |

16 |

Well come to My Restaurant!

17 | 23 |

24 |

My restaurant is the best place in town for a delicious meal. We offer a wide variety of dishes from different cuisines.

25 |

26 |

27 |

102 | 103 | 104 | 105 | ``` 106 | **CSS Code** 107 | ``` 108 | body{ 109 | font-family: Arial, sans-serif; 110 | background-color: rgb(242, 217, 242); 111 | } 112 | *{ 113 | margin: 0; 114 | padding: 0; 115 | box-sizing: border-box; 116 | } 117 | .heading{ 118 | text-align: center; 119 | color: black; 120 | padding: 10px; 121 | font-size: 50px; 122 | } 123 | .navbar{ 124 | display: flex; 125 | justify-content: center; 126 | padding: 10px; 127 | } 128 | .navItem{ 129 | margin: 0 10px; 130 | color: black; 131 | text-decoration: none; 132 | font-size: 25px; 133 | 134 | } 135 | .menu{ 136 | display: flex; 137 | flex-wrap: wrap; 138 | justify-content: center; 139 | align-items: center; 140 | padding: 20px; 141 | } 142 | .menu-item{ 143 | margin: 20px; 144 | padding: 20px; 145 | border: 1px solid black; 146 | border-radius: 10px; 147 | width: 300px; 148 | height: 450px; 149 | } 150 | .menu-item img{ 151 | width: 100%; 152 | height: 200px; 153 | object-fit: cover; 154 | border-radius: 10px; 155 | } 156 | .menu-item h3{ 157 | text-align: center; 158 | margin: 10px 0; 159 | } 160 | .menu-item p{ 161 | text-align: center; 162 | } 163 | .bg-image{ 164 | background-size: cover; 165 | background-position: center; 166 | background-repeat: no-repeat; 167 | /* height:600px; */ 168 | width: 100%; 169 | position: relative; 170 | /* left: 30%; */ 171 | } 172 | .desc{ 173 | text-align: center; 174 | padding: 20px; 175 | z-index: 999; 176 | font-size: 20px; 177 | 178 | } 179 | #m1{ 180 | text-align: center; 181 | padding: 20px; 182 | z-index: 999; 183 | 184 | } 185 | .price{ 186 | text-align: center; 187 | z-index: 999; 188 | color: rgb(26, 99, 6); 189 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 190 | }``` 191 | -------------------------------------------------------------------------------- /Reastaurant Website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Restaurant 7 | 8 | 9 | 10 |

11 |

Well come to My Restaurant!

12 | 18 |

19 |

My restaurant is the best place in town for a delicious meal. We offer a wide variety of dishes from different cuisines.

20 |

21 |

22 |

97 | 98 | 99 | -------------------------------------------------------------------------------- /Reastaurant Website/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, sans-serif; 3 | background-color: rgb(242, 217, 242); 4 | } 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | .heading{ 11 | text-align: center; 12 | color: black; 13 | padding: 10px; 14 | font-size: 50px; 15 | } 16 | .navbar{ 17 | display: flex; 18 | justify-content: center; 19 | padding: 10px; 20 | } 21 | .navItem{ 22 | margin: 0 10px; 23 | color: black; 24 | text-decoration: none; 25 | font-size: 25px; 26 | 27 | } 28 | .menu{ 29 | display: flex; 30 | flex-wrap: wrap; 31 | justify-content: center; 32 | align-items: center; 33 | padding: 20px; 34 | } 35 | .menu-item{ 36 | margin: 20px; 37 | padding: 20px; 38 | border: 1px solid black; 39 | border-radius: 10px; 40 | width: 300px; 41 | height: 450px; 42 | } 43 | .menu-item img{ 44 | width: 100%; 45 | height: 200px; 46 | object-fit: cover; 47 | border-radius: 10px; 48 | } 49 | .menu-item h3{ 50 | text-align: center; 51 | margin: 10px 0; 52 | } 53 | .menu-item p{ 54 | text-align: center; 55 | } 56 | .bg-image{ 57 | background-size: cover; 58 | background-position: center; 59 | background-repeat: no-repeat; 60 | /* height:600px; */ 61 | width: 100%; 62 | position: relative; 63 | /* left: 30%; */ 64 | } 65 | .desc{ 66 | text-align: center; 67 | padding: 20px; 68 | z-index: 999; 69 | font-size: 20px; 70 | 71 | } 72 | #m1{ 73 | text-align: center; 74 | padding: 20px; 75 | z-index: 999; 76 | 77 | } 78 | .price{ 79 | text-align: center; 80 | z-index: 999; 81 | color: rgb(26, 99, 6); 82 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 83 | } 84 | -------------------------------------------------------------------------------- /output/restaurant website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkashKobal/front-end-full-stack-developement/a9ec1028b4251e3b250f7553155807d8df87dec7/output/restaurant website.png --------------------------------------------------------------------------------

MENU

Pizza

Price : ₹10 - ₹20

Chai

Price : ₹10 - ₹20

Maharaja Burger

Price : ₹10 - ₹20

Dosa

Price : ₹10 - ₹20

Cpffee

Price : ₹10 - ₹20

Cake

Price : ₹10 - ₹20

Meals

Price : ₹10 - ₹20

Curry

Price : ₹10 - ₹20

Idli Vada

Price : ₹10 - ₹20

Pizza

Price : ₹10 - ₹20

MENU

Pizza

Price : ₹10 - ₹20

Chai

Price : ₹10 - ₹20

Maharaja Burger

Price : ₹10 - ₹20

Dosa

Price : ₹10 - ₹20

Cpffee

Price : ₹10 - ₹20

Cake

Price : ₹10 - ₹20

Meals

Price : ₹10 - ₹20

Curry

Price : ₹10 - ₹20

Idli Vada

Price : ₹10 - ₹20

Pizza

Price : ₹10 - ₹20