TRI-283: вёрстка лендинга

static/css/moover.css

@@ -1,162 +1,8 @@
-/*.container {*/
-/*  margin: 0 auto;*/
-/*  width: 1260px*/
-/*}*/
-
-/*@media (max-width: 1339.98px) {*/
-/*  .container {*/
-/*    width: 992px*/
-/*  }*/
-/*}*/
-
-/*@media (max-width: 1019.98px) {*/
-/*  .container {*/
-/*    width: 720px*/
-/*  }*/
-/*}*/
-
-/*@media (max-width: 767.98px) {*/
-/*  .container {*/
-/*    margin: 0 15px;*/
-/*    width: auto*/
-/*  }*/
-/*}*/
-:root {
-  --color-primary: #FF613A;
-  --color-white: #FFFFFF;
-  --color-black: #000000;
-}
+@import url('./moover/root.css');
+@import url('./moover/presentation.css');
+@import url('./moover/cards.css');
+@import url('./moover/easy.css');
+@import url('./moover/use.css');
+@import url('./moover/chatterbox.css');
 
 
-.btn {
-  display: inline-flex;
-  text-decoration: none;
-  color: black;
-  line-height: 22px;
-  border-radius: 10px;
-  padding: 20px 76px;
-  justify-content: center;
-  align-items: center;
-  margin: 0px 3px;
-  letter-spacing: 0.2px;
-  
-  font-size: 18px;
-}
-
-.btn--primary {
-  background: var(--color-primary);
-  color: var(--color-white);
-}
-
-/***********************presentation******************************************/
-.presentation {
-  text-align: center;
-  margin: 0 -65px 20px;
-  
-}
-
-.presentation__top {
-  position: relative;
-  min-height: 270px;
-  margin: 0 auto 116px;
-  padding: 29px 0 40px;
-  background-image: url(/static/img/webp/Box9.webp),
-  url(/static/img/webp/Box10.webp),
-  url(/static/img/webp/Box11.webp),
-  url(/static/img/webp/Box12.webp);
-  background-position: top -6px left 27px,
-  top -29px right -37px,
-  bottom 70px left 258px,
-  bottom 67px right 252px;
-  background-repeat: no-repeat,
-  no-repeat,
-  no-repeat,
-  no-repeat;
-}
-
-.presentation__title {
-  font-size: 44px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 52px;
-  margin-bottom: 20px;
-}
-
-.presentation__subtitle {
-  text-align: center;
-  padding-left: 5px;
-  margin-bottom: 40px;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-}
-
-.presentation__btn {
-  margin-bottom: 38px;
-}
-
-.presentation__next {
-  font-weight: 500;
-  line-height: 22px;
-}
-
-.presentation__arrows {
-  padding-top: 2px;
-  animation: jump 2s ease-in-out infinite;
-}
-
-.presentation__desc {
-  margin-bottom: 50px;
-}
-
-@keyframes jump {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    /*transform: translateY(20px);*/
-    transform: translateY(-5px);
-  }
-  60% {
-    transform: translateY(20px);
-  }
-  70% {
-    transform: translateY(0px);
-  }
-  80% {
-    transform: translateY(20px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-
-/***********************cards*********************/
-
-.cards {
-}
-
-.cards__list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 5px;
-}
-
-.cards__item {
-  position: relative;
-}
-
-.cards__img {
-}
-
-.cards__desc {
-}
-
-.cards__arrow {
-  width: 62px;
-  height: 20px;
-  position: absolute;
-  right: -30px;
-  top: -13px;
-  background-image: url("/static/img/svg/Arrow23.svg");
-}