Скриншот архива с проектом
Структура проекта
Задание
Ваша цель используя навыки работы с html/css/js и React сверстать сайт для заказа еды и перенести его в React. Разрабатыываемый сайт должен представлять из себя Landing Page без использования бэкенда.Функционал программы
Фрагмент программного кода (верстка)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burger Rush - доставка 24 на 7</title>
<link rel="stylesheet" href="static/css/styles.css">
<link rel="stylesheet" href="static/css/adaptive.css">
</head>
<body>
<div class="burger-slider-container">
<div class="burger-slider-track">
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger1.png" alt="Бургер 1" /></div>
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger2.png" alt="Бургер 2" /></div>
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger3.png" alt="Бургер 3" /></div>
<!-- Дублируем для бесконечной прокрутки -->
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger1.png" alt="Бургер 1" /></div>
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger2.png" alt="Бургер 2" /></div>
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger3.png" alt="Бургер 3" /></div>
<!-- Дублируем для бесконечной прокрутки -->
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger1.png" alt="Бургер 1" /></div>
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger2.png" alt="Бургер 2" /></div>
<div class="burger-slide"><img src="/images/loading-150-1.gif" data-src="/static/images/burger3.png" alt="Бургер 3" /></div>
</div>
</div>
<main class="main">
<div class="currency" title="Изменить валюту" id="change-currency">$</div>
<header class="header">
<div class="container">
<div class="logo">
<img src="/images/loading-150-1.gif" data-src="static/images/logo.png" alt="Logo">
</div>
<div class="burger-menu" id="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">
<a data-link="products">Каталог</a>
</li>
<li class="menu-item">
<a data-link="love">О Нас</a>
</li>
<li class="menu-item">
<a data-link="order">Оформление заказа</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="main-info">
<h1 class="main-title">The fastest food, for instant hunger.</h1>
<p class="main-text">
Some food has looked so awful that it's looked like something that the dog's brought home, yet after one mouthful I've
been left eating my thoughts, my words & my food and gone back for seconds.
</p>
<div class="main-action">
<button class="button" id="main-action-button">Заказать</button>
</div>
</div>
<img src="/images/loading-150-1.gif" data-src="static/images/main-burger.png" alt="Burgers" class="main-image">
</div>
</section>
<section class="products" id="products">
<div class="container">
<div class="common-title">Выберите товары</div>
<div class="products-items">
<div class="products-item">
<div class="products-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/Пицца Гавайская.jpg" alt="Product">
</div>
<div class="products-item-details">
<div class="products-item-title">Пицца Гавайская</div>
<div class="products-item-text">
Классическое сочетание ананасов, ветчины и сыра на нежном тесте.
</div>
<div class="products-item-extra">
<div class="products-item-info">
<div class="products-item-price" data-base-price="10">10 $</div>
<div class="products-item-weight">1 шт./ 860 гр.</div>
</div>
<button class="button violet-button">Заказать</button>
</div>
</div>
</div>
<div class="products-item">
<div class="products-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/Пицца Гриль.jpg" alt="Product">
</div>
<div class="products-item-details">
<div class="products-item-title">Пицца Гриль</div>
<div class="products-item-text">
Ароматная пицца с курицей-гриль, перцем и пикантным соусом барбекю.
</div>
<div class="products-item-extra">
<div class="products-item-info">
<div class="products-item-price" data-base-price="10">10 $</div>
<div class="products-item-weight">1 шт./ 860 гр.</div>
</div>
<button class="button violet-button">Заказать</button>
</div>
</div>
</div>
<div class="products-item">
<div class="products-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/Пицца Деревенская.jpg" alt="Product">
</div>
<div class="products-item-details">
<div class="products-item-title">Пицца Деревенская</div>
<div class="products-item-text">
Картофель, бекон, маринованные огурчики и зелень – по-домашнему вкусно!
</div>
<div class="products-item-extra">
<div class="products-item-info">
<div class="products-item-price" data-base-price="18">18 $</div>
<div class="products-item-weight">1 шт./ 800 гр.</div>
</div>
<button class="button violet-button">Заказать</button>
</div>
</div>
</div>
<div class="products-item">
<div class="products-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/Пицца Жульен.jpg" alt="Product">
</div>
<div class="products-item-details">
<div class="products-item-title">Пицца Жульен</div>
<div class="products-item-text">
Изысканная пицца с грибами, курицей и сливочным соусом – как любимый жульен.
</div>
<div class="products-item-extra">
<div class="products-item-info">
<div class="products-item-price" data-base-price="10">10 $</div>
<div class="products-item-weight">1 шт./ 860 гр.</div>
</div>
<button class="button violet-button">Заказать</button>
</div>
</div>
</div>
<div class="products-item">
<div class="products-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/Пицца Морская Нью.jpg" alt="Product">
</div>
<div class="products-item-details">
<div class="products-item-title">Пицца Морская Нью</div>
<div class="products-item-text">
Морской коктейль, маслины, сыр и фирменный соус – для настоящих гурманов.
</div>
<div class="products-item-extra">
<div class="products-item-info">
<div class="products-item-price" data-base-price="15">15 $</div>
<div class="products-item-weight">1 шт./ 1000 гр.</div>
</div>
<button class="button violet-button">Заказать</button>
</div>
</div>
</div>
<div class="products-item">
<div class="products-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/Пицца Президентская.jpg" alt="Product">
</div>
<div class="products-item-details">
<div class="products-item-title">Пицца Президентская</div>
<div class="products-item-text">
Люксовая пицца с пармской ветчиной, рукколой и трюфельным маслом.
</div>
<div class="products-item-extra">
<div class="products-item-info">
<div class="products-item-price" data-base-price="18">18 $</div>
<div class="products-item-weight">1 шт./ 1200 гр.</div>
</div>
<button class="button violet-button">Заказать</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="love" id="love">
<div class="container">
<div class="common-title">Готовим с любовью</div>
<div class="love-items">
<div class="love-item love-item-white">
<div class="love-item-title">Приготовлено с заботой, чтобы радовать вас каждый день</div>
<div class="love-item-text">
Мы с гордостью представляем вам нашу лучшую пиццу, приготовленную по старинным итальянским рецептам. Также мы готовим вкуснейние бургеры и чизбургеры. Вы точно останетесь довольны! Голод - Вам не грозит!
</div>
</div>
<div class="love-item love-item-image">
<img src="/images/loading-150-1.gif" data-src="static/images/love-image.jpeg" alt="Pizza image">
</div>
</div>
</div>
</section>
<section class="order" id="order">
<div class="container">
<div class="common-title"> Закажите НАШИ пиццу и бургеры</div>
<img src="/images/loading-150-1.gif" data-src="static/images/tomatoes_and_onions.png" alt="tomatoes_and_onions" class="order-bg-image">
<div class="order-block">
<div class="order-form">
<div class="order-block-text">
Откройте для себя волшебство вкуса с нашими премиальными бургерами и пиццей. Закажите их прямо сейчас - уталите свой голод!
</div>
<div class="order-form-inputs">
<input id="product" type="text" placeholder="Выберите пиццу / бургер">
<input id="name" type="text" placeholder="Ваше имя">
<input id="phone" type="text" placeholder="Ваш телефон">
<button class="button violet-button" id="order-action">Оформить заказ</button>
</div>
</div>
<div class="order-block-image">
<img src="/images/loading-150-1.gif" data-src="static/images/order-burger.png" alt="Order Pizza-Burgers" class="order-burgers">
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="logo">
<img src="/images/loading-150-1.gif" data-src="static/images/logo.png" alt="Logo">
</div>
<div class="rights">Все права защищены</div>
</div>
</footer>
</main>
<script src="/images/loading-150-1.gif" data-src="static/js/scripts.js"></script>
</body>
</html>
Фрагмент программного кода (компонент Header)
import React from 'react';
import logo from '../assets/images/logo.png';
import '../BurgerMenu.css';
import BurgerSlider from '../components/BurgerSlider';
import BurgerMenu from './BurgerMenu';
export default function Header() {
return (
<header className="header">
<div className="container">
<div className="logo">
<img src="/images/loading-150-1.gif" data-src={logo} alt="Logo" />
</div>
<div className="burger-menu" id='burger'>
<BurgerMenu />
</div>
<nav className="menu">
<ul className="menu-list">
<li className="menu-item">
<a href="#home" data-link="home">Главная</a>
</li>
<li className="menu-item">
<a href="#products" data-link="products">Каталог</a>
</li>
<li className="menu-item">
<a href="#love" data-link="love">О Нас</a>
</li>
<li className="menu-item">
<a href="#order" data-link="order">Оформление заказа</a>
</li>
</ul>
</nav>
</div>
</header>
);
}
Пояснения по запуску программы
Скачать и установить Visual Studio Code со всеми необходимыми расширениями. Установить Node.js Запустить проект. Для этого открываем папку burgers - cd burgers-app - npm run dev. Все довольно просто.
Телеграм
-