Bento Restaurant is a browser-based website built using HTML, CSS, and JavaScript. It is an e-commerce platform designed to make ordering fresh and delicious bentos quick and convenient. Of course it does not actually place orders for food.
Through this project, I gained hands-on experience in web development using HTML, CSS, and JavaScript. It provided practical experience in transferring data between different HTML pages, specifically carrying over the calculated total. However, the project came with its challenges, particularly with CSS, which can sometimes behave unpredictably. For instance, the website functioned correctly before, but today, the Sushi Roll section appears broken for an unknown reason. Further debugging will be necessary to resolve this issue.
Here is some example CSS code to create the objects in the website:
body {
overflow-x: hidden;
overflow-y: auto;
background-image: url("https://thumbs.dreamstime.com/b/japanese-origami-swan-seamless-linear-pattern-pink-background-54725989.jpg");
background-size:length;
}
div {
height:25%;
width:32.8%;
position:absolute;
border: solid;
padding-left:1%;
}
h1 {
background-color: gold;
}
#price {
background-color: red;
display:inline-block;
}
button {
background-color:black;
color: white;
}
#one {
top:0%;
left:0%;
background-image: url("https://www.zippys.com/wp-content/uploads/2019/02/food-sides-Spam-Musubi-04.jpg");
background-position:center;
background-size:cover;
}
Zip file can be provided upon request.