first

src/components/Header/header.css

@@ -0,0 +1,239 @@
+.header-container {
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 135%;
+  display: flex;
+  padding: 30px 40px;
+  color: #ffffff;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.header__buttons_wrapper {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+
+.burger__button {
+  display: none;
+}
+
+.header-logo {
+  width: 31px;
+  height: 50px;
+
+}
+
+.header-buttons {
+  margin-right: 96px;
+}
+
+.header-button {
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 125%;
+  background-color: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 0px;
+  appearance: none;
+  text-decoration: none;
+}
+
+.header-lang-button-text:hover {
+  background: rgba(235, 235, 235, 0.2);
+
+}
+
+.wrapper__button {
+  margin-right: 10px;
+
+}
+
+
+
+.header-lang-button {
+  position: absolute;
+  right: 40px;
+  top: 40px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  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: 51px;
+}
+
+.header-lang-button_active {
+  border-radius: 12px;
+}
+
+.header-lang-button-text {
+
+  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-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;
+    top: 57px;
+  }
+
+}
+
+
+@media screen and (max-width: 1279px) {
+  .header-container {
+    padding: 30px 12px;
+  }
+
+  .header-lang-button {
+    top: 40px;
+    right: 12px;
+
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .header-container {
+    padding: 15px 12px;
+  }
+
+  .header-lang-button {
+    right: 12px;
+    top: 25%;
+  }
+}
+
+
+@media screen and (max-width: 639px) {
+  .header {
+    background: #262626;
+
+  }
+
+  .header-container {
+    padding: 8px 10px;
+  }
+
+
+
+  .burger__button {
+    display: flex;
+  }
+
+}