jekyll-theme-saifas-it 0.1.0

data/_sass/buttons.sass

@@ -0,0 +1,52 @@
+/*Buttons*/
+.btn
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 18px
+  background-color: #F0F0F0
+  padding: 0 18px
+  margin: 0 18px 4px 0
+  width: fit-content
+  text-decoration: none
+  font-family: var(--main-font-family)
+  height: 40px
+  color: var(--font-color)
+  box-shadow: var(--box-shadow-btn)
+  -webkit-border-radius: 3px
+  border-radius: 3px
+  border: 0
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:visited
+    color: var(--font-color)
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+  &.btn--purchase
+    background-color: #55d96b
+    &:hover
+      background-color: #55d96b

data/_sass/initialize.sass

@@ -0,0 +1,17 @@
+@import "_base"
+@import "_variables"
+@import "_layout"
+@import "preloader"
+@import "buttons"
+@import "media-requests"
+
+@import "items/contact-us-modal/styles.sass"
+@import "items/headline/styles.sass"
+@import "items/card/styles.sass"
+@import "items/card-activities/styles.sass"
+@import "items/contact-link-container/styles.sass"
+@import "items/circles/styles.sass"
+@import "items/page-section/styles.sass"
+@import "items/circle-chart/styles.sass"
+
+@import "pages/details/index.sass"

data/_sass/items/card/styles.sass

@@ -0,0 +1,97 @@
+.card
+  display: flex
+  flex-direction: column
+  background-color: var(--color-grey)
+  width: 300px
+  height: 300px
+  margin: 10px
+  padding: 20px
+  border-radius: 5px
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+  .card__top-section
+    display: flex
+    .top-section__icon
+      img
+        height: 64px
+        width: 64px
+        border-radius: 10px
+    .top-section__title
+      display: flex
+      flex-direction: column
+      padding-left: 10px
+      font-family: var(--main-font-family)
+      font-size: 20px
+      color: var(--text-color)
+      width: 100%
+    .top-section__description
+      font-size: 14px
+      font-weight: 400
+      margin-top: 6px
+      img
+        width: 14px
+        height: 14px
+
+.card__main-section
+  display: flex
+  flex-direction: column
+  margin-top: 10px
+
+.main-section__description
+  font-size: 16px
+  color: var(--text-color)
+
+.card__buttons-section
+  display: none
+  height: 100%
+  align-items: flex-end
+
+.card__buttons-section--report
+  display: none
+  height: 100%
+  align-items: center
+  flex-direction: column
+  justify-content: flex-end
+  .buttons-section__top
+    width: 100%
+    a
+      margin: 0 5px
+      width: auto
+      padding: 0
+  .buttons-section__bottom
+    margin-top: 10px
+    width: 100%
+    display: flex
+    a
+      margin: 0
+      width: 100%
+      margin: 0 5px
+
+.card:hover
+  .card__buttons-section
+    display: flex
+  .card__buttons-section--report
+    display: flex

data/_sass/items/card-activities/styles.sass

@@ -0,0 +1,50 @@
+.card-activities
+  background: var(--color-grey)
+  height: 240px
+  width: 320px
+  border-radius: 5px
+  margin: 10px
+  display: flex
+  padding-top: 20px
+  flex-direction: column
+  color: var(--text-color)
+  font-size: 20px
+  font-family: var(--main-font-family)
+  text-decoration: none
+  text-align: center
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+  i
+    margin-top: 20px
+
+.card-activities__tags
+  font-family: var(--main-font-family)
+  font-size: 16px
+  color: var(--text-color)
+  margin-top: 30px
+  display: flex
+  padding-left: 20px
+  justify-content: flex-start

data/_sass/items/circle-chart/styles.sass

@@ -0,0 +1,6 @@
+.chart-container
+  display: flex
+  flex: 1
+  align-items: center
+#container
+  margin: 0 auto

data/_sass/items/circles/styles.sass

@@ -0,0 +1,79 @@
+.circle-container
+  width: 100%
+  height: 100%
+  display: flex
+  align-items: center
+  justify-content: center
+  flex-direction: column
+  a
+    margin-top: 20px
+
+.circle
+  margin: 10px
+  display: flex
+  align-items: center
+  justify-content: center
+  max-width: 300px
+  width: 300px
+  max-height: 300px
+  height: 300px
+  border-radius: 50%
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  background: var(--color-grey)
+  color: var(--text-color)
+  font-size: 20px
+  text-decoration: none
+  z-index: 2
+  &:visited
+    color: var(--text-color)
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+.center-circles-btn
+  background: radial-gradient(circle at 0 100%, rgba(0,0,0,0) 150px, #e3e3e3 10px), radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 150px, #e3e3e3 10px), radial-gradient(circle at 100% 0, rgba(0,0,0,0) 150px, #e3e3e3 10px), radial-gradient(circle at 0 0, rgba(0,0,0,0) 150px, #e3e3e3 10px)
+  background-position: bottom left, bottom right, top right, top left
+  background-size: 50% 50%
+  background-repeat: no-repeat
+  font-size: 16px
+  line-height: 22px
+  text-align: center
+  display: flex
+  height: 300px
+  width: 300px
+  align-items: center
+  justify-content: center
+  position: absolute
+  top: 25%
+  color: var(--text-color)
+  text-decoration: none
+  font-size: 20px
+  line-height: 26px
+  cursor: pointer
+  transition: background .3s
+  &:hover
+    background: radial-gradient(circle at 0 100%, rgba(0,0,0,0) 150px, #f0f0f0 10px), radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 150px, #f0f0f0 10px), radial-gradient(circle at 100% 0, rgba(0,0,0,0) 150px, #f0f0f0 10px), radial-gradient(circle at 0 0, rgba(0,0,0,0) 150px, #f0f0f0 10px)
+    background-position: bottom left, bottom right, top right, top left
+    background-size: 50% 50%
+    background-repeat: no-repeat
+    transition: background .3s

data/_sass/items/contact-link-container/styles.sass

@@ -0,0 +1,16 @@
+.body-separator
+  height: 2px
+  background-color: var(--color-grey)
+  margin: 20px
+
+.contact-link-container
+  display: flex
+  align-items: center
+  justify-content: center
+  border: 2px solid var(--color-grey)
+  height: 64px
+  border-radius: 5px
+
+.contact-link-container__link
+  font-style: normal
+  margin: 0 20px

data/_sass/items/contact-us-modal/styles.sass

@@ -0,0 +1,122 @@
+#modal
+  display: none
+  position: fixed
+  top: 0
+  height: 100%
+  width: 100%
+  background-color: black
+  opacity: 0.4
+  z-index: 10
+
+.modalBody
+  font-family: var(--main-font-family)
+  color: var(--text-color)
+  position: fixed
+  display: none
+  top: 10%
+  width: 100%
+  max-width: 600px
+  max-height: 700px
+  left: 50%
+  transform: translate(-50%, 0)
+  padding: 0 20px 20px 20px
+  background-color: #fff
+  border-radius: 5px
+  overflow: auto
+  z-index: 11
+
+.modal-close
+  cursor: pointer
+  position: absolute
+  right: 10px
+  top: 10px
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -o-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -ms-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -ms-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  -webkit-transition-delay: 0s
+  -moz-transition-delay: 0s
+  -o-transition-delay: 0s
+  -ms-transition-delay: 0s
+  transition-delay: 0s
+  -webkit-transform: translateY(0px)
+  -moz-transform: translateY(0px)
+  -o-transform: translateY(0px)
+  -ms-transform: translateY(0px)
+  transform: translateY(0px)
+  cursor: pointer
+  &:hover
+    -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2)
+    background: rgba(200,200,200,0.2)
+    -webkit-transform: translateY(-1px)
+    -moz-transform: translateY(-1px)
+    -o-transform: translateY(-1px)
+    -ms-transform: translateY(-1px)
+    transform: translateY(-1px)
+
+.modal-headline
+  font-size: 22px !important
+
+/*Form styles*/
+
+.contact-form
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+
+
+.form-elem__container
+  width: 100%
+  display: flex
+  flex-direction: column
+  overflow: auto
+  margin: 0 0 20px 0
+
+
+.form-elem
+  display: flex
+  flex-direction: column
+  margin: 5px
+  input, textarea, select
+    height: 36px
+    border-radius: 5px
+    border: 2px solid #f0f0f0
+    background: transparent
+    color: var(--text-color)
+    font-family: var(--main-font-family)
+    font-size: 16px
+    padding: 0 10px
+  textarea
+    padding: 10px
+    min-height: 100px
+  input:active
+    border: 2px solid var(--text-color)
+  label
+    font-weight: 600
+    margin-bottom: 3px
+
+.three-form-elements
+  display: grid
+  grid-template-columns: 33.3% 33.3% 33.3%
+  .form-elem
+    display: flex
+
+.two-form-elements
+  display: grid
+  grid-template-columns: 50% 50%
+  .form-elem
+    display: flex
+
+.form-radio-buttons-container
+  display: flex
+  align-items: center
+  input
+    margin-right: 4px
+  .radio-button-text
+    margin-right: 10px
+
+.form-current-page
+  display: none

data/_sass/items/headline/styles.sass

@@ -0,0 +1,8 @@
+.headline
+  margin: 18px
+  /* flex: 1 */
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 30px
+  color: var(--text-color)

data/_sass/items/page-section/styles.sass

@@ -0,0 +1,11 @@
+.page__section
+  display: flex
+  flex-direction: column
+  flex: 1
+  min-height: 850px
+  position: relative
+  margin: 0 20px
+  padding-top: 50px
+  margin-top: -50px
+  -webkit-background-clip: content-box
+  background-clip: content-box

data/_sass/media-requests.sass

@@ -0,0 +1,45 @@
+/*Media requests*/
+@media (max-width: 560px)
+  .details__top
+    flex-direction: column
+
+  .details__top-buttons
+    margin: 0
+    margin-top: 20px
+
+  .details__top-text
+    margin-left: 0
+
+@media (max-width: 1069px)
+  #lightgallery
+    a
+      img
+        width: 100%
+        height: auto
+
+@media (max-width: 600px)
+  .header-navbar
+    display: none
+
+@media (max-width: 680px)
+  .circle-container
+    max-width: 500px
+
+  .circle
+    width: 200px
+    height: 200px
+    font-size: 15px
+
+  .center-circles-btn
+    transform: scale(0.7)
+    top: 15.5%
+
+@media (max-width: 460px)
+  .center-circles-btn
+    transform: scale(0.5)
+    top: 5.5%
+
+  .circle
+    width: 150px
+    height: 150px
+    font-size: 12px

data/_sass/pages/details/index.sass

@@ -0,0 +1,60 @@
+.details__top
+  margin: 20px 20px 0 20px
+  display: flex
+  background-color: var(--color-grey)
+  padding: 20px
+  .details__top-image
+    img
+      width: 150px
+      height: auto
+  .details__top-text
+    margin-left: 20px
+    a
+      margin-top: 20px
+  .details__top-title
+    color: var(--text-color)
+    font-size: var(--font-size-title)
+  .details__top-description
+    color: var(--text-color)
+    font-size: var(--font-size-description)
+    margin-top: 10px
+    img
+      height: 14px
+      width: 14px
+  .details__top-cost
+    margin: 10px 0
+    display: flex
+    flex-direction: row
+    font-size: 16px
+    font-family: var(--main-font-family)
+    color: var(--text-color)
+    .cost
+      margin-left: 4px
+      font-weight: 700
+  .get-it-now-button
+    background-color: #0271b6
+    color: white
+    &:hover
+      background-color: #0271b6
+  .details__top-buttons
+    margin-left: 20px
+    .btn
+      margin-bottom: 15px
+.details-bottom__description
+  margin: 20px
+  display: flex
+  flex-direction: column
+  font-family: var(--main-font-family)
+  color: var(--text-color)
+  ul
+    padding-left: 20px
+  .description__title
+    font-size: 18px
+    font-weight: 600
+    margin-bottom: 20px
+    &:not(:first-child)
+      margin-top: 20px
+.details-bottom__description-text
+  font-size: 16px
+  font-weight: 400
+  margin-top: 10px

data/_sass/preloader.sass

@@ -0,0 +1,57 @@
+.preloader
+  /*фиксированное позиционирование*/
+  position: fixed
+  /* координаты положения */
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  /* фоновый цвет элемента */
+  background: #e0e0e0
+  /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */
+  z-index: 1001
+
+.preloader__row
+  position: relative
+  top: 50%
+  left: 50%
+  width: 70px
+  height: 70px
+  margin-top: -35px
+  margin-left: -35px
+  text-align: center
+  animation: preloader-rotate 2s infinite linear
+
+.preloader__item
+  position: absolute
+  display: inline-block
+  top: 0
+  background-color: #337ab7
+  border-radius: 100%
+  width: 35px
+  height: 35px
+  animation: preloader-bounce 2s infinite ease-in-out
+  &:last-child
+    top: auto
+    bottom: 0
+    animation-delay: -1s
+
+@keyframes preloader-rotate
+  100%
+    transform: rotate(360deg)
+
+@keyframes preloader-bounce
+  0%,
+  100%
+    transform: scale(0)
+  50%
+    transform: scale(1)
+
+.loaded_hiding
+  .preloader
+    transition: 0.3s opacity
+    opacity: 0
+
+.loaded
+  .preloader
+    display: none