Răsfoiți Sursa

fixed testimonials

DevVad 3 ani în urmă
părinte
comite
e8c2a70167

+ 104 - 0
src/assets/styles/blocks/testimonials.styl

@@ -0,0 +1,104 @@
+.testimonials
+  display flex
+  background-color #D49E31
+  padding 144px 135px
+  justify-content space-between
+
+  &__arrows
+    display flex
+
+  &__arrow_back
+    height 48px
+    width 48px
+    border-radius 100%
+    border none
+
+  &__arrow_forward
+    height 48px
+    width 48px
+    border-radius 100%
+    border none
+
+  &__arrow_right
+    margin-right 8px
+
+  &__card
+    width 715px
+    height 593px
+    padding-bottom -50px
+    position relative
+    z-index 1
+    object-fit cover
+    border-radius 20px
+
+  &__card_commas
+    margin 48px 350px 133px 48px
+
+  &__card_figcaption
+    width 470px
+    height 592px
+    background-color white
+    border-radius 20px
+    justify-content center
+    position relative
+    margin-left -310px
+    z-index 2
+
+  &__card_paragraph
+    width 374px
+    height 228px
+    font-size 16px
+    line-height 32px
+    font-weight 400
+    margin 0 48px 25px
+
+  &__card_subtitle
+    font-size 16px
+    line-height 32px
+    font-weight 400
+    text-align left
+    margin 19px 32px 36px
+    color #333333
+    margin 0 369px 37px 48px
+
+  &__card_title
+    font-size 24px
+    line-height 32px
+    font-weight 700
+    margin 0 255px 3px 48px
+
+  &__cards
+    display flex
+    flex-direction row
+
+  &__shape
+    z-index 0
+    position absolute
+    width 176px
+    height 176px
+    left 450px
+    top 6490px
+    object-position left top
+    object-fit cover
+    margin 0
+    padding 0
+
+  &__subtitle
+    font-size 18px
+    line-height 32px
+    font-weight 700
+    margin 0
+    text-align left
+    padding-bottom 18px
+
+  &__text
+    margin-top 106px
+
+  &__title
+    font-size 56px
+    line-height 64px
+    font-weight 800
+    margin 0
+    padding 0
+    padding-bottom 36px
+    text-align left

+ 28 - 0
src/templates/blocks/testimonials/testimonials.pug

@@ -0,0 +1,28 @@
+mixin testimonials()
+  +b.SECTION.testimonials
+    +e.text
+      +e.H3.subtitle Testimonials
+      +e.H2.title
+        | What
+        br
+        | clients
+        br
+        | say
+      +e.NAV.arrows
+        +e.BUTTON.arrow_back.arrow_right(type='submit')
+          IMG(src='./images/service/back.svg' alt='back')
+        +e.BUTTON.arrow_forward(type='submit')
+          IMG(src='./images/service/forward.svg' alt='forward')
+    +e.cards
+      div
+        +e.IMG.card(src='./images/Testimonials.png' alt='Testimonials')
+        +e.IMG.shape(src='./images/general-shape.svg' alt='shape')
+      div
+        +e.card_figcaption
+          +e.card_commas(src='./images/commas.svg' alt='commas')
+          +e.P.card_paragraph
+            | "As the minuteness of the parts formed a great hindrance to my speed, I resolved, contrary to my first intention, to make the being of a gigantic stature; that is to say, about eight feet in height, and proportionably large.
+            br
+            | After having formed this determination, and having spent some months in successfully collecting and arranging."
+          +e.H2.card_title Nuria Moura
+          +e.H3.card_subtitle Google

+ 2 - 2
src/templates/pages/index.pug

@@ -7,7 +7,7 @@ include ../blocks/general/general
 include ../blocks/service/service
 include ../blocks/numbers/numbers
 include ../blocks/experts/experts
-
+include ../blocks/testimonials/testimonials
 
 block content
   .page--main
@@ -18,5 +18,5 @@ block content
     +experts()
     +achievements()
     +blog()
-
+    +testimonials()
     +architect()