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

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

+
+
+
+
+

Студия на Кирова, 12

1298000₽

+
+
+
+

Студия на Кирова, 12

1298000₽

+
+
+
+

Студия на Кирова, 12

1298000₽

+
+
+
+

Студия на Кирова, 12

1298000₽

+
+
+
+

Студия на Кирова, 12

1298000₽

+
+
+
+

Студия на Кирова, 12

1298000₽

+
+
+
+ + + + + \ 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/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/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.jpg b/frontend/raw/assets/images/metr.jpg new file mode 100644 index 0000000..99468a6 Binary files /dev/null and b/frontend/raw/assets/images/metr.jpg differ 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/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/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/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