소스 검색

conjured blog

DevVad 3 년 전
부모
커밋
7c0db6decc
3개의 변경된 파일143개의 추가작업 그리고 1개의 파일을 삭제
  1. 107 0
      src/assets/styles/blocks/blog.styl
  2. 33 0
      src/templates/blocks/blog/blog.pug
  3. 3 1
      src/templates/pages/index.pug

+ 107 - 0
src/assets/styles/blocks/blog.styl

@@ -0,0 +1,107 @@
+.blog
+    background-color #F7F2E2
+    padding 74px 135px 80px
+
+    &__arrows
+        display flex
+        justify-content center
+        margin-top 48px
+
+    &__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
+
+    &__cards
+        display flex
+        flex-direction row
+        justify-content center
+
+    &__card
+        background-color #DD514C
+        width 370px
+        height 464px
+        border-radius 20px
+
+        &_month
+            color white
+            font-size 16px
+            line-height 32px
+            font-weight 400
+            padding 0
+            margin 0 234px 192px 32px
+
+        &_num
+            color white
+            font-size 72px
+            line-height 80px
+            font-weight 700
+            padding 0
+            margin 15px 243px 9px 32px
+
+        &_right
+            margin-right 30px
+
+        &_subtitle
+            font-size 16px
+            line-height 32px
+            font-weight 400
+            text-align left
+            color white
+            width 306px
+            margin 0 285px 13px 32px
+            padding 0
+
+        &_title
+            text-align left
+            font-size 24px
+            line-height 32px
+            font-weight 700
+            color white
+            margin 0 32px 40px
+            padding 0
+
+&__shape
+    position absolute
+    z-index 1
+    width 176px
+    height 176px
+    left 1250px
+    top 5575px
+    object-position left top
+    object-fit cover
+    margin 0
+    padding 0
+
+&__subtitle
+    font-size 18px
+    line-height 32px
+    font-weight 700
+    padding 0
+    margin 0
+    margin-bottom 18px
+
+&__text
+    flex-direction column
+    text-align center
+    justify-content center
+    align-items center
+
+&__title
+    text-align center
+    font-size 56px
+    line-height 64px
+    font-weight 700
+    padding 0
+    margin 0
+    margin-bottom 52px

+ 33 - 0
src/templates/blocks/blog/blog.pug

@@ -0,0 +1,33 @@
+mixin blog()
+  section.blog
+    .blog__text
+      h3.blog__subtitle Blog Update
+        h2.blog__title News & Articles
+    .blog__cards
+        .blog__card.blog__card_right
+          p.blog__card_num 30
+          p.blog__card_month October, 2021
+          h3.blog__card_subtitle Interior
+          h2.blog__card_title
+            | Anyhow, and that will
+            | be a rare experience
+        .blog__card.blog__card_right
+          p.blog__card_num 28
+          p.blog__card_month October, 2021
+          h3.blog__card_subtitle Interior
+          h2.blog__card_title
+            | Seems to me that a view
+            | of the heavenly
+        .blog__card.blog__card_right
+          p.blog__card_num 25
+          p.blog__card_month October, 2021
+          h3.blog__card_subtitle Interior
+          h2.blog__card_title
+            | As well as a tour round
+            | the world, should form
+        img.blog__shape(src='./images/general-shape.svg' alt='shape')
+    nav.blog__arrows
+        button.blog__arrow_back.blog__arrow_right(type='submit')
+        img(src='./images/service/back.svg' alt='back')
+        button.blog__arrow_forward(type='submit')
+        img(src='./images/service/forward.svg' alt='forward')

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

@@ -1,8 +1,10 @@
 extends ../layouts/main
 include ../blocks/achievements/achievements
 include ../blocks/architect/architect
+include ../blocks/blog/blog
 
 block content
   +b.page--main 
     +achievements()
-    +architect()
+    +architect()
+    +blog()