22 - python & all web labs

labWeb/lab7/public/assets/Vector.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="2" viewBox="0 0 40 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1H40" stroke="white" stroke-width="2"/>
+</svg>

labWeb/lab7/public/assets/buttons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4766 14.9999H7.52362M7.52362 14.9999L13.754 8.76953M7.52362 14.9999L13.754 21.2303" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

labWeb/lab7/public/assets/buttons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.52344 14.9999H22.4764M22.4764 14.9999L16.246 8.76953M22.4764 14.9999L16.246 21.2303" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

labWeb/lab7/public/assets/form__items/mail.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.45">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.125 8.75C27.125 7.58975 26.6639 6.47675 25.844 5.656C25.0232 4.83613 23.9102 4.375 22.75 4.375C18.0933 4.375 9.90675 4.375 5.25 4.375C4.08975 4.375 2.97675 4.83613 2.156 5.656C1.33613 6.47675 0.875 7.58975 0.875 8.75C0.875 11.8003 0.875 16.1997 0.875 19.25C0.875 20.4102 1.33613 21.5232 2.156 22.344C2.97675 23.1639 4.08975 23.625 5.25 23.625C9.90675 23.625 18.0933 23.625 22.75 23.625C23.9102 23.625 25.0232 23.1639 25.844 22.344C26.6639 21.5232 27.125 20.4102 27.125 19.25C27.125 16.1997 27.125 11.8003 27.125 8.75ZM3.8885 8.55663C3.8885 8.55663 8.39038 12.264 11.214 14.5889C12.8319 15.9215 15.1681 15.9189 16.7834 14.5828C19.6157 12.2404 24.1448 8.49362 24.1448 8.49362C24.5166 8.18562 24.5691 7.6335 24.2611 7.26162C23.954 6.88975 23.4019 6.83725 23.0291 7.14525C23.0291 7.14525 18.5001 10.8911 15.6686 13.2344C14.6991 14.0359 13.2974 14.0376 12.3261 13.2379L5.00063 7.20562C4.62788 6.8985 4.07663 6.95188 3.7695 7.32463C3.46238 7.69738 3.51575 8.2495 3.8885 8.55663Z" fill="white"/>
+</g>
+</svg>

labWeb/lab7/public/assets/form__items/map.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.4921 0C8.2417 0.000513285 7.0037 0.247974 5.84918 0.728177C4.69465 1.20838 3.64634 1.91187 2.7644 2.79827C1.88246 3.68467 1.18427 4.73652 0.709894 5.89345C0.235521 7.05038 -0.00569195 8.28961 0.000101951 9.54C0.000101951 16.132 6.8001 22.176 8.8921 23.776C9.06772 23.921 9.28835 24.0003 9.5161 24.0003C9.74385 24.0003 9.96449 23.921 10.1401 23.776C12.2361 22.128 18.9801 16.132 18.9801 9.54C18.9859 8.28994 18.7448 7.05104 18.2707 5.89437C17.7966 4.7377 17.0987 3.68603 16.2172 2.79969C15.3357 1.91334 14.2879 1.20977 13.1338 0.729327C11.9797 0.248888 10.7422 0.00103971 9.4921 0ZM9.4921 13.484C8.70098 13.484 7.92762 13.2494 7.26982 12.8099C6.61202 12.3704 6.09933 11.7456 5.79658 11.0147C5.49383 10.2838 5.41462 9.47956 5.56896 8.70364C5.7233 7.92772 6.10426 7.21498 6.66367 6.65557C7.22308 6.09616 7.93582 5.7152 8.71174 5.56086C9.48766 5.40652 10.2919 5.48573 11.0228 5.78848C11.7537 6.09123 12.3785 6.60392 12.818 7.26172C13.2575 7.91952 13.4921 8.69287 13.4921 9.484C13.4921 10.5449 13.0707 11.5623 12.3205 12.3124C11.5704 13.0626 10.553 13.484 9.4921 13.484Z" fill="white" fill-opacity="0.45"/>
+</svg>

labWeb/lab7/public/assets/form__items/phone.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.45" fill-rule="evenodd" clip-rule="evenodd" d="M2.82812 0.76529C3.09057 0.503212 3.40572 0.299907 3.75268 0.168848C4.09965 0.0377897 4.4705 -0.0180293 4.84066 0.00509005C5.21083 0.0282094 5.57185 0.129739 5.89982 0.302951C6.22778 0.476164 6.51519 0.717103 6.743 1.0098L9.43541 4.46896C9.9289 5.10349 10.1029 5.93003 9.9079 6.71006L9.08742 9.99521C9.045 10.1654 9.04729 10.3436 9.09407 10.5126C9.14086 10.6816 9.23054 10.8356 9.35441 10.9598L13.0398 14.6454C13.164 14.7696 13.3183 14.8594 13.4876 14.9062C13.6569 14.953 13.8354 14.9551 14.0058 14.9124L17.2892 14.0919C17.6741 13.9957 18.0758 13.9882 18.464 14.07C18.8523 14.1519 19.2168 14.321 19.5301 14.5644L22.989 17.2555C24.2324 18.2231 24.3464 20.0607 23.2335 21.1722L21.6825 22.7233C20.5726 23.8333 18.9136 24.3209 17.3672 23.7763C13.4091 22.3836 9.81531 20.1174 6.85249 17.146C3.88152 14.1834 1.61557 10.5899 0.222699 6.63206C-0.320284 5.08699 0.167201 3.42641 1.27717 2.31636L2.82812 0.76529Z" fill="white"/>
+</svg>

labWeb/lab7/public/assets/instagram.svg

@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="22" fill="#000694"/>
+<path d="M28 12H16C13.8 12 12 13.8 12 16V28C12 30.2 13.8 32 16 32H28C30.2 32 32 30.2 32 28V16C32 13.8 30.2 12 28 12ZM22 27C19.25 27 17 24.75 17 22C17 19.25 19.25 17 22 17C24.75 17 27 19.25 27 22C27 24.75 24.75 27 22 27ZM27.5 17.5C26.95 17.5 26.5 17.05 26.5 16.5C26.5 15.95 26.95 15.5 27.5 15.5C28.05 15.5 28.5 15.95 28.5 16.5C28.5 17.05 28.05 17.5 27.5 17.5Z" fill="white"/>
+</svg>

labWeb/lab7/public/assets/tiktok.svg

@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="22" fill="#000694"/>
+<path d="M23.451 11.7076C24.5764 11.6904 25.6936 11.6994 26.8101 11.6904C26.8472 13.0867 27.4137 14.3435 28.315 15.2744L28.3137 15.273C29.2837 16.1468 30.546 16.7133 31.9375 16.8096L31.9567 16.8109V20.2732C30.6422 20.2402 29.4061 19.937 28.2917 19.4159L28.348 19.4392C27.809 19.1801 27.3532 18.914 26.9201 18.617L26.9558 18.6404C26.9476 21.1491 26.9641 23.6577 26.9387 26.1575C26.8678 27.4314 26.4443 28.5933 25.7651 29.5634L25.7788 29.5421C24.6431 31.1687 22.8033 32.2364 20.7113 32.2996H20.7017C20.6171 32.3037 20.5174 32.3058 20.417 32.3058C19.2277 32.3058 18.116 31.9744 17.1686 31.399L17.1961 31.4148C15.4718 30.3774 14.2825 28.6022 14.0625 26.5377L14.0597 26.5095C14.0425 26.0798 14.0343 25.6501 14.0515 25.2294C14.3883 21.9438 17.1411 19.4021 20.4872 19.4021C20.8632 19.4021 21.2317 19.4344 21.5899 19.4956L21.5514 19.4901C21.5686 20.7613 21.517 22.0332 21.517 23.3044C21.2262 23.1992 20.8907 23.138 20.5408 23.138C19.2565 23.138 18.1641 23.9589 17.7598 25.1049L17.7537 25.1256C17.6622 25.4191 17.6093 25.7567 17.6093 26.1059C17.6093 26.2476 17.6182 26.3878 17.6347 26.5253L17.6333 26.5088C17.8616 27.9154 19.0675 28.9769 20.5215 28.9769C20.5635 28.9769 20.6047 28.9762 20.646 28.9742H20.6398C21.6456 28.9439 22.5187 28.4029 23.0123 27.6033L23.0192 27.5909C23.2028 27.3352 23.3286 27.0258 23.3705 26.6896L23.3712 26.68C23.4572 25.1421 23.4228 23.6131 23.431 22.0751C23.4393 18.6129 23.4228 15.1589 23.4482 11.7056L23.451 11.7076Z" fill="white"/>
+</svg>

labWeb/lab7/public/css/head_and_footer.css

@@ -0,0 +1,506 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;500&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  background-color: rgb(25, 27, 31);
+}
+
+::-webkit-scrollbar {
+  width: 13px;
+}
+
+::-webkit-scrollbar-button {
+  background-color: rgba(240, 248, 255, 0);
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgb(22, 23, 28);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(25, 27, 31);
+  border-radius: 10px;
+}
+
+.head {
+  z-index: 2;
+  width: 93%;
+  max-width: 1712px;
+  margin: 15px auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  position: relative;
+}
+.head__information {
+  width: 82%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.head__logo {
+  cursor: pointer;
+}
+.head__navbar {
+  min-width: 398px;
+  width: 28%;
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  position: relative;
+  z-index: 2;
+}
+.head__navbar__links__text {
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.head__navbar__links__text:hover {
+  opacity: 0.6;
+}
+.head__login {
+  z-index: 2;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  width: 174px;
+  height: 47px;
+  text-align: center;
+  background-color: rgb(0, 6, 148);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.head__login:hover {
+  width: 174px;
+  height: 47px;
+  text-align: center;
+  background-color: rgb(0, 8, 188);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.head__burgermenu {
+  position: relative;
+  z-index: 1;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  display: none;
+}
+.head__line {
+  position: relative;
+  margin: 0;
+  opacity: 0.45;
+  z-index: 3;
+}
+
+.footer {
+  width: 93%;
+  max-width: 1712px;
+  margin: 0 auto;
+  margin-top: 90px;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 5% 3fr;
+  grid-template-columns: 1fr 3fr;
+  grid-auto-rows: minmax(100px, auto);
+  grid-column-gap: 5%;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  justify-items: start;
+}
+.footer__navbar {
+  list-style: none;
+}
+.footer__navbar__links {
+  margin-top: 10px;
+}
+.footer__navbar__links:first-child {
+  margin-top: 0;
+}
+.footer__navbar__links__text {
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.footer__navbar__links__text:hover {
+  opacity: 0.6;
+}
+.footer__navbar__links__small-text {
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  font-weight: 300;
+}
+.footer__navbar__links__small-text:hover {
+  opacity: 0.6;
+}
+.footer__information {
+  width: 100%;
+  -ms-grid-column: 2;
+  -ms-grid-column-span: 1;
+  grid-column: 2/3;
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 2;
+  grid-row: 1/3;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  z-index: 3;
+}
+.footer__information__social__img {
+  cursor: pointer;
+}
+
+.head-banner {
+  width: 93%;
+  max-width: 1712px;
+  margin: 280px auto;
+  min-height: 200px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+  z-index: 1;
+}
+.head-banner__items__text {
+  position: relative;
+  z-index: 1;
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 200px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.head-banner__items__small-text {
+  position: relative;
+  z-index: 1;
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.head-banner__items__buttons {
+  position: relative;
+  z-index: 1;
+  margin-top: 40px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  width: 286px;
+  height: 73px;
+  text-align: center;
+  background-color: rgb(0, 6, 148);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.head-banner__items__buttons:hover {
+  width: 286px;
+  height: 73px;
+  text-align: center;
+  background-color: rgb(0, 8, 188);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.img-container {
+  overflow: hidden;
+  width: 100%;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  pointer-events: none;
+}
+.img-container__img {
+  width: 140vw;
+  max-width: 1500px;
+  position: relative;
+  pointer-events: none;
+  -webkit-transform: translate(30%, -30%);
+          transform: translate(30%, -30%);
+}
+
+@media (max-width: 800px) {
+  .head__information {
+    -webkit-box-pack: end;
+        -ms-flex-pack: end;
+            justify-content: end;
+  }
+  .head__navbar {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 132px;
+    padding: 20px 37px 45px 20px;
+    border-radius: 12px;
+    background-color: rgb(22, 23, 28);
+    -webkit-transition: all 0.5s ease 0s;
+    transition: all 0.5s ease 0s;
+    opacity: 0;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    top: 45px;
+    -webkit-transform: translate(0, 30px);
+            transform: translate(0, 30px);
+    right: 16px;
+    position: absolute;
+  }
+  .head__navbar__links {
+    margin-top: 15px;
+  }
+  .head__navbar__links:first-child {
+    margin: 0;
+  }
+  .head__burgermenu {
+    width: 50px;
+    height: 20px;
+    margin-left: 20px;
+    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: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    z-index: 3;
+  }
+  .head__burgermenu__line {
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+  }
+  .footer {
+    -ms-grid-columns: 100%;
+    grid-template-columns: 100%;
+    grid-row-gap: 35px;
+    position: relative;
+    z-index: 0;
+  }
+  .footer__navbar__links__text:hover {
+    opacity: 0.6;
+  }
+  .footer__navbar__links__small-text:hover {
+    opacity: 0.6;
+  }
+  .footer__information {
+    width: 100%;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 1;
+    grid-column: 1/2;
+    -ms-grid-row: 2;
+    -ms-grid-row-span: 1;
+    grid-row: 2/3;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: start;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .footer__information__social__img {
+    cursor: pointer;
+  }
+  .head-banner {
+    min-height: 274px;
+    margin: 7vw auto;
+    padding-bottom: 7vw;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .head-banner__items__text {
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 90px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .head-banner__items__small-text {
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .head-banner__items__buttons {
+    margin-top: 40px;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    width: 130px;
+    height: 40px;
+    text-align: center;
+    background-color: rgb(0, 6, 148);
+    display: inline-block;
+    border: none;
+    border-radius: 12px;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .head-banner__items__buttons:hover {
+    width: 130px;
+    height: 40px;
+    text-align: center;
+    background-color: rgb(0, 8, 188);
+    display: inline-block;
+    border: none;
+    border-radius: 12px;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .img-container__img {
+    width: 170vw;
+    max-width: 1000px;
+    position: relative;
+    -webkit-transform: translate(20%, -40%);
+            transform: translate(20%, -40%);
+  }
+}
+.rotate45 {
+  -webkit-transform-origin: left top;
+          transform-origin: left top;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.rotate-45 {
+  -webkit-transform-origin: left top;
+          transform-origin: left top;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+
+.dnone {
+  display: none;
+}
+
+.transform_navbar {
+  -webkit-transform: translate(0, 40px);
+          transform: translate(0, 40px);
+  opacity: 1;
+}
+
+.posion1 {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 0;
+}

labWeb/lab7/public/css/main.css

@@ -0,0 +1,768 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;500&display=swap");
+.container_center {
+  width: 93%;
+  max-width: 1712px;
+  margin: 50px auto;
+}
+
+.container__100 {
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  background-color: rgb(22, 23, 28);
+  padding: 60px 0;
+  margin: 150px 0;
+}
+
+.company__text {
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin: 35px 0;
+}
+.company__logo {
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.company__logo__item {
+  margin-right: 1vw;
+}
+.company__logo__item > img {
+  max-width: 300px;
+  max-height: 100px;
+}
+
+.courses {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.courses__head {
+  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;
+  margin-bottom: 60px;
+}
+.courses__head__text {
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.courses__head__buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 140px;
+}
+.courses__head__buttons__item {
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  background-color: rgb(0, 6, 148);
+  border-radius: 100%;
+  border: none;
+  width: 60px;
+  height: 60px;
+  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;
+}
+.courses__head__buttons__item:hover {
+  background-color: rgb(0, 8, 188);
+}
+.courses__container {
+  overflow: hidden;
+}
+.courses__container__tape {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+.tape__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 40px;
+  background-color: rgb(22, 23, 28);
+  pointer-events: none;
+  width: 600px;
+  padding: 50px;
+}
+.tape__item__chart {
+  width: 40%;
+}
+.tape__item__info {
+  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;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 40%;
+}
+.tape__item__info__text_1 {
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 40px;
+}
+.tape__item__info__text_2 {
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 60px;
+}
+.tape__item__info__buttons {
+  width: 87%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.tape__item__info__button_item__1 {
+  margin-right: 10px;
+  width: 286px;
+  height: 73px;
+  text-align: center;
+  background-color: rgb(0, 6, 148);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.tape__item__info__button_item__1:hover {
+  width: 286px;
+  height: 73px;
+  text-align: center;
+  background-color: rgb(0, 8, 188);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.tape__item__info__button_item__2 {
+  width: 286px;
+  height: 73px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0);
+  display: inline-block;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 12px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.tape__item__info__button_item__2:hover {
+  width: 286px;
+  height: 73px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0);
+  display: inline-block;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 12px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  opacity: 0.7;
+}
+
+.form {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 60% 40%;
+  grid-template-columns: 60% 40%;
+  grid-auto-rows: minmax(150px, auto);
+  position: relative;
+  overflow: hidden;
+  margin-top: 200px;
+  border-radius: 40px;
+  background-color: rgb(22, 23, 28);
+  justify-items: center;
+  padding: 100px 0;
+}
+.form__container {
+  -ms-grid-column: 2;
+  -ms-grid-column-span: 1;
+  grid-column: 2/3;
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 2;
+  grid-row: 1/3;
+  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-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  height: 600px;
+  width: 80%;
+}
+.form__container__input {
+  width: 100%;
+  position: relative;
+  padding: 32px 0;
+  border: 0.5px solid rgb(255, 255, 255);
+  border-radius: 14px;
+  opacity: 0.45;
+  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;
+}
+.form__container__input > input {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  outline: none;
+  caret-color: rgb(255, 255, 255);
+  width: 90%;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0);
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 2px;
+}
+.form__container__input > input:focus {
+  border-bottom: 0.5px solid rgb(255, 255, 255);
+}
+.form__container__input > label {
+  width: 90%;
+  pointer-events: none;
+  position: absolute;
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+.form__container__button {
+  width: 100%;
+  height: 88px;
+  text-align: center;
+  background-color: rgb(0, 6, 148);
+  display: inline-block;
+  border: none;
+  border-radius: 12px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  color: rgb(255, 255, 255);
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.form__container__checkbox {
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  opacity: 0.45;
+}
+.form__container__checkbox > input {
+  display: none;
+}
+.form__container__checkbox__fake {
+  width: 10px;
+  height: 10px;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 100%;
+  margin-right: 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;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.form__container__checkbox__fake::after {
+  width: 8px;
+  height: 8px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 100%;
+  content: "";
+  -webkit-transition: 0.3;
+  transition: 0.3;
+  opacity: 0;
+}
+.form__container__checkbox > input:checked + .form__container__checkbox__fake::after {
+  opacity: 1;
+}
+.form__img {
+  position: absolute;
+  -webkit-transform: translate(-37%, 28%);
+          transform: translate(-37%, 28%);
+}
+.form__info {
+  min-width: 80%;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 1;
+  grid-column: 1/2;
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 1;
+  grid-row: 1/2;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.form__info__item {
+  min-width: 15%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin-left: 10px;
+}
+.form__info__item:first-child {
+  margin: 0;
+}
+.form__info__item__text {
+  margin-left: 12px;
+  opacity: 0.45;
+  color: rgb(255, 255, 255);
+  font-family: inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.input__Animation:focus + .label__Animation {
+  opacity: 0;
+}
+
+@media (max-width: 800px) {
+  .container__100 {
+    width: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    background-color: rgb(22, 23, 28);
+    padding: 20px 0;
+    margin: 50px 0;
+  }
+  .company__text {
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin: 35px 0;
+  }
+  .company__logo__item {
+    margin-right: 1vw;
+    width: 100px;
+    max-height: 50px;
+  }
+  .company__logo__item > img {
+    max-width: 100px;
+    max-height: 50px;
+  }
+  .tape__item {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    border-radius: 40px;
+    background-color: rgb(22, 23, 28);
+    pointer-events: none;
+    width: 600px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: 40px 0;
+  }
+  .tape__item__chart {
+    width: 70%;
+  }
+  .tape__item__info {
+    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;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    width: 70%;
+  }
+  .tape__item__info__text_1 {
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+  .tape__item__info__text_2 {
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-bottom: 60px;
+  }
+  .tape__item__info__buttons {
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .tape__item__info__button_item__1 {
+    margin-right: 10px;
+    width: 280px;
+    height: 60px;
+    text-align: center;
+    background-color: rgb(0, 6, 148);
+    display: inline-block;
+    border: none;
+    border-radius: 12px;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .tape__item__info__button_item__1:hover {
+    width: 280px;
+    height: 60px;
+    text-align: center;
+    background-color: rgb(0, 8, 188);
+    display: inline-block;
+    border: none;
+    border-radius: 12px;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .tape__item__info__button_item__2 {
+    width: 280px;
+    height: 60px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0);
+    display: inline-block;
+    border: 1px solid rgb(255, 255, 255);
+    border-radius: 12px;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .tape__item__info__button_item__2:hover {
+    width: 280px;
+    height: 60px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0);
+    display: inline-block;
+    border: 1px solid rgb(255, 255, 255);
+    border-radius: 12px;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    opacity: 0.7;
+  }
+  .form {
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 100%;
+    grid-template-columns: 100%;
+    grid-auto-rows: minmax(20px, auto);
+    position: relative;
+    overflow: hidden;
+    margin-top: 200px;
+    border-radius: 40px;
+    background-color: rgb(22, 23, 28);
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding: 50px 0;
+  }
+  .form__container {
+    -ms-grid-column: 1;
+    grid-column: 1/1;
+    -ms-grid-row: 1;
+    -ms-grid-row-span: 1;
+    grid-row: 1/2;
+    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-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    height: 300px;
+    width: 80%;
+  }
+  .form__container__input {
+    position: relative;
+    padding: 15px 0;
+    border: 0.5px solid rgb(255, 255, 255);
+    border-radius: 6.6px;
+    width: 100%;
+  }
+  .form__container__input > input {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    outline: none;
+    caret-color: rgb(255, 255, 255);
+    width: 90%;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0);
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 2px;
+  }
+  .form__container__input > input:focus {
+    border-bottom: 0.5px solid rgb(255, 255, 255);
+  }
+  .form__container__input > label {
+    width: 90%;
+    pointer-events: none;
+    position: absolute;
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+  }
+  .form__container__button {
+    width: 100%;
+    height: 41px;
+    text-align: center;
+    background-color: rgb(0, 6, 148);
+    display: inline-block;
+    border: none;
+    border-radius: 12px;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    color: rgb(255, 255, 255);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .form__img {
+    -ms-grid-row: 2;
+    -ms-grid-row-span: 1;
+    grid-row: 2/3;
+    position: relative;
+    width: 100%;
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+    margin: 30px 0;
+  }
+  .form__info {
+    min-width: 80%;
+    -ms-grid-column: 1;
+    grid-column: 1/1;
+    -ms-grid-row: 3;
+    -ms-grid-row-span: 1;
+    grid-row: 3/4;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+  }
+  .form__info__item {
+    min-width: 15%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+  }
+  .form__info__item__img {
+    max-width: 15px;
+  }
+  .form__info__item__text {
+    margin-left: 12px;
+    opacity: 0.45;
+    color: rgb(255, 255, 255);
+    font-family: inter;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+}

labWeb/lab7/public/js/burger_menu.js

@@ -0,0 +1,12 @@
+const burgerButtonNode = document.querySelector(".head__burgermenu");
+const lineOneNode = document.querySelector(".line-1");
+const lineTwoNode = document.querySelector(".line-2");
+const lineThreNode = document.querySelector(".line-3");
+const navbarNode = document.querySelector(".head__navbar");
+
+burgerButtonNode.addEventListener("click", function () {
+  navbarNode.classList.toggle("transform_navbar");
+  lineOneNode.classList.toggle("rotate45");
+  lineThreNode.classList.toggle("rotate-45");
+  lineTwoNode.classList.toggle("dnone");
+});

labWeb/lab7/public/js/courses.js

@@ -0,0 +1,62 @@
+
+const coursesNode = document.querySelector(".courses__container");
+
+
+const itemArrayNode = document.querySelectorAll(".tape__item");
+
+
+const tapeNode = document.querySelector(".courses__container__tape");
+
+
+const resize = () => {
+  
+  
+  var coursesWidth = coursesNode.clientWidth;
+
+  
+  
+  var tapelength = coursesWidth * itemArrayNode.length;
+
+  
+  
+  tapeNode.style.width = tapelength + "px";
+
+  for (let i = 0; i < itemArrayNode.length; i++) {
+    
+    itemArrayNode[i].style.width = coursesWidth + "px";
+  }
+};
+
+resize();
+
+window.addEventListener("resize", function () {
+  resize();
+  tapeNode.style.transform =
+  "translate(-" + coursesNode.clientWidth * position + "px)";
+});
+
+
+const buttonLeftNode = document.querySelector(".button__left");
+const buttonRightNode = document.querySelector(".button__right");
+
+
+let position = 0;
+
+buttonRightNode.addEventListener("click", () => {
+  position++;
+  if (position >= itemArrayNode.length) {
+    position = 0;
+  }
+  tapeNode.style.transform =
+    "translate(-" + coursesNode.clientWidth * position + "px)";
+});
+
+buttonLeftNode.addEventListener("click", () => {
+  position--;
+  if (position < 0) {
+    position = itemArrayNode.length;
+    position--;
+  }
+  tapeNode.style.transform =
+    "translate(-" + coursesNode.clientWidth * position + "px)";
+});