Add first work
This commit is contained in:
commit
4046db6553
3 changed files with 577 additions and 0 deletions
21
w1/p1/app.js
Normal file
21
w1/p1/app.js
Normal file
|
|
@ -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()
|
||||||
|
});
|
||||||
235
w1/p1/index.html
Normal file
235
w1/p1/index.html
Normal file
|
|
@ -0,0 +1,235 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="OmegaC сайт - здесь вы можете получить информацию о наших услугах!">
|
||||||
|
<meta name="keywords" content="OmegaC, прайс-лист, услуги">
|
||||||
|
|
||||||
|
<title>OmegaC Site</title>
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header__normal">
|
||||||
|
<div class="header-content">
|
||||||
|
<a href="." class="logo">OC</a>
|
||||||
|
<button class="btn-callmeback">Заказать звонок</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="hero">
|
||||||
|
<span class="decoy"></span>
|
||||||
|
|
||||||
|
<div class="logo-decor">
|
||||||
|
<div class="fp"></div>
|
||||||
|
<div class="sp"></div>
|
||||||
|
</div>
|
||||||
|
<h3 class="logo">Omega::C</h3>
|
||||||
|
|
||||||
|
<i class="hero-pusher">Листай вниз!</i>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<h1 class="section-heading">О нас</h1>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2>Наша история</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
|
||||||
|
<h2>Наши ценности</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
|
||||||
|
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
|
||||||
|
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
|
||||||
|
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="services">
|
||||||
|
<h1 class="section-heading">Наши услуги</h1>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<p>
|
||||||
|
Наша компания представляет широкий набор высококачесвтенных услуг, ниже
|
||||||
|
вы можете ознакомиться с прайсом некоторых из них.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<table class="services-table">
|
||||||
|
<tr>
|
||||||
|
<th>Услуга</th>
|
||||||
|
<th>Описание услуги</th>
|
||||||
|
<th>Примерная стоимость</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Онлайн консультант</td>
|
||||||
|
<td>Установка и настройка системы онлайн консультанта для сайтов и интернет-магазинов.</td>
|
||||||
|
<td>1500 руб.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Регистрация доменов</td>
|
||||||
|
<td>Регистрация доменных имен от 600 рублей RU, SU, РФ, COM, TV, PRO и другие.</td>
|
||||||
|
<td>400 руб.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Хостинг сайтов</td>
|
||||||
|
<td>Профессиональный хостинг сайтов, почта, поддержка и настройка от 5 000 рублей.</td>
|
||||||
|
<td>От 200 руб./мес.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Битрикс24</td>
|
||||||
|
<td>Внедрение системы управления задачами (CRM) Битрикс24</td>
|
||||||
|
<td>От 10 000 руб.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Брендовые тексты</td>
|
||||||
|
<td>Продающие брендовые тексты для вашего сайта.</td>
|
||||||
|
<td>1000 руб./тыс.сим.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Брендинг</td>
|
||||||
|
<td>Разработка логотипов и фирменного стиля. Печатная продукция: визитки, сувенирка.</td>
|
||||||
|
<td>Инд. рас.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Композитный сайт</td>
|
||||||
|
<td>Внедрение технологии для повышения скорости работы сайта в сотни раз.</td>
|
||||||
|
<td>2000 руб.</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="reviews">
|
||||||
|
<h1 class="section-heading">Отзывы благодарных клиентов</h1>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="reviews-card-list">
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<img src="https://picsum.photos/id/1005/200" alt="Lorem Ipsumov фото">
|
||||||
|
<h4>Lorem Ipsumov</h5>
|
||||||
|
</div>
|
||||||
|
<p class="review-text">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!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<img src="https://picsum.photos/id/1009/200" alt="Lorem Ipsumov фото">
|
||||||
|
<h4>Lorem Ipsumov</h5>
|
||||||
|
</div>
|
||||||
|
<p class="review-text">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!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<img src="https://picsum.photos/id/1011/200" alt="Lorem Ipsumov фото">
|
||||||
|
<h4>Lorem Ipsumov</h5>
|
||||||
|
</div>
|
||||||
|
<p class="review-text">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!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<img src="https://picsum.photos/id/1012/200" alt="Lorem Ipsumov фото">
|
||||||
|
<h4>Lorem Ipsumov</h5>
|
||||||
|
</div>
|
||||||
|
<p class="review-text">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!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<img src="https://picsum.photos/id/1027/200" alt="Lorem Ipsumov фото">
|
||||||
|
<h4>Lorem Ipsumov</h5>
|
||||||
|
</div>
|
||||||
|
<p class="review-text">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!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="where">
|
||||||
|
<h1 class="section-heading">Где нас найти?</h1>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<iframe class="embeded-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d608.3417033854989!2d92.79586521611014!3d55.99429890165543!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5cd7ad89f1c4641f%3A0xb97485c009940bda!2z0YPQuy4g0JHQvtGA0LjRgdC-0LLQsCwgMjQsINCa0YDQsNGB0L3QvtGP0YDRgdC6LCDQmtGA0LDRgdC90L7Rj9GA0YHQutC40Lkg0LrRgNCw0LksIDY2MDA3NA!5e0!3m2!1sru!2sru!4v1644221404130!5m2!1sru!2sru" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="callback">
|
||||||
|
<h1 class="section-heading">Форма обратной связи</h1>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="callback-form-holder">
|
||||||
|
<form id="callback-form" action="#" method="post">
|
||||||
|
<label>Как вас зовут: <input type="text" name="name"></label>
|
||||||
|
<label>Возраст: <input type="text" name="age"></label>
|
||||||
|
<div>
|
||||||
|
<p>Пол:</p>
|
||||||
|
<input id="woman" type="radio" name="sex" value="w">
|
||||||
|
<label for="woman">Жeнcкий</label>
|
||||||
|
<input id="man" type="radio" name="sex" value="m">
|
||||||
|
<label for="man">Myжcкoй</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="rank">Насколько вы удовлетворены нашим сайтом:</label>
|
||||||
|
<select id="rank" name="rank">
|
||||||
|
<option value="5">5 баллов</option>
|
||||||
|
<option value="4">4 балла</option>
|
||||||
|
<option value="3">3 балла</option>
|
||||||
|
<option value="2">2 балла</option>
|
||||||
|
<option value="1">1 балл</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="come-from">Как вы нас нашли:</label>
|
||||||
|
<br>
|
||||||
|
<select id="come-from" name="come-from" size="3">
|
||||||
|
<option value="google">Google</option>
|
||||||
|
<option value="yandex">Яндекс</option>
|
||||||
|
<option value="soc">Социальные сети</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="browser">Ваш браузер:</label>
|
||||||
|
<input list="browsers" name="browser">
|
||||||
|
<datalist id="browsers">
|
||||||
|
<option value="Internet Explorer">
|
||||||
|
<option value="Firefox">
|
||||||
|
<option value="Chrome">
|
||||||
|
<option value="Opera">
|
||||||
|
<option value="Safari">
|
||||||
|
</datalist>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Ваше обращение:</p>
|
||||||
|
<textarea name="comments" cols="24" rows="4">Текст обращения</textarea>
|
||||||
|
|
||||||
|
<div class="form-footer">
|
||||||
|
<input type="submit" value="Отправить форму">
|
||||||
|
<input type="reset" value="Очистить форму">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<a href="javascript:window.scroll({top:0,behavior:'smooth'})" class="btn-go-up">Наверх!</a>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
OmegaC. Все права защищены. 2022
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script src="./app.js"></script>
|
||||||
|
</html>
|
||||||
321
w1/p1/styles.css
Normal file
321
w1/p1/styles.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue