diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..c5c3804 --- /dev/null +++ b/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.jpg") 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/assets/images/1.jpg b/assets/images/1.jpg new file mode 100644 index 0000000..ad38a3a Binary files /dev/null and b/assets/images/1.jpg differ diff --git a/assets/images/2jpg.jpg b/assets/images/2jpg.jpg new file mode 100644 index 0000000..702dc81 Binary files /dev/null and b/assets/images/2jpg.jpg differ diff --git a/assets/images/3.jpg b/assets/images/3.jpg new file mode 100644 index 0000000..3d4fd07 Binary files /dev/null and b/assets/images/3.jpg differ diff --git a/assets/images/4.jpg b/assets/images/4.jpg new file mode 100644 index 0000000..4c9b141 Binary files /dev/null and b/assets/images/4.jpg differ diff --git a/assets/images/5.jpg b/assets/images/5.jpg new file mode 100644 index 0000000..1a47eb8 Binary files /dev/null and b/assets/images/5.jpg differ diff --git a/assets/images/6.jpg b/assets/images/6.jpg new file mode 100644 index 0000000..20bba8f Binary files /dev/null and b/assets/images/6.jpg differ diff --git a/assets/images/image 3 (1).png b/assets/images/image 3 (1).png new file mode 100644 index 0000000..12690b0 Binary files /dev/null and b/assets/images/image 3 (1).png differ diff --git a/assets/images/intro.jpg b/assets/images/intro.jpg new file mode 100644 index 0000000..3d96c8d Binary files /dev/null and b/assets/images/intro.jpg differ diff --git a/assets/images/location.png b/assets/images/location.png new file mode 100644 index 0000000..1fe0992 Binary files /dev/null and b/assets/images/location.png differ diff --git a/assets/images/metr.jpg b/assets/images/metr.jpg new file mode 100644 index 0000000..99468a6 Binary files /dev/null and b/assets/images/metr.jpg differ diff --git a/assets/images/search.jpg b/assets/images/search.jpg new file mode 100644 index 0000000..b0d77f2 Binary files /dev/null and b/assets/images/search.jpg differ diff --git a/assets/images/tell.jpg b/assets/images/tell.jpg new file mode 100644 index 0000000..aabec59 Binary files /dev/null and b/assets/images/tell.jpg differ diff --git a/assets/images/user.jpg b/assets/images/user.jpg new file mode 100644 index 0000000..977c266 Binary files /dev/null and b/assets/images/user.jpg differ diff --git a/assets/images/video.jpg b/assets/images/video.jpg new file mode 100644 index 0000000..2491c6b Binary files /dev/null and b/assets/images/video.jpg differ diff --git a/fonts/Stapel/Stapel-Bold.ttf b/fonts/Stapel/Stapel-Bold.ttf new file mode 100644 index 0000000..c6b8d6d Binary files /dev/null and b/fonts/Stapel/Stapel-Bold.ttf differ diff --git a/fonts/Stapel/Stapel-Bold.woff b/fonts/Stapel/Stapel-Bold.woff new file mode 100644 index 0000000..600ae4a Binary files /dev/null and b/fonts/Stapel/Stapel-Bold.woff differ diff --git a/fonts/Stapel/Stapel-Bold.woff2 b/fonts/Stapel/Stapel-Bold.woff2 new file mode 100644 index 0000000..7dd552f Binary files /dev/null and b/fonts/Stapel/Stapel-Bold.woff2 differ diff --git a/fonts/Stapel/stapel-semi-expanded-bold.otf b/fonts/Stapel/stapel-semi-expanded-bold.otf new file mode 100644 index 0000000..3a58ab7 Binary files /dev/null and b/fonts/Stapel/stapel-semi-expanded-bold.otf differ diff --git a/fonts/StapelS/Stapel-SemiExpandedBold.ttf b/fonts/StapelS/Stapel-SemiExpandedBold.ttf new file mode 100644 index 0000000..c938f4c Binary files /dev/null and b/fonts/StapelS/Stapel-SemiExpandedBold.ttf differ diff --git a/fonts/StapelS/Stapel-SemiExpandedBold.woff b/fonts/StapelS/Stapel-SemiExpandedBold.woff new file mode 100644 index 0000000..2cded4d Binary files /dev/null and b/fonts/StapelS/Stapel-SemiExpandedBold.woff differ diff --git a/fonts/StapelS/Stapel-SemiExpandedBold.woff2 b/fonts/StapelS/Stapel-SemiExpandedBold.woff2 new file mode 100644 index 0000000..c81f263 Binary files /dev/null and b/fonts/StapelS/Stapel-SemiExpandedBold.woff2 differ diff --git a/fonts/StapelS/style.css b/fonts/StapelS/style.css new file mode 100644 index 0000000..fc90f2d --- /dev/null +++ b/fonts/StapelS/style.css @@ -0,0 +1,9 @@ +@font-face { + font-family: 'Stapel'; + src: local('Stapel Semi Expanded Bold'), local('Stapel-Semi-Expanded-Bold'), + url('Stapel-SemiExpandedBold.woff2') format('woff2'), + url('Stapel-SemiExpandedBold.woff') format('woff'), + url('Stapel-SemiExpandedBold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b50759e --- /dev/null +++ b/index.html @@ -0,0 +1,181 @@ + + + + + + + + + + + Metr + + +
+
+
+
+
+
+ + Томск +
+
+
+
+ каталог +
+
+ блог +
+
+
+
+ контакты +
+
+ помощь +
+
+
+
+
+ +
+
+ + + +
+
+
+
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
+

Нашли вам новый дом

+
+
+
по самой низкой цене
+
+
+
+
+
+ Однушка на Елизаровых, 44 + 1 580 000₽ +
+
+ посмотреть +
+
+
+ +
+
+

О метре

+
+
+ +
+
+

Мы - агентство недвижимости.

+

Подберем подходящее жилье для вас.

+
+
+ +
+
+

Интересные предложения

+
+
+
+
+

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

1298000₽

+
+
+
+

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

1298000₽

+
+
+
+

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

1298000₽

+
+
+
+

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

1298000₽

+
+
+
+

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

1298000₽

+
+
+
+

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

1298000₽

+
+
+
+

Это подборка лучших вариантов, найденных

+

нашими сотрудниками.

+

Вдруг ваше будущее жилье здесь?

+
+
+ + + + + \ No newline at end of file