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

Размещено на http://www.allbest.ru/

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

Турдубаева Ж.А.



Аннотация

Главной особенностью разработки веб сайта спортивного комплекса является сервис для текущих клиентов и полезная информация для новых. В данной статье рассмотрены основные аспекты спортивного комплекса EREM. А также рассмотрен процесс проектирования и реализации веб сайта с использованием современных технологий.

Ключевые слова: веб-разработка, веб сайт, спортивный комплекс, программирование, HTML, CSS, JavaScript.



Abstract

DEVELOPMENT OF A WEBSITE FOR THE EREM SPORTS COMPLEX IN OSH CITY

Turdubaeva Zh.

The main feature of developing a sports complex website is service for current clients and useful information for new ones. This article discusses the main aspects of the EREM sports complex. The process of designing and implementing a website using modern technologies is also considered.

Keywords: web development, website, sports complex, programming, HTML, CSS, JavaScript.



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

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

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

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

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

.bg-color{

background-color: #000000;

padding-bottom: 120px;

}

.header info {

background-image: url("../img/div.png");

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;

}

.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;

}

.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%;

}

@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. Фото и видеогалерея

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



Выводы

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



Список литературы

1. Бадмаев А. Б. Особенности создания веб-сайта // Молодой ученый. 2016. №27-2. С. 79.

2. Турдубаева Ж. А., Алтынбеков Ж. У, Ураматбеков Н. У Разработка веб-сайта спортивного комплекса с системой управления контентом (CMS) // Известия Ошского технологического университета. 2022. №1. С. 141-143. EDN CFXDRE.

References

1. Badmaev, A. B. (2016). Osobennosti sozdaniya veb-saita. Molodoi uchenyi, (27-2), 7-9. (in Russian).

2. Turdubaeva, Zh. A., Altynbekov, Zh. U., & Uramatbekov, N. U. (2022). Razrabotka veb- saita sportivnogo kompleksa s sistemoi upravleniya kontentom (CMS). Izvestiya Oshskogo tekhnologicheskogo universiteta, (1), 141-143. (in Russian). EDN CFXDRE.

Размещено на Allbest.ru

...