commit

src/components/header/header.css

@@ -1,55 +1,213 @@
+.header {
+  
+}
+
 .header-container {
-    display: flex;
-    padding: 35px 40px;
-    box-sizing: border-box;
-    color: #FFFFFF;
-    justify-content: space-between;
-    align-items: center;
+  
+  display: flex;
+  padding: 30px 40px;
+  color: #ffffff;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.burger__button {
+  display: none;
 }
 
 .header-logo {
-    width: 31px;
-    height: 50px;
+  width: 31px;
+  height: 50px;
 }
 
 .header-buttons {
-    display: flex;
-    gap: 40px;
+  display: flex;
+  gap: 40px;
 }
 
 .header-button {
-    background-color: transparent;
-    border: none;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 125%;
-    color: #FFFFFF;  
-    cursor: pointer;  
+  font-family: "GilroyWebRegular";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 125%;
+  background-color: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
 }
 
+.header-lang-button-text:hover {
+  background: rgba(235, 235, 235, 0.2);
+
+}
+
+.wrapper__button {
+  margin: 0;
+}
+
+
+
 .header-lang-button {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    justify-content: space-between;
-    box-sizing: border-box;
-    font-weight: 400;
-    font-size: 11px;
-    line-height: 13px;
-    color: #EBEBEB;
-    background-color: transparent;
-    border-radius: 50px;
-    border: 2px solid #EBEBEB;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+  width: 55px;
+  padding: 6px 8px 5px 12px;
+  box-sizing: border-box;
+  height: 29px;
+  justify-content: space-between;
+  box-sizing: border-box;
+  line-height: 13px;
+  background-color: transparent;
+  border: 2px solid #ebebeb;
+  border-radius: 12px;
+  transition: height ease-in 0.5s;
+
+
+}
+
+.header-lang-button_disabled {
+  height: 29px;
+}
+
+.header-lang-button_active {
+  height: 100%;
+}
+
+.header-lang-button_active {
+  border-radius: 12px;
 }
 
 .header-lang-button-text {
-    display: flex;
-    align-self: center;
+
+  width: 100%;
+  appearance: none;
+  background-color: transparent;
+  color: #ebebeb;
+  padding: 0;
+  text-align: left;
+  margin: 0;
+  border: none;
+  height: 13px;
+  -webkit-appearance: none;
+
+  cursor: pointer;
 }
 
-.header-lang-button-icon {
-    width: 16px;
-    height: 16px;
-    background: url('chevronIcon.svg') 50% 50% no-repeat;
-    background-size: 100% 100%;
+.header-lang-button-picked {
+  cursor: pointer;
+}
+
+.header-select__icon {
+  top: 6px;
+  height: 13px;
+  right: 5px;
+  position: absolute;
+
+
+}
+
+.select {
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  gap: 11px;
+  position: relative;
+  border: none;
+  outline-color: transparent;
+  outline-style: none;
+  color: #ebebeb;
+  outline: none;
+}
+
+.option {
+  /* or 16px */
+
+
+  /* Landing/White */
+
+  color: #EBEBEB;
+}
+
+.burger__button {
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  box-sizing: border-box;
+
+}
+
+.line__burger {
+  background-color: #FFFFFF;
+  width: 14px;
+  height: 1px;
+}
+
+@media screen and (min-width: 1600px) {
+  .header-container {
+    padding: 35px 48px;
+  }
+
+  .header-logo {
+    width: 46px;
+    height: 74px;
+  }
+
+  .header-button {
+    font-size: 20px;
+
+  }
+
+  .header-lang-button_active {
+    height: auto;
+
+  }
+  
+  .header-buttons {
+    gap: 48px;
+  }
+
+  .header-lang-button {
+    width: 70px;
+    padding: 7px 15px;
+
+
+    }
+
+}
+
+
+@media screen and (max-width: 1279px) {
+  .header-container {
+    padding: 30px 12px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .header-container {
+    padding: 15px 12px;
+  }
+}
+
+
+@media screen and (max-width: 639px) {
+  .header-container {
+    padding: 8px 10px;
+  }
+
+  .header-buttons {
+    display: none;
+  }
+
+  .burger__button {
+    display: flex;
+  }
+
 }