Main page

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;
+}

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;
+  }

index.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/style.css">
+    <title>Metr</title>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header__table">
+                <div class="header__image"></div>
+                <div class="header__block">
+                    <div class="header__block__content">
+                        <img src="assets/images/location.png" alt="">
+                        <a class="nav__link_tomsk" href="#">Томск</a>
+                    </div>
+                </div>
+                <div class="header__block">
+                    <div class="header__block__contenttop">
+                        <a class="nav__link" href="#">каталог</a>
+                    </div>
+                    <div class="header__block__contentdown">
+                        <a class="nav__link" href="#">блог</a>
+                    </div>
+                </div>
+                <div class="header__block">
+                    <div class="header__block__contenttop">
+                        <a class="nav__link" href="#">контакты</a>
+                    </div>
+                    <div class="header__block__contentdown">
+                        <a class="nav__link" href="#">помощь</a>
+                    </div>
+                </div>
+                <div class="header__search">
+                    <div class="search">
+                        <div class="search__block">
+
+                        </div>
+                        <div class="search__img">
+                            <a class="nav__link" href="#">
+                                <img src="../layout/assets/images/search.jpg" alt="">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="header__contacts">
+                    <div class="header__contacts__imgtop">
+                        <a class="nav__link" href="#">
+                            <img src="../layout/assets/images/tell.jpg" alt="">
+                        </a>
+                    </div>
+                    <div class="header__contacts__img">
+                        <a class="nav__link" href="#">
+                            <img src="../layout/assets/images/user.jpg" alt="">
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="intro">
+            <div class="container">
+                <div class="intro__text">
+                    <div class="intro__title">
+                        <h1 class="newhome">Нашли вам новый дом</h1>
+                    </div>
+                    <div class="intro__subtitle">
+                        <h5 class="title">по самой низкой цене</h5>
+                    </div>
+                </div>
+            </div>
+            <div class="intro_footer">
+                <div class="intro__odnushka">
+                    <a class="odnushka" href="#">Однушка на Елизаровых, 44</a>
+                    <a class="odnushka__price" href="#">1 580 000₽</a>
+                </div>
+                <div class="intro__btn">
+                    <a class="intro__button" href="#">посмотреть</a>
+                </div>
+            </div>
+    </div>
+
+    <section class="about">
+        <div class="about__title">
+            <h1 class="about__title">О метре</h1>
+        </div>
+        <div class="video">
+            <a class="video" href="#"></a>
+        </div>
+        <div class="about__us">
+            <h3 class="about__us">Мы - агентство недвижимости.</h3>
+            <h3 class="about__us">Подберем подходящее жилье для вас.</h3>
+        </div>
+    </section>
+    
+    <section class="suggestions">
+        <div class="suggestions__title">
+            <h3 class="newhome">Интересные предложения</h3>
+        </div>
+        <div class="suggestions__images">
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="../layout/assets/images/1.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="../layout/assets/images/1.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="../layout/assets/images/3.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="../layout/assets/images/4.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="../layout/assets/images/6.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="../layout/assets/images/6.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+        </div>
+        <div class="afterword">
+            <p class="afterword">Это подборка лучших вариантов, найденных</p>
+            <p class="afterword">нашими сотрудниками.</p>
+            <p class="after__afterword">Вдруг ваше будущее жилье здесь?</p>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="header__table">
+            <div class="header__image">
+            </div>
+            <div class="header__block">
+                <div class="header__block__content">
+                    <img src="assets/images/location.png" alt="">
+                    <a class="nav__link_tomsk" href="#">Томск</a>
+                </div>
+            </div>
+            <div class="header__block">
+                <div class="header__block__contenttop">
+                    <a class="nav__link" href="#">вконтакте</a>
+                </div>
+                <div class="header__block__contentbott">
+                    <a class="nav__link" href="#">инстаграм</a>
+                </div>
+            </div>
+            <div class="header__block">
+                <div class="header__block__contenttop">
+                    <a class="nav__link" href="#">фэйсбук</a>
+                </div>
+                <div class="header__block__contentdown">
+                    <a class="nav__link" href="#">твиттер</a>
+                </div>
+            </div>
+            <div class="footer__search">
+            
+            </div>
+            <div class="footer__contacts">
+                <div class="footer__contacts__imgtop">
+                    <a class="nav__link" href="#">+7-495-291-32-01</a>
+                </div>
+                <div class="footer__contacts__img">
+                    <a class="nav__link" href="#">вконтакте</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+      
+</body>
+</html>