0.0.108 add dropdown_menu

static/css/styles.css

@@ -180,10 +180,11 @@ header {
     margin-top: 40px;
     margin-bottom: 60px;
     padding: 0px 40px;
-    display: flex;
-    justify-content: space-between;
+
 }
 
+
+
 footer {
     height: 318px;
     background:  #272424;
@@ -299,7 +300,6 @@ footer>div {
     height: 60px;
     max-width: unset;
     background: #F8F8F8;
-    margin-top: -15px;
 }
 
 .sf_first-column{
@@ -412,12 +412,69 @@ footer>div {
     margin-left: -30px;
 }
 
-header>div:first-child {
-    display: flex;
+header .header-first {
+    float: left;
     align-items: center;
-    justify-content: space-between;
-    width: clamp(400px, 50%, 500px);
+
 }
+.header-first>div{
+    float: left;
+    margin-right: 40px;
+}
+
+/*.header_menu{*/
+/*    display: none;*/
+/*    max-height: 200px;*/
+/*    width: 100%;*/
+/*    position: absolute;*/
+/*    background-color: #F8F8F8;*/
+/*    overflow: scroll;*/
+/*    overflow-x:hidden;*/
+
+/*}*/
+
+
+.dropbtn {
+
+    color: white;
+
+    font-size: 16px;
+    border: none;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: white;
+    border-radius: 10px;
+    width: 250px;
+    height: 382px;
+   box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
+    z-index: 1;
+}
+.dropdown-content.show{
+   display:block;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #ddd;}
+
+/*.dropdown:hover .dropdown-content {display: block;}*/
+
+/*.dropdown:hover .dropbtn {background-color: #3e8e41;}*/
+
+
 
 header>div>a {
     color: #F8F8F8;
@@ -427,16 +484,13 @@ header>div>a {
     font-style: normal;
     font-weight: 500;
     line-height: 22px;
-    display: flex;
     width: 152px;
-    height: 44px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
     border-radius: 10px;
     background: #FF613A;
-    text-decoration: none;
+    float: left;
+    text-align: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
 }
 
 header>div>div>a {
@@ -449,17 +503,26 @@ header>div>div>a {
     line-height: 22px;
 }
 
-header>div:last-child {
-    display: flex;
+header .header-second {
+    float: right;
     align-items: center;
     justify-content: space-between;
-    width: clamp(400px, 50%, 600px);
+
+}
+.header-second>div {
+    float: left;
+    align-items: center;
+    margin-right: 40px;
+
+}
+.header-second>div>img{
+    margin-right: 10px;
+}
+.header-second-item>a{
+    color: #00a420;
 }
 
-header>div:last-child>div:nth-child(2) {
-    display: flex;
-    align-items: center;
-}
+
 
 header>div:last-child>div:nth-child(2)>.svg {
     margin-right: 5px;
@@ -1295,6 +1358,9 @@ div.departure_arrival>div>input{
    display:inline-block;
 
 }
+
+
+
 .input_list .hide{
     display: none;
 }