diff --git a/README.md b/README.md index a307de6..f6b8538 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# Web-programing-labs \ No newline at end of file +# Repository for labs from web-programming +## Gada Artem ІР-23 diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..6308f71 --- /dev/null +++ b/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; +} + diff --git a/css/globals.css b/css/globals.css new file mode 100644 index 0000000..c559d43 --- /dev/null +++ b/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; + +} \ No newline at end of file diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..10f9402 --- /dev/null +++ b/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; +} + + + diff --git a/css/hero-and-main.css b/css/hero-and-main.css new file mode 100644 index 0000000..e7eaaf3 --- /dev/null +++ b/css/hero-and-main.css @@ -0,0 +1,78 @@ +.hero__inner{ + position: relative; + width: 540px; + padding-top: 120px; + z-index: 1; +} + +.main__inner{ + position: relative; + width: 540px; + padding-top: 160px; +} + + +.icon-container1 { + display: flex; + justify-content: flex-start; + gap: 30px; + margin-bottom: 259px; + margin-top: 45px; +} + + +.icon-container2 { + display: flex; + justify-content: flex-start; + gap: 30px; + margin-bottom: 259px; + margin-top: 80px; +} + +.icon-item { + text-align: left; + width: 255px; +} + +.icon-item img { + width: 36px; + height: auto; +} + +.icon-title { + color: #091133; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 26px; + margin: 14px 0 6px 0; + +} + +.icon-text { + color: #5D6970; + font-size: 12px; + font-weight: 400; + line-height: 18px; + +} + +.tablet-image-container1 { + position: absolute; + top: 29%; + left: 56%; + width: 645px; + height: 562px; + overflow: hidden; + z-index: 0; +} + +.tablet-image-container2{ + position: absolute; + top: 165px; + left: 560px; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 0 +} \ No newline at end of file diff --git a/css/normalise.min.css b/css/normalise.min.css new file mode 100644 index 0000000..1854c29 --- /dev/null +++ b/css/normalise.min.css @@ -0,0 +1 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} \ No newline at end of file diff --git a/css/prefooter.css b/css/prefooter.css new file mode 100644 index 0000000..81ed109 --- /dev/null +++ b/css/prefooter.css @@ -0,0 +1,65 @@ +.prefooter { + padding-top: 59px; + margin: 0 auto; +} + +.prefooter__paragraph { + width: 730px; + color: #6F7CB2; + font-size: 16px; + font-weight: 400; + line-height: 26px; + margin-bottom: 88px; +} + +.info { + display: flex; + gap: 30px; +} + +.price__title { + display: flex; + color: #37447E; + font-size: 36px; + font-weight: 500; + line-height: 48px; + width: 350px; + margin: 0 auto; +} + +.info__title { + color: #091133; + font-size: 22px; + font-weight: 500; + line-height: 32px; + margin-top: 16px; +} + +.info__text{ + color: #5D6970; + font-size: 14px; + font-weight: 400; + line-height: 24px; +} + + +.info__button { + display: flex; /* Додаємо для центрування */ + justify-content: center; + align-items: center; + background-color: #111B47; + color: white; + width: 189px; + height: 26px; /* Висота для кращого центрування */ + border-radius: 2px; + font-size: 12px; + font-weight: 500; + cursor: pointer; + margin-top: 30px; + transition: background-color 0.2s ease; + border: none; + text-decoration: none; /* Прибираємо підкреслення */ +} +.info__button:hover { + background-color: #0056b3; +} diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..8c6344b --- /dev/null +++ b/css/styles.css @@ -0,0 +1,12 @@ +@import"./normalize.min.css"; + +@import"./globals.css"; + +@import"./header.css"; + +@import"./hero-and-main.css"; + +@import"./footer.css"; + +@import"./prefooter.css"; + diff --git a/images/Facebook.svg b/images/Facebook.svg new file mode 100644 index 0000000..6aa0324 --- /dev/null +++ b/images/Facebook.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/Icon.svg b/images/Icon.svg new file mode 100644 index 0000000..b6d8027 --- /dev/null +++ b/images/Icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/Instagram.svg b/images/Instagram.svg new file mode 100644 index 0000000..ccae004 --- /dev/null +++ b/images/Instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/Linkedin.svg b/images/Linkedin.svg new file mode 100644 index 0000000..2a779d4 --- /dev/null +++ b/images/Linkedin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/Planshet.svg b/images/Planshet.svg new file mode 100644 index 0000000..c223b75 --- /dev/null +++ b/images/Planshet.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Twitter.svg b/images/Twitter.svg new file mode 100644 index 0000000..ea600e8 --- /dev/null +++ b/images/Twitter.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/Undrown_mobile_login.svg b/images/Undrown_mobile_login.svg new file mode 100644 index 0000000..102e920 --- /dev/null +++ b/images/Undrown_mobile_login.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Youtube.svg b/images/Youtube.svg new file mode 100644 index 0000000..de8ce70 --- /dev/null +++ b/images/Youtube.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..611a2d7 --- /dev/null +++ b/index.html @@ -0,0 +1,164 @@ + + + + + + Landie + + + + + +
+
+
+
+
Landie
+
+ +
+ Learn more + Buy Now +
+
+
+
+
+ + +
+
+
+

Introduce Your Product Quickly & Effectively

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.

+

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim.

+ +
+
+ Main icon +

Title Goes Here

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

+
+
+ Main icon +

Title Goes Here

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

+
+
+
+
+ +
+ Planshet here +
+ +
+ +
+
+

Light, Fast & Powerful

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.

+

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim.

+ +
+
+ Main icon +

Title Goes Here

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

+
+
+ Main icon +

Title Goes Here

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

+
+
+ Undrown_mobile_login here +
+
+
+
+ +
+
+

A Price To Suit Everyone

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus

+
+
+

FREE

+

UI Kit Demo

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor.

+

Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes,

+ Purchase Now +
+
+

$40

+

Design Kit

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor.

+

Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes,

+ Purchase Design Kit +
+
+

$75

+

Design & Code Package

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor.

+

Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes,

+ Purchase Package +
+
+
+
+ + + +
+ +