add more components

src/css/style.css

@@ -232,4 +232,104 @@ header {
     margin-right: 8px;
     border-radius: 50%;
     background-color: #aeaeae;
+}
+.navigation {
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(#ececec),
+            to(#ececec)
+        ),
+        #e8e8e8;
+    background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8;
+    position: relative;
+    min-height: 640px;
+    padding: 22px 0 30px 0;
+}
+.navigation_input_block {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    position: relative;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 60px;
+    margin-bottom: 60px;
+}
+.navigation_input {
+    padding-left: 20px;
+    height: 100%;
+    border-radius: 40px;
+    display: block;
+    width: 100%;
+    border: 0px;
+    font-size: 20px;
+}
+.navigation_input:focus {
+    outline: none;
+    border: 1px solid gray;
+}
+.navigation_search {
+    height: 35px;
+    width: 35px;
+    position: absolute;
+    right: 30px;
+}
+.navigation_info {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 56px;
+    background-color: #fff;
+    border-radius: 50px;
+}
+.navigation_info_text {
+    color: #545454;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_cost {
+    position: absolute;
+    right: 150px;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_slid {
+    height: 18px;
+    width: 112px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+.navigation_slid_active {
+    width: 20px;
+    margin-right: 8px;
+    border-radius: 50%;
+    background-color: #fff;
+}
+.navigation_slid_disable {
+    width: 20px;
+    margin-right: 8px;
+    border-radius: 50%;
+    background-color: #aeaeae;
 } /*# sourceMappingURL=style.css.map */