На нашем сайте Вы сможете найти готовые курсовые и дипломные работы по программированию
Сейчас работаем

Сайт "Аренда премиальных автомобилей" (языки HTML, CSS, TypeScript) и фреймворк Angular

Задание

Верстка сайта Аренда премиальных автомобилей по макету в Figma на HTML, CSS и с переносом проекта в Angular. 

Функционал программы

Функционал минимальный, потому что сайт без админки. Есть возможность выбирать автомобили из двух категорий и оставлять заявку.

Фрагмент программного кода(первоначальный)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Аренда премиальных автомобилей</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

<header class="header">
    <div class="container">
        <div class="logo">
            <img src="/Images/loading-150-1.gif" data-src="images/logo.png" alt="logo">
        </div>
        <nav class="menu">
            <ul>
                <li class="menu-item">
                    <a href="#">Главная</a>
                </li>
                <li class="menu-item">
                    <a href="#cars">Автомобили</a>
                </li>
                <li class="menu-item">
                    <a href="#price">Бронирование авто</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<section class="main">
    <div class="container">
        <div class="main-info">
            <h1 class="main-title">Аренда премиальных автомобилей</h1>
            <div class="main-text">
                В нашем клубе имеется солидная коллекция спортивных автомобилей — от достаточно распространенных
                серийных машин до настоящего гоночного эксклюзива. Воспользуйтесь уникальной возможностью побывать за
                рулем настоящей легенды и узнать, на что она способна за пределами гоночной трассы!
            </div>
            <div class="main-action">
                <button class="button" id="main-action">Посмотреть автомобили</button>
            </div>
        </div>
    </div>
</section>

<section class="car" id="cars">
    <div class="container">
        <h2 class="sub-title">Наш автопарк</h2>
        <div class="car-items">
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/1.png" alt="Image 1">
                    </div>
                <div class="car-item-title">Lamborghini Huracan Spyder</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>5.2 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2017</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/2.png" alt="Image 2">
                </div>
                <div class="car-item-title">Chevrolet Corvette</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>6.2 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2019</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/3.png" alt="Image 3">
                </div>
                <div class="car-item-title">Ferrari California</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>3.9 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2010</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/4.png" alt="Image 4">
                </div>
                <div class="car-item-title">Lamborghini Urus</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>4.0 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2019</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/5.png" alt="Image 5">
                </div>
                <div class="car-item-title">Audi R8</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>5.2 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2018</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/6.png" alt="Image 6">
                </div>
                <div class="car-item-title">Chevrolet Camaro</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>2.0 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2019</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/7.png" alt="Image 7">
                </div>
                <div class="car-item-title">Maserati Quattroporte</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>3.0 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2018</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/8.png" alt="Image 8">
                </div>
                <div class="car-item-title">Dodge Challenger</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>6.4 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2019</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>
            <div class="car-item">
                <div class="car-item-image">
                    <img src="/Images/loading-150-1.gif" data-src="images/9.png" alt="Image 9">
                </div>
                <div class="car-item-title">Nissan GT-R</div>
                <div class="car-item-info">
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/transmission.png" alt="Transmission">
                        <div>Коробка</div>
                        <div>автомат</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/wheel.png" alt="Wheel">
                        <div>Двигатель</div>
                        <div>3.8 л.c.</div>
                    </div>
                    <div class="car-item-point">
                        <img src="/Images/loading-150-1.gif" data-src="images/year.png" alt="Year">
                        <div>Год выпуска</div>
                        <div>2019</div>
                    </div>
                </div>
                <div class="car-item-action">
                    <button class="button car-button">Забронировать</button>
                </div>
            </div>

        </div>
    </div>
</section>
<section class="price" id="price">
    <div class="container">
        <h2 class="sub-title">Узнать цену и забронировать</h2>
        <div class="price-text">
            Заполните данные, и мы перезвоним вам для уточнения всех деталей бронирования
        </div>
        <form action="" class="price-form">
            <input type="text" class="price-input" id="name" placeholder="Ваше имя">
            <input type="text" class="price-input" id="phone" placeholder="Ваш телефон">
            <input type="text" class="price-input" id="car" placeholder="Автомобиль,который вас интересует">
            <button class="button" type="button" id="price-action">Узнать цену</button>
        </form>
        <img src="/Images/loading-150-1.gif" data-src="images/rolls.png" alt="Rolls" class="price-image">
    </div>
</section>

Фрагмент программного кода на Angular

<header class="header">
  <div class="container">
    <div class="logo">
      <img src="/Images/loading-150-1.gif" data-src="assets/images/logo.png" alt="logo">
    </div>
    <nav class="menu">
      <ul>
        <li class="menu-item">
          <a href="#">Главная</a>
        </li>
        <li class="menu-item">
          <a href="#cars">Автомобили</a>
        </li>
        <li class="menu-item">
          <a href="#price">Бронирование авто</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<section class="main" [ngStyle]="bgPos">
  <div class="container">
    <div class="main-info">
      <h1 class="main-title">Аренда премиальных автомобилей</h1>
      <div class="main-text">
        В нашем клубе имеется солидная коллекция спортивных автомобилей — от достаточно распространенных
        серийных машин до настоящего гоночного эксклюзива. Воспользуйтесь уникальной возможностью побывать за
        рулем настоящей легенды и узнать, на что она способна за пределами гоночной трассы!
      </div>
      <div class="main-action">
        <button class="button" id="main-action" (click)="goScroll(cars)">Посмотреть автомобили</button>
      </div>
    </div>
  </div>
</section>

<section class="car" id="cars" #cars>
  <div class="container">
    <h2 class="sub-title">Наш автопарк</h2>
    <div class="car-toggle">
      <div [ngClass]="{active: category === 'sport'}" (click)="toggleCategory('sport')">Sport</div>
      <div [ngClass]="{active: category === 'luxury'}" (click)="toggleCategory('luxury')">Luxury</div>
    </div>
   
         

Скриншот архива с проектом

      

Содержание архива

  • папка с проектом в WebStorm с первоначальной версткой;
  • папка с проектом в WebStorm с итоговым проектом в Angular;
  • ссылка на макет в Figma;

Пояснения по запуску программы

Создать на компьютере или ноутбуке папку Projects и поместить туда проект shopcars-app/ Открыть в редакторе VS Code или WebStorm.  Написать в терминале команду ng serve. Сервер запустится. 

Купить 10000,00 
Сразу после оплаты Вы получите работу на электронную почту. Файлы отправляются автоматически. Исходник программ Вы сможете отредактировать, как Вам нужно.
Комментарии (2)

platonlaptev

/ /

Оставить комментарий

Ты не можешь комментировать

Только зарегистрированые пользователи имеют возможность комментировать работы
Похожие работы
Тип Название Рейтинг Категория Стоимость
Исходник Сайт аренды автомобилей (Html, css, Angular) new 0 HTML/CSS 10 000,00
Исходник Шаблон сайта онлайн курсов (html, css) new 0 HTML/CSS 1 000,00
Лабораторная Простой макет сайта "Фотогалерея" HTML/CSS 1 HTML/CSS бесплатно
Диплом Дипломный проект: РАЗРАБОТКА ВЕБ-РЕСУРСА ДЛЯ ЗАКАЗА УСЛУГ ХУДОЖНИКА HTML + CSS + PHP 0 HTML/CSS 2 300,00
Исходник Погодное приложение (JavaScript, html, css Vue.js) new 0 JavaScript 2 000,00
Другие работы автора
Тип Название Рейтинг Категория Стоимость
Исходник Игра пинг понг Python 0 Python 430,00
Исходник Логическая игра "Бейглз" Python new 0 Python 700,00
Исходник Программа "Гипотеза Коллатца" Python new 0 Python 500,00
Исходник Программа Парадокс дней рождения Python new 0 Python 700,00
Исходник Телеграм бот на Python 0 Python 1 500,00
Новые работы
Тип Название Рейтинг Категория Стоимость
Исходник Библиотека. Учет книг (C#, WPF, NET 6.0, SQL Server) new 0 .NET (C#) 2 000,00
Исходник Учет посещаемости занятий (C#, WPF, SQL Server, SQLite) new 0 .NET (C#) 2 500,00
Исходник Программа "Гипотеза Коллатца" Python new 0 Python 500,00
Исходник Генератор календарей (Python) new 1 Python 800,00
Контрольная Театр (C#, WinForms, Access) new 0 .NET (C#) 1 500,00
Купить

10000,00 

Покупается впервые!
Сразу после оплаты Вы получите работу на электронную почту. Файлы отправляются автоматически. Исходник программ Вы сможете отредактировать, как Вам нужно.

Заказать через

продажа сайта.rar
80253349
Оцени работу

рейтинг

Категории
Сайт "Аренда премиальных автомобилей" (языки HTML, CSS, TypeScript) и фреймворк Angular
Сайт, написанный на HTML, CSS, TypeScript и с использованием фреймворка Angular.
Категория: Образование
Стоимость: 10000,00