Lab_1

README.md

@@ -1 +1,2 @@
-# Web-programing-labs
+# Repository for labs from web-programming
+## Gada Artem ІР-23

css/footer.css

@@ -0,0 +1,145 @@
+.footer {
+    background-color: #E7ECFF;
+    padding: 20px 0;
+    height: 282px;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    align-items: center;
+    width: 1440px;
+}
+
+.footer__date {
+    position: absolute;
+    top: 37px;
+    left: 165px;
+    width: 83px;
+    height: 24px;
+    color: #939EA4;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.footer__title {
+    position: absolute;
+    top: 42px;
+    right: 165px;
+    font-size: 26px;
+    color: #37447E;
+    font-weight: 900;
+    white-space: nowrap;
+}
+
+.footer__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 80px;
+}
+
+.footer__line {
+    width: 1110px;
+
+    border: 1px solid #CDD1D4;
+    margin-top: 25px;
+}
+
+.footer__button {
+    background-color: #111B47;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 109px;
+    height: 26px;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    border: none;
+    border-radius: 2px;
+    cursor: pointer;
+    margin-top: 15px;
+    text-decoration: none;
+}
+
+.footer__button:hover {
+    background-color: #0056b3;
+}
+
+.footer__text p {
+    margin: 5px 0;
+    font-size: 14px;
+    color: #6c757d;
+}
+
+.footer__links {
+    display: flex;
+    justify-content: center;
+
+}
+
+.footer__links ul {
+    padding: 0;
+    display: flex;
+    gap: 55px;
+    margin: 0 auto;
+}
+
+.footer__links ul li {
+    display: inline-block;
+    margin-top: 22px;
+}
+
+.footer__links ul li a {
+    margin: 0 auto;
+    color: #929ECC;
+    text-decoration: none;
+    font-size: 14px;
+    transition: color 0.2s ease;
+    flex-shrink: 0;
+    margin-bottom: 26px;
+}
+
+.footer__links ul li a:hover {
+    color: darkblue;
+}
+
+.footer__social {
+    margin: 0 auto;
+    gap: 30px
+}
+
+.footer__social a {
+    display: flex;
+    ;
+
+}
+
+.footer__social img {
+    width: 16px;
+    height: 16px;
+}
+
+.footer__links ul li a {
+    color: #929ECC;
+    text-decoration: none;
+    font-size: 14px;
+    transition: color 0.2s ease;
+}
+
+.footer__links ul li a:hover {
+    color: darkblue;
+}
+
+.footer__social {
+    display: flex;
+    align-items : center;
+    justify-content: center; 
+    margin-top: 26px;
+}
+
+.footer__social a img {
+    width: 16px;
+    height: 16px;
+}
+

css/globals.css

@@ -0,0 +1,93 @@
+body{
+
+    font-family: "Roboto", "Arial", sans-serif;
+    color: #37447E;
+}
+
+a{
+    color: #37447E;
+}
+
+li{
+    display: block;
+}
+
+/* Global clasess */
+
+.full-page{
+    margin: auto;
+    max-width: 1440px;
+    height: 2524px;
+    background: #fff;
+
+}
+.container{
+    margin: 0 auto;
+    max-width: 1110px;
+    position: relative; 
+
+}
+
+.container1{
+    margin: 0 auto;
+    max-width: 1105px;
+    height: 702px;
+}
+
+
+.hero__inner {
+    width: 50%; /* Займає 50% контейнера, щоб текст був ліворуч */
+    text-align: left;
+    padding-right: 20px; /* Відступ праворуч для додаткового простору */
+}
+
+.container2{
+    margin: 0 auto;
+    max-width: 1105px;
+    height: 738px;
+}
+
+.container3{
+    margin: 0 auto;
+    max-width: 1105px;
+    height: 770px;
+
+}
+
+.footer_container{
+    width: 1440px;
+}
+
+.default-button{
+    width: 189px;
+    height: 26px;
+    flex-shrink: 0;
+    border-radius: 2px;
+    background: #111B47;
+    color: #fff;
+    color: #FFF;
+
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+}
+
+.title{
+    color: #091133;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 48px; 
+    margin-bottom: 23px;
+}
+
+.paragraph{
+    color: #6F7CB2;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px;
+
+}

css/header.css

@@ -0,0 +1,96 @@
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center; 
+}
+
+.header__title {
+    font-weight: 900;
+    font-size: 26px;
+}
+
+.header__right-side {
+    display: flex;
+    align-items: center; 
+}
+
+.header__nav {
+    margin-right: 30px; 
+}
+
+.header__nav ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.header__nav-item {
+    margin-right: 30px; 
+}
+
+.header__nav-item a {
+    color: #505F98;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 400;
+    padding: 10px;
+    text-decoration: none; 
+    cursor: pointer;
+}
+
+.header__nav-item a:hover {
+    color: darkblue; 
+}
+
+.header__buttons {
+    display: flex;
+    align-items: center;
+    gap: 26px; 
+    /* Прибираємо padding: auto */
+}
+
+.header__buy-now {
+    display: flex; /* Замість display: center */
+    justify-content: center; /* Центрування тексту по горизонталі */
+    align-items: center; /* Центрування тексту по вертикалі */
+    background-color: #FFD166; 
+    color: #111B47; 
+    width: 104px;
+    height: 26px; /* Можливо збільшення висоти для кращого вирівнювання */
+    border-radius: 2px; 
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer; 
+    transition: background-color 0.2s ease; 
+    border: none;
+    text-decoration: none; /* Прибираємо підкреслення */
+}
+
+.header__buy-now:hover {
+    background-color: #FFBF00; 
+}
+
+.header__learn-more {
+    display: flex; /* Додаємо для центрування */
+    justify-content: center;
+    align-items: center;
+    background-color: #111B47; 
+    color: white; 
+    width: 104px;
+    height: 26px; /* Висота для кращого центрування */
+    border-radius: 2px; 
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer; 
+    transition: background-color 0.2s ease; 
+    border: none;
+    text-decoration: none; /* Прибираємо підкреслення */
+}
+
+.header__learn-more:hover {
+    background-color: #0056b3;
+}
+
+
+