conjured header

src/assets/styles/blocks/header.styl

@@ -6,34 +6,35 @@
     padding-bottom 64px
     background-color #F7F2E2
 
-.header__icon
-    margin auto
+    &__icon
+        margin auto
+    &__logo
+        width 133px
+        height 48px
+        margin-left 16px
+        +below(mobile-breakpoint)
+            width: 
 
-.header__logo
-    width 133px
-    height 48px
-    margin-left 16px
+    &__menu
+        height 48px
+        width 48px
+        border-radius 50%
+        background-color white
+        border none
 
-.header__menu
-    height 48px
-    width 48px
-    border-radius 50%
-    background-color white
-    border none
+    &__social-icon
+        display flex
+        height 48px
+        width 48px
+        border-radius 50%
+        background-color white
+        border none
+        margin-right 8px
+        &:last-child
+            margin-right 0
 
-.header__social-icon
-    display flex
-    height 48px
-    width 48px
-    border-radius 50%
-    background-color white
-    border none
-    margin-right 8px
-    &:last-child
+    &__social-icons
+        display flex
+        margin auto
         margin-right 0
-
-.header__social-icons
-    display flex
-    margin auto
-    margin-right 0
-    flex-direction row
+        flex-direction row

src/templates/blocks/achievements/achievements.pug

@@ -1,16 +1,17 @@
-<!-- section.achievements
-  +b.achievements__wrap
-    +e.h2.achievements__subtitle Achievements
-    +e.h1.achievements__title
-      | Design, Followed By
-      | Form &amp; Function
-  +b.div
-    +e.img.achievements__main-illustration(src='./images/achievements/Achievements.png' alt='Achievement')
-    +b.achievements__text
-      +b.achievements__text-one
-        +e.img.achievements__text-one_num(src='./images/achievements/42+.svg' alt='42+')
-        +e.img.achievements__text-one_str(src='./images/achievements/Project-finished.svg' alt='Project finished')
-      .achievements__text-two
-        +e.img.achievements__text-one_num(src='./images/achievements/730.svg' alt='42+')
-        +e.img.achievements__text-one_str(src='./images/achievements/Working-hours.svg' alt='Working-hours')
-    +b.img.achievements__shape(src='./images/general-shape.svg' alt='shape')
+mixin achievements()
+  section.achievements
+    +b.achievements__wrap
+      +e.h2.achievements__subtitle Achievements
+      +e.h1.achievements__title
+        | Design, Followed By
+        | Form &amp; Function
+    +b.div
+      +e.img.achievements__main-illustration(src='../../../assets/images/achievements/Achievements.png' alt='Achievement')
+      +b.achievements__text
+        +b.achievements__text-one
+          +e.img.achievements__text-one_num(src='../../../assets/images/achievements/42+.svg' alt='42+')
+          +e.img.achievements__text-one_str(src='../../../assets/images/achievements/Project-finished.svg' alt='Project finished')
+        .achievements__text-two
+          +e.img.achievements__text-one_num(src='../../../assets/images/achievements/730.svg' alt='730')
+          +e.img.achievements__text-one_str(src='../../../assets/images/achievements/Working-hours.svg' alt='Working-hours')
+      +b.img.achievements__shape(src='../../../assets/images/general-shape.svg' alt='shape')

src/templates/pages/index.pug

@@ -1 +1,6 @@
 extends ../layouts/main
+include ../blocks/achievements/achievements
+
+block content
+  +b.page--main 
+    +achievements()