Разработка веб сайта спортивного комплекса EREM города Ош

Бюллетень науки и практики / Bulletin of Science and Practice

УДК 004.43                                         

В настоящее время создание сайта — это жизненно важно решение для каждой холдинга, желающей добиться успеха в любой сфере бизнеса. Не важно, в какой из отраслей бизнеса работает холдинг, если подойти к разработке сайта со всей ответственностью, затраты на него окупятся в скором времени. Каждый веб-сайт создается для своих определенных задач, которых может быть бесконечное множество [1].

EREM — это современный спортивный комплекс в Оше, был основан в феврале 2016 года. Клубная атмосфера и индивидуальный подход к каждому - главный принцип работы клуба. В спортивном комплексе работает высококвалифицированный тренерский состав, мастера своего дела, которые без труда составят специальную программу тренировок на современных спортивных тренажерах. Также имеются направления, как фитнес, бокс и кикбоксинг для школьников и взрослых.

Актуальность создания сайта состоит также в том, что появляется возможность донести информацию максимально быстро до огромного количества людей. Веб-ресурс позволяет предоставить информацию о спортивного комплекса и его услугах. Также сайт может сообщать о новостях спорт комплекса, об изменениях в прайсе или режиме работы, содержать отзывы благодарных клиентов. Чтобы создать сайт, удовлетворяющий перечисленными выше требованиям, необходимо понимать потребности аудитории и четко представлять, как будет использоваться сайт [2].

Покажем как просто и быстро можно реализовать сайт на JavaScript и CSS без применения сторонних библиотек. В работе использованы электронные ресурсы: ;      ; ; ю

Для начала строим структуру сайта:

.bg-color{ background-color: #000000;

padding-bottom: 120px;

}

height: 432px;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

display: flex;

align-items: center;

justify-content: center;

border-bottom: 1px solid #565151;

}

.info{ display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.bottom{ margin-bottom: 26px;

}

.title{ color: #FFF;

font-family: Inter;

font-size: 54px;

font-style: normal;

font-weight: 700;

line-height: 67.5px; /* 125% */ letter-spacing: -1.62px;

width:90% ;

}

.subtitle{ color: #E5E0DF;

font-family: Inter;

font-size: 18px;

font-style: normal;

font-weight: 400;

line-height: 28.8px; /* 160% */ letter-spacing: -0.36px;

width: 90%;

}

/* .burger{ display: flex;

position: absolute;

width: 40px;

height: 80px;

padding: 32px 12px;

flex-direction: column;

justify-content: center;

align-items: center;

flex-shrink: 0;

border-radius: 12px;

border: 1px solid #565151;

background: #272525;

box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10); margin-top: 10px;

}

.burger__menu{ width: 16px;

height: 11.5px;

background-color: #E5E0DF;

margin-bottom: 3px;

border-radius: 2px;

} */

/*=====================================================*/ .aboutUs{

}

.block{ border-radius: 13.5px;

background: #272525;

box-shadow: 0px 0px 0px 1.125px #565151, 0px 2.25px 4.5px -1.125px rgba(0, 0, 0, 0.06), 0px 4.5px 6.75px -1.125px rgba(0, 0, 0, 0.10);

display: flex;

flex-direction: column;

padding: 0 67.5px;

}

.aboutUs__box{ display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.aboutUs__col{ width: fit-content;

Бюллетень науки и практики / Bulletin of Science and Practice Т. 9. №10. 2023

}

.aboutUs__bottom{ margin-bottom: 34px;

}

.title__info{ color: #FFF;

font-family: Inter;

font-size: 27px;

font-style: normal;

font-weight: 700;

line-height: 33.75px; /* 125% */ letter-spacing: -0.81px;

}

.subtitle__info{ color: #E5E0DF;

font-family: Inter;

font-size: 18px;

font-style: normal;

font-weight: 400;

line-height: 32.4px; /* 180% */ letter-spacing: -0.36px;

}

@media screen and (max-width: 992px) { .aboutUs__col{ width: 50%;

}

}

@media screen and (max-width: 576px) {

.aboutUs__col{ width: 100%;

}

.aboutUs__bottom{ margin-bottom: 15px;

}

.title{ font-size: 45px;

}

}

@media screen and (max-width: 414px) {

.title{ font-size: 38px;

}

.subtitle{ font-size: 15px;

}

Бюллетень науки и практики / Bulletin of Science and Practice Т. 9. №10. 2023

.aboutUs__bottom{ margin-bottom: 15px;

margin-top: 30px;

}

}

@media screen and (max-width: 320px) {

.title{ font-size: 30px;

}

.subtitle{ font-size: 14px;

}

.aboutUs__bottom{ margin-bottom: 15px;

margin-top: 30px;

}

.subtitle__info{ font-size: 14px;

}

}

/*===============================================================*/

.services{ margin-top: 120px;

background: #272525;

box-shadow: 0px 0px 0px 1.125px #565151, 0px 2.25px 4.5px -1.125px rgba(0, 0, 0, 0.06), 0px 4.5px 6.75px -1.125px rgba(0, 0, 0, 0.10);

}

.services__box{ display: flex;

margin-left: -20px;

flex-wrap: wrap;

}

.services__col{ width: 33.333%;

padding-left: 20px;

margin-bottom: 20px;

}

.services__block{ display: flex;

padding: 19.125px 19.12px 19.125px 19.13px;

flex-direction: column;

align-items: flex-start;

border-radius: 6.75px;

border: 1px solid #140099;

background: #110080;

height: 100%;

Бюллетень науки и практики / Bulletin of Science and Practice Т. 9. №10. 2023

}

@media screen and (max-width: 768px) {

.services__col{ width: 50%;

}

}

@media screen and (max-width: 576px) {

.services__col{ width: 100%;

}

}

/*========================================================*/

.schedule{ margin-top: 120px;

background: #272525;

box-shadow: 0px 0px 0px 1.125px #565151, 0px 2.25px 4.5px -1.125px rgba(0, 0, 0, 0.06), 0px 4.5px 6.75px -1.125px rgba(0, 0, 0, 0.10);

}

.schedule__box{ display: flex;

margin-left: -20px;

flex-wrap: wrap;

}

.schedule__col{ width: 33.333%;

padding-left: 20px;

margin-bottom: 20px;

}

.img{ width: 100%;

object-fit: cover;

object-position: center;

}

@media screen and (max-width: 768px) {

.schedule__col{ width: 50%;

}

}

@media screen and (max-width: 576px) {

.schedule__col{ width: 100%;

}

}

/*============================================================*/

.gallery{ margin-top: 120px;

background: #272525;

box-shadow: 0px 0px 0px 1.125px #565151, 0px 2.25px 4.5px -1.125px rgba(0, 0, 0, 0.06), 0px 4.5px 6.75px -1.125px rgba(0, 0, 0, 0.10);

}

.gallery__box{ display: flex;

margin-left: -50px;

flex-wrap: wrap;

}

.gallery__col{ width: 33.333%;

padding-left: 50px;

margin-bottom: 50px;

}

@media screen and (max-width: 576px) {

.gallery__col{ width: 50%;

}

}

@media screen and (max-width: 320px) {

.gallery__col{ width: 100%;

}

}

/*===================================================*/

.contact{ margin-top: 120px;

background: #272525;

box-shadow: 0px 0px 0px 1.125px #565151, 0px 2.25px 4.5px -1.125px rgba(0, 0, 0, 0.06), 0px 4.5px 6.75px -1.125px rgba(0, 0, 0, 0.10);

}

.contact__box{ display: flex;

margin-left: -20px;

flex-wrap: wrap;

}

.contact__col{ width: 50%;

padding-left: 20px;

margin-bottom: 20px;

}

.contact__block{ display: flex;

padding: 19.125px 19.12px 19.125px 19.13px;

flex-direction: column;

align-items: flex-start;

border-radius: 6.75px;

border: 1px solid #140099;

background: #110080;

height: 100%;

}

.contact__bottom{ margin-bottom: 15px;

}

@media screen and (max-width: 414px) {

.contact__col{ width: 100%;

}

}

На странице раздел имеется и расписание интересующих занятий в определенный день недели. В результате в окне мы увидим следующее (Рисунок 1):

Рисунок 1. Расписание занятий

В разделе Фото- и видеогалерея собраны фото и видео о спортивном клубе, фото тренеров, фото клиентов, уроки и актуальные тренды.

Рисунок 2. Фото и видеогалерея

Также имеются такие разделы как: Услуги; Тренеры; Карты клуба; Акции; Отправить заявку; Цены.

Выводы

Благодаря развитию информационных технологий роль сайтов возрастает. От содержания, организационной структуры и функционирования сайта зависит не только успех взаимодействия центра с внешним миром, но и все процессы, проходящие внутри него. В ходе создание сайта были решены следующие задачи: проведен анализ литературы и интернет-источников, были определены возможности сайта; разработана структура сайта спортивного комплекса; разработан дизайн сайта; реализован сайт.