0% found this document useful (0 votes)
15 views3 pages

Index 1

Foodcubo is a website that allows users to find restaurants near their location. It has a search bar where users can select their city and search for restaurants. It highlights key features like having a variety of cuisine options and showing restaurants close by. The site also promotes their mobile app which would allow users to discover new restaurants on the go.

Uploaded by

Rajkumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views3 pages

Index 1

Foodcubo is a website that allows users to find restaurants near their location. It has a search bar where users can select their city and search for restaurants. It highlights key features like having a variety of cuisine options and showing restaurants close by. The site also promotes their mobile app which would allow users to discover new restaurants on the go.

Uploaded by

Rajkumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<html>

<head>
<title>Foodcubo</title>
<link rel="stylesheet" href="./src/css/style.css" />
</head>

<body>
<div class="landing">
<div class="landing-interact">
<div class="navbar">
<div class="branding">
<div><img class="logo" src="./src/images/logo.png" /></div>
<div class="logo-title">FOODCUBO</div>
</div>
<!--
<div class="links">
<div>
<button class="nav-button login">Login</button>
</div>
<div>
<button class="nav-button sign">Sign up</button>
</div>
</div>
-->
</div>
<div class="title">
<div id="typewriter" class="changing"></div>
<div class="sub-title">Find awesome restaurants near you.</div>
</div>
<div class="search">
<select
id="selection"
onchange="updateSelection();
document.getElementById('search').href=`./static/list.html?q=${this.value}`;"
class="search-bar"
type="text"
placeholder="Enter your delivery location"
>
<option value="" selected style="display: none"
>Select your location</option
>
<option value="11">Ahmedabad</option>
<option value="3">Bangalore</option>
<option value="7">Chennai</option>
<option value="1">Delhi</option>
<option value="6">Hyderabad</option>
<option value="2">Kolkata</option>
<option value="3">Mumbai</option>
<option value="5">Pune</option>
</select>
<a id="search" href="#"
><button
disabled
id="search-button"
class="search-bar search-submit"
type="submit"
>
Search
</button></a
>
<script>
function updateSelection() {
console.log("lol");
if (document.getElementById("selection").value == "") {
document.getElementById("search-button").disabled = true;
} else {
document.getElementById("search-button").disabled = false;
}
}
</script>
</div>
<div class=" cities ">
<div class="cities-title">CITIES SERVED IN INDIA</div>
<div class="cities-sub-title">
Ahmedabad, Bangalore, Chennai, Delhi, Hyderabad, Kolkata, Mumbai, &
Pune
</div>
</div>
</div>
<div class="landing-images ">
<img class="landing-image " src="./src/images/4.jpg " />
</div>
</div>
<div class="features">
<div class="feature">
<div><img class="feature-image" src="src/images/order.png" /></div>
<div class="feature-title">Variety & Choices</div>
<div class="feature-desc">
Loathing for Italian, Thai, Indian or Chinese food? We got restaurants
covering many cuisines.
</div>
</div>
<div class="feature">
<div><img class="feature-image" src="src/images/ice-cream.png" /></div>
<div class="feature-title">Close To You</div>
<div class="feature-desc">
Get to know awesome resturants near you. Find out what they offer and
see customer reviews.
</div>
</div>
</div>
<div class="mobile">
<div class="mob-1">
<img class="mobile-image" src="src/images/phone.png" />
</div>
<div class="mob-2">
<div class="changing">Restaurants in your pocket</div>
<div class="sub-title">
Discover new restaurants near you on the go, with the all-new Foodcubo
app.
</div>
<div class="stores">
<img
class="store-image"
onClick="alertFunction()"
src="src/images/play.webp"
/><img class="store-image" src="src/images/iOS.webp"
onClick="alertFunction()"/>
</div>
</div>
</div>
<div class="footer">
<div class="credits">Made by Nilarjun Das | Inspired by Swiggy</div>
</div>

<script>
const alertFunction = () => {
window.alert("App is in development... or is it?");
};
</script>
<script src="./src/js/core.js"></script>
<script type="text/javascript">
const instance = new Typewriter("#typewriter", {
strings: [
"Feeling hungry?",
"Unexpected guests?",
"Cooking gone wrong?",
"Game night?",
"Movie marathon?"
],
autoStart: true,
loop: true
});
</script>
</body>
</html>

You might also like