Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions index1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--========== BOX ICONS ==========-->
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>

<!--========== CSS ==========-->
<link rel="stylesheet" href="assets/css/styles.css">

<title>Responsive website food</title>
</head>
<body>

<!--========== SCROLL TOP ==========-->
<a href="#" class="scrolltop" id="scroll-top">
<i class='bx bx-chevron-up scrolltop__icon'></i>
</a>

<!--========== HEADER ==========-->
<header class="l-header" id="header">
<nav class="nav bd-container">
<a href="#" class="nav__logo">Tasty</a>

<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active-link">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#services" class="nav__link">Services</a></li>
<li class="nav__item"><a href="#menu" class="nav__link">Menu</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact Us</a></li>

<li><i class='bx bx-moon change-theme' id="theme-button"></i></li>
</ul>
</div>

<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>

<main class="l-main">
<!--========== HOME ==========-->
<section class="home" id="home">
<div class="home__container bd-container bd-grid">
<div class="home__data">

<h1 class="home__title">Tasty Bites</h1>
<h2 class="home__subtitle">Discover our signature dishes, made with <br> love and care.</h2>
<a href="#" class="button">View Menu</a>
</div>

<img src="assets/img/chicken-momos.jpg" alt="" class="home__img">
</div>
</section>

<!--========== ABOUT ==========-->
<section class="about section bd-container" id="about">
<div class="about__container bd-grid">
<div class="about__data">
<span class="section-subtitle about__initial">About us</span>

<h2 class="section-title about__initial">Passion for Food, <br> Passion for Service.</h2>
<p class="about__description">At Tasty Bites, we're passionate about serving delicious, high-quality food that brings people together. Our story began with a simple idea: to make flavorful, freshly prepared meals accessible to everyone, anywhere. From classic comfort food to international flair, our menu has something for everyone.</p>
<a href="#" class="button">Delve Into The Taste of Our Past</a>

</div>

<img src="assets/img/Image-Context.webp" alt="" class="about__img">
</div>
</section>

<!--========== SERVICES ==========-->
<section class="services section bd-container" id="services">
<span class="section-subtitle">Offering</span>
<h2 class="section-title">Our amazing services</h2>

<div class="services__container bd-grid">
<div class="services__content">
<svg class="services__img" xmlns="http://www.w3.org/2000/svg">
<img src="./assets/img/svgviewer-output (1).svg" alt="" >
</svg>
<h3 class="services__title">Excellent food</h3>
<p class="services__description">We offer our clients excellent quality services for many years, with the best and delicious food in the city.</p>
</div>

<div class="services__content">
<svg class="services__img" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<img src="./assets/img/svgviewer-output.svg" alt="" >
</g>
<defs>
<clipPath id="clip0">
<rect width="64" height="64" fill="white"/>
</clipPath>
</defs>
</svg>
<h3 class="services__title">Fast food</h3>
<p class="services__description">We offer our clients excellent quality services for many years, with the best and delicious food in the city.</p>
</div>

<div class="services__content">
<svg class="services__img" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<img src="./assets/img/svgviewer-output (2).svg" alt="" >
</g>
<defs>
<clipPath id="clip0">
<rect width="64" height="64" fill="white"/>
</clipPath>
</defs>
</svg>
<h3 class="services__title">Delivery</h3>
<p class="services__description">We offer our clients excellent quality services for many years, with the best and delicious food in the city.</p>
</div>
</div>
</section>

<!--========== MENU ==========-->
<section class="menu section bd-container" id="menu">
<span class="section-subtitle">Special</span>
<h2 class="section-title">Menu of the week</h2>

<div class="menu__container bd-grid">
<div class="menu__content">
<img src="assets/img/plate1.png" alt="" class="menu__img">
<h3 class="menu__name">Barbecue salad</h3>
<span class="menu__detail">Delicious dish</span>
<span class="menu__preci">$22.00</span>
<a href="#" class="button menu__button"><i class='bx bx-cart-alt'></i></a>
</div>

<div class="menu__content">
<img src="assets/img/plate2.png" alt="" class="menu__img">
<h3 class="menu__name">Salad with fish</h3>
<span class="menu__detail">Delicious dish</span>
<span class="menu__preci">$12.00</span>
<a href="#" class="button menu__button"><i class='bx bx-cart-alt'></i></a>
</div>

<div class="menu__content">
<img src="assets/img/plate3.png" alt="" class="menu__img">
<h3 class="menu__name">Spinach salad</h3>
<span class="menu__detail">Delicious dish</span>
<span class="menu__preci">$9.50</span>
<a href="#" class="button menu__button"><i class='bx bx-cart-alt'></i></a>
</div>
</div>
</section>

<!--===== APP =======-->
<section class="app section bd-container">
<div class="app__container bd-grid">
<div class="app__data">
<span class="section-subtitle app__initial">App</span>
<h2 class="section-title app__initial">App is aviable</h2>
<p class="app__description">Find our application and download it, you can make reservations, food orders, see your deliveries on the way and much more.</p>
<div class="app__stores">
<a href="#"><img src="assets/img/app1.png" alt="" class="app__store"></a>
<a href="#"><img src="assets/img/app2.png" alt="" class="app__store"></a>
</div>
</div>

<img src="assets/img/movil-app.png" alt="" class="app__img">
</div>
</section>

<!--========== CONTACT US ==========-->
<section class="contact section bd-container" id="contact">
<div class="contact__container bd-grid">
<div class="contact__data">
<span class="section-subtitle contact__initial">Let's talk</span>
<h2 class="section-title contact__initial">Contact us</h2>
<p class="contact__description">If you want to reserve a table in our restaurant, contact us and we will attend you quickly, with our 24/7 chat service.</p>
</div>

<div class="contact__button">
<a href="#" class="button">Contact us now</a>
</div>
</div>
</section>
</main>

<!--========== FOOTER ==========-->
<footer class="footer section bd-container">
<div class="footer__container bd-grid">
<div class="footer__content">
<a href="#" class="footer__logo">Tasty Food</a>
<span class="footer__description">Restaurant</span>
<div>
<a href="#" class="footer__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-twitter'></i></a>
</div>
</div>

<div class="footer__content">
<h3 class="footer__title">Services</h3>
<ul>
<li><a href="#" class="footer__link">Delivery</a></li>
<li><a href="#" class="footer__link">Pricing</a></li>
<li><a href="#" class="footer__link">Fast food</a></li>
<li><a href="#" class="footer__link">Reserve your spot</a></li>
</ul>
</div>

<div class="footer__content">
<h3 class="footer__title">Information</h3>
<ul>
<li><a href="#" class="footer__link">Event</a></li>
<li><a href="#" class="footer__link">Contact us</a></li>
<li><a href="#" class="footer__link">Privacy policy</a></li>
<li><a href="#" class="footer__link">Terms of services</a></li>
</ul>
</div>

<div class="footer__content">
<h3 class="footer__title">Adress</h3>
<ul>
<li>Lima - Peru</li>
<li>Jr Union #999</li>
<li>999 - 888 - 777</li>
<li>tastyfood@email.com</li>
</ul>
</div>
</div>

<p class="footer__copy">&#169; 2024 Bedimcode. All right reserved</p>
</footer>

<!--========== SCROLL REVEAL ==========-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--========== MAIN JS ==========-->
<script src="assets/js/main.js"></script>
</body>
</html>