API tools faq
paste
Guest User

Untitled

a guest
Apr 21st, 2018
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.35 KB | None | 0 0
raw download clone embed print report
  1. @import "vars"
  2. @import "fonts"
  3. @import "libs"
  4.  
  5. ::placeholder
  6. color: #666
  7.  
  8. *
  9. outline: none
  10. &:focus
  11. outline: none
  12.  
  13. ::selection
  14. background-color: $accent
  15. color: #fff
  16.  
  17. ::-webkit-scrollbar
  18. width: 8px
  19.  
  20. ::-webkit-scrollbar-track
  21. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6)
  22.  
  23.  
  24. ::-webkit-scrollbar-thumb
  25. background-color: $accent
  26. border-radius: 10em
  27.  
  28. html, body
  29. height: 100%
  30.  
  31. body
  32. font-size: 16px
  33. min-width: 320px
  34. color: $dark
  35. position: relative
  36. line-height: 1.65
  37. font-family: $default-font
  38. overflow-x: hidden
  39. input, textarea
  40. border: #666 1px solid
  41. outline: none
  42. &:focus:required:invalid
  43. border-color: red
  44.  
  45. h1, h2
  46. text-align: center
  47. width: 100%
  48. font-size: 30px
  49. font-weight: 900
  50. margin: 0 0 40px 0
  51.  
  52. h2
  53. text-transform: uppercase
  54.  
  55. a
  56. color: $dark
  57. &:hover
  58. text-decoration: none
  59. color: $dark
  60.  
  61. section
  62. padding: 40px 0
  63. overflow-x: hidden
  64.  
  65. section.reverse
  66. background-color: $dark
  67. color: #fff
  68.  
  69. .img-responsive
  70. display: block
  71. max-width: 100%
  72. height: auto
  73.  
  74. .upper
  75. text-transform: uppercase
  76.  
  77. .relative
  78. position: relative
  79.  
  80. .text-center
  81. text-align: center
  82.  
  83. .green
  84. color: $green !important
  85.  
  86. /*------------------BASE---------------------*/
  87. .subhead
  88. display: block
  89. text-align: center
  90. font-size: 24px
  91. margin: 0 0 40px 0
  92. mark
  93. background: none
  94. color: $accent
  95. font-weight: 800
  96. .fluid-link
  97. position: absolute
  98. display: block
  99. top: 0
  100. left: 0
  101. bottom: 0
  102. right: 0
  103. /*BUTTONS*/
  104. .btn-order
  105. background-color: $accent
  106. border: none
  107. cursor: pointer
  108. color: #fff
  109. border-radius: 8px
  110. padding: 7px 35px
  111. display: inline-block
  112. &:hover, &:focus
  113. color: #fff
  114. outline: none
  115. background-color: lighten($accent, 5%)
  116. &:active
  117. color: #fff
  118. background-color: darken($accent, 5%)
  119. /*EOF BUTTONS*/
  120.  
  121. /*------------------EOF BASE-----------------*/
  122.  
  123. /*main-header*/
  124. .main-header
  125. background-color: #fff
  126. padding: 15px 0
  127. position: relative
  128. .btn-menu
  129. position: absolute
  130. display: none
  131. right: 15px
  132. top: 37px
  133. width: 40px
  134. &-active
  135. .btn-menu-bar
  136. background-color: transparent
  137. &::before
  138. transform: rotateZ(225deg) translateY(-16px)
  139. &::after
  140. transform: rotateZ(-225deg) translateY(16px)
  141. &-bar
  142. height: 3px
  143. background-color: $dark
  144. width: 100%
  145. transition: all $trans
  146. position: relative
  147. &::before, &::after
  148. transition: all $trans
  149. content: ''
  150. position: absolute
  151. background-color: $dark
  152. height: 3px
  153. width: 100%
  154. top: -12px
  155. &::after
  156. top: 12px
  157. .top-contacts
  158. display: flex
  159. justify-content: flex-end
  160. width: 100%
  161. list-style-type: none
  162. padding: 0
  163. margin: 0
  164. >*
  165. margin: 0 10px
  166. &:last-child
  167. margin-right: 0
  168. i
  169. margin-right: 8px
  170. .main-menu
  171. display: flex
  172. width: 100%
  173. justify-content: flex-start
  174. margin-top: 10px
  175. list-style-type: none
  176. padding: 0
  177. margin: 15px 0
  178. a
  179. color: $dark
  180. padding: 0 10px
  181. text-decoration: none
  182. transition: all $trans
  183. border-bottom: 2px solid transparent
  184. &:hover
  185. color: $accent
  186. border-bottom: 2px solid $accent
  187.  
  188. /*EOF main-header*/
  189.  
  190. /*.s-page-title*/
  191. .s-page-title
  192. padding: 50px 0 50px 0
  193. h1
  194. font-size: 72px
  195. font-weight: 800
  196. margin: 0
  197. line-height: 1.2
  198. p
  199. font-weight: 800
  200. font-size: 30px
  201. margin: 0
  202. .fas
  203. font-size: 100px
  204. /*EOF .page-title*/
  205.  
  206. /*.services*/
  207. .services-grid
  208. display: grid
  209. grid-template-columns: 1fr 1fr
  210. grid-gap: $gutter
  211. &-item
  212. height: 320px
  213. width: 100%
  214. background-size: cover
  215. background-position: center center
  216. position: relative
  217. transition: all $trans
  218. &:hover
  219. filter: brightness(70%)
  220. &-text
  221. position: absolute
  222. left: 0
  223. bottom: 0
  224. width: 100%
  225. background-color: rgba(0,0,0,.5)
  226. margin: 0
  227. padding: 6px 20px
  228. color: #fff
  229. font-size: 24px
  230. font-weight: bold
  231. &:last-child
  232. grid-column: 1 / 3
  233. /*EOF .services*/
  234.  
  235. /*.s-features*/
  236. .features
  237. display: grid
  238. width: 100%
  239. grid-gap: $gutter
  240. grid-template-columns: repeat(5, 1fr)
  241. &-item
  242. width: 165px
  243. margin: 0 auto
  244. .fas
  245. color: $accent
  246. font-size: 36px
  247. h3
  248. margin: 12px 0
  249. font-size: 16px
  250. p
  251. font-size: 14px
  252. font-weight: 100
  253. /*EOF .s-features*/
  254.  
  255. /*.s-reviews*/
  256. .s-reviews
  257. background-size: cover
  258. background-position: center center
  259. position: relative
  260. h2
  261. position: relative
  262. z-index: 1
  263. &::after
  264. position: absolute
  265. content: ''
  266. top: 0
  267. left: 0
  268. bottom: 0
  269. right: 0
  270. background-color: rgba(0,0,0,.8)
  271. .reviews
  272. width: 100%
  273. position: relative
  274. z-index: 1
  275. &-slide
  276. display: grid !important
  277. padding: 15px
  278. overflow: hidden
  279. grid-template-columns: 50% 50%
  280. grid-gap: $gutter
  281. &-descr
  282. padding-right: 30px
  283. h3
  284. font-size: 24px
  285. img
  286. border: 3px solid #fff
  287. max-width: 100%
  288. height: auto
  289. .slick-arrow
  290. background-color: #fff
  291. height: 36px
  292. width: 36px
  293. &:hover, &:focus
  294. background-color: darken(#fff, 10%)
  295. &::before
  296. font-size: 20px
  297. content: ''
  298. font-family: 'fas-x'
  299. color: $dark
  300. .slick-prev::before
  301. content: ''
  302. .slick-next::before
  303. content: ''
  304. /*EOF .s-reviews*/
  305.  
  306. /*.main-footer*/
  307. .main-footer
  308. border-top: 1px solid #eee
  309. overflow-x: hidden
  310. padding: 25px 0 15px 0
  311. position: relative
  312. .main-menu
  313. margin-bottom: 15px
  314. .pay-methods
  315. list-style-type: none
  316. padding: 0
  317. margin: 10px 0
  318. display: flex
  319. justify-content: space-between
  320.  
  321. .vk-widget-wrap
  322. margin: auto
  323. margin-top: 10px
  324. background-color: $dark
  325. width: 200px
  326. overflow: hidden
  327.  
  328. .bottom-contacts
  329. text-align: right
  330. margin-top: 10px
  331. h3
  332. font-size: 13px
  333. >div
  334. font-size: 12px
  335. i
  336. margin-right: 5px
  337.  
  338. .bold14
  339. font-size: 14px
  340. font-weight: bold
  341.  
  342. .map-link
  343. img
  344. margin-top: 10px
  345. width: 150px
  346.  
  347.  
  348. .copy
  349. font-size: 12px
  350. margin-left: 15px
  351. position: absolute
  352. left: 0
  353. bottom: 0
  354. /*EOF main-footer*/
  355.  
  356. /*.s-header*/
  357. .s-header
  358. height: 528px
  359. position: relative
  360. &-title
  361. width: 46%
  362. h1
  363. font-size: 48px
  364. text-align: left
  365. margin-bottom: 0
  366. line-height: 1.3
  367. p
  368. color: $gray
  369. font-size: 24px
  370. font-weight: 500
  371. .halva
  372. display: flex
  373. margin-top: 30px
  374. align-items: flex-end
  375. span
  376. margin-left: 15px
  377. max-width: 225px
  378. color: $gray
  379. &-bg
  380. height: 100%
  381. background-size: cover
  382. background-position: center center
  383. width: 54%
  384. position: absolute
  385. right: 0
  386. top: 0
  387. display: flex
  388. align-items: center
  389. justify-content: flex-start
  390. &::before
  391. content: ''
  392. position: absolute
  393. width: 0
  394. height: 0
  395. border-right: 195px solid transparent
  396. border-top: 528px solid #fff
  397. z-index: 1
  398. left: 0
  399. bottom: 0
  400. &-text
  401. background-color: rgba(43, 36, 36, .83)
  402. color: #fff
  403. padding: 20px 60px 20px 200px
  404. margin: auto
  405. font-size: 18px
  406.  
  407. /*EOF .s-header*/
  408.  
  409. /*.s-advantages*/
  410. .adv-item
  411. display: flex
  412. margin-bottom: $gutter
  413. flex-direction: column
  414. align-items: center
  415. justify-content: space-around
  416. text-align: center
  417. i
  418. font-size: 72px
  419. span
  420. font-size: 17px
  421. font-weight: bold
  422. position: relative
  423. margin: 15px 0
  424. line-height: 1.5
  425. &::after
  426. position: absolute
  427. content: ''
  428. background-color: $accent
  429. height: 3px
  430. width: 80px
  431. bottom: -4px
  432. left: 0
  433. right: 0
  434. margin: auto
  435. &.green
  436. color: $dark !important
  437. &::after
  438. background-color: $green
  439. p
  440. font-weight: 300
  441. /*EOF .s-advantages*/
  442.  
  443. /*.s-why*/
  444. .s-why
  445. padding: 0 15px 0 0
  446. display: grid
  447. grid-template-columns: 50% 50%
  448. &-bg
  449. background-size: cover
  450. background-position: center center
  451. position: relative
  452. display: flex
  453. justify-content: flex-end
  454. align-items: center
  455. &::before
  456. content: ''
  457. position: absolute
  458. top: 0
  459. bottom: 0
  460. right: 0
  461. left: 0
  462. background-color: rgba(0,0,0, .75)
  463. &-text
  464. z-index: 1
  465. color: #fff
  466. font-weight: bold
  467. font-size: 48px
  468. margin: 0
  469. padding-right: 20px
  470. line-height: 1.5
  471. max-width: 450px
  472. &-content
  473. padding: $gutter
  474. >p
  475. font-size: 18px
  476. .check-list
  477. list-style-type: none
  478. padding: 0
  479. margin: $gutter 0
  480. li
  481. &::before
  482. content: ''
  483. font-family: 'fas-x'
  484. margin-right: 8px
  485. color: $accent
  486.  
  487. /*EOF .s-why*/
  488.  
  489. /*.s-catalog*/
  490. .s-catalog
  491. padding-bottom: 0
  492. border-bottom: 2px solid #F1F1F1
  493. h2
  494. margin-bottom: 0
  495. .catalog-link-wrap
  496. transition: all $trans
  497. padding: 40px 80px
  498. position: relative
  499. text-align: center
  500. display: flex
  501. flex-direction: column
  502. align-items: center
  503. &:hover
  504. background-color: #F1F1F1
  505. img
  506. height: 28px
  507. p
  508. color: $gray
  509. /*EOF .s-catalog*/
  510.  
  511. /*.s-work*/
  512. .s-work-list
  513. display: flex
  514. flex-wrap: wrap
  515. justify-content: space-around
  516. align-items: flex-start
  517. &-item
  518. margin-bottom: $gutter
  519. max-width: 165px
  520. display: flex
  521. flex-direction: column
  522. justify-content: center
  523. align-items: center
  524. text-align: center
  525. .circle
  526. height: 120px
  527. width: 120px
  528. border-radius: 10em
  529. background-color: #fff
  530. border: 3px solid $dark
  531. position: relative
  532. display: flex
  533. justify-content: center
  534. align-items: center
  535. i
  536. font-size: 30px
  537. p
  538. margin: 15px 0 0 0
  539. /*EOF .s-work*/
  540.  
  541. /*.s-articles*/
  542. .article
  543. &-descr
  544. padding-left: 15px
  545. border-left: 3px solid $accent
  546. h3
  547. margin-top: 15px
  548. font-size: 24px
  549. font-weight: bold
  550. /*EOF .s-articles*/
  551.  
  552. /*.s-furniture*/
  553. .s-furniture
  554. &-item
  555. height: 400px
  556. background-size: cover
  557. background-position: center center
  558. display: flex
  559. flex-direction: column
  560. justify-content: center
  561. align-items: center
  562. color: #fff
  563. position: relative
  564. text-align: center
  565. padding: 60px 100px
  566. margin: $gutter/2 0
  567. &::before
  568. content: ''
  569. background-color: $dark
  570. opacity: .7
  571. position: absolute
  572. left: 0
  573. right: 0
  574. bottom: 0
  575. top: 0
  576. >*
  577. z-index: 1
  578. h3
  579. font-size: 30px
  580. font-weight: 300
  581. p
  582. font-weight: 300
  583. font-size: 18px
  584.  
  585. /*EOF .s-furniture*/
  586.  
  587. /*.s-products*/
  588. .s-products
  589. &-item
  590. height: 200px
  591. border: 3px solid $dark
  592. position: relative
  593. margin: $gutter/2 0
  594. p
  595. position: absolute
  596. bottom: 0
  597. left: 0
  598. right: 0
  599. padding: 4px 12px
  600. background-color: $dark
  601. color: #fff
  602. text-align: center
  603. margin: 0
  604. /*EOF .s-products*/
  605.  
  606. /*.img-catalog*/
  607. .mix-container
  608. max-height: 50vh
  609. overflow-y: scroll
  610. box-shadow: inset 0 5px 10px rgba(0,0,0,.1)
  611. .img-catalog
  612. .mix
  613. margin: $gutter/2 0
  614. img
  615. box-shadow: 0 3px 12px rgba(0,0,0,.2)
  616. &-buttons
  617. list-style-type: none
  618. padding: 0
  619. margin: 0
  620. display: flex
  621. flex-wrap: wrap
  622. >li
  623. margin: 0 5px
  624. &:first-child
  625. margin-left: 0
  626. .img-cat-button
  627. background: none
  628. border: none
  629. margin: $gutter/2 0
  630. padding: 0 $gutter/2
  631. border-bottom: 2px solid transparent
  632. transition: all $trans
  633. &:focus
  634. outline: none
  635. &:hover, &.active
  636. cursor: pointer
  637. color: $accent
  638. border-bottom: 2px solid $accent
  639. /*EOF .img-catalog*/
  640.  
  641. /*.s-contacts*/
  642. .f-order
  643. display: flex
  644. flex-direction: column
  645. align-items: flex-start
  646. max-width: 360px
  647. margin: auto auto 30px auto
  648. input, textarea, select
  649. width: 100%
  650. background-color: #f1f1f1
  651. border: 1px solid $dark
  652. font-size: 18px
  653. padding: 6px 14px
  654. margin-bottom: 15px
  655. label
  656. margin-bottom: 0
  657. textarea
  658. resize: none
  659. line-height: 1.3
  660. .btn-order
  661. margin: auto
  662.  
  663. /*EOF .s-contacts*/
  664.  
  665. /*.s-rassrochka*/
  666. .r-description
  667. margin-top: 50px
  668. p
  669. text-align: left
  670. font-size: 18px
  671. font-weight: 400
  672.  
  673. .r-item
  674. background-color: $dark
  675. height: 300px
  676. max-width: 360px
  677. width: 100%
  678. margin: auto
  679. position: relative
  680. color: #fff
  681. display: flex
  682. flex-direction: column
  683. align-items: center
  684. justify-content: flex-start
  685. padding: 30px 25px 25px 25px
  686. box-shadow: 0 3px 21px rgba(0,0,0, .2)
  687. margin: $gutter/2 auto
  688. &::after
  689. content: ''
  690. height: 1px
  691. background-color: #fff
  692. position: absolute
  693. top: 144px
  694. left: 0
  695. right: 0
  696. i
  697. font-size: 66px
  698. margin-bottom: 20px
  699. span
  700. font-size: 24px
  701. font-weight: 800
  702. ul
  703. list-style-type: none
  704. padding: 0
  705. margin: 0
  706. font-size: 18px
  707. /*EOF .s-rassrochka*/
  708.  
  709. @import "media" // Always at the end
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!