Ver Fonte

conjured general

DevVad há 3 anos atrás
pai
commit
abeab9198d

+ 84 - 0
src/assets/styles/blocks/general.styl

@@ -0,0 +1,84 @@
+.general
+    background-color #F7F2E2
+    display flex
+    align-items center
+    position relative
+    padding-left 135px
+    padding-right 135px
+    height 100vh
+
+    &__button
+        height 48px
+        width 48px
+        border-radius 50%
+        background-color white
+        border none
+
+    &__button-play
+        z-index 3
+        position absolute
+        width 112px
+        height 112px
+        right 192px
+        bottom 199px
+        object-position right bottom
+        object-fit cover
+        margin 0
+        padding 0
+
+    &__button-triangle
+        z-index 4
+        position absolute
+        width 30px
+        height 38px
+        right 229px
+        bottom 236px
+        object-position right bottom
+        object-fit cover
+        margin 0
+        padding 0
+
+    &__column
+        position absolute
+
+    &__main-illustration
+        width 870px
+        height 624px
+        position absolute
+        right 135px
+        bottom 128px
+        object-position right bottom
+        object-fit cover
+        margin 0
+        padding 0
+        z-index 1
+
+    &__shape
+        z-index 0
+        position absolute
+        width 176px
+        height 176px
+        right 65px
+        bottom 81px
+        object-position right bottom
+        object-fit cover
+        margin 0
+        padding 0
+
+    &__subtitle
+        font-size 18px
+        line-height 32px
+        font-weight 700
+        margin 0
+        padding 0
+        padding-bottom 21px
+
+    &__title
+        font-size 72px
+        line-height 80px
+        font-weight 700
+        z-index 2
+        position relative
+        margin 0
+        padding 0
+        padding-bottom 33px

+ 15 - 0
src/templates/blocks/general/general.pug

@@ -0,0 +1,15 @@
+mixin general()
+    section.general
+        .general__column
+            h2.general__subtitle Architect for You
+            h1.general__title
+                | We Develop
+                | Great Designs
+    button.general__button(type='submit')
+      img(src='./images/button-contacts.svg' alt='Contacts')
+    div
+        img.general__main-illustration(src='./images/Bitmap.png' alt='Chandelier')
+        img.general__button-play(src='./images/button-play.svg' alt='Button Play')
+        button.general__button(type='submit')
+            img.general__button-triangle(src='./images/button-play-triangle.svg' alt='Button Play')
+        img.general__shape(src='./images/general-shape.svg' alt='shape')

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

@@ -3,11 +3,12 @@ include ../blocks/achievements/achievements
 include ../blocks/architect/architect
 include ../blocks/blog/blog
 include ../blocks/experts/experts
-
+include ../blocks/general/general
 
 block content
   +b.page--main 
     +achievements()
     +architect()
     +blog()
-    +experts()
+    +experts()
+    +general()