Кутін В.О.. Розробка системи управління базою даних

Название	Розробка системи управління базою даних
Анкор	Кутін В.О
Дата	02.05.2022
Размер	1.46 Mb.
Формат файла
Имя файла	Кутін В.О..docx
Тип	Документы #507693
страница	3 из 6

1 2 3 4 5 6

3.2. Розробка користувацького інтерфейсу програмного комплексу

За візуалізацію користувацього інтерфейсу відповідають HTML та SCSS.

Нижче наведено лістинг їх коду.

В HTML коді є блоки з input елементами які стилізовані за допомогою CSS коду якиий наведено нижче.

Також є загальний контейнер який обмежує максимальну ширину екрана на 1170px.

Лістинг 3.2 HTML код

Записаться

Актуальные курсы

Текст под инфографику

Сотрудничество с вами - сильно облегчило задачу благодаря тому, что ребята предоставляют полный комплекс услуг и имеют ряд очень профессиональных сотрудников.

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

Ирина Иванова

Московская область

-->

Ирина Иванова

Московская область

Ирина Иванова

Московская область

І щоб стилізувати користувацький інтерфейс застосовуються стилі CSS

Нижче наведено лістинг коду.

Лістинг 3.3 CSS код.

@use "sass:math";

//<МИКСИНЫ>===============================================================================================

@import "mixins";

@import "magnific-popup";

//===============================================================================================

@font-face {

font-family: "MuseoSansCyrl300";

src: url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.eot");

src: url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.eot?#iefix")

format("embedded-opentype"),

url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.woff") format("woff"),

url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.ttf") format("truetype");

font-style: normal;

font-weight: 300;

}
//<ШРИФТЫ>===============================================================================================

//<Подключаем шрифты>=======================================================================================

//&display=swap&subset=cyrillic-ext

@import "fonts";

//=======================================================================================

//<Иконочные шрифты>==========================================================================================

//@import "icons";

//==========================================================================================

//<Шрифт по умолчанию>==========================================================================================

$fontFamily: "MuseoSansCyrl300";

$fontSize: 16;

//==========================================================================================

//=======================================================================================================

//<ПЕРЕМЕННЫЕ>==========================================================================================================

$minWidth: 320px;

$maxWidth: 1920;

$maxWidthContainer: 1170;

$md1: $maxWidthContainer + 12;

$md2: 991.98;

$md3: 767.98;

$md4: 479.98;

$mainColor: #000;

$fontCursice: "Amatic SC", cursive;

//===========================================================================================================

//<ОБНУЛЕНИЕ, ОБЩИЕ ПАРАМЕТРЫ>===============================================================================================

@import "null";

body {

color: $mainColor;

&._lock {

overflow: hidden;

}

}
//===============================================================================================

//<ОБОЛОЧКА>===========================================================================================================

.wrapper {

width: 100%;

min-height: 100%;

overflow: hidden;

display: flex;

flex-direction: column;

&._loaded {

}

}
//===========================================================================================================

//<ОСНОВНАЯ СЕТКА>===========================================================================================================

._container {

position: relative;

max-width: $maxWidthContainer + px;

margin: 0 auto;

/* */

@media (max-width: $md3) {

max-width: none;

padding: 0 10px;

}

}
._container2 {

position: relative;

max-width: 1252px;

margin: 0 auto;

@media (max-width: $md1) {

max-width: 970px;

}

@media (max-width: $md2) {

max-width: 750px;

}

@media (max-width: $md3) {

max-width: none;

padding: 0 10px;

}

}
._container4 {

position: relative;

max-width: 1252px;

margin: 0 auto;

@media (max-width: $md3) {

max-width: none;

padding: 0 10px;

}

}
._container3 {

position: relative;

max-width: 1310px;

margin: 0 auto;

@media (max-width: $md1) {

max-width: 970px;

}

}
._container233 {

position: relative;

max-width: 1700px;

margin: 0 auto;

@media (max-width: $md1) {

max-width: 970px;

}

}
//===========================================================================================================

//<ПОДКЛЮЧЕНИЕ ФАЙЛОВ UI СТИЛЕЙ, ФОРМ И ГОТОВЫХ КЛАССОВ>====================================================================================================

@import "forms";

@import "ui";

//====================================================================================================

//<ПОДКЛЮЧЕНИЕ ФАЙЛОВ СТИЛЕЙ СТРАНИЦ И ЭЛЕМЕНТОВ>====================================================================================================

//@import "datepicker";

//@import "lightgallery";

//@import "pagging";

@import "popup";

@import "header";

@import "footer";

@import "home";

//====================================================================================================

//<ОСНОВНОЙ БЛОК>====================================================================================================

.page {

flex: 1 1 auto;

}
//===================================================================================================================================

//====================================================================================================

.first__container {

padding-bottom: 287px;

margin-bottom: 18px;

}
.first {

position: relative;

// .first__left

&__left {

margin-top: 91px;

}

// .first__title

&__title {

font-family: "Amatic SC", cursive;

font-size: 170px;

line-height: 130px;

text-align: center;

color: #000000;

font-weight: 400;

max-width: 569px;

margin-bottom: 35px;

}

// .first__subtitle

&__subtitle {

max-width: 643px;

font-weight: 300;

font-size: 30px;

line-height: 37px;

text-align: center;

color: #000000;

margin-bottom: 50px;

span {

color: #e87383;

}

}

// .first__btn-box

&__btn-box {

display: flex;

align-items: center;

z-index: 4;

max-width: 636px;

margin-bottom: 125px;

flex-wrap: wrap;

}

// .first__btn

&__btn {

cursor: pointer;

font-size: 18px;

line-height: 22px;

text-align: center;

color: #4d9c8c;

border: 1px solid #4d9c8c;

box-sizing: border-box;

border-radius: 100px;

padding: 20px 60px;

}

.active-btn {

color: #ffffff;

background: #4d9c8c;

box-shadow: 0px 15px 30px rgba(77, 156, 140, 0.25);

border-radius: 100px;

margin-right: 30px;

}

// .first__txt-item-box

&__txt-item-box {

display: flex;

align-items: center;

justify-content: space-between;

max-width: 673px;

flex-wrap: wrap;

}

// .first__txt-item

&__txt-item {

font-weight: 300;

font-size: 22px;

line-height: 24px;

color: #000000;

display: flex;

flex-direction: column;

max-width: 217px;

text-align: center;

margin-bottom: 25px;

&:not(:last-child) {

margin-right: 60px;

}

span {

position: relative;

font-family: $fontCursice;

font-size: 60px;

line-height: 24px;

color: #000000;

text-align: center;

margin-bottom: 18px;

&::before {

content: "";

position: absolute;

width: 37px;

height: 60px;

background-image: url(../img/first/left-icon.svg);

background-repeat: no-repeat;

background-size: cover;

top: -100%;

left: 16px;

z-index: 1;

}

}

}

}
.active-btn {

}
.first__wrapper {

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

}
.first__right {

max-width: 390px;

}
.first__right2 {

position: relative;

z-index: 2;

max-width: 390px;

}
.first__right {

position: relative;

z-index: 2;

}
.bg-img {

position: absolute;

z-index: -1;

top: -80px;

left: -41px;

}
.img-overlay {

position: absolute;

z-index: 5;

top: 42%;

left: 50%;

cursor: pointer;

}
.bg-volna {

position: absolute;

left: 0;

bottom: 0;

right: 0;

width: 100%;

}
.bg-volna2 {

position: absolute;

left: 0;

bottom: -19px;

right: 0;

width: 100%;

}
.bg-volna3 {

position: absolute;

left: 0;

bottom: 0;

right: 0;

width: 100%;

}
.bg-volna333 {

position: absolute;

left: 0;

top: -154px;

right: 0;

width: 100%;

}
@media (max-width: 1670px) {

.bg-volna333 {

top: -119px;

}

}
@media (max-width: 1340px) {

.bg-volna333 {

top: -104px;

}

}
@media (max-width: 1125px) {

.bg-volna333 {

top: -81px;

}

}
@media (max-width: 875px) {

.bg-volna333 {

top: -64px;

}

}
@media (max-width: 690px) {

.bg-volna333 {

top: -52px;

}

}
@media (max-width: 520px) {

.bg-volna333 {

top: -40px;

}

}
@media (max-width: 520px) {

.bg-volna333 {

top: -32px;

}

}
@media (max-width: 350px) {

.bg-volna333 {

top: -21px;

}

}
@media (max-width: 535px) {

.figure6 {

right: -54px !important;

top: -56px !important;

}

}
.link-bx {

display: flex;

flex-direction: column;

/* align-items: center; */

justify-content: center;

}
.second {

position: relative;

background-color: rgba(254, 248, 249, 1);

height: 100%;

}
.left-figure {

position: absolute;

top: 525px;

z-index: -1;

}

.social-item3 {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

margin-left: -40px;

margin-top: 91px;

padding-bottom: 20px;

padding-left: 15px;

padding-right: 15px;

}
.preview-box {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

padding-bottom: 353px;

}
.preview-item {

border: 1px solid rgba(232, 115, 131, 0.5);

box-sizing: border-box;

border-radius: 20px;

max-width: 370px;

min-height: 350px;

margin-bottom: 27px;

}
.preview-img {

max-width: 400px;

width: 100%;

}
.preview-data {

font-size: 16px;

line-height: 16px;

/* identical to box height, or 100% */

color: #4d9c8c;

opacity: 0.5;

margin-bottom: 10px;

}
.preview-title {

font-weight: 300;

font-size: 25px;

line-height: 24px;

/* or 96% */

color: #000000;

margin-bottom: 10px;

}
.preview-bottom-box {

display: flex;

align-items: center;

justify-content: space-between;

}
.preview-link {

font-size: 16px;

line-height: 16px;

/* identical to box height, or 100% */

color: #4d9c8c;

opacity: 0.5;

}
.preview-more {

font-size: 16px;

line-height: 16px;

/* identical to box height, or 100% */

color: #e87383;

}
.box-txt-preview {

padding: 15px 30px 30px 30px;

}
/* six*/
.six {

position: relative;

background-color: #fef8f9;

padding-bottom: 210px;

}
.mod-tabs {

margin-bottom: 0px;

font-size: 18px;

}

1 2 3 4 5 6