From 4046db65537b97db89a3d1baf090dfcf325ea479 Mon Sep 17 00:00:00 2001 From: Andrew nuark G Date: Mon, 7 Feb 2022 16:06:55 +0700 Subject: [PATCH] Add first work --- w1/p1/app.js | 21 ++++ w1/p1/index.html | 235 ++++++++++++++++++++++++++++++++++ w1/p1/styles.css | 321 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 577 insertions(+) create mode 100644 w1/p1/app.js create mode 100644 w1/p1/index.html create mode 100644 w1/p1/styles.css diff --git a/w1/p1/app.js b/w1/p1/app.js new file mode 100644 index 0000000..612b42d --- /dev/null +++ b/w1/p1/app.js @@ -0,0 +1,21 @@ +"use strict"; + +/** @type {HTMLElement} */ +let headerElement = null; + +const onPageScrolled = function () { + if (window.pageYOffset > 0) { + headerElement.classList.replace("header__normal", "header__scrolled"); + } else { + headerElement.classList.replace("header__scrolled", "header__normal"); + } +} + +const init = function () { + headerElement = document.querySelector("header"); + window.addEventListener("scroll", _ => onPageScrolled()); +} + +document.addEventListener("DOMContentLoaded", function (event) { + init() +}); \ No newline at end of file diff --git a/w1/p1/index.html b/w1/p1/index.html new file mode 100644 index 0000000..d9b7f15 --- /dev/null +++ b/w1/p1/index.html @@ -0,0 +1,235 @@ + + + + + + + + + + OmegaC Site + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + + Листай вниз! +
+ +
+

О нас

+
+ +

Наша история

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ipsum praesentium aperiam aliquam obcaecati architecto, dicta molestias, ratione consectetur tempora accusamus odit! Nobis quas fugiat quia porro quidem ab fuga saepe, deleniti aspernatur repellat blanditiis quos facere culpa dignissimos excepturi ea! Earum dolor, hic porro repellendus in et. Praesentium sunt, rerum neque vel atque distinctio cum quos voluptates harum explicabo? Enim quis numquam culpa eveniet minus labore vero, corporis placeat porro, earum deserunt soluta aliquam? Laborum tenetur blanditiis eius dolorum voluptatem tempore. Vero aliquam sunt ad neque aliquid dolore illo, consequatur exercitationem similique velit corrupti ut maxime voluptatibus. Repellat nemo praesentium iste harum fugit nisi modi, eos accusantium quia optio ut rem quasi ea necessitatibus reiciendis quo tempora animi qui, doloremque possimus ipsam! Nulla, a ratione? Eligendi, dolor perspiciatis. Asperiores vero magnam veritatis ab, quae doloremque rem voluptates recusandae id animi eius, nulla cumque aut itaque amet magni quo atque mollitia debitis minus! Officiis quam, distinctio minus odio, fugit ipsum consectetur voluptate a excepturi beatae suscipit? Velit provident in, nisi dolores nostrum perferendis possimus amet obcaecati dignissimos, facilis, exercitationem ut maiores debitis inventore reprehenderit non cumque quibusdam ea beatae voluptatem a dolore. Ab nostrum natus sit minus quasi temporibus praesentium provident fugiat quod omnis possimus illum ullam fugit, voluptates sint facere aliquam neque expedita perspiciatis. Repellat maiores architecto magni labore alias sed praesentium nostrum voluptatum corporis amet natus possimus fugit laboriosam quisquam suscipit reiciendis iusto porro, nulla quam deleniti nobis? Reiciendis, nihil dignissimos corporis temporibus a nobis, eligendi culpa pariatur enim animi mollitia praesentium debitis consequuntur quam ullam odio dolor porro, ipsum quo numquam aut perferendis. Cupiditate velit magni explicabo facilis vitae vel magnam aperiam dolore voluptatum eos et ut fugiat molestiae quasi beatae exercitationem numquam corrupti necessitatibus consequatur unde fugit accusantium quisquam, ullam amet. Ea ducimus eum recusandae sequi.

+ +

Наши ценности

+
    +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • +
+
+ +
+

Наши услуги

+
+ +

+

+ Наша компания представляет широкий набор высококачесвтенных услуг, ниже + вы можете ознакомиться с прайсом некоторых из них. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
УслугаОписание услугиПримерная стоимость
Онлайн консультантУстановка и настройка системы онлайн консультанта для сайтов и интернет-магазинов.1500 руб.
Регистрация доменовРегистрация доменных имен от 600 рублей RU, SU, РФ, COM, TV, PRO и другие.400 руб.
Хостинг сайтовПрофессиональный хостинг сайтов, почта, поддержка и настройка от 5 000 рублей.От 200 руб./мес.
Битрикс24Внедрение системы управления задачами (CRM) Битрикс24От 10 000 руб.
Брендовые текстыПродающие брендовые тексты для вашего сайта.1000 руб./тыс.сим.
БрендингРазработка логотипов и фирменного стиля. Печатная продукция: визитки, сувенирка.Инд. рас.
Композитный сайтВнедрение технологии для повышения скорости работы сайта в сотни раз.2000 руб.
+
+ +
+

Отзывы благодарных клиентов

+
+ +
+
+
+ Lorem Ipsumov фото +

Lorem Ipsumov

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vero optio suscipit aspernatur nostrum quaerat ducimus doloremque. Illum distinctio modi dignissimos id accusamus minus impedit quod dolore, ullam quam explicabo minima quasi cumque velit quos, asperiores enim iste quaerat omnis expedita laborum earum vel dolorum. Obcaecati iste totam at nostrum!

+
+ +
+
+ Lorem Ipsumov фото +

Lorem Ipsumov

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vero optio suscipit aspernatur nostrum quaerat ducimus doloremque. Illum distinctio modi dignissimos id accusamus minus impedit quod dolore, ullam quam explicabo minima quasi cumque velit quos, asperiores enim iste quaerat omnis expedita laborum earum vel dolorum. Obcaecati iste totam at nostrum!

+
+ +
+
+ Lorem Ipsumov фото +

Lorem Ipsumov

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vero optio suscipit aspernatur nostrum quaerat ducimus doloremque. Illum distinctio modi dignissimos id accusamus minus impedit quod dolore, ullam quam explicabo minima quasi cumque velit quos, asperiores enim iste quaerat omnis expedita laborum earum vel dolorum. Obcaecati iste totam at nostrum!

+
+ +
+
+ Lorem Ipsumov фото +

Lorem Ipsumov

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vero optio suscipit aspernatur nostrum quaerat ducimus doloremque. Illum distinctio modi dignissimos id accusamus minus impedit quod dolore, ullam quam explicabo minima quasi cumque velit quos, asperiores enim iste quaerat omnis expedita laborum earum vel dolorum. Obcaecati iste totam at nostrum!

+
+ +
+
+ Lorem Ipsumov фото +

Lorem Ipsumov

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vero optio suscipit aspernatur nostrum quaerat ducimus doloremque. Illum distinctio modi dignissimos id accusamus minus impedit quod dolore, ullam quam explicabo minima quasi cumque velit quos, asperiores enim iste quaerat omnis expedita laborum earum vel dolorum. Obcaecati iste totam at nostrum!

+
+
+ +
+ +
+

Где нас найти?

+
+ + +
+ +
+

Форма обратной связи

+
+ +
+
+ + +
+

Пол:

+ + + + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ + + + +
+ +

Ваше обращение:

+ + +
+ + +
+
+
+
+
+ + Наверх! + + + + + + \ No newline at end of file diff --git a/w1/p1/styles.css b/w1/p1/styles.css new file mode 100644 index 0000000..05b0399 --- /dev/null +++ b/w1/p1/styles.css @@ -0,0 +1,321 @@ +* { + font-family: 'Montserrat', sans-serif; + padding: 0; + margin: 0; + list-style-position: inside; +} + +i { + font-weight: 300; +} + +b { + font-weight: 700; +} + +body { + background-color: white; + scroll-behavior: smooth; +} + +.btn-go-up { + position: fixed; + bottom: 5rem; + left: 5rem; + color: rgb(0, 0, 0); + text-decoration: none; + padding: .25rem; + background-color: rgba(0, 0, 0, 0.3); +} + +header { + display: flex; + flex-direction: row; + align-content: center; + justify-content: center; + position: fixed; + width: 100%; + padding: 1rem; + z-index: 3; +} + +.header__normal { + background-color: rgba(0, 0, 0, 0); + transition: background-color 200ms linear; +} + +.header__scrolled { + background-color: rgba(109, 108, 108, 0.596); + transition: background-color 200ms linear; +} + +.header-content { + width: 80%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.logo { + font-size: 2rem; + text-decoration: none; + letter-spacing: calc(1rem / 2); +} + +.btn-callmeback { + background-color: white; + border-color: slategray; + border-style: solid; + color: slategray; + cursor: pointer; + padding: 1rem; + font-weight: 800; + + transition: background-color 120ms ease; +} + +.btn-callmeback:hover { + background-color: gainsboro; +} + +main { + padding: 0; + display: flex; + flex-direction: column; + align-items: center; +} + +main > section > .section-heading { + text-align: center; + padding-bottom: 2rem; +} + +main > section { + padding: 4.25rem 0 4.25rem 0; + width: 80%; +} + +#hero { + padding: 0; + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + align-content: center; + justify-content: space-between; + align-items: center; + background: linear-gradient(-45deg, rgb(54, 195, 247), rgb(185, 185, 185), rgb(255, 255, 255), rgb(81, 240, 203)); + background-size: 400% 400%; + animation: hero_bg_gradient 15s ease infinite; +} + +@keyframes hero_bg_gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +#hero > .logo { + color: rgb(68, 68, 68); + transition: background-color 200ms ease; + transition: padding 0ms ease; +} + +#hero > .logo:hover { + padding: 1rem; + color: rgb(217, 255, 0); + background-color: rgb(68, 68, 68); + transition: background-color 200ms ease; + transition: padding 200ms ease; +} + +.logo-decor { + position: absolute; +} + +.logo-decor > .fp { + position: absolute; + width: 2rem; + height: 3rem; + background-color: tomato; + transform: translate(-45%, calc(100vh / 3)); + z-index: 1; +} + +.logo-decor > .sp { + position: absolute; + width: 2rem; + height: 3rem; + background-color: turquoise; + transform: translate(0, calc(100vh / 3 + 50%)); + z-index: 2; +} + +.logo-decor:hover > .fp { + background-color: tomato; + z-index: 2; +} + +.logo-decor:hover > .sp { + background-color: turquoise; + z-index: 1; +} + +.hero-pusher { + margin-bottom: 2rem; + animation-duration: 3s; + animation-name: mowing_arrow; + animation-iteration-count: infinite; + font-size: 2rem; +} + +@keyframes mowing_arrow { + 0% { + transform: translate(0); + } + + 25% { + transform: translate(0, -100%); + } + + 100% { + transform: translate(0); + } +} + +#about { + text-align: justify; +} + +#about > h2 { + padding-top: 2.25rem; + padding-bottom: .25rem; +} + +/* #services {} */ + +.services-table { + margin-top: 2.25rem; +} + +.services-table { + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; +} + +.services-table td, +.services-table th { + border: 1px solid rgb(212, 212, 212); + text-align: left; + padding: 8px; +} + +.services-table tr:nth-child(even) { + background-color: rgb(212, 212, 212); +} + +.reviews-card-list { + display: flex; + flex-direction: row; + margin-top: 2.25rem; + gap: 1rem; +} + +.review-card { + padding: 1rem; + background-color: whitesmoke; + border-radius: 1rem; + box-shadow: 5px 5px 15px rgba(0,0,0,0.4); +} + +.card-header { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + margin-bottom: 1rem; +} + +.card-header > img { + width: 4rem; + border-radius: 50%; + margin-right: 1rem; +} + +.embeded-map { + margin-top: 2.25rem; + width: 100% +} + +.callback-form-holder { + display: flex; + align-content: space-between; + justify-content: center; + align-items: center; +} + +#callback-form { + width: 50%; + margin-top: 2.25rem; + display: flex; + flex-direction: column; + gap: .5rem; +} + +.form-footer { + display: flex; + gap: 1rem; + flex-direction: row; +} + +.form-footer > * { + flex-grow: 1; +} + +footer { + width: 100%; + background-color: rebeccapurple; +} + +.footer-content { + padding: 1rem; + text-align: center; + color: white; + font-weight: 500; +} + +@media screen and (max-device-width: 400px) { + .btn-callmeback, + .logo-decor, + .btn-go-up { + display: none; + } + + .services-table { + overflow: auto; + display: inline-block; + } + + .reviews-card-list { + flex-direction: column; + } + + .embeded-map { + height: 20rem; + } + + #callback-form { + width: 100%; + } + + .form-footer { + flex-direction: column; + } +} \ No newline at end of file