daily pastebin goal
43%
SHARE
TWEET

Untitled

a guest Mar 21st, 2019 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * Сглаживание шрифтов для всей страницы, подробнее об этом —
  3.  * в уроках про адаптацию страницы под различные устройства
  4.  */
  5.  
  6. .page {
  7.   -webkit-font-smoothing: antialiased;
  8.   -moz-osx-font-smoothing: grayscale;
  9.   text-rendering: optimizeLegibility;
  10.   -webkit-text-size-adjust: 100%;
  11.   -ms-font-feature-settings: "kern" 1;
  12.   font-feature-settings: "kern";
  13. }
  14.  
  15. /*
  16.  * Всю секцию, в которой расположена форма, мы прибили
  17.  * к левому краю при помощи фиксированного позиционирования
  18.  */
  19.  
  20. .form {
  21.   width: 320px;
  22.   height: 100vh;
  23.   background: rgba(255, 255, 255, .95);
  24.   border-right: 1px solid #000;
  25.   position: fixed;
  26.   top: 0;
  27.   left: 0;
  28.   transition: left .5s;
  29.   font-family: 'Alegreya Sans', sans-serif;
  30. }
  31.  
  32. /*
  33.  * Класс, созданный для анимации секции с формой.
  34.  * Свойство left будет плавно меняться, убирая секцию
  35.  * за пределы экрана в нужный момент
  36.  */
  37.  
  38. .form_is-closed {
  39.   left: -320px;
  40. }
  41.  
  42. /* Блок с иконкой, сворачивающей и раскрывающей секцию с формой */
  43.  
  44. .form__toggle {
  45.   width: 50px;
  46.   height: 50px;
  47.   background-color: rgba(0, 0, 0, .95);
  48.   position: absolute;
  49.   top: 0;
  50.   right: -50px;
  51.   display: flex;
  52.   cursor: pointer;
  53.   transition: opacity .4s;
  54. }
  55.  
  56. .form__toggle:hover {
  57.   opacity: .8;
  58. }
  59.  
  60. .form__toggle-image {
  61.   width: 12px;
  62.   height: 20px;
  63.   margin: auto;
  64. }
  65.  
  66. /* Поворот иконки, отвечающей за анимацию секции с формой */
  67.  
  68. .form_is-closed .form__toggle-image {
  69.   transform: rotate(180deg);
  70. }
  71.  
  72. /*
  73.  * Высота контейнера вычисляется функцией calc,
  74.  * которую мы рассмотрим в уроках про адаптивную и отзывчивую верстку.
  75.  * Свойство overflow отвечает за поведение внешнего контейнера в случае,
  76.  * если содержимое не помещается в его размеры.
  77.  * В данном случае — появится вертикальная прокрутка.
  78.  */
  79.  
  80. .form__main-container {
  81.   height: calc(100vh - 40px);
  82.   overflow-y: scroll;
  83. }
  84.  
  85. /* Заголовок формы */
  86.  
  87. .form__heading {
  88.   font-size: 28px;
  89.   line-height: 32px;
  90.   width: 240px;
  91.   margin: 23px auto 0;
  92. }
  93.  
  94. /* Непосредственно форма */
  95.  
  96. .form__admin {
  97.   height: 100vh;
  98. }
  99.  
  100. /* Стили всех элементов fieldset */
  101.  
  102. .form__input-container {
  103.   border: 0;
  104.   width: 240px;
  105.   margin: auto;
  106.   padding-bottom: 50px;
  107. }
  108.  
  109. /* Линия-разделитель между fieldset'ами */
  110.  
  111. .form__line {
  112.   height: 1px;
  113.   background-color: #000;
  114. }
  115.  
  116. /* Общие стили для всех лейблов */
  117.  
  118. .form__label {
  119. display: block;
  120.   margin: 35px auto 0;
  121.   font-size: 20px;
  122.   line-height: 30px;
  123. }
  124.  
  125. /* Общие стили для всех полей ввода */
  126.  
  127. .form__item {
  128.   border: 0;
  129.   width: 100%;
  130.   height: 24px;
  131.   box-sizing: border-box;
  132.   border-bottom: 1px solid #bcbcc4;
  133.   background-color: transparent;
  134.   margin-top: 5px;
  135.   font-size: 14px;
  136.   font-family: inherit;
  137. }
  138.  
  139.  
  140. /* Замена цвета внешней линии при фокусе поля ввода */
  141.  
  142. /* Стилизуем плейсхолдеры */
  143.  
  144. /* Поля ввода */
  145.  
  146. /* Селектор класса поля ввода основного текста {
  147.   background: #fff;
  148.   height: 150px;
  149.   font-size: 14px;
  150.   padding: 6px 6px 4px;
  151.   border: 1px solid #bcbcc4;
  152. }
  153. */
  154.  
  155. /* Селектор поля ввода с типом "число" {
  156.   background-color: white;
  157.   color: black;
  158.   border: 1px solid #bcbcc4;
  159.   padding: 0 4px;
  160. }
  161. */
  162.  
  163. /* Селектор поля ввода с типом "дата" {
  164.   background-color: white;
  165.   color: black;
  166.   border: 1px solid #bcbcc4;
  167.   padding: 0 4px;
  168.   font-family: 'Alegreya Sans', sans-serif;
  169. }
  170. */
  171.  
  172. /* Селектор поля ввода с типом "цвет" {
  173.   height: 30px;
  174.   width: 48px;
  175.   border-bottom: 0;
  176.   padding: 0;
  177. }
  178. */
  179.  
  180. /* Селектор поля ввода с типом "диапазон" {
  181.   width: 144px;
  182. }
  183. */
  184.  
  185. /* Поле выпадающего списка с классом form_item */
  186.  select.form__item {
  187.   background-color: white;
  188.   color: black;
  189.   border: 1px solid #bcbcc4;
  190. }
  191.  
  192.  
  193. /* Селектор поля единичного выбора {
  194.   display: inline-block;
  195.   width: 16px;
  196.   height: 16px;
  197. }
  198. */
  199.  
  200. /* Селектор поля единичного выбора со значением атрибута value "row" {
  201.   margin-left: 25px;
  202. }
  203. */
  204.  
  205. /* Селектор поля множественного выбора {
  206.   display: inline-block;
  207.   width: 16px;
  208.   height: 16px;
  209.   vertical-align: middle;
  210.   margin: 0;
  211. }
  212. */
  213.  
  214. .form__descriptor {
  215.   font-size: 14px;
  216.   line-height: 30px;
  217.   margin-left: 10px;
  218. }
  219.  
  220. /* Зона кнопок и сами кнопки */
  221.  
  222. .form__handlers {
  223.   border: 0;
  224.   margin: 0;
  225.   width: 320px;
  226.   font-size: 0;
  227.   height: 40px;
  228. }
  229.  
  230. /* Общие стили для всех кнопок */
  231.  .form__button {
  232.   width: 50%;
  233.   height: 40px;
  234.   font-size: 14px;
  235.   border: 0;
  236.   margin: 0;
  237.   padding-bottom: 5px;
  238.   cursor: pointer;
  239.   transition: opacity .4s;
  240.   color: white;
  241.   font-family: inherit;
  242. }
  243.  
  244. .form__button:hover {
  245.   opacity: .7;
  246. }
  247.  
  248.  
  249. /* Замена цвета внешней линии при фокусе кнопки */
  250.  
  251. /* Селектор кнопки отправки данных {
  252.   background-color: #000;
  253. }
  254. */
  255.  
  256. /* Селектор кнопки сброса формы {
  257.   background-color: #ea3a3a;
  258. }
  259. */
  260.  
  261. /* Стили страницы */
  262.  
  263. .content {
  264.   font-family: 'Playfair Display', serif;
  265.   width: 90%;
  266.   margin: 0 auto;
  267.   padding-top: 60px;
  268. }
  269.  
  270. .content__heading {
  271.   font-size: 55px;
  272.   width: 523px;
  273.   margin: auto;
  274.   line-height: 60px;
  275.   text-align: center;
  276.   font-weight: bold;
  277. }
  278.  
  279. .content__subheading {
  280.   text-align: center;
  281.   width: 430px;
  282.   font-size: 20px;
  283.   line-height: 30px;
  284.   margin: 40px auto;
  285. }
  286.  
  287. .content__image-item {
  288.   width: 100%;
  289. }
  290.  
  291. .content__image-copyright {
  292.   font-size: 14px;
  293.   margin-top: 20px;
  294. }
  295.  
  296. /*
  297.  * В этом элементе мы применяем свойства column-count
  298.  * и column-gap, они новые для вас.
  299.  * Эти свойства разбивают текст на колонки.
  300.  * column-count: 1; — означает текст в одну колонку
  301.  * column-gap: 40px; — рекомендуемое расстояние между колонками
  302.  */
  303.  
  304. .content__text {
  305.   width: 70%;
  306.   font-size: 20px;
  307.   line-height: 30px;
  308.   margin: 30px auto;
  309.   column-count: 1;
  310.   column-gap: 40px;
  311. }
  312.  
  313. .content__paragraph {
  314.   margin: 30px 0;
  315. }
  316.  
  317. .content__link {
  318.   color: black;
  319. }
  320.  
  321. .content__date {
  322.   font-size: 20px;
  323.   width: 70%;
  324.   margin: 90px auto 0;
  325.   text-decoration: underline;
  326. }
  327.  
  328. .content__author {
  329.   font-size: 20px;
  330.   width: 70%;
  331.   margin: 20px auto 0;
  332. }
  333.  
  334. .footer__container {
  335.   height: 100px;
  336. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top