Building landing page

КНЯЗЬКОВ – РУКОВОДИТЕЛЬ ПР ОЕКТА, СЕО, ВЕР СТКА

СМИР ОНОВ – ВЕР СТКА, ДИЗАЙН, ПР ОГРАММИР ОВАНИЕ
БЕЛЕВИЧ – ВЕР СТКА, ДИЗАЙН, ПР ОГРАММИР ОВАНИЕ ,
ОПТИМИЗАЦИЯ
ШАХАЛОВ – КОПИРАЙТИНГ
 Что мы использовали на этом этапе
при разработке Landing Page
Провели общую оптимизацию сайта.
Адаптировали дизайн сайта под разрешение
дисплея ноутбука, планшета и смартфона.
 Объект управления

Данный проект создавался с целью поиска потенциальных клиентов во всемирной

паутине(WEB). Также, наш проект(сайт), является хорошей рекламой и прейскурантом
услуг для нашей Web – студии.
 Характеристика проекта
Наш проект классифицируется как монопроект.
$('.parent-slider').slick({ infinite: true, slidesToShow: 2, slidesToScroll: 2,
autoplay: true, autoplaySpeed: 4000, pauseOnHover: true, pauseOnDotsHover: true,
speed: 1000, dots: true, arrows: false, responsive: [{ breakpoint: 992,
settings: { slidesToShow: 1, slidesToScroll: 1 } }, {
breakpoint: 576, settings: { draggable: false, slidesToShow:
1, slidesToScroll: 1 } } ] });
Оплата банковской картой
При добавлении оплаты, я использовал сторонни й скрипт с GitHub, интегрировал её в наш проект и
добавил стили, и HTML разметку
<form class="creditly-card-form">
<div class="top-level-wrapper gray-theme-wrapper" style="display:none;">
</div>
<div class="top-level-wrapper blue-theme-wrapper">
<section class="creditly-wrapper blue-theme">
<div class="credit-card-wrapper">
<div class="first-row form-group">
<div class="col-sm-8 controls">
<label class="control-label">Card Number</label>
<div class="col-sm-4 controls">
<label class="control-label">CVV</label>
<input class="security-code form-control" · inputmode="numeric" pattern="\d*" type="text"
name="security-code" placeholder="&#149;&#149;&#149;">
</div>
</div>
<div class="second-row form-group">
<div class="col-sm-8 controls">
<label class="control-label">Name on Card</label>
<input class="billing-address-name form-control" type="text" name="name" placeholder="John
Smith">
</div>
<div class="col-sm-4 controls">
<label class="control-label">Expiration</label>
<input class="expiration-month-and-year form-control" type="text" name="expiration-month-
and-year" placeholder="MM / YY">
</div>
Добавление формы обратной связи
 HTML разметка формы
<div class="form_data">
<form class="communication_data" data-persist="garlic" method="POST">
<div class="emptiness "></div>
<input type="Name" placeholder="Name*" class="Name">
<input type="Email" placeholder="Email*" class="Email">
<input type="Subject" placeholder="Subject*" class="Subject">
</form>
</div>
<div class=" form_message">
<form class="communication_message" data-persist="garlic" method="POST">
<div class="emptiness"></div>
<textarea name="message" placeholder="Message*"></textarea>
<div class="button-send-message"><a href="#" class="button" onclick="return false">SEND
MESSAGE</a></div>
Добавление местоположения нашей
организации
 HTML разметка карты
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 settings-map">
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor
%3A00bff5ca5c8ccb5f1594c1f6154a0322d1a59422622a904fb03789d6b7ee4648&amp;source=
constructor" width="100%" height="370" frameborder="0"></iframe>
</div>
</div>
</div>
Заполнение контентом
Были убраны все заглушки с сайта, а так же сайт был заполнен контентом