From 6e51b47c43a3e7a3f981c1faa0f343323d85addf Mon Sep 17 00:00:00 2001
From: bruhmagedon <schubert.walk@yandex.ru>
Date: Sat, 29 Jul 2023 15:22:02 +0300
Subject: [PATCH] third slide component

---
 react-app/src/components/app/app.js           |   4 +
 react-app/src/components/app/css/app.css      |  60 ++
 react-app/src/components/main/main.js         |   6 +-
 .../components/nav-credit-item/img/alpha.png  | Bin 0 -> 1351 bytes
 .../nav-credit-item/nav-credit-item.js        |  29 +
 .../navigation-credits/navigation-credits.js  |  44 ++
 .../components/navigation/navigation-list.js  |   1 +
 src/css/style.css                             | 635 +++++++++++++++++-
 8 files changed, 776 insertions(+), 3 deletions(-)
 create mode 100644 react-app/src/components/nav-credit-item/img/alpha.png
 create mode 100644 react-app/src/components/nav-credit-item/nav-credit-item.js
 create mode 100644 react-app/src/components/navigation-credits/navigation-credits.js

diff --git a/react-app/src/components/app/app.js b/react-app/src/components/app/app.js
index b383e24..7fefa0f 100644
--- a/react-app/src/components/app/app.js
+++ b/react-app/src/components/app/app.js
@@ -12,7 +12,11 @@ class App extends Component {
         return (
             <div className="app">
                 <Header />
+                <div class="fixed"></div>
                 <Main />
+                <footer>
+                    <span>Copyrited By PayDay</span>
+                </footer>
             </div>
         );
     }
diff --git a/react-app/src/components/app/css/app.css b/react-app/src/components/app/css/app.css
index 55cad08..38bba8b 100644
--- a/react-app/src/components/app/css/app.css
+++ b/react-app/src/components/app/css/app.css
@@ -332,4 +332,64 @@ header {
     margin-right: 8px;
     border-radius: 50%;
     background-color: #aeaeae;
+}
+.navigation .container_flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+} /*# sourceMappingURL=style.css.map */
+.navigation_choise {
+    position: fixed;
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(#ececec),
+            to(#ececec)
+        ),
+        #e8e8e8;
+    background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    bottom: 50px;
+}
+footer {
+    width: 100%;
+    bottom: 0px;
+    position: fixed;
+    background-color: #fff;
+    height: 50px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+}
+footer span {
+    width: 200px;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
 } /*# sourceMappingURL=style.css.map */
diff --git a/react-app/src/components/main/main.js b/react-app/src/components/main/main.js
index 59f4436..b368e01 100644
--- a/react-app/src/components/main/main.js
+++ b/react-app/src/components/main/main.js
@@ -2,6 +2,7 @@ import { Component } from "react";
 
 import UniverseList from "../universe/universe-list";
 import NavigationList from "../navigation/navigation-list";
+import CreditsList from "../navigation-credits/navigation-credits";
 
 //генерятся из get запроса (будет ссылка в universeData вместо #)
 import KubGu from "./img/kubgu.jpg";
@@ -68,12 +69,13 @@ class Main extends Component {
             //Из UniverseList приходит текущий выбранный вуз, он отправляется в NavigationList
             <>
                 {/* тут проиходит переключение слайдеров (мб стоит сделать как список) */}
-                <UniverseList
+                {/* <UniverseList
                     data={universeData}
                     picturesList={picturesList}
                     onUniverseProps={this.onClickToUniverse}
-                />
+                /> */}
                 {/* <NavigationList /> */}
+                <CreditsList />
             </>
         );
     }
diff --git a/react-app/src/components/nav-credit-item/img/alpha.png b/react-app/src/components/nav-credit-item/img/alpha.png
new file mode 100644
index 0000000000000000000000000000000000000000..735d31a9a08a2c4dc561a7f17c4c5e2575a0cbda
GIT binary patch
literal 1351
zcmV-N1-SZ&P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1l&nPK~#7F?OES%
z6jc=d?##|^1(gD7VvI3`N@$D^T5TIzkwOXj;ERb*_+nx-F(f|t;2)t+#0L}Kd>2y{
zYJa+{twmy6Y6TKZ(ALt@h{6J;%+AccoIA6-GqY_&+uWHn)A?pMGjrz7kMG`d&OPT`
zCJ5L<(6Ggj5>7f&!bwL;IO#|UCmmaka0anLfKwnV1P5b`&KWeh14CShk1&Po=E5Az
zFHge0Fb*bcu&19z?t_nzd#QywK#PSoiz9iEudr_Xi{gp*VO+T^-&%P+*p7M_pM8OC
zue2f##A3sOhHmNWuaLcRDL~e}0$wb_I{7&`=ZFLGI4#G480vS4*Mfn=xj2c^>@?y?
zRFx54%`&9a9QzHJpI!A{jXSXWdSbC*WrRJiyBvbtvN_b_pVP*6KLKoiG;p&9``pj4
z9Scz-a+S7=|3egh3P>14dneeTu7HfXVPXu{)CEMX)k+E1s<k||e;oz8K3A0yT^O$)
zhThs9YR|}NIl~1+%~&bn<!UWZ`tduT0}&K^8j(HFfx3=E;Jcm--VAG~mrTGxl!#QN
zoyFVWW9Q{;>j{XI*4lwgwhsE^^)7KAWZN@WVa-e<N<>E34K@mSu*JLZ^;97H##^2y
z&`;~^3Qt9JZ1$ga9a~h0j4-DFqm&;EPc=_H1Ec8$_fV3~HMap-13|+TBf}7uji?Zb
z(~^7p?`hb>dH<SJ*#ifm>3;aGQCNwWTSA}VT%15@asp8y8mC1&XY?$z`}h27wB?Q*
zt&X_t6#4Q@TSrKNb@JBMXo0e-Xw*6qm6qRHI^FF%D=BN-2jkTi&r?&VNx?IDWRBe7
zV-SyQ_uJ9m>F;sF(I}uaJ*=p7>DoWAFa1FeFRQpDzOaDX@4gex9m-c>E`=o&S6efG
zAxl#jQyg$AB`j51l6DFMRkE&J9^WZ?{}oW12{XzvtiE1kKipe+FjQexmELHYEUOvj
zKrhyZns<>J*yr+aq_<{jM|f4jYy&Tnon%go10gTVWR+npcOzKp;Zu{aejkTwC@=9?
zgFVnhC7CB>mL2!;r^q!vUqi`*D7SM4`rvebL&u)8lFzV5$XhqJQr%14C@Ui@M^}1X
zr!eH6d!I<|s_8{McKki)86(uz(;&YKmg;xH{^1l@)j3N$J_B*$6Pl}ZsDjdI$-F!T
zHaA-xMd^{X*E*qT;ePea#UHuMz9wM*{&2hbYp|~V36)S+0HE#u_uqzOoQTzR9i#mI
z;VPLS4agomim(GC=hfd!L5R9~momck(p~WLzfgsW3UhSM<>)=v0KH+)nxCPywY&ET
z_kIth(LA`Vt`efGOzYS-_^q3yuH{c9zFaq8?AW>H;6YAl)_*t1Nd-QM=45TxZZZos
zb{tDxdNUziOiMb_)x(V<%CZa;=1fWmOTV``au&Egzihcg#u%QAd65WtT}Jy#J1^b}
zT&tv%<v>if)f)C<TeF(QHYJ4Jw6OaWoWV0#AN*BBKg_I^31r?r4s0gE5|!9_eT&;{
zh2!Ni!PJ?HI;X|Ts=3LbZuQU$CfA7-Mzw73)y@+tU6x9fKJq3q4ULpAlm$WU4w~mm
z*DKFJttAVWtWGJWvhPeo%Y-8(oOGmwla7>d(vcEQI#R+(#{)wP<X41fT*d$Z002ov
JPDHLkV1go+e8T_$

literal 0
HcmV?d00001

diff --git a/react-app/src/components/nav-credit-item/nav-credit-item.js b/react-app/src/components/nav-credit-item/nav-credit-item.js
new file mode 100644
index 0000000..6dde8a2
--- /dev/null
+++ b/react-app/src/components/nav-credit-item/nav-credit-item.js
@@ -0,0 +1,29 @@
+import { Component } from "react";
+import AlphaPng from "./img/alpha.png";
+
+class CreditItem extends Component {
+    state = {};
+
+    render() {
+        const { name, credit, pic, onUniverseProps } = this.props;
+
+        return (
+            <div class="col-12 navigation_card navigation_bank_text">
+                <div class="navigation_bank">
+                    <img
+                        src={AlphaPng}
+                        alt="navigation"
+                        class="navigation_icon"
+                    />
+                    Альфа Банк <span>на 15 лет</span>
+                </div>
+                <div class="navigation_credit">
+                    <span class="navigation_credit_cost">10000 рублей/мес</span>
+                    <span class="navigation_credit_prosent">6% в год</span>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default CreditItem;
diff --git a/react-app/src/components/navigation-credits/navigation-credits.js b/react-app/src/components/navigation-credits/navigation-credits.js
new file mode 100644
index 0000000..d100d2b
--- /dev/null
+++ b/react-app/src/components/navigation-credits/navigation-credits.js
@@ -0,0 +1,44 @@
+import { Component } from "react";
+
+import CreditItem from "../nav-credit-item/nav-credit-item";
+
+class CreditsList extends Component {
+    state = {};
+
+    render() {
+        // const credits = data.map((item, index) => {
+        //     return <CreditItem key={index} />;
+        // });
+
+        return (
+            <section class="navigation">
+                <div class="container container_flex">
+                    <div class="navigation_fixed"></div>
+                    <div class="navigation_banks" id="navigation">
+                        <div class="navigation_banks_univer ">СпбГУ</div>
+                        <div class="navigation_banks_speciality ">
+                            09.03.04 - Программная инженерия
+                        </div>
+                        <div class="navigation_banks_sort navigation_banks_sort_hamburger">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                    <CreditItem />
+                    <div class="row row-cols-lg-10 g-5 g-lg-3"></div>
+                </div>
+                <div class="navigation_choise">
+                    <div class="navigation_slid">
+                        <span class="navigation_slid_disable"></span>
+                        <span class="navigation_slid_active"></span>
+                        <span class="navigation_slid_disable"></span>
+                        <span class="navigation_slid_disable"></span>
+                    </div>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default CreditsList;
diff --git a/react-app/src/components/navigation/navigation-list.js b/react-app/src/components/navigation/navigation-list.js
index aef9b24..65f0f45 100644
--- a/react-app/src/components/navigation/navigation-list.js
+++ b/react-app/src/components/navigation/navigation-list.js
@@ -39,6 +39,7 @@ class NavigationList extends Component {
                         <NavigationItem />
                         <NavigationItem />
                         <NavigationItem />
+                        {/* {navigations} */}
                     </div>
                 </div>
                 <div className="navigation_slid">
diff --git a/src/css/style.css b/src/css/style.css
index 3ffbaea..89df118 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1 +1,634 @@
-*{font-family:"Roboto",sans-serif}header{z-index:1;position:fixed;top:0px;width:100%;height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.fixed{width:100px;background-color:#fff;height:70px}.menu{width:435px;height:58px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:88px}.menu_logo{width:40px;height:52px}.menu_project_name{margin-left:20px}.menu_project_name_text{color:#20d37d;font-size:48px;font-style:normal;font-weight:500}.menu_hamburger{display:block;position:absolute;left:50px;top:17px;-webkit-transform:translateX(-50%);transform:translateX(-50%);height:50px;width:50px;background-color:#20d37d;border-radius:9px}.menu_hamburger span{display:block;height:5px;width:32px;background-color:#fff;margin:0 9px 6px 9px}.menu_hamburger span:nth-child(1){margin-top:12px}.menu_hamburger span:nth-child(3){margin-bottom:12px}.menu_hamburger_active{-webkit-transition:.8 all;transition:.8 all}.menu_hamburger_active span:nth-child(1){margin-top:12px;-webkit-transform:translateY(12px) rotate(-45deg);transform:translateY(12px) rotate(-45deg)}.menu_hamburger_active span:nth-child(2){display:none}.menu_hamburger_active span:nth-child(3){margin-top:12px;-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}.header_login{display:block;height:100%;padding-left:19px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:10px;width:290px;height:71px;background-color:#43ca79;border-radius:40px;color:#fff;font-size:32px;font-style:normal;font-weight:500}.header_login_text{padding-top:6px;height:100%;margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#000;font-size:22px;font-style:normal;font-weight:500}.universe{position:relative;min-height:640px;padding:22px 0 30px 0;background:-webkit-gradient(linear, left bottom, left top, from(#ECECEC), to(#ECECEC)),#e8e8e8;background:linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%),#e8e8e8}.universe_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:50px;margin-bottom:25px}.universe_input{padding-left:20px;height:100%;border-radius:40px;display:block;width:100%;border:0px}.universe_input:focus{outline:none;border:1px solid gray}.universe_search{height:35px;width:35px;position:absolute;right:30px}.universe_card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 30px 20px 0;height:205px;width:205px;background-color:#fff;border-radius:44px}.universe_card_text{color:#2a2a2a;font-size:24px;font-style:normal;font-weight:500}.universe_card_text span{color:#50d400;font-size:16px;font-style:normal;font-weight:500}.universe_icon{height:130px;width:130px}.universe_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%)}.universe_slid_active{width:20px;margin-right:8px;border-radius:50%;background-color:#fff}.universe_slid_disable{width:20px;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;min-height:660px;padding:22px 0 30px 0;margin-top:72px}.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_fixed{background:-webkit-gradient(linear, left bottom, left top, from(rgb(236, 236, 236)), to(rgb(236, 236, 236))),#e8e8e8;background:linear-gradient(0deg, rgb(236, 236, 236) 0%, rgb(236, 236, 236) 100%),#e8e8e8;height:80px;width:100%;position:absolute;top:65px}.navigation #navigation{height:70px;padding-top:15px;top:66px;width:90%;left:5%}.navigation_banks{background:-webkit-gradient(linear, left bottom, left top, from(#ECECEC), to(#ECECEC)),#e8e8e8;background:linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%),#e8e8e8;position:fixed;top:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:56px;margin-bottom:10px}.navigation_banks_univer{width:12%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50px;background-color:#fff;color:#20d37d;font-size:22px;font-style:normal;font-weight:500}.navigation_banks_speciality{width:82%;margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50px;background-color:#fff;color:#20d37d;font-size:20px;font-style:normal;font-weight:500}.navigation_banks_sort{width:57px;margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;background-color:#fff}.navigation_banks_sort_hamburger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#fff}.navigation_banks_sort_hamburger span{border-radius:6px;display:block;height:5px;width:27px;background-color:#20d37d;margin:0 9px 6px 9px}.navigation_banks_sort_hamburger span:nth-child(1){margin-top:12px}.navigation_banks_sort_hamburger span:nth-child(2){width:19px}.navigation_banks_sort_hamburger span:nth-child(3){width:11px;margin-bottom:12px}.navigation_banks_sort_active{-webkit-transition:.8 all;transition:.8 all}.navigation_banks_sort_active span:nth-child(1){margin-top:12px;-webkit-transform:translateY(12px) rotate(-45deg);transform:translateY(12px) rotate(-45deg)}.navigation_banks_sort_active span:nth-child(2){display:none}.navigation_banks_sort_active span:nth-child(3){margin-top:12px;-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}.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 .container_flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.navigation_cost{position:absolute;right:150px;color:#20d37d;font-size:20px;font-style:normal;font-weight:500}.navigation_card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:30px;height:60px;width:880px;background-color:#fff;border-radius:44px}.navigation_card_text{color:#2a2a2a;font-size:24px;font-style:normal;font-weight:500}.navigation_card_text span{color:#50d400;font-size:16px;font-style:normal;font-weight:500}.navigation_bank_text{margin:0 0 6px 0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#2a2a2a;font-size:24px;font-style:normal;font-weight:500}.navigation_slid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:14px;width:80px}.navigation_slid_active{width:14px;margin-right:6px;border-radius:50%;background-color:#fff}.navigation_slid_disable{width:14px;margin-right:6px;border-radius:50%;background-color:#aeaeae}.navigation_bank{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}.navigation_icon{height:45px;width:45px}.navigation_credit{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;width:380px;height:25px;padding-right:30px}.navigation_credit_prosent{padding-left:33px;color:#20d37d;font-size:20px;font-style:normal;font-weight:500}.navigation_choise{position:fixed;background:-webkit-gradient(linear, left bottom, left top, from(#ECECEC), to(#ECECEC)),#e8e8e8;background:linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%),#e8e8e8;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:50px;width:100%;bottom:50px}footer{width:100%;bottom:0px;position:fixed;background-color:#fff;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}footer span{width:200px;color:#20d37d;font-size:20px;font-style:normal;font-weight:500}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+* {
+    font-family: "Roboto", sans-serif;
+}
+header {
+    z-index: 1;
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    height: 70px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    background-color: #fff;
+}
+.fixed {
+    width: 100px;
+    background-color: #fff;
+    height: 70px;
+}
+.menu {
+    width: 435px;
+    height: 58px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: left;
+    -ms-flex-pack: left;
+    justify-content: left;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-left: 88px;
+}
+.menu_logo {
+    width: 40px;
+    height: 52px;
+}
+.menu_project_name {
+    margin-left: 20px;
+}
+.menu_project_name_text {
+    color: #20d37d;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 500;
+}
+.menu_hamburger {
+    display: block;
+    position: absolute;
+    left: 50px;
+    top: 17px;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    height: 50px;
+    width: 50px;
+    background-color: #20d37d;
+    border-radius: 9px;
+}
+.menu_hamburger span {
+    display: block;
+    height: 5px;
+    width: 32px;
+    background-color: #fff;
+    margin: 0 9px 6px 9px;
+}
+.menu_hamburger span:nth-child(1) {
+    margin-top: 12px;
+}
+.menu_hamburger span:nth-child(3) {
+    margin-bottom: 12px;
+}
+.menu_hamburger_active {
+    -webkit-transition: 0.8 all;
+    transition: 0.8 all;
+}
+.menu_hamburger_active span:nth-child(1) {
+    margin-top: 12px;
+    -webkit-transform: translateY(12px) rotate(-45deg);
+    transform: translateY(12px) rotate(-45deg);
+}
+.menu_hamburger_active span:nth-child(2) {
+    display: none;
+}
+.menu_hamburger_active span:nth-child(3) {
+    margin-top: 12px;
+    -webkit-transform: translateY(-5px) rotate(45deg);
+    transform: translateY(-5px) rotate(45deg);
+}
+.header_login {
+    display: block;
+    height: 100%;
+    padding-left: 19px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-right: 10px;
+    width: 290px;
+    height: 71px;
+    background-color: #43ca79;
+    border-radius: 40px;
+    color: #fff;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+}
+.header_login_text {
+    padding-top: 6px;
+    height: 100%;
+    margin-left: 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: #000;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 500;
+}
+.universe {
+    position: relative;
+    min-height: 640px;
+    padding: 22px 0 30px 0;
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(#ececec),
+            to(#ececec)
+        ),
+        #e8e8e8;
+    background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8;
+}
+.universe_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: 50px;
+    margin-bottom: 25px;
+}
+.universe_input {
+    padding-left: 20px;
+    height: 100%;
+    border-radius: 40px;
+    display: block;
+    width: 100%;
+    border: 0px;
+}
+.universe_input:focus {
+    outline: none;
+    border: 1px solid gray;
+}
+.universe_search {
+    height: 35px;
+    width: 35px;
+    position: absolute;
+    right: 30px;
+}
+.universe_card {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin: 0 30px 20px 0;
+    height: 205px;
+    width: 205px;
+    background-color: #fff;
+    border-radius: 44px;
+}
+.universe_card_text {
+    color: #2a2a2a;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+}
+.universe_card_text span {
+    color: #50d400;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+}
+.universe_icon {
+    height: 130px;
+    width: 130px;
+}
+.universe_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%);
+}
+.universe_slid_active {
+    width: 20px;
+    margin-right: 8px;
+    border-radius: 50%;
+    background-color: #fff;
+}
+.universe_slid_disable {
+    width: 20px;
+    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;
+    min-height: 660px;
+    padding: 22px 0 30px 0;
+    margin-top: 72px;
+}
+.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_fixed {
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(rgb(236, 236, 236)),
+            to(rgb(236, 236, 236))
+        ),
+        #e8e8e8;
+    background: linear-gradient(
+            0deg,
+            rgb(236, 236, 236) 0%,
+            rgb(236, 236, 236) 100%
+        ),
+        #e8e8e8;
+    height: 80px;
+    width: 100%;
+    position: absolute;
+    top: 65px;
+}
+.navigation #navigation {
+    height: 70px;
+    padding-top: 15px;
+    top: 66px;
+    width: 90%;
+    left: 5%;
+}
+.navigation_banks {
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(#ececec),
+            to(#ececec)
+        ),
+        #e8e8e8;
+    background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8;
+    position: fixed;
+    top: 60px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    height: 56px;
+    margin-bottom: 10px;
+}
+.navigation_banks_univer {
+    width: 12%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    border-radius: 50px;
+    background-color: #fff;
+    color: #20d37d;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_banks_speciality {
+    width: 82%;
+    margin-left: 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    border-radius: 50px;
+    background-color: #fff;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_banks_sort {
+    width: 57px;
+    margin-left: 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+}
+.navigation_banks_sort_hamburger {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    background-color: #fff;
+}
+.navigation_banks_sort_hamburger span {
+    border-radius: 6px;
+    display: block;
+    height: 5px;
+    width: 27px;
+    background-color: #20d37d;
+    margin: 0 9px 6px 9px;
+}
+.navigation_banks_sort_hamburger span:nth-child(1) {
+    margin-top: 12px;
+}
+.navigation_banks_sort_hamburger span:nth-child(2) {
+    width: 19px;
+}
+.navigation_banks_sort_hamburger span:nth-child(3) {
+    width: 11px;
+    margin-bottom: 12px;
+}
+.navigation_banks_sort_active {
+    -webkit-transition: 0.8 all;
+    transition: 0.8 all;
+}
+.navigation_banks_sort_active span:nth-child(1) {
+    margin-top: 12px;
+    -webkit-transform: translateY(12px) rotate(-45deg);
+    transform: translateY(12px) rotate(-45deg);
+}
+.navigation_banks_sort_active span:nth-child(2) {
+    display: none;
+}
+.navigation_banks_sort_active span:nth-child(3) {
+    margin-top: 12px;
+    -webkit-transform: translateY(-5px) rotate(45deg);
+    transform: translateY(-5px) rotate(45deg);
+}
+.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 .container_flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.navigation_cost {
+    position: absolute;
+    right: 150px;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_card {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-left: 30px;
+    height: 60px;
+    width: 880px;
+    background-color: #fff;
+    border-radius: 44px;
+}
+.navigation_card_text {
+    color: #2a2a2a;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_card_text span {
+    color: #50d400;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_bank_text {
+    margin: 0 0 6px 0;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    color: #2a2a2a;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_slid {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    height: 14px;
+    width: 80px;
+}
+.navigation_slid_active {
+    width: 14px;
+    margin-right: 6px;
+    border-radius: 50%;
+    background-color: #fff;
+}
+.navigation_slid_disable {
+    width: 14px;
+    margin-right: 6px;
+    border-radius: 50%;
+    background-color: #aeaeae;
+}
+.navigation_bank {
+    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;
+}
+.navigation_icon {
+    height: 45px;
+    width: 45px;
+}
+.navigation_credit {
+    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;
+    width: 380px;
+    height: 25px;
+    padding-right: 30px;
+}
+.navigation_credit_prosent {
+    padding-left: 33px;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+}
+.navigation_choise {
+    position: fixed;
+    background: -webkit-gradient(
+            linear,
+            left bottom,
+            left top,
+            from(#ececec),
+            to(#ececec)
+        ),
+        #e8e8e8;
+    background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    bottom: 50px;
+}
+footer {
+    width: 100%;
+    bottom: 0px;
+    position: fixed;
+    background-color: #fff;
+    height: 50px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+}
+footer span {
+    width: 200px;
+    color: #20d37d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+} /*# sourceMappingURL=style.css.map */