Added Header

index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Belazi Landing</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">
+    <!-- Styles -->
+    <link rel="stylesheet" href="./src/styles/style.css">
+    <link rel="stylesheet" href="./src/styles/media.css">
+</head>
+<body>
+
+    <header>
+        <div class="container">
+            <div class="header-wrap">
+                <div class="header-wrap__logo">
+                    <img src="./src/img/header/header-logo.png" alt="#">
+                </div>
+                <div class="header-wrap__opening">
+                    <p>
+                        c 9:00 до 21:00<br>
+                        <span>без выходных</span>
+                    </p>
+                </div>
+                <div class="header-wrap__info">
+                    <p>
+                        +7 (818) 247-47-25<br>
+                        +7(818) 247-47-25
+                    </p>
+                    <a href="#">
+                        <button>Заказать звонок</button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main>
+        <section id="info">
+
+        </section>
+    </main>
+    <!-- Index Js -->
+    <script src="./src/js/index.js"></script>
+</body>
+</html>

src/styles/media.css

@@ -0,0 +1,25 @@
+@media (max-width: 880px) {
+    header .header-wrap {
+        flex-direction: column;
+    }
+    header .header-wrap__info p {
+        display: block;
+        text-align: center;
+        right: 0;
+        margin-bottom: 15px;
+        margin-top: 15px;
+    }
+    header .header-wrap__info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+    }
+    header .header-wrap__opening {
+        order: 1;
+        margin-top: 15px;
+    }
+    header .header-wrap__logo {
+        text-align: center;
+    }
+}

src/styles/style.css

@@ -0,0 +1,113 @@
+@font-face {
+    font-family: 'ProximaNovaRegular';
+    src: url('../fonts/ProximaNova-Regular.eot');
+    src: url('../fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/ProximaNova-Regular.woff') format('woff'),
+        url('../fonts/ProximaNova-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'ProximaNovaBold';
+    src: url('../fonts/ProximaNova-Bold.eot');
+    src: url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/ProximaNova-Bold.woff') format('woff'),
+    url('../fonts/ProximaNova-Bold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    }
+
+@font-face {
+    font-family: 'ProximaNovaBlack';
+    src: url('../fonts/ProximaNova-Black.eot');
+    src: url('../fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/ProximaNova-Black.woff') format('woff'),
+        url('../fonts/ProximaNova-Black.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'ProximaNovaRegular';
+    margin: 0;
+}
+
+button {
+    outline: none;
+}
+
+.container {
+    max-width: 1170px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+/* Section Header */
+header {
+    padding-top: 25px;
+    padding-bottom: 25px;
+    background-color: #191919;
+    color: #fff;
+}
+.header-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.header-wrap__logo, .header-wrap__opening, .header-wrap__info {
+    width: 370px;
+}
+.header-wrap__opening {
+    width: 150px;
+}
+.header-wrap__opening p {
+    font-size: 13px;
+    line-height: 23px;
+    font-family: 'ProximaNovaBold';
+    text-align: center;
+}
+.header-wrap__opening p span {
+    font-family: 'ProximaNovaRegular';
+    font-size: 12px;
+}
+.header-wrap__info {
+    text-align: right;
+}
+.header-wrap__info button {
+    width: 170px;
+    cursor: pointer;
+    border: none;
+    background-color: #1669b3;
+    color: #fff;
+    font-family: 'ProximaNovaBold';
+    text-transform: uppercase;
+    text-align: center;
+    transition: all .1s;
+    vertical-align: top;
+    height: 50px;
+}
+.header-wrap__info button:hover {
+    background: none;
+    border: 2px solid #1669b3;
+}
+.header-wrap__info p {
+    display: inline-block;
+    text-align: right;
+    font-family: 'ProximaNovaBlack';
+    padding-top: 6px;
+    position: relative;
+    right: 28px;
+}
+.flex {
+    text-align: center;
+}