div.fond 
  span.s1 blog 
  span.s2 card
div.card
  div.thumbnail
    img.left(src="https://cdn2.hubspot.net/hubfs/322787/Mychefcom/images/BLOG/Header-Blog/photo-culinaire-pexels.jpg")
  div.right
    h1 Why you Need More Magnesium in Your Daily Diet
    div.author
      img(src="https://randomuser.me/api/portraits/men/95.jpg")
      h2 Igor MARTY
    div.separator
    p Magnesium is one of the six essential macro-minerals that is required by the body for energy production and synthesis of protein and enzymes. It contributes to the development of bones and most importantly it is responsible for synthesis of your DNA and RNA. A new report that has appeared in theBritish Journal of Cancer, gives you another reason to add more magnesium to your diet...
  h5 12
  h6 JANUARY
  ul
    li
      i.fa.fa-eye.fa-2x
    li
      i.fa.fa-heart-o.fa-2x
    li
      i.fa.fa-envelope-o.fa-2x
    li
      i.fa.fa-share-alt.fa-2x
  div.fab
    i.fa.fa-arrow-down.fa-3x 

@import url(https://fonts.googleapis.com/css?family=Roboto)

/*Just the background stuff*/
span.s1 
  position : absolute
  top : 0
  font-size : 15rem
  font-weight : 800
  text-transform : uppercase
  color : #3C4447

span.s2 
  font-weight : 800
  position : absolute
  bottom : 0
  right : 0
  font-size : 15rem
  text-transform : uppercase
  color : #3C4447

/*My hum... body.. yeah..*/
body 
  background-color: #353B3F
  font-family: 'Roboto', sans-serif

/* The card */
.card
  position : relative
  height: 450px
  width: 900px
  margin : 200px auto
  background-color : #FFF
  -webkit-box-shadow: 10px 10px 93px 0px rgba(0,0,0,0.75)
  -moz-box-shadow: 10px 10px 93px 0px rgba(0,0,0,0.75)
  box-shadow: 10px 10px 93px 0px rgba(0,0,0,0.75)

/* Image on the left side */
.thumbnail 
  float : left
  position : relative 
  left : 30px
  top : -30px
  height : 320px
  width : 530px
  -webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75)
  -moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75)
  box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75)
  overflow: hidden
/*object-fit: cover;*/
/*object-position: center;*/

img.left
  position: absolute
  left: 50%
  top: 50%
  height: auto
  width: 100%
  -webkit-transform: translate(-50%,-50%)
  -ms-transform: translate(-50%,-50%)
  transform: translate(-50%,-50%)

/* Right side of the card */
.right
  margin-left : 590px
  margin-right : 20px

h1
  padding-top : 15px
  font-size : 1.3rem
  color : #4B4B4B

.author
  background-color : #9ECAFF
  height : 30px
  width : 110px
  border-radius : 20px

.author>img
  padding-top : 5px
  margin-left : 10px
  float : left
  height : 20px
  width : 20px
  border-radius : 50%

h2
  padding-top : 8px
  margin-right : 6px
  text-align : right
  font-size : 0.8rem
  color :white

.separator
  margin-top : 10px
  border : 1px solid #C3C3C3

p
  text-align: justify
  padding-top : 10px
  font-size : 0.95rem
  line-height: 150%
  color : #4B4B4B

/* DATE of release*/
h5
  position : absolute
  left : 30px
  bottom : -120px
  font-size : 6rem
  color : #C3C3C3

h6
  position : absolute
  left : 30px
  bottom : -55px
  font-size : 2rem
  color : #C3C3C3

/* Those futur buttons */
ul
  margin-left : 250px

li
  display: inline
  list-style: none
  padding-right: 40px
  color : #7B7B7B

/* Floating action button */
.fab
  position : absolute
  right : 50px
  bottom : -40px
  box-sizing: border-box
  padding-top: 18px
  background-color : #1875D0
  width : 80px
  height : 80px
  color : white
  text-align : center
  border-radius : 50%
  -webkit-box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75)
  -moz-box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75)
  box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75)

/* Not today Js, not today... */