Bläddra i källkod

fixed portfolio

DevVad 3 år sedan
förälder
incheckning
9b054434f1

+ 1 - 1
src/assets/styles/blocks/architect.styl

@@ -1,5 +1,5 @@
 .architect
-    background-image url(../../images/home.png)
+    background-image url(../images/home.png)
     background-color #8b95c9
     padding 74px 422px 96px
     margin 0

+ 74 - 0
src/assets/styles/blocks/portfolio.styl

@@ -0,0 +1,74 @@
+.portfolio
+  background-color #F2F2F2
+  padding-top 74px
+  padding-bottom 96px
+
+  &__figcaption
+    background-image url(../images/portfolio/figcaption.png)
+    width 470px
+    height 176px
+    margin-top -220px
+    margin-left 30px
+    position relative
+    z-index 1
+
+  &__figcaption_subtitle
+    font-size 20px
+    line-height 32px
+    font-weight 400
+
+  &__figcaption_title
+    font-size 40px
+    line-height 48px
+    font-weight 700
+    margin 0
+    padding 0
+    padding-top 42px
+    margin-bottom 15px
+
+  &__image-margins
+    width 205px
+    height 544px
+    z-index 1
+    position relative
+
+  &__image
+    width 970px
+    height 544px
+    text-align center
+    padding 0
+    margin-left 30px
+    margin-right 30px
+    z-index 1
+    position relative
+
+  &__images
+    display flex
+    justify-content space-between
+
+  &__shape
+    position absolute
+    z-index 0
+    right 168px
+    top 2040px
+
+  &__subtitle
+    text-align center
+    font-size 18px
+    line-height 32px
+    font-weight 700
+    padding 0
+    margin 0
+    margin-bottom 18px
+
+  &__text
+    margin 42px 152px 39px 48px
+
+  &__title
+    text-align center
+    font-size 56px
+    line-height 64px
+    font-weight 700
+    padding 0
+    margin 0
+    margin-bottom 52px

+ 2 - 2
src/assets/styles/blocks/service.styl

@@ -17,14 +17,14 @@
     height 48px
     width 48px
     border-radius 100%
-    background-image url(../../images/service/oval.svg)
+    background-image url(../images/service/oval.svg)
     border none
 
   &__arrow_forward
     height 48px
     width 48px
     border-radius 100%
-    background-image url(../../images/service/oval.svg)
+    background-image url(../images/service/oval.svg)
     border none
 
   &__arrow_right

+ 16 - 0
src/templates/blocks/portfolio/portfolio.pug

@@ -0,0 +1,16 @@
+mixin portfolio()
+  +b.SECTION.portfolio
+    +e.H3.subtitle Our Portfolio
+    +e.H2.title Fascinating Projects
+    +e.images
+      div
+        +e.IMG.image-margins(src='../../../assets/images/portfolio/left-foto.png' alt='Beach House')
+      div
+        +e.IMG.image(src='../../../assets/images/portfolio/main-foto.png' alt='building')
+        +e.IMG.shape(src='../../../assets/images/portfolio/shape.svg' alt='shape')
+        +e.figcaption
+          +e.text
+            +e.H2.figcaption_title Beach House
+            +e.H3.igcaption_subtitle Interior Design
+      div
+        +e.IMG.image-margins(src='../../../assets/images/portfolio/right-foto.png' alt='building')

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

@@ -5,11 +5,13 @@ include ../blocks/blog/blog
 include ../blocks/experts/experts
 include ../blocks/general/general
 include ../blocks/service/service
+include ../blocks/portfolio/portfolio
 
 block content
   .page--main 
     +general()
     +service()
+    +portfolio()
     +achievements()
     +architect()
     +blog()