Structure Test

Developer
Maxim Konoval
Size
6,467 Kb
Views
30,360
  1. Structure Test Previews
  2. Structure Test HTML Codes
  3. Structure Test CSS Codes
  4. Structure Test JS Codes

How do I make an structure test?

What is a structure test? How do you make a structure test? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.

Structure Test Previews
IQ Test

Structure Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Structure Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main>	<!-- Tables Head -->	<div class="tables-header-wrapper">	<div class="tables-header row">	<div class="status_last_update col-m">Дата и время изменения статуса</div>	<div class="order_number col-m">Номер заказа</div>	<div class="session_id col-m">ID сессии</div>	<div class="order_status col-xxl">Статус заказа</div>	<div class="creation_date col-m">Дата и время создания заказа</div>	<div class="payment_date col-m">Дата и время оплаты</div>	<div class="transaction col-m">Номер транзакции</div>	<div class="progress_status col-s">Статус обработки</div>	<div class="admin col-m">Администратор</div>	<div class="netfare col-s">Стоимость</div>	<div class="markup col-s">Наценка</div>	<div class="fee col-s">Комиссия</div>	<div class="price col-s">Цена</div>	<div class="currency col-xs">Валюта</div>	<div class="provider_zone col-xs">Zone</div>	<div class="segment_id col-s">Segment ID</div>	<div class="ticket_number col-s">Номер билета</div>	<div class="pnr col-s">Номер в GDS</div>	<div class="vendor_locator col-s">vendorLocator</div>	<div class="segment_class col-s">Класс</div>	<div class="origin col-l">Откуда</div>	<div class="destination col-l">Куда</div>	<div class="route_type col-s">Тип маршрута</div>	<div class="departure_date col-s">Дата отпр</div>	<div class="departure_time col-xs">Время отпр</div>	<div class="arrival_date col-s">Дата приб</div>	<div class="arrival_time col-xs">Время приб</div>	<div class="duration col-xs">Duration</div>	<div class="passengers col-xl">Пассажиры</div>	<div class="carrier col-s">Перевозчик</div>	<div class="transport_type col-xs">Тип транспорта</div>	<div class="flight_number col-s">Номер рейса</div>	<div class="client_email col-xl">Email пользователя</div>	<div class="client_name col-xl">Имя пользователя</div>	<div class="client_phone col-l">Телефон пользователя</div>	<div class="passenger_birthdate col-s">Дата рождения пассажира</div>	<div class="passenger_doc_type col-s">Тип документа</div>	<div class="passenger_doc_number col-m">Номер документа</div>	<div class="passenger_doc_exp col-s">Срок действия документа</div>	<div class="gender col-xs">Пол</div>	<div class="citizenship col-l">Гражданство</div>	<div class="bonus_card_name col-m">Бонусная карта</div>	<div class="bonus_card_number col-m">Номер бонусной карты</div>	<div class="luggage_quantity col-xs">Багаж</div>	<div class="luggage_weight col-xs">Вес</div>	<div class="food col-xs">Питание</div>	<div class="child col-xs">Ребенок</div>	<div class="animal col-xs">Животные</div>	<div class="time_limit_hours col-s">TimeLimit</div>	<div class="status col-s">Статус</div>	<div class="reason col-xl">Причина</div>	<div class="scan col-xl">Скан документа</div>	</div>	</div>	<div class="order-wrapper">	<div class="order-summary row">	<div class="status_last_update col-m">02.02.2017, 20:30</div>	<div class="order_number col-m select">1359874-O-1</div>	<div class="session_id col-m"></div>	<div class="order_status col-xxl button-transparent select radio-trigger" role="button" tabindex="0">Сумма к возврату ожидает подтверждение от клиента</div>	<div class="creation_date col-m">02.02.2017, 19:40</div>	<div class="payment_date col-m">02.02.2017, 19:40</div>	<div class="transaction col-m"></div>	<div class="progress_status col-s button-transparent select radio-trigger" role="button" tabindex="0">Выполнен</div>	<div class="admin col-m">Оля Михеева</div>	<div class="netfare col-s button-transparent input-trigger" role="button" tabindex="0">32400</div>	<div class="markup col-s button-transparent input-trigger" role="button" tabindex="0">1650</div>	<div class="fee col-s button-transparent input-trigger" role="button" tabindex="0">1650</div>	<div class="price col-s">34500</div>	<div class="currency col-xs button-transparent select select-trigger" role="button" tabindex="0">UAH</div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l">Франкфурт-на-Майне</div>	<div class="destination col-l">Марсель</div>	<div class="route_type col-s">Round Trip</div>	<div class="departure_date col-s">03.01.2017</div>	<div class="departure_time col-xs">07:00</div>	<div class="arrival_date col-s">03.01.2017</div>	<div class="arrival_time col-xs">07:00</div>	<div class="duration col-xs">27:45</div>	<div class="passengers col-xl">4</div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl button-transparent input-trigger" role="button" tabindex="0">[email protected]</div>	<div class="client_name col-xl button-transparent input-trigger" role="button" tabindex="0">Александр Константинопольский</div>	<div class="client_phone col-l button-transparent input-trigger" role="button" tabindex="0">+380990990990</div>	<div class="passenger_birthdate col-s"></div>	<div class="passenger_doc_type col-s"></div>	<div class="passenger_doc_number col-m"></div>	<div class="passenger_doc_exp col-s"></div>	<div class="gender col-xs"></div>	<div class="citizenship col-l"></div>	<div class="bonus_card_name col-m"></div>	<div class="bonus_card_number col-m"></div>	<div class="luggage_quantity col-xs"></div>	<div class="luggage_weight col-xs"></div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	<div class="passenger-wrapper">	<div class="passenger-summary row">	<div class="status_last_update col-m"><h2>Пассажир 202</h2></div>	<div class="order_number col-m"></div>	<div class="session_id col-m"></div>	<div class="order_status col-xxl"></div>	<div class="creation_date col-m"></div>	<div class="payment_date col-m"></div>	<div class="transaction col-m"></div>	<div class="progress_status col-s"></div>	<div class="admin col-m"></div>	<div class="netfare col-s"></div>	<div class="markup col-s"></div>	<div class="fee col-s"></div>	<div class="price col-s"></div>	<div class="currency col-xs"></div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l"></div>	<div class="destination col-l"></div>	<div class="route_type col-s"></div>	<div class="departure_date col-s"></div>	<div class="departure_time col-xs"></div>	<div class="arrival_date col-s"></div>	<div class="arrival_time col-xs"></div>	<div class="duration col-xs"></div>	<div class="passengers col-xl button-transparent input-trigger" role="button" tabindex="0">Александр Константинопольский</div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s button-transparent input-trigger" role="button" tabindex="0">03.01.2017</div>	<div class="passenger_doc_type col-s button-transparent input-trigger" role="button" tabindex="0">Паспорт</div>	<div class="passenger_doc_number col-m button-transparent input-trigger" role="button" tabindex="0">ЕК987463</div>	<div class="passenger_doc_exp col-s button-transparent input-trigger" role="button" tabindex="0">03.01.2017</div>	<div class="gender col-xs button-transparent select radio-trigger" role="button" tabindex="0">М</div>	<div class="citizenship col-l button-transparent select select-trigger" role="button" tabindex="0">Украина</div>	<div class="bonus_card_name col-m button-transparent input-trigger" role="button" tabindex="0">StarAlliance</div>	<div class="bonus_card_number col-m button-transparent input-trigger" role="button" tabindex="0">1380057652</div>	<div class="luggage_quantity col-xs"></div>	<div class="luggage_weight col-xs"></div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	<div class="changes-wrapper">	<div class="changes-header row">	<div class="status_last_update col-m"><h3>Изменения</h3></div>	<div class="order_number col-m"></div>	<div class="session_id col-m"></div>	<div class="order_status col-xxl"></div>	<div class="creation_date col-m"></div>	<div class="payment_date col-m"></div>	<div class="transaction col-m"></div>	<div class="progress_status col-s"></div>	<div class="admin col-m"></div>	<div class="netfare col-s"></div>	<div class="markup col-s"></div>	<div class="fee col-s"></div>	<div class="price col-s"></div>	<div class="currency col-xs"></div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l"></div>	<div class="destination col-l"></div>	<div class="route_type col-s"></div>	<div class="departure_date col-s"></div>	<div class="departure_time col-xs"></div>	<div class="arrival_date col-s"></div>	<div class="arrival_time col-xs"></div>	<div class="duration col-xs"></div>	<div class="passengers col-xl"></div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s"></div>	<div class="passenger_doc_type col-s"></div>	<div class="passenger_doc_number col-m"></div>	<div class="passenger_doc_exp col-s"></div>	<div class="gender col-xs"></div>	<div class="citizenship col-l"></div>	<div class="bonus_card_name col-m"></div>	<div class="bonus_card_number col-m"></div>	<div class="luggage_quantity col-xs"></div>	<div class="luggage_weight col-xs"></div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	<div class="passenger-changes row">	<div class="status_last_update col-m"><h2>Пассажир 202</h2></div>	<div class="order_number col-m"></div>	<div class="session_id col-m"></div>	<div class="order_status col-xxl"></div>	<div class="creation_date col-m"></div>	<div class="payment_date col-m"></div>	<div class="transaction col-m"></div>	<div class="progress_status col-s"></div>	<div class="admin col-m"></div>	<div class="netfare col-s"></div>	<div class="markup col-s"></div>	<div class="fee col-s"></div>	<div class="price col-s"></div>	<div class="currency col-xs"></div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l"></div>	<div class="destination col-l"></div>	<div class="route_type col-s"></div>	<div class="departure_date col-s"></div>	<div class="departure_time col-xs"></div>	<div class="arrival_date col-s"></div>	<div class="arrival_time col-xs"></div>	<div class="duration col-xs"></div>	<div class="passengers col-xl button-transparent input-trigger" role="button" tabindex="0">Александр Константинопольский</div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s button-transparent input-trigger" role="button" tabindex="0">03.01.2017</div>	<div class="passenger_doc_type col-s button-transparent input-trigger" role="button" tabindex="0">Паспорт</div>	<div class="passenger_doc_number col-m button-transparent input-trigger" role="button" tabindex="0">ЕК987463</div>	<div class="passenger_doc_exp col-s button-transparent input-trigger" role="button" tabindex="0">03.01.2017</div>	<div class="gender col-xs button-transparent select radio-trigger" role="button" tabindex="0">М</div>	<div class="citizenship col-l button-transparent select select-trigger" role="button" tabindex="0">Украина</div>	<div class="bonus_card_name col-m button-transparent input-trigger" role="button" tabindex="0">StarAlliance</div>	<div class="bonus_card_number col-m button-transparent input-trigger" role="button" tabindex="0">1380057652</div>	<div class="luggage_quantity col-xs"></div>	<div class="luggage_weight col-xs"></div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	</div>	<div class="segment-wrapper">	<div class="segment-summary row">	<div class="status_last_update col-m"><h3>Маршрут 01</h3></div>	<div class="order_number col-m"></div>	<div class="session_id col-m"></div>	<div class="order_status col-xxl"></div>	<div class="creation_date col-m"></div>	<div class="payment_date col-m"></div>	<div class="transaction col-m"></div>	<div class="progress_status col-s"></div>	<div class="admin col-m"></div>	<div class="netfare col-s"></div>	<div class="markup col-s"></div>	<div class="fee col-s"></div>	<div class="price col-s"></div>	<div class="currency col-xs"></div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l"></div>	<div class="destination col-l"></div>	<div class="route_type col-s"></div>	<div class="departure_date col-s"></div>	<div class="departure_time col-xs"></div>	<div class="arrival_date col-s"></div>	<div class="arrival_time col-xs"></div>	<div class="duration col-xs">27:45</div>	<div class="passengers col-xl"></div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s"></div>	<div class="passenger_doc_type col-s"></div>	<div class="passenger_doc_number col-m"></div>	<div class="passenger_doc_exp col-s"></div>	<div class="gender col-xs"></div>	<div class="citizenship col-l"></div>	<div class="bonus_card_name col-m"></div>	<div class="bonus_card_number col-m"></div>	<div class="luggage_quantity col-xs"></div>	<div class="luggage_weight col-xs"></div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	<div class="ticket-details row">	<div class="status_last_update col-m">02.02.2017, 20:30</div>	<div class="order_number col-m">1359874-O-1</div>	<div class="session_id col-m">2017172014</div>	<div class="order_status col-xxl button-transparent select radio-trigger" role="button" tabindex="0">Не создан. Попытка оплаты</div>	<div class="creation_date col-m">02.02.2017, 19:40</div>	<div class="payment_date col-m">02.02.2017, 19:40</div>	<div class="transaction col-m">13047134134</div>	<div class="progress_status col-s button-transparent select radio-trigger" role="button" tabindex="0">Выполнен</div>	<div class="admin col-m">Оля Михеева</div>	<div class="netfare col-s button-transparent input-trigger" role="button" tabindex="0">605</div>	<div class="markup col-s button-transparent input-trigger" role="button" tabindex="0">30.25</div>	<div class="fee col-s button-transparent input-trigger" role="button" tabindex="0">30.25</div>	<div class="price col-s"></div>	<div class="currency col-xs">UAH</div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s">231134321</div>	<div class="ticket_number col-s button-transparent input-trigger" role="button" tabindex="0">158392</div>	<div class="pnr col-s button-transparent input-trigger" role="button" tabindex="0">231134321</div>	<div class="vendor_locator col-s button-transparent input-trigger" role="button" tabindex="0">231134321</div>	<div class="segment_class col-s">E</div>	<div class="origin col-l">Франкфурт-на-Майне</div>	<div class="destination col-l">Марсель</div>	<div class="route_type col-s"></div>	<div class="departure_date col-s">03.01.2017</div>	<div class="departure_time col-xs">07:00</div>	<div class="arrival_date col-s">03.01.2017</div>	<div class="arrival_time col-xs">07:00</div>	<div class="duration col-xs">27:45</div>	<div class="passengers col-xl"></div>	<div class="carrier col-s">LO</div>	<div class="transport_type col-xs">A</div>	<div class="flight_number col-s">1487</div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s"></div>	<div class="passenger_doc_type col-s"></div>	<div class="passenger_doc_number col-m"></div>	<div class="passenger_doc_exp col-s"></div>	<div class="gender col-xs"></div>	<div class="citizenship col-l"></div>	<div class="bonus_card_name col-m"></div>	<div class="bonus_card_number col-m"></div>	<div class="luggage_quantity col-xs">1</div>	<div class="luggage_weight col-xs">23</div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	<div class="changes-wrapper">	<div class="changes-header row">	<div class="status_last_update col-m"><h3>Изменения</h3></div>	<div class="order_number col-m"></div>	<div class="session_id col-m"></div>	<div class="order_status col-xxl"></div>	<div class="creation_date col-m"></div>	<div class="payment_date col-m"></div>	<div class="transaction col-m"></div>	<div class="progress_status col-s"></div>	<div class="admin col-m"></div>	<div class="netfare col-s"></div>	<div class="markup col-s"></div>	<div class="fee col-s"></div>	<div class="price col-s"></div>	<div class="currency col-xs"></div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l"></div>	<div class="destination col-l"></div>	<div class="route_type col-s"></div>	<div class="departure_date col-s"></div>	<div class="departure_time col-xs"></div>	<div class="arrival_date col-s"></div>	<div class="arrival_time col-xs"></div>	<div class="duration col-xs">27:45</div>	<div class="passengers col-xl"></div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s"></div>	<div class="passenger_doc_type col-s"></div>	<div class="passenger_doc_number col-m"></div>	<div class="passenger_doc_exp col-s"></div>	<div class="gender col-xs"></div>	<div class="citizenship col-l"></div>	<div class="bonus_card_name col-m"></div>	<div class="bonus_card_number col-m"></div>	<div class="luggage_quantity col-xs"></div>	<div class="luggage_weight col-xs"></div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s"></div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	<div class="ticket-changes row">	<div class="status_last_update col-m">02.02.2017, 20:30</div>	<div class="order_number col-m">1359874-O-1</div>	<div class="session_id col-m">2017172014</div>	<div class="order_status col-xxl button-transparent select radio-trigger" role="button" tabindex="0">Изменения подтверждены клиентом</div>	<div class="creation_date col-m">02.02.2017, 19:40</div>	<div class="payment_date col-m">02.02.2017, 19:40</div>	<div class="transaction col-m">13047134134</div>	<div class="progress_status col-s button-transparent select radio-trigger" role="button" tabindex="0">Принят</div>	<div class="admin col-m">Оля Михеева</div>	<div class="netfare col-s button-transparent input-trigger" role="button" tabindex="0">605</div>	<div class="markup col-s button-transparent input-trigger" role="button" tabindex="0">30.25</div>	<div class="fee col-s button-transparent input-trigger" role="button" tabindex="0">30.25</div>	<div class="price col-s"></div>	<div class="currency col-xs button-transparent select select-trigger" role="button" tabindex="0">UAH</div>	<div class="provider_zone col-xs"></div>	<div class="segment_id col-s"></div>	<div class="ticket_number col-s"></div>	<div class="pnr col-s"></div>	<div class="vendor_locator col-s"></div>	<div class="segment_class col-s"></div>	<div class="origin col-l"></div>	<div class="destination col-l"></div>	<div class="route_type col-s"></div>	<div class="departure_date col-s"></div>	<div class="departure_time col-xs"></div>	<div class="arrival_date col-s"></div>	<div class="arrival_time col-xs"></div>	<div class="duration col-xs"></div>	<div class="passengers col-xl"></div>	<div class="carrier col-s"></div>	<div class="transport_type col-xs"></div>	<div class="flight_number col-s"></div>	<div class="client_email col-xl"></div>	<div class="client_name col-xl"></div>	<div class="client_phone col-l"></div>	<div class="passenger_birthdate col-s"></div>	<div class="passenger_doc_type col-s"></div>	<div class="passenger_doc_number col-m"></div>	<div class="passenger_doc_exp col-s"></div>	<div class="gender col-xs"></div>	<div class="citizenship col-l"></div>	<div class="bonus_card_name col-m"></div>	<div class="bonus_card_number col-m"></div>	<div class="luggage_quantity col-xs button-transparent input-trigger" role="button" tabindex="0">1</div>	<div class="luggage_weight col-xs button-transparent input-trigger" role="button" tabindex="0">23</div>	<div class="food col-xs"></div>	<div class="child col-xs"></div>	<div class="animal col-xs"></div>	<div class="time_limit_hours col-s button-transparent input-trigger" role="button" tabindex="0">12</div>	<div class="status col-s"></div>	<div class="reason col-xl"></div>	<div class="scan col-xl"></div>	</div>	</div>	</div>	</div>	</div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Structure Test - Script Codes CSS Codes

body {	position: relative;	width: 100%;	padding: 0;	font-family: Arial, sans-serif;	font-size: 14px;	line-height: 20px;	background-color: #fff;
}
* {	box-sizing: border-box;	outline: none;	border: none;
}
main { width: 7750px;	padding-bottom: 100px; text-align: left;
}
h2,
h3 { margin: 0; font-size: 14px; line-height: 20px;
}
a {	text-decoration: none;
}
img {	max-width: 100%;	height: auto;
}
button {	cursor: pointer;	line-height: 34px;	transition: all .2s ease;
}
[role="button"] {	cursor: pointer;
}
.is-disabled { pointer-events: none;
}
/* END Project Global Styles */
/* Interaction Elements Styles */
.button-std { cursor: pointer; text-align: center; color: #fff; background-color: #1d4eff; border-radius: 3px; transition: all .2s ease;
}
.button-std:hover,
.button-std:focus { background-color: #103cde;
}
.button-std:active { background-color: #0831c5;
}
.button-std.is-disabled,
.button-transparent.is-disabled,
.input-std.is-disabled { color: #8c8c8c; background-color: #f1f1f1;
}
.button-transparent,
.input-std { position: relative; cursor: pointer; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 3px; transition: all .2s ease;
}
.button-transparent:hover,
.button-transparent:focus,
.input-std:hover { border-color: #6e6e6e;
}
.button-transparent:active,
.input-std:focus { border-color: #1d4eff;
}
.button-cancel,
.button-delete { color: #505050; background-color: #fff; border: 1px solid #ffdfdf; border-radius: 3px;
}
.button-cancel:hover,
.button-cancel:focus,
.button-delete:hover,
.button-delete:focus { color: #c74646; background-color: #ffdfdf;
}
.button-cancel:active,
.button-delete:active { background-color: #ffc8c8; border: 1px solid #ffc8c8;
}
.button-cancel.is-disabled,
.button-delete.is-disabled { color: #bebebe; border-color: #f1f1f1;
}
.select::after { content: ''; position: absolute; top: 50%; right: 8px; display: block;	width: 0;	height: 0;	border-left: 4px solid transparent;	border-right: 4px solid transparent;	border-top: 4px solid #000; transition: all .25s ease;
}
/* END Interaction Elements Styles */
/* CRM Tables Styles */
/* Column Sizes */
[class*="col-"] { padding: 10px 8px; word-wrap: break-word;
}
.col-xs { -webkit-flex-basis: 80px; -ms-flex-preferred-size: 80px; flex-basis: 80px; max-width: 80px;
}
.col-s { -webkit-flex-basis: 120px; -ms-flex-preferred-size: 120px; flex-basis: 120px; max-width: 120px;
}
.col-m { -webkit-flex-basis: 140px; -ms-flex-preferred-size: 140px; flex-basis: 140px; max-width: 140px;
}
.col-l { -webkit-flex-basis: 180px; -ms-flex-preferred-size: 180px; flex-basis: 180px; max-width: 180px;
}
.col-xl { -webkit-flex-basis: 260px; -ms-flex-preferred-size: 260px; flex-basis: 260px; max-width: 260px;
}
.col-xxl { -webkit-flex-basis: 400px; -ms-flex-preferred-size: 400px; flex-basis: 400px; max-width: 400px;
}
/* END Column Sizes */
.row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 60px; padding-left: 20px; border-top: 1px solid #e5e5e5;
}
.tables-header-wrapper { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; padding-left: 20px; font-size: 12px; color: #787878; background-color: #fff; border-left: 5px solid transparent;	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.tables-header { height: 65px; background-color: #fff;
}
.tables-header-wrapper + .order-wrapper,
.route-back-wrapper,
.route-changes-wrapper { margin-top: 20px;
}
.order-wrapper { padding-left: 20px; border-top: 1px solid #e5e5e5; transition: all .2s ease;
}
.order-wrapper:hover { background-color: #f9f9f9;
}
.order-summary,
.passenger-summary { border-left: 5px solid transparent;
}
.order-summary { position: relative; cursor: pointer; border-top: none;
}
.order-summary .order_number.select::after { top: 45%; right: auto; left: -5px;
}
.order-summary.is-active .order_number.select::after { -webkit-transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%);
}
.arrow-down { position: absolute; top: 50%; left: -5px;	width: 0;	height: 0;	border-left: 4px solid transparent;	border-right: 4px solid transparent;	border-top: 4px solid #000; -webkit-transform-origin: 50% 40%; -ms-transform-origin: 50% 40%; transform-origin: 50% 40%; -webkit-transform: rotate(0deg) translateY(-50%); -ms-transform: rotate(0deg) translateY(-50%); transform: rotate(0deg) translateY(-50%); transition: all .25s ease;
}
.order-summary.is-active .arrow-down { -webkit-transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%);
}
.passenger-wrapper { display: none;
}
.order-summary.is-active ~ .passenger-wrapper { display: block;
}
.order-wrapper .passenger-wrapper:last-of-type { padding-bottom: 60px;
}
.route-to-wrapper { background-color: #f4f7fb; border-left: 5px solid #3072c2;
}
.route-to-wrapper h3 { color: #3172c1;
}
.route-back-wrapper { background-color: #f8f5fc; border-left: 5px solid #783ed5;
}
.route-back-wrapper h3 { color: #783ed5;
}
.route-changes-wrapper { background-color: #fcf7f3; border-left: 5px solid #d26215;
}
.route-changes-wrapper h3 { color: #d26215;
}
/* END CRM Tables Styles */
/*------------------- Test ---------------------*/
/*.order-summary,
.passenger-summary { background-color: #fff;
}
.route-to-summary,
.route-to-wrapper .ticket-details { background-color: #f4f7fb;
}
.route-back-summary,
.route-back-wrapper .ticket-details { background-color: #f8f5fc;
}
.route-changes-summary,
.route-changes-wrapper .ticket-details { background-color: #fcf7f3;
}*/
/*------------------- END Test ---------------------*/
/* Modal Windows Styles */
.modal-window {	position: fixed;	top: 0;	right: 0;	bottom: 0;	left: 0;	z-index: -5;	opacity: 0;	visibility: hidden;	pointer-events: none;	background-color: rgba(0, 0, 0, .5);	-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);	transition: all .2s ease, z-index .2s ease-in;
}
.modal-window.is-active {	z-index: 10;	opacity: 1;	visibility: visible;	pointer-events: auto;	-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);	transition: all .2s ease-in, z-index .2s ease;
}
.modal-inner {	position: absolute;	top: 45%;	left: 50%;	padding: 25px 40px 40px;	color: #000;	background-color: #fff;	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);	-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.modal-inner h3 {	font-size: 16px;	line-height: 25px;
}
.action-type {	color: #8c8c8c;
}
.modal-inner label {	margin-left: 10px;
}
.modal-inner button,
.modal-inner .input-std {	display: block;	width: 100%;	height: 40px;	margin-top: 10px;
}
.modal-inner .button-std {	margin-top: 20px;
}
.modal-inner .input-std {	margin-top: 15px;	padding-right: 10px;	padding-left: 10px;
}
.modal-inner .button-transparent {	min-width: 180px;	width: 100%;	height: 40px;	margin-top: 15px;	padding: 9px 10px;
}
.file-modal .modal-inner {	position: relative;	width: 500px;
}
.file-modal .button-close {	position: absolute;	top: 15px;	right: 5px;	width: 20px;	height: 20px;	-webkit-transform: scaleX(1.3); -ms-transform: scaleX(1.3); transform: scaleX(1.3);	-webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center;	transition: all .2s ease;
}
.file-modal .button-close:hover {	color: #103cde;	-webkit-transform: scale(1.5, 1.25); -ms-transform: scale(1.5, 1.25); transform: scale(1.5, 1.25);
}
.file-modal h3 {	margin-bottom: 15px;	border-bottom: 1px solid #e5e5e5;
}
.file-row {	display: -webkit-flex;	display: -ms-flexbox;	display: flex;	-webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;	-webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-align-items: center; -ms-flex-align: center; align-items: center;	width: 100%;	margin-top: 20px;
}
.file-row .button-delete {	-webkit-flex-basis: 100px; -ms-flex-preferred-size: 100px; flex-basis: 100px;	margin-top: 0;	margin-right: 20px;
}
.file-modal .button-std {	margin-top: 30px;
}
.login-error {	border: 1px solid #ff0000;
}
/* END Modal Windows Styles */
/* Test styles for new structure */
.changes-wrapper { display: none; background-color: #fcf7f3;
}
.passenger-summary,
.ticket-details { cursor: pointer;
}
.passenger-summary.is-active + .changes-wrapper,
.ticket-details.is-active + .changes-wrapper { display: block;
}
.segment-summary,
.ticket-details { background-color: #f4f7fb;
}
/* END Test styles for new structure */

Structure Test - Script Codes JS Codes

$(document).ready(function() {	var showDetails = $('.order-summary, .passenger-summary, .ticket-details');	showDetails.click(function () {	$(this).toggleClass('is-active');	});
});
Structure Test - Script Codes
Structure Test - Script Codes
Home Page Home
Developer Maxim Konoval
Username Said_FD
Uploaded September 16, 2022
Rating 3
Size 6,467 Kb
Views 30,360
Do you need developer help for Structure Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maxim Konoval (Said_FD) Script Codes
Name
Vanilla CSS Accordion and Responsive Tables
Tactical Monkey
CRM Table Test
My Portfolio
Brutal Responsive Landing Page Prototype
Fully Flexbox Landing Page
CS-Service Landing Page
Animated Form
Vanilla CSS Switcher
Responsive Price List
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!