diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..87e284f --- /dev/null +++ b/css/styles.css @@ -0,0 +1,539 @@ +* { + margin: 0; + padding: 0; +} +@font-face { + font-family: 'ArialMT'; + src: url('../fonts/ArialMT.woff2') format('woff2'), + url('../fonts/ArialMT.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} +.container { + max-width: 1280px; + margin: 0 auto; + box-sizing: border-box; + font-family: Arial; +} + +.padding-site { + padding: 50px; + box-sizing: border-box; +} + +.button:hover { + background-color: #ebebeb; +} + +.button:focus { + color: #7b5af1; +} + +.button:active { + background-color: #f2f701; +} + +.header { + width: 100%; + background-color:#445162; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__title { + /* box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.3); */ + font-family: ArialMT; + font-size: 60px; + line-height: 1.2; + font-weight: 400; + color: #ffffff; + margin-bottom: 26px; +} + +.header__list { + padding-left: 33px; + /* box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.3); */ + font-family: ArialMT; + font-size: 20px; + line-height: 36px; + font-weight: 400; + color: #ffffff; + list-style-type: none; + list-style-image: url('../img/check_icon.png'); +} + +.about { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.about__title { + font-family: ArialMT; + font-size: 30px; + line-height: 36px; + font-weight: 400; + color: #445161; + margin-bottom: 23px; +} + +.about__text { + width: 80%; + font-family: ArialMT; + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #333333; + margin-bottom: 12px; +} + +.dignity{ + background-color:#f5f5f5; +} + +.dignity__title { + font-family: ArialMT; + margin-bottom: 28px; + text-align: center; + font-size: 30px; + line-height: 36px; + font-weight: 400; + color: #445161; +} + +.dignity__list { + display: flex; + flex-wrap: wrap; + list-style-type: none; +} + +.dignity__list-item { + display: flex; + width: 48%; +} + +.dignity__icon-container { + margin-top: 6px; + /* height: 32px; */ + /* width: 32px; */ +} + +.dignity__list-icon { + padding: 6px; + background-color: #445161; + + +} + +.dinity__list-text { + font-family: ArialMT; + margin: 0 22px 33px 10px; + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #333333; +} + +.screenshots__title { + margin-bottom: 33px; + font-family: ArialMT; + font-size: 30px; + line-height: 36px; + font-weight: 400; + color: #445161; + text-align: center; +} + +.screenshots__items { + display: flex; + flex-wrap: wrap; +} + +.screenshots__item { + margin-right: 15px; + margin-bottom: 30px; + display: flex; + width: 46%; +} + +.screenshots__item-image { + margin-right: 15px; +} + +.screenshots__item-title { + margin-bottom: 5px; + font-family: ArialMT; + font-size: 24px; + line-height: 30px; + font-weight: 400; + color: #445161; +} + +.screenshots__item-text { + font-family: ArialMT; + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #333333; +} + +.reviews { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + background-color:#f5f5f5; +} + +.reviews__title { + width: 100%; + text-align: center; + margin-bottom: 33px; + font-family: ArialMT; + font-size: 30px; + line-height: 36px; + font-weight: 400; + color: #445161; +} + +.reviews__item { + width: 48%; + margin: 0 0 20px 0; + display: flex; + justify-content: space-between; +} + +.reviews__photo { + width: 70px; + height: 70px; + border-radius: 50%; + background-color:#445162; +} + +.reviews__text { + display: block; + width: 77%; + padding: 15px; + font-family: ArialMT; + font-size: 14px; + line-height: 18px; + font-weight: 400; + font-style: italic; + color: #333333; + position: relative; + background-color:#ebebeb; + border-radius: 10px; +} + +.reviews__text::before { + content: ""; + border: 13px solid transparent; + border-right: 13px solid #ebebeb; + position: absolute; + top: 23px; + left: -26px; + } + +.reviews__text-author { + display: block; + margin: 5px 0 0 0; + font-family: ArialMT; + font-size: 14px; + line-height: 18px; + font-weight: 400; + color: #989898; +} + +.prices { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: flex-end; +} + +.prices__title { + width: 100%; + text-align: center; + font-family: ArialMT; + font-size: 30px; + line-height: 36px; + font-weight: 400; + color: #445161; + margin-bottom: 30px; +} + +.prices__item { + width: 300px; + background-color: #445162; + border-radius: 5px; + padding-bottom: 15px; + display: flex; + flex-direction: column; + align-items: center; + margin-right: 45px; +} + +.prices__item:last-child { + margin-right: 0; +} + +.prices__item-title { + padding: 15px; + text-align: center; + font-family: ArialMT; + font-size: 24px; + line-height: 30px; + font-weight: 400; + color: #ffffff; +} + +.prices__item-volume { + display: block; + width: 100%; + text-align: center; + padding: 15px; + background-color: #fff; + font-family: ArialMT; + font-size: 40px; + line-height: 30px; + font-weight: 400; + color: #445162; + border: 2px solid #445162; + box-sizing: border-box; +} + +.prices__list { + padding: 20px 38px; + font-family: ArialMT; + font-size: 14px; + line-height: 24px; + font-weight: 400; + color: #ffffff; +} + +.prices__item-button { + display: block; + width: 260px; + border-radius: 5px; + background-color: #fff; + padding: 15px; + font-family: ArialMT; + font-size: 18px; + line-height: 18px; + font-weight: 700; + color: #445161; +} + +.footer { + display: flex; + flex-wrap: wrap; + background-color: #445161; + padding-top: 50px; +} + +.footer__title { + width: 100%; + margin-bottom: 30px; + text-align: center; + font-family: ArialMT; + font-size: 30px; + line-height: 36px; + font-weight: 400; + color: #ffffff; +} + +.footer-form { + display: flex; + flex-direction: column; + align-items: center; + padding-left: 245px; + width: 500px; + margin-right: 50px; +} + +.footer-form__input { + width: 100%; + border-radius: 5px; + margin-bottom: 20px; + padding: 10px; + box-sizing: border-box; + font-family: ArialMT; + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #445162; +} + +.footer-form__input:focus { + background-color: #8ff19f; +} + +.footer-form__textarea { + width: 100%; + border-radius: 5px; + margin-bottom: 20px; + padding: 10px; + box-sizing: border-box; + font-family: ArialMT; + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #445162; + resize: none; +} + +.footer-form__btn { + padding: 10px 50px; + border-radius: 5px; + margin-bottom: 50px; + font-family: ArialMT; + font-size: 16px; + line-height: 24px; + font-weight: 700; + text-transform: uppercase; + color: #445162; + text-transform: uppercase; +} + +.footer-social { + width: 240px; + height: 241px; + padding-left: 50px; +} + +.social-link { + display: block; + font-family: ArialMT; + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #ffffff; + position: relative; + margin-bottom: 20px; + text-decoration: none; +} + +.social-link:hover { + text-decoration-line: underline; +} + +.social-link:active { + color: #2f00ff; +} + +.social-link:first-child::before { + content: ""; + position: absolute; + background-image: url(../img/skype_icon.png); + width: 25px; + height: 26px; + left: -30px; + background-size: cover; +} + +.social-link:nth-child(2)::before { + content: ""; + position: absolute; + background-image: url(../img/icq_icon.png); + width: 25px; + height: 25px; + left: -30px; + background-size: cover; +} + +.social-link:nth-child(3)::before { + content: ""; + position: absolute; + background-image: url(../img/email_icon.png); + width: 25px; + height: 25px; + left: -30px; + background-size: cover; +} + +.social-link:nth-child(4)::before { + content: ""; + position: absolute; + background-image: url(../img/phone_icon.png); + width: 25px; + height: 25px; + left: -30px; + background-size: cover; +} + +.social-icons { + width: 240px; + height: 42px; + display: flex; + margin-left: -30px; +} + +.social-icons__item { + width: 42px; + height: 42px; + /* background-image: url(../img/social-icons.png); */ + /* background-size: 551px 420px; */ + margin-left: 7px; + background-color: #ffffff; + border-radius: 50%; + box-sizing: border-box; +} + +.social-svg { + fill: #445162;; +} + +.social-icons__item:hover { + background-color: #ffffffc5; +} + +.social-icons__item:active { + background-color: #3700ff; +} + +.social-icons__item:focus { + outline: none; + box-shadow: 0 0 0 3px lightskyblue; +} + +.social-icons__item:nth-child(1) { + /* background-position: -91px -25px; */ + margin-left: 0; + padding: 11px; + +} + +.social-icons__item:nth-child(2) { + /* background-position: -25px -25px; */ + padding: 11px; + +} + +.social-icons__item:nth-child(3) { + /* background-position: -419px -25px; */ + padding: 11px; +} + +.social-icons__item:nth-child(4) { + /* background-position: -157px -25px; */ + padding: 11px; +} + +.social-icons__item:nth-child(5) { + /* background-position: 525px -90px; */ + padding: 11px; +} + +.footer-copyright { + width: 100%; + text-align: center; + font-family: ArialMT; + font-size: 12px; + line-height: 24px; + font-weight: 400; + letter-spacing: 0.025em; + color: #445162; + background-color: #fff; +} diff --git a/fonts/ARIALMT.ttf b/fonts/ARIALMT.ttf new file mode 100644 index 0000000..b51dd89 Binary files /dev/null and b/fonts/ARIALMT.ttf differ diff --git a/fonts/ArialMT.woff b/fonts/ArialMT.woff new file mode 100644 index 0000000..bdc2bd9 Binary files /dev/null and b/fonts/ArialMT.woff differ diff --git a/fonts/ArialMT.woff2 b/fonts/ArialMT.woff2 new file mode 100644 index 0000000..bd03279 Binary files /dev/null and b/fonts/ArialMT.woff2 differ diff --git a/img/check_icon.png b/img/check_icon.png new file mode 100644 index 0000000..5f44e87 Binary files /dev/null and b/img/check_icon.png differ diff --git a/img/email_icon.png b/img/email_icon.png new file mode 100644 index 0000000..74c3ff8 Binary files /dev/null and b/img/email_icon.png differ diff --git a/img/icq_icon.png b/img/icq_icon.png new file mode 100644 index 0000000..4e5d894 Binary files /dev/null and b/img/icq_icon.png differ diff --git a/img/phone_icon.png b/img/phone_icon.png new file mode 100644 index 0000000..de4990d Binary files /dev/null and b/img/phone_icon.png differ diff --git a/img/plus_icon.png b/img/plus_icon.png new file mode 100644 index 0000000..2bcb314 Binary files /dev/null and b/img/plus_icon.png differ diff --git a/img/skype_icon.png b/img/skype_icon.png new file mode 100644 index 0000000..5c9e1d1 Binary files /dev/null and b/img/skype_icon.png differ diff --git a/img/social-icons.png b/img/social-icons.png new file mode 100644 index 0000000..7e1e762 Binary files /dev/null and b/img/social-icons.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8d3e0bd --- /dev/null +++ b/index.html @@ -0,0 +1,326 @@ + + + + + + + Document + + + + + +
+ +
+

Product name

+ +
+ product image + + +
+ + +
+
+
+

About your product

+

Lorem ipsum dolor sit amet, + consectetur adipisicing elit. Nobis facilis + fuga, illo at. Natus eos, eligendi illum + rerum omnis porro ex, magni, explicabo veniam + incidunt in quam sapiente ut ipsum.

+

Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel + exercitationem + ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis + nemo + debitis dolor.

+ +
+ + +
+ + +
+

Dignity and pluses product

+ +
+ +
+

Screenshots

+
+
+ pic +
+

The description for the image

+

Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque + itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi + dolores. Sequi itaque, unde perferendis nemo debitis dolor.

+
+
+
+ pic +
+

The description for the image

+

Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque + itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi + dolores. Sequi itaque, unde perferendis nemo debitis dolor.

+
+
+
+ pic +
+

The description for the image

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, + explicabo veniam incidunt in quam sapiente ut ipsum.

+
+
+
+ pic +
+

The description for the image

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, + explicabo veniam incidunt in quam sapiente ut ipsum.

+
+
+
+
+ +
+

Reviews

+
+
+

Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum + odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus + officiis sapiente necessitatibus commodi consectetur? + Lourens S. +

+ +
+
+
+

Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum + odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus + officiis sapiente necessitatibus commodi consectetur? + Lourens S. +

+ +
+
+
+

Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum + odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus + officiis sapiente necessitatibus commodi consectetur? + Lourens S. +

+ +
+
+
+

Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum + odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus + officiis sapiente necessitatibus commodi consectetur? + Lourens S. +

+ +
+
+ +
+

Buy it now

+
+

Standart

+ $100 +
    +
  1. Porro officia cumque sint deleniti;
    2. +
  2. Тemo facere rem vitae odit;
    3. +
  3. Cum odio, iste quia doloribus autem;
    4. +
  4. Aperiam nulla ea neque.
    5. +
+ +
+
+

Premium

+ $150 +
    +
  1. Porro officia cumque sint deleniti;
    2. +
  2. Тemo facere rem vitae odit;
    3. +
  3. Cum odio, iste quia doloribus autem;
    4. +
  4. Aperiam nulla ea neque.
    5. +
  5. Porro officia cumque sint deleniti;
    6. +
  6. Тemo facere rem vitae odit;
    7. +
  7. Cum odio, iste quia doloribus autem;
    8. +
  8. Aperiam nulla ea neque.
    9. +
+ +
+
+

Lux

+ $200 +
    +
  1. Porro officia cumque sint deleniti;
    2. +
  2. Тemo facere rem vitae odit;
    3. +
  3. Cum odio, iste quia doloribus autem;
    4. +
  4. Aperiam nulla ea neque.
    5. +
  5. Porro officia cumque sint deleniti;
    6. +
  6. Тemo facere rem vitae odit;
    7. +
  7. Cum odio, iste quia doloribus autem;
    8. +
  8. Aperiam nulla ea neque.
    9. +
  9. Porro officia cumque sint deleniti;
    10. +
  10. Тemo facere rem vitae odit;
    11. +
  11. Cum odio, iste quia doloribus autem;
    12. +
  12. Aperiam nulla ea neque.
    13. +
+ +
+
+ + +
+ + + \ No newline at end of file diff --git a/video/Grilled Burgers in Utah.mp4 b/video/Grilled Burgers in Utah.mp4 new file mode 100644 index 0000000..fd6f48e Binary files /dev/null and b/video/Grilled Burgers in Utah.mp4 differ