diff --git a/frontend/raw/Catalog.html b/frontend/raw/Catalog.html new file mode 100644 index 0000000..5810b2a --- /dev/null +++ b/frontend/raw/Catalog.html @@ -0,0 +1,128 @@ + + + + + + + + + + + Metr + + +
+
+
+
+
+
+ + Томск +
+
+
+
+ каталог +
+
+ блог +
+
+
+
+ контакты +
+
+ помощь +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+

Найти недвижимость

+
+
+
+
+
+

Квартира

+ +
+
+
+
+

Купить

+ +
+
+
+
+

Комнаты

+ +
+
+
+
+

Цена

+ +
+
+
+
+
+
+
+

2-к. Квартира, 34 м кв

2 900 000₽

+
+
+
+

3-к. Квартира, 34 м кв

4 900 000₽

+
+
+
+

1-к. Квартира, 34 м кв

1 900 000₽

+
+
+
+

5-к. Квартира, 34 м кв

10 900 000₽

+
+
+
+

6-к. Квартира, 34 м кв

15 900 000₽

+
+
+
+

3-к. Квартира, 34 м кв

5 900 000₽

+
+
+
+ + \ No newline at end of file diff --git a/frontend/raw/addingAdv.html b/frontend/raw/addingAdv.html new file mode 100644 index 0000000..c49bc02 --- /dev/null +++ b/frontend/raw/addingAdv.html @@ -0,0 +1,144 @@ + + + + + + + + + + + Metr + + +
+
+
+
+
+
+ + Томск +
+
+
+
+ каталог +
+
+ блог +
+
+
+
+ контакты +
+
+ помощь +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
+ +
+

Виктория

+
+
+

4,5

+
+ + + + + +
+
+
+
+
+
+

Обо мне

 +
+
+

Мои объявления

 +
+
+

Добавить объявление

 +
+
+

Избранное

 +
+
+
+
+
+

Добавить объявление

+
+ + + +
+
+
+

Название для объявления:

+ +
+
+

Адрес:

+ +
+
+

Цена:

+ +
+
+

Кол-во комнат:

+ +
+
+

Площадь:

+ +
+
+

Описание:

+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/frontend/raw/advertisment.html b/frontend/raw/advertisment.html new file mode 100644 index 0000000..65f4497 --- /dev/null +++ b/frontend/raw/advertisment.html @@ -0,0 +1,200 @@ + + + + + + + + + + + Metr + + +
+
+
+
+
+
+ + Томск +
+
+
+
+ каталог +
+
+ блог +
+
+
+
+ контакты +
+
+ помощь +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
+
+
+

4-к. квартира, 78,4 м², 20/28 эт.

+
+
+
+

40 610 000 ₽

+
+
+

Добавить в избранное

+ +
+
+
+
+
+ +
+
+ + + +
+
+
+ +
+
+
+

Виктория

+
+
+
+

4,5

+
+
+ + + + + +
+
+
+
Показать номер
 +
+
+
Написать владельцу
 +
+
+ +
+
+ +
+
+

О квартире

+
+
+

Кол-во комнат: 4

+

Общая площадь: 78.4 м²

+

Площадь кухни: 12 м²

+

Этаж: 20

+
+
+

Продается 4х комнатная квартира, уютная, светлая, теплая. Натяжные потолки, + ламинат, деревянные евроокна, два кондиционера. Теплые полы в туалете, ванной, + кухне, частично в прихожей. Хороший вид из окна.

+
+
+
+
+

Отзывы

+
+
+
+
+ +
+
+
Очень приятный владелец, все чисто и опрятно
+
+
+ + + + + +
+
+
+
+ +
+
+
Очень приятный владелец, все чисто и опрятно
+
+
+ + + + + +
+
+
+
+ +
+
+
Очень приятный владелец, все чисто и опрятно
+
+
+ + + + + +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/frontend/raw/assets/css/addingAdv.css b/frontend/raw/assets/css/addingAdv.css new file mode 100644 index 0000000..ccd4421 --- /dev/null +++ b/frontend/raw/assets/css/addingAdv.css @@ -0,0 +1,329 @@ +/* Fonts */ + +@import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.main { + display: flex; + flex-direction: row; + justify-content: center; + margin: 0 10%; +} + +.user__info { + display: flex; + flex-direction: column; + justify-content: space-around; + margin-right: 5%; +} + +.user__logo { + display: flex; + flex-direction: row; + justify-content: center; + border-radius: 20px; + width: 200px; + height: 200px; + padding-left: 20%; +} + +.username { + display: flex; + flex-direction: row; + justify-content: center; +} + +.user__stat { + display: flex; + flex-direction: row; + margin: 2% 0 2% 5%; +} + +.stars { + display: flex; + flex-direction: row; + margin-left: 5%; + padding-bottom: 1%; +} + +.user__hrefs { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: left; + width: 110%; + padding-left: 5%; +} + +.user__hrefs a{ + text-decoration: none; + color: white; + font-size: 15px; + font-weight: 600; +} + +.about__user { + display: flex; + flex-direction: column; +} + +.about__images { + width: 105%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1%; +} + +.about__describtions { + margin-top: 5%; +} + +.descriptions { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.descriptions__name { + display: flex; + flex-direction: row; + margin-top: 1%; +} + +.descriptions__address { + display: flex; + flex-direction: row; + margin-top: 1%; +} + +.descriptions__price { + display: flex; + flex-direction: row; + margin-top: 1%; +} + +.descriptions__flats { + display: flex; + flex-direction: row; + margin-top: 1%; +} + +.descriptions__square { + display: flex; + flex-direction: row; + margin-top: 1%; +} + +.descriptions__text { + display: flex; + flex-direction: column; + margin-top: 1%; +} + +.about__describtions input { + background-color: rgb(201, 233, 252); + border-radius: 5px; + border-color: white; + box-shadow: none; + border: 1px solid rgb(83, 110, 136); +} + +.about__describtions h4 { + margin-right: 3%; +} + +.descriptions__text input { + width: 100%; + height: 100px; +} \ No newline at end of file diff --git a/frontend/raw/assets/css/advertisment.css b/frontend/raw/assets/css/advertisment.css new file mode 100644 index 0000000..d3fb620 --- /dev/null +++ b/frontend/raw/assets/css/advertisment.css @@ -0,0 +1,366 @@ +/* Fonts */ + +@import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 170vh; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.main { + display: flex; + flex-direction: column; + justify-content: center; +} + +.adv__info { + display: flex; + flex-direction: row; + justify-content: center; +} + +.adv__main { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-right: 2%; +} + +.adv__main__title { + display: flex; + flex-direction: column; +} + +.mprice__fav { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.favorite { + display: flex; + flex-direction: row; + justify-content: center; + border-radius: 5px; + padding: 5px; + background-color: rgba(26, 137, 201, 1); +} + +.favoritext { + text-decoration: none; + color: white; + font-weight: 400; +} + +.favoritextinf { + text-decoration: none; + color: white; + font-weight: 400; + display: flex; + flex-direction: row; + justify-content: center; +} + +.adv__main__images { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 1%; +} + +.other__images { + display: flex; + flex-direction: row; +} + +.other__images a{ + margin-right: 2%; +} + +.adv__host { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.adv__host__about__user { + display: flex; + flex-direction: column; +} + +.username { + margin: 3% 0; +} + +.host__stat { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 3% 0; +} + +.stat { + margin-right: 2%; +} + +.stars { + display: flex; + flex-direction: row; + padding-bottom: 5%; +} + +.number { + width: 150px; + height: 30px; + display: flex; + flex-direction: column; + justify-content: space-around; + + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + margin: 3% 0; + padding: 10% 0; +} + + + +.message { + width: 150px; + height: 30px; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + margin: 3% 0; +} + +.userlogo { + margin-left: 2%; +} + +.about__adv { + display: flex; + flex-direction: column; + margin: 0 23%; +} + +.about__adv__info { + +} + +.about__adv__descriptions { + +} + +.reviews { + display: flex; + flex-direction: column; + margin: 0 23%; +} + +.reviews__blocks { + display: flex; + flex-direction: column; + +} + +.review { + width: 730px; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + margin: 1% 0; +} + +.review__stars { + display: flex; + flex-direction: row; +} \ No newline at end of file diff --git a/frontend/raw/assets/css/catalog.css b/frontend/raw/assets/css/catalog.css new file mode 100644 index 0000000..28d8f21 --- /dev/null +++ b/frontend/raw/assets/css/catalog.css @@ -0,0 +1,533 @@ +/* Fonts */ + +@import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content:center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.intro__text { + width: 100%; + height: 100px; + margin: 0 auto; +} + +.intro__title { + font-size: 25px; + color: white; + text-align: center; +} + +.newhome { + font-family: 'Inter', sans-serif; +} + +.intro__subtitle { + font-size: 17px; + color: white; + text-align: center; + font-family: 'Inter', sans-serif; +} + +.intro_footer { + width: 1050px; + height: 80px; + margin: 300px auto 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.intro__btn { + width: 185px; + height: 55px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 5px; + + background-color: rgba(26, 137, 201, 1); + +} + +.intro__button { + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + margin: 0 auto; + + font-weight: 500; + color: white; +} + +.intro__button:hover { + color: #0f171d; + font-weight: 600; + transition: color .2s linear; +} + +.intro__odnushka { + width: 250px; + height: 50px; + display: flex; + flex-direction: column; +} + +.odnushka { + font-size: 17px; + color: black; + background: white; + text-decoration: none; + padding: 2px; + font-weight: 600; +} + +.odnushka__price { + width: 115px; + font-size: 17px; + text-decoration: none; + padding: 2px; + font-weight: 900; + color: black; + background: white; + font-family: 'Inter'; +} + +.title { + font-size: 25px; + font-family: 'Inter'; + font-weight: 400; +} + +/* About */ + +.about { + height: 100vh; + background-color: rgba(124, 173, 201, 1); + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: 'Inter', sans-serif; +} + +.about__title { + padding-left: 10%; + padding-top: 50px; + font-size: 40px; + font-family: 'Stapel'; +} + +.video { + margin: 0 auto; + display: flex; + flex-direction: row; + align-items: center; + width: 1300px; + height: 590px; + border: 1px solid black; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url( + "../images/video.jpg"); + background-size: cover; + +} + +.about__us { + margin-right: 5%; + font-family: 'Inter'; + font-weight: 100; + font-size: 17px; + display: flex; + flex-direction: column; + align-items: flex-end; +} + +/* Suggestions */ + +.suggestions { + padding-top: 10%; + background-color: rgba(124, 173, 201, 1); + height: 100%; + min-height: 600px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0 auto; +} + +.suggestions__title { + font-size: 25px; + padding-left: 10%; +} + +.suggestions__images { + margin: 2% 12%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; +} + +.sugg__img { + flex-basis: 30%; + height: 460px; + margin: 4% 0 1% auto; + background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6)); + transition: transform .2s linear; +} + +.afterword { + margin: 0 5% 0 0; + display: flex; + flex-direction: column; + align-items: flex-end; + font-size: 17px; +} + +.after__afterword { + font-weight: 600; + margin-right: 5%; +} + +.gradient { + + display: inline-block; + position: relative; + line-height: 0; +} + +.gradient:after { + content: ""; + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: transparent; + background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8)); + opacity: 0.8; +} + +.podlozhka { + position: relative; +} + +.podlozhka:hover .sugg__img { + transform: translate3d(-10px, -10px, 0); +} + + +.podlozhka:hover .sugg__img img { + opacity: 0.6; +} + +.sugg__img img { + transition: opacity .1s linear; +} + +.sugg__text { + width: 100%; + text-align: left; + position: absolute; + top: 90%; + left: 0; + z-index: 2; + transform: translate3d(0, -50%, 0); + opacity: 1; + transition: opacity .2s linear; + padding-bottom: 20%; +} + +.sugg__text p { + width: 220px; + color: white; + font-family: 'Inter'; + font-weight: 700; + font-size: 20px; + text-decoration: none; + margin: 0 auto 0 2%; + text-align: left; +} + +.sugg__text h2 { + width: 200px; + font-weight: 600; + margin: 0 auto 0 2%; + color: white; + font-family: 'Inter'; + font-size: 20px; + text-align: left; +} + +.parametrs__block { + display: flex; + justify-content: space-between; + align-items: left; + margin: 2% 40% 2% 10%; +} + +.parametrs { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.prm { + width: 20%; + height: 150%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: white; + font-family: 'Inter'; + font-size: 10px; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; +} + +.prm__inside { + display: flex; + flex-direction: row; + justify-content: center; +} + +.prm__text { + margin-right: 15%; +} + +.prm__inside img { + padding-top: 20%; +} + + +/* Footer */ + +.footer { + height: 200px; + margin: 0 auto; + padding-top: 1%; + background-color: rgba(124, 173, 201, 1); +} + +.footer__search { + width: 300px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.footer__contacts { + width: 165px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.footer__contacts__imgtop { + width: 165px; + height: 48px; + border-bottom: 2px solid white; + margin: 0; +} + +.footer__contacts__img { + width: 166px; + height: 48px; + margin: 0; +} \ No newline at end of file diff --git a/frontend/raw/assets/css/login.css b/frontend/raw/assets/css/login.css new file mode 100644 index 0000000..405564f --- /dev/null +++ b/frontend/raw/assets/css/login.css @@ -0,0 +1,94 @@ +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-family: 'Montserrat', sans-serif; +} + +.container { + width: 100%; + height: 100vh; + max-width: 1920px; + margin: 0 auto; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url( + "../images/intro.jpg"); + background-size: cover; + display: flex; + flex-direction: column; + justify-content:center; +} + +.logo { + display: flex; + flex-direction: column; + align-items: center; +} + +.logoMetr { + width: 185px; + height: 100px; + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; +} + +.title { + margin: 1% 0; + display: flex; + flex-direction: column; + align-items: center; +} + +.title h2{ + font-size: 35px; +} + +.form__example { + display: flex; + flex-direction: column; + align-items: center; +} + +.form__input { + margin-top: 30px; + width: 320px; + height: 40px; + background-color: #1A89C9; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + border-radius: 10px; + border: 0px; +} + +.form__input:hover { + color: rgb(15, 10, 41); + font-weight: 600; + transition: color .1s linear; +} + +.login { + width: 320px; + height: 50px; + padding-left: 1%; +} + +input { + margin: 0; + padding: 0; + color: rgb(129, 125, 125); + font-family: 'Montserrat', sans-serif; +} diff --git a/frontend/raw/assets/css/profile.css b/frontend/raw/assets/css/profile.css new file mode 100644 index 0000000..88ee14e --- /dev/null +++ b/frontend/raw/assets/css/profile.css @@ -0,0 +1,270 @@ +/* Fonts */ + +@import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.main { + display: flex; + flex-direction: row; + justify-content: center; + margin: 0 10%; +} + +.user__info { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-right: 5%; +} + +.user__logo { + display: flex; + flex-direction: row; + justify-content: center; + border-radius: 20px; + width: 200px; + height: 200px; + padding-left: 20%; +} + +.username { + display: flex; + flex-direction: row; + justify-content: center; +} + +.user__stat { + display: flex; + flex-direction: row; + margin: 2% 0 2% 5%; +} + +.stars { + display: flex; + flex-direction: row; + margin-left: 5%; + padding-bottom: 1%; +} + +.user__hrefs { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: left; + width: 110%; + padding-left: 5%; +} + +.user__hrefs a{ + text-decoration: none; + color: white; + font-size: 15px; + font-weight: 600; +} + +.about__user { + display: flex; + flex-direction: column; +} + +.about__images { + width: 105%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1%; +} + +.about_describtions { + margin-top: 5%; +} \ No newline at end of file diff --git a/frontend/raw/assets/css/signin.css b/frontend/raw/assets/css/signin.css new file mode 100644 index 0000000..405564f --- /dev/null +++ b/frontend/raw/assets/css/signin.css @@ -0,0 +1,94 @@ +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-family: 'Montserrat', sans-serif; +} + +.container { + width: 100%; + height: 100vh; + max-width: 1920px; + margin: 0 auto; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url( + "../images/intro.jpg"); + background-size: cover; + display: flex; + flex-direction: column; + justify-content:center; +} + +.logo { + display: flex; + flex-direction: column; + align-items: center; +} + +.logoMetr { + width: 185px; + height: 100px; + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; +} + +.title { + margin: 1% 0; + display: flex; + flex-direction: column; + align-items: center; +} + +.title h2{ + font-size: 35px; +} + +.form__example { + display: flex; + flex-direction: column; + align-items: center; +} + +.form__input { + margin-top: 30px; + width: 320px; + height: 40px; + background-color: #1A89C9; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + border-radius: 10px; + border: 0px; +} + +.form__input:hover { + color: rgb(15, 10, 41); + font-weight: 600; + transition: color .1s linear; +} + +.login { + width: 320px; + height: 50px; + padding-left: 1%; +} + +input { + margin: 0; + padding: 0; + color: rgb(129, 125, 125); + font-family: 'Montserrat', sans-serif; +} diff --git a/frontend/raw/assets/css/style.css b/frontend/raw/assets/css/style.css new file mode 100644 index 0000000..8eaa5ca --- /dev/null +++ b/frontend/raw/assets/css/style.css @@ -0,0 +1,492 @@ +/* Fonts */ + + @import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content:center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.intro__text { + width: 100%; + height: 100px; + margin: 0 auto; +} + +.intro__title { + font-size: 25px; + color: white; + text-align: center; +} + +.newhome { + font-family: 'Stapel'; +} + +.intro__subtitle { + font-size: 17px; + color: white; + text-align: center; + font-family: 'Inter', sans-serif; +} + +.intro_footer { + width: 1050px; + height: 80px; + margin: 300px auto 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.intro__btn { + width: 185px; + height: 55px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 5px; + + background-color: rgba(26, 137, 201, 1); + +} + +.intro__button { + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + margin: 0 auto; + + font-weight: 500; + color: white; +} + +.intro__button:hover { + color: #0f171d; + font-weight: 600; + transition: color .2s linear; +} + +.intro__odnushka { + width: 250px; + height: 50px; + display: flex; + flex-direction: column; +} + +.odnushka { + font-size: 17px; + color: black; + background: white; + text-decoration: none; + padding: 2px; + font-weight: 600; +} + +.odnushka__price { + width: 115px; + font-size: 17px; + text-decoration: none; + padding: 2px; + font-weight: 900; + color: black; + background: white; + font-family: 'Inter'; +} + +.title { + font-size: 25px; + font-family: 'Inter'; + font-weight: 400; +} + +/* About */ + +.about { + height: 100vh; + background-color: rgba(124, 173, 201, 1); + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: 'Inter', sans-serif; +} + +.about__title { + padding-left: 10%; + padding-top: 50px; + font-size: 40px; + font-family: 'Stapel'; +} + +.video { + margin: 0 auto; + display: flex; + flex-direction: row; + align-items: center; + width: 1300px; + height: 590px; + border: 1px solid black; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url( + "../images/video.jpg"); + background-size: cover; + +} + +.about__us { + margin-right: 5%; + font-family: 'Inter'; + font-weight: 100; + font-size: 17px; + display: flex; + flex-direction: column; + align-items: flex-end; +} + +/* Suggestions */ + +.suggestions { + padding-top: 10%; + background-color: rgba(124, 173, 201, 1); + height: 100%; + min-height: 600px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0 auto; +} + +.suggestions__title { + font-size: 25px; + padding-left: 10%; +} + +.suggestions__images { + margin: 2% 12%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; +} + +.sugg__img { + flex-basis: 30%; + height: 460px; + margin: 4% 0 1% auto; + background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6)); + transition: transform .2s linear; +} + +.afterword { + margin: 0 5% 0 0; + display: flex; + flex-direction: column; + align-items: flex-end; + font-size: 17px; +} + +.after__afterword { + font-weight: 600; + margin-right: 5%; +} + +.gradient { + + display: inline-block; + position: relative; + line-height: 0; +} + +.gradient:after { + content: ""; + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: transparent; + background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8)); + opacity: 0.8; +} + +.podlozhka { + position: relative; +} + +.podlozhka:hover .sugg__img { + transform: translate3d(-10px, -10px, 0); +} + + +.podlozhka:hover .sugg__img img { + opacity: 0.6; +} + +.podlozhka:hover .sugg__text{ + opacity: 1; +} + +.sugg__img img { + transition: opacity .1s linear; +} + +.sugg__text { + width: 100%; + text-align: center; + position: absolute; + top: 90%; + left: 0; + z-index: 2; + transform: translate3d(0, -50%, 0); + opacity: 0; + transition: opacity .2s linear; +} + +.sugg__text p { + width: 180px; + color: black; + font-family:sans-serif; + font-weight: 100; + font-size: 17px; + background: white; + text-decoration: none; + margin: 0 auto; +} + +.sugg__text h2 { + width: 100px; + font-weight: 700; + margin: 0 auto; + color: black; + font-family:sans-serif; + font-size: 17px; + background: white; +} + +/* Footer */ + +.footer { + height: 200px; + margin: 0 auto; + padding-top: 1%; + background-color: rgba(124, 173, 201, 1); +} + +.footer__search { + width: 300px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.footer__contacts { + width: 165px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.footer__contacts__imgtop { + width: 165px; + height: 48px; + border-bottom: 2px solid white; + margin: 0; +} + +.footer__contacts__img { + width: 166px; + height: 48px; + margin: 0; +} \ No newline at end of file diff --git a/frontend/raw/assets/images/1.jpg b/frontend/raw/assets/images/1.jpg new file mode 100644 index 0000000..ad38a3a Binary files /dev/null and b/frontend/raw/assets/images/1.jpg differ diff --git a/frontend/raw/assets/images/2jpg.jpg b/frontend/raw/assets/images/2jpg.jpg new file mode 100644 index 0000000..702dc81 Binary files /dev/null and b/frontend/raw/assets/images/2jpg.jpg differ diff --git a/frontend/raw/assets/images/3.jpg b/frontend/raw/assets/images/3.jpg new file mode 100644 index 0000000..3d4fd07 Binary files /dev/null and b/frontend/raw/assets/images/3.jpg differ diff --git a/frontend/raw/assets/images/4.jpg b/frontend/raw/assets/images/4.jpg new file mode 100644 index 0000000..4c9b141 Binary files /dev/null and b/frontend/raw/assets/images/4.jpg differ diff --git a/frontend/raw/assets/images/5.jpg b/frontend/raw/assets/images/5.jpg new file mode 100644 index 0000000..1a47eb8 Binary files /dev/null and b/frontend/raw/assets/images/5.jpg differ diff --git a/frontend/raw/assets/images/6.jpg b/frontend/raw/assets/images/6.jpg new file mode 100644 index 0000000..20bba8f Binary files /dev/null and b/frontend/raw/assets/images/6.jpg differ diff --git a/frontend/raw/assets/images/adv1.png b/frontend/raw/assets/images/adv1.png new file mode 100644 index 0000000..f110a3c Binary files /dev/null and b/frontend/raw/assets/images/adv1.png differ diff --git a/frontend/raw/assets/images/adv2.png b/frontend/raw/assets/images/adv2.png new file mode 100644 index 0000000..50f4a20 Binary files /dev/null and b/frontend/raw/assets/images/adv2.png differ diff --git a/frontend/raw/assets/images/adv3.png b/frontend/raw/assets/images/adv3.png new file mode 100644 index 0000000..592a0dc Binary files /dev/null and b/frontend/raw/assets/images/adv3.png differ diff --git a/frontend/raw/assets/images/adv4.png b/frontend/raw/assets/images/adv4.png new file mode 100644 index 0000000..aaffe0d Binary files /dev/null and b/frontend/raw/assets/images/adv4.png differ diff --git a/frontend/raw/assets/images/arrow.png b/frontend/raw/assets/images/arrow.png new file mode 100644 index 0000000..d3e7d8f Binary files /dev/null and b/frontend/raw/assets/images/arrow.png differ diff --git a/frontend/raw/assets/images/forcomment.png b/frontend/raw/assets/images/forcomment.png new file mode 100644 index 0000000..7b8d9cb Binary files /dev/null and b/frontend/raw/assets/images/forcomment.png differ diff --git a/frontend/raw/assets/images/heart.png b/frontend/raw/assets/images/heart.png new file mode 100644 index 0000000..2bd0535 Binary files /dev/null and b/frontend/raw/assets/images/heart.png differ diff --git a/frontend/raw/assets/images/image 3 (1).png b/frontend/raw/assets/images/image 3 (1).png new file mode 100644 index 0000000..12690b0 Binary files /dev/null and b/frontend/raw/assets/images/image 3 (1).png differ diff --git a/frontend/raw/assets/images/intro.jpg b/frontend/raw/assets/images/intro.jpg new file mode 100644 index 0000000..3d96c8d Binary files /dev/null and b/frontend/raw/assets/images/intro.jpg differ diff --git a/frontend/raw/assets/images/location.png b/frontend/raw/assets/images/location.png new file mode 100644 index 0000000..1fe0992 Binary files /dev/null and b/frontend/raw/assets/images/location.png differ diff --git a/frontend/raw/assets/images/metr.svg b/frontend/raw/assets/images/metr.svg new file mode 100644 index 0000000..43bd468 --- /dev/null +++ b/frontend/raw/assets/images/metr.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/raw/assets/images/search.jpg b/frontend/raw/assets/images/search.jpg new file mode 100644 index 0000000..b0d77f2 Binary files /dev/null and b/frontend/raw/assets/images/search.jpg differ diff --git a/frontend/raw/assets/images/star.png b/frontend/raw/assets/images/star.png new file mode 100644 index 0000000..2c73075 Binary files /dev/null and b/frontend/raw/assets/images/star.png differ diff --git a/frontend/raw/assets/images/star1.png b/frontend/raw/assets/images/star1.png new file mode 100644 index 0000000..e4d9cf4 Binary files /dev/null and b/frontend/raw/assets/images/star1.png differ diff --git a/frontend/raw/assets/images/starsmall.png b/frontend/raw/assets/images/starsmall.png new file mode 100644 index 0000000..1cf2978 Binary files /dev/null and b/frontend/raw/assets/images/starsmall.png differ diff --git a/frontend/raw/assets/images/tell.jpg b/frontend/raw/assets/images/tell.jpg new file mode 100644 index 0000000..aabec59 Binary files /dev/null and b/frontend/raw/assets/images/tell.jpg differ diff --git a/frontend/raw/assets/images/user.jpg b/frontend/raw/assets/images/user.jpg new file mode 100644 index 0000000..977c266 Binary files /dev/null and b/frontend/raw/assets/images/user.jpg differ diff --git a/frontend/raw/assets/images/userlogo.png b/frontend/raw/assets/images/userlogo.png new file mode 100644 index 0000000..9edeaaa Binary files /dev/null and b/frontend/raw/assets/images/userlogo.png differ diff --git a/frontend/raw/assets/images/userlogosmall.png b/frontend/raw/assets/images/userlogosmall.png new file mode 100644 index 0000000..3db5cc2 Binary files /dev/null and b/frontend/raw/assets/images/userlogosmall.png differ diff --git a/frontend/raw/assets/images/video.jpg b/frontend/raw/assets/images/video.jpg new file mode 100644 index 0000000..2491c6b Binary files /dev/null and b/frontend/raw/assets/images/video.jpg differ diff --git a/frontend/index.html b/frontend/raw/index.html similarity index 100% rename from frontend/index.html rename to frontend/raw/index.html diff --git a/frontend/raw/login.html b/frontend/raw/login.html new file mode 100644 index 0000000..61d91e3 --- /dev/null +++ b/frontend/raw/login.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + Metr + + +
+ +
+

Авторизируйтесь

+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/frontend/raw/passwordRecovery.html b/frontend/raw/passwordRecovery.html new file mode 100644 index 0000000..d64c041 --- /dev/null +++ b/frontend/raw/passwordRecovery.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + Metr + + +
+ +
+

Восстановление пароля

+
+
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/frontend/raw/passwordRecovery_codeAccept.html b/frontend/raw/passwordRecovery_codeAccept.html new file mode 100644 index 0000000..17a75e8 --- /dev/null +++ b/frontend/raw/passwordRecovery_codeAccept.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + Metr + + +
+ +
+

Восстановление пароля

+
+
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/frontend/raw/passwordRecovery_newPassword.html b/frontend/raw/passwordRecovery_newPassword.html new file mode 100644 index 0000000..c472277 --- /dev/null +++ b/frontend/raw/passwordRecovery_newPassword.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + Metr + + +
+ +
+

Восстановление пароля

+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/frontend/raw/profile.html b/frontend/raw/profile.html new file mode 100644 index 0000000..17aa8b4 --- /dev/null +++ b/frontend/raw/profile.html @@ -0,0 +1,117 @@ + + + + + + + + + + + Metr + + +
+
+
+
+
+
+ + Томск +
+
+
+
+ каталог +
+
+ блог +
+
+
+
+ контакты +
+
+ помощь +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+ +
+

Виктория

+
+
+

4,5

+
+ + + + + +
+
+
+
+

Обо мне

 +
+
+

Мои объявления

 +
+
+

Добавить объявление

 +
+
+

Избранное

 +
+
+
+
+

Обо мне

+
+ + + +
+
+

Занимаюсь продажей квартир более 10 лет.

+
+
+
+
+ + + \ No newline at end of file diff --git a/frontend/raw/signin.html b/frontend/raw/signin.html new file mode 100644 index 0000000..7911e74 --- /dev/null +++ b/frontend/raw/signin.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + Metr + + +
+ +
+

Вход Метр

+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/frontend/src/assets/css/login.css b/frontend/src/assets/css/login.css new file mode 100644 index 0000000..405564f --- /dev/null +++ b/frontend/src/assets/css/login.css @@ -0,0 +1,94 @@ +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-family: 'Montserrat', sans-serif; +} + +.container { + width: 100%; + height: 100vh; + max-width: 1920px; + margin: 0 auto; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url( + "../images/intro.jpg"); + background-size: cover; + display: flex; + flex-direction: column; + justify-content:center; +} + +.logo { + display: flex; + flex-direction: column; + align-items: center; +} + +.logoMetr { + width: 185px; + height: 100px; + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; +} + +.title { + margin: 1% 0; + display: flex; + flex-direction: column; + align-items: center; +} + +.title h2{ + font-size: 35px; +} + +.form__example { + display: flex; + flex-direction: column; + align-items: center; +} + +.form__input { + margin-top: 30px; + width: 320px; + height: 40px; + background-color: #1A89C9; + color: white; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + border-radius: 10px; + border: 0px; +} + +.form__input:hover { + color: rgb(15, 10, 41); + font-weight: 600; + transition: color .1s linear; +} + +.login { + width: 320px; + height: 50px; + padding-left: 1%; +} + +input { + margin: 0; + padding: 0; + color: rgb(129, 125, 125); + font-family: 'Montserrat', sans-serif; +} diff --git a/frontend/src/assets/css/signin.css b/frontend/src/assets/css/signin.css index b109eba..405564f 100644 --- a/frontend/src/assets/css/signin.css +++ b/frontend/src/assets/css/signin.css @@ -1,4 +1,22 @@ +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + line-height: 1.6; +} +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-family: 'Montserrat', sans-serif; +} .container { width: 100%; @@ -6,7 +24,7 @@ max-width: 1920px; margin: 0 auto; background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url( - "@/assets/images/intro.jpg"); + "../images/intro.jpg"); background-size: cover; display: flex; flex-direction: column; @@ -22,7 +40,7 @@ .logoMetr { width: 185px; height: 100px; - background: url("@/assets/images/metr.svg") center + background: url("../images/metr.svg") center no-repeat; background-size: cover; } diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css new file mode 100644 index 0000000..8eaa5ca --- /dev/null +++ b/frontend/src/assets/css/style.css @@ -0,0 +1,492 @@ +/* Fonts */ + + @import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content:center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.intro__text { + width: 100%; + height: 100px; + margin: 0 auto; +} + +.intro__title { + font-size: 25px; + color: white; + text-align: center; +} + +.newhome { + font-family: 'Stapel'; +} + +.intro__subtitle { + font-size: 17px; + color: white; + text-align: center; + font-family: 'Inter', sans-serif; +} + +.intro_footer { + width: 1050px; + height: 80px; + margin: 300px auto 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.intro__btn { + width: 185px; + height: 55px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 5px; + + background-color: rgba(26, 137, 201, 1); + +} + +.intro__button { + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + margin: 0 auto; + + font-weight: 500; + color: white; +} + +.intro__button:hover { + color: #0f171d; + font-weight: 600; + transition: color .2s linear; +} + +.intro__odnushka { + width: 250px; + height: 50px; + display: flex; + flex-direction: column; +} + +.odnushka { + font-size: 17px; + color: black; + background: white; + text-decoration: none; + padding: 2px; + font-weight: 600; +} + +.odnushka__price { + width: 115px; + font-size: 17px; + text-decoration: none; + padding: 2px; + font-weight: 900; + color: black; + background: white; + font-family: 'Inter'; +} + +.title { + font-size: 25px; + font-family: 'Inter'; + font-weight: 400; +} + +/* About */ + +.about { + height: 100vh; + background-color: rgba(124, 173, 201, 1); + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: 'Inter', sans-serif; +} + +.about__title { + padding-left: 10%; + padding-top: 50px; + font-size: 40px; + font-family: 'Stapel'; +} + +.video { + margin: 0 auto; + display: flex; + flex-direction: row; + align-items: center; + width: 1300px; + height: 590px; + border: 1px solid black; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url( + "../images/video.jpg"); + background-size: cover; + +} + +.about__us { + margin-right: 5%; + font-family: 'Inter'; + font-weight: 100; + font-size: 17px; + display: flex; + flex-direction: column; + align-items: flex-end; +} + +/* Suggestions */ + +.suggestions { + padding-top: 10%; + background-color: rgba(124, 173, 201, 1); + height: 100%; + min-height: 600px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0 auto; +} + +.suggestions__title { + font-size: 25px; + padding-left: 10%; +} + +.suggestions__images { + margin: 2% 12%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; +} + +.sugg__img { + flex-basis: 30%; + height: 460px; + margin: 4% 0 1% auto; + background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6)); + transition: transform .2s linear; +} + +.afterword { + margin: 0 5% 0 0; + display: flex; + flex-direction: column; + align-items: flex-end; + font-size: 17px; +} + +.after__afterword { + font-weight: 600; + margin-right: 5%; +} + +.gradient { + + display: inline-block; + position: relative; + line-height: 0; +} + +.gradient:after { + content: ""; + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: transparent; + background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8)); + opacity: 0.8; +} + +.podlozhka { + position: relative; +} + +.podlozhka:hover .sugg__img { + transform: translate3d(-10px, -10px, 0); +} + + +.podlozhka:hover .sugg__img img { + opacity: 0.6; +} + +.podlozhka:hover .sugg__text{ + opacity: 1; +} + +.sugg__img img { + transition: opacity .1s linear; +} + +.sugg__text { + width: 100%; + text-align: center; + position: absolute; + top: 90%; + left: 0; + z-index: 2; + transform: translate3d(0, -50%, 0); + opacity: 0; + transition: opacity .2s linear; +} + +.sugg__text p { + width: 180px; + color: black; + font-family:sans-serif; + font-weight: 100; + font-size: 17px; + background: white; + text-decoration: none; + margin: 0 auto; +} + +.sugg__text h2 { + width: 100px; + font-weight: 700; + margin: 0 auto; + color: black; + font-family:sans-serif; + font-size: 17px; + background: white; +} + +/* Footer */ + +.footer { + height: 200px; + margin: 0 auto; + padding-top: 1%; + background-color: rgba(124, 173, 201, 1); +} + +.footer__search { + width: 300px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.footer__contacts { + width: 165px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.footer__contacts__imgtop { + width: 165px; + height: 48px; + border-bottom: 2px solid white; + margin: 0; +} + +.footer__contacts__img { + width: 166px; + height: 48px; + margin: 0; +} \ No newline at end of file