├── Background2.png ├── README.md ├── Slide6.PNG ├── food.jpg ├── food1.png ├── index.html ├── javascript.js └── style.css /Background2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DynamicCodingWithAmit/Restaurant-website-design-html-css-Javascript/842b20041a3ee49d25b76c969a06da207b3b2eac/Background2.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Restaurant-website-design-html-css-Javascript 2 | Restaurant website design html css & Javascript 3 | 4 | using html css and javascript i make a restaurant website 5 | 6 | in this i use javascript to change the image 7 | 8 | Full video on youtube you make like the video 9 | -------------------------------------------------------------------------------- /Slide6.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DynamicCodingWithAmit/Restaurant-website-design-html-css-Javascript/842b20041a3ee49d25b76c969a06da207b3b2eac/Slide6.PNG -------------------------------------------------------------------------------- /food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DynamicCodingWithAmit/Restaurant-website-design-html-css-Javascript/842b20041a3ee49d25b76c969a06da207b3b2eac/food.jpg -------------------------------------------------------------------------------- /food1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DynamicCodingWithAmit/Restaurant-website-design-html-css-Javascript/842b20041a3ee49d25b76c969a06da207b3b2eac/food1.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Restaurant Website 4 | 5 | 6 | 7 | 8 |

9 |

Amitresto

10 |

17 |

18 | 19 | 20 |

21 |

22 | 23 |

24 |

25 |

Are You Hungry?

26 |

Don't Wait

27 |

Let start to order food now

28 | 29 | 30 |

31 | 32 |

33 | 34 |

35 | 36 | 37 | 38 | 39 |

40 |

41 | 42 |

43 | 47 |

48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /javascript.js: -------------------------------------------------------------------------------- 1 | let food1s = document.getElementById('food1'); 2 | let food2s = document.getElementById('food2'); 3 | let foods = document.getElementById('food'); 4 | 5 | food1s.addEventListener('click',()=>{ 6 | foods.style.backgroundImage="url('food1.png')"; 7 | }) 8 | 9 | food2s.addEventListener('click',()=>{ 10 | foods.style.backgroundImage="url('food.jpg')"; 11 | }) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | } 5 | body{ 6 | width: 99%; 7 | height: 97%; 8 | background-image: url('Background2.png'); 9 | background-size:cover; 10 | } 11 | .top{ 12 | display: flex; 13 | flex-direction: row; 14 | justify-content: space-between; 15 | height: 80px; 16 | align-items:center; 17 | padding:0px 40px; 18 | } 19 | .logo{ 20 | font-size: 30px; 21 | color:orange; 22 | } 23 | .nav{ 24 | position: relative; 25 | left:-180px; 26 | } 27 | a{ 28 | padding:5px 15px; 29 | color:orange; 30 | font-size: 20px; 31 | text-decoration:none; 32 | } 33 | a:hover{ 34 | color:white; 35 | text-decoration: underline; 36 | text-underline-position:under; 37 | } 38 | .search{ 39 | font-size: 25px; 40 | } 41 | .search i{ 42 | padding:5px 20px; 43 | } 44 | /************heading**************/ 45 | .heading{ 46 | display: flex; 47 | justify-content: space-evenly; 48 | padding-top:65px; 49 | align-items:center; 50 | } 51 | .right{ 52 | width: 440px; 53 | height: 440px; 54 | background-image: url('food.jpg'); 55 | background-size:cover; 56 | border-radius: 400px; 57 | display: flex; 58 | justify-content: center; 59 | align-items:center; 60 | } 61 | .right::before{ 62 | width: 430px; 63 | height: 430px; 64 | border:2px solid white; 65 | content: ''; 66 | position: absolute; 67 | border-radius: 430px; 68 | padding:10px; 69 | } 70 | 71 | /**********left************/ 72 | .left p:nth-child(1){ 73 | color: white; 74 | font-size: 30px; 75 | letter-spacing: 1px; 76 | font-style: italic; 77 | } 78 | .left h1{ 79 | font-size: 90px; 80 | color:white; 81 | } 82 | .left p:nth-child(3){ 83 | color: orange; 84 | font-size: 30px; 85 | font-style: italic; 86 | } 87 | .left button{ 88 | width: 150px; 89 | height: 30px; 90 | font-size: 15px; 91 | border-radius: 20px; 92 | border:2px solid white; 93 | background-color:transparent; 94 | color:white; 95 | margin:20px 0px; 96 | } 97 | /*********SocialMedia***************/ 98 | .SocialMedia{ 99 | position: absolute; 100 | right: 0; 101 | display: flex; 102 | justify-content: space-evenly; 103 | align-items: center; 104 | flex-direction: column; 105 | width: 40px; 106 | height: 200px; 107 | background-color:white; 108 | font-size: 25px; 109 | 110 | } 111 | .SocialMedia i:hover { 112 | color:orange; 113 | } 114 | 115 | 116 | /***************bottom***************/ 117 | #food1,#food2{ 118 | background-size:cover; 119 | width: 100px; 120 | height: 100px; 121 | border-radius: 100px; 122 | margin:0px 20px; 123 | } 124 | #food1{ 125 | background-image: url('food1.png'); 126 | } 127 | #food2{ 128 | background-image: url('food.jpg'); 129 | } 130 | .menu{ 131 | display: flex; 132 | margin:0px 100px; 133 | } --------------------------------------------------------------------------------