Personal Profile // Keanu Reeves

index.pug

// Keanu Reeves never looked so good :-)

// Inspired by this magazine layout:
// https://s-media-cache-ak0.pinimg.com/564x/2e/f7/8d/2ef78d1f44a6ade085bb38810104435a.jpg



.page-wrapper
  aside
    h1 Man declines prison release
    p.flourish ~
    p.bio Tuesday’s massive cyber-attack on Fiddler’s Green Entertainment left millions of movie streamers in the dark for hours.
    br
    p.bio Join us as we pull the curtain back on one of the biggest cyber-crimes of the year.


  article
    .author
      p Jenny Rourke
      p News Correspondent
    .photographer
      p Photo –
      p <span>Photo by James Taylor</span>
    .image
      img(src="http://wallpaperlayer.com/img/2015/7/actor-wallpaper-4072-4293-hd-wallpapers.jpg")
    .text
      p  Arnaud Lefevre was released from prison this weekend after nearly a decade behind bars. His sudden freedom came as a surprise, as Lefevre had served less than half of his sentence for aggravated manslaughter. He still feels a deep remorse for his crime, despite the fact that authorities are now saying it never happened.

      p  “I don’t understand,” he told waiting reporters outside of Fleury-Mérogis Prison upon his release. “I am a murderer! I killed my son!”
      p “I beg to differ,” Samuel Lefevre, Arnaud’s alleged victim, told us by phone. “I’m very much still alive.”
      p Although no body was ever found, Arnaud was convicted based on his own detailed confession, as well as blood splatter evidence in the home the two shared in Barfleur, Manche. Arnaud, a hunter with a category C gun license, claimed to have shot his son shortly after learning Samuel was gay. His account of the crime is chilling.

      p “I felt like my mind was in a fog in the hours after he told me. When I loaded my gun, I could not think of Samuel as my son, but as something that had taken over and destroyed my son,” the transcript reads. “He did not turn to look at me as I entered his room. I thought, if he were still my son, he would at least acknowledge me, in spite of the anger. Neither of us said anything. I simply raised the weapon at the back of his skull to ensure I hit his brain, where I suspected the infection had taken root, and I squeezed the trigger.”

      p Lefevre then claimed to have dumped the body in the English Channel before being overcome with grief. That’s when he went to police and confessed.
      p Authorities said evidence at the scene was consistent with his account of events. Coupled with the sudden disappearance of Samuel, a convicted was easily secured.
      p When reached for comment, prosecutor Edwige Mercier maintained that Lefevre is still a guilty man. 
      p “We are sure, based on the facts, that Arnaud Lefevre killed somebody,” said Mercier. “I assure you, when we find out who, Lefevre will be brought back to justice.”
      p Mercier’s case and Lefevre’s conviction were called into question last month. While writing an article on crimes against the gay community, a reporter researching Lefevre’s story discovered a shocking fact: Samuel Lefevre was alive and well, living in Avignon. After authorities confirmed he was indeed the son of Arnaud Lefevre, they began the process to overturn the conviction.
      p Lefevre was uncooperative during the process, maintaining that he was a killer and belonged behind bars.
      p When asked whether he’d like to speak or reconcile with his father, Samuel replied, “No. He may not have murdered me, but I know that he would have. He killed me in his heart, and that is enough. I no longer have any place in mine for the man.”

  
footer

personal-profile-keanu-reeves.markdown

Personal Profile // Keanu Reeves

A personal profile page utilizing normative CSS. Includes a split-screen, fixed width sidebar and CSS columns.

A Pen by Isaac Bell on CodePen.

License.

style.sass

body
  margin: 0
  font-family: 'Cormorant Garamond', serif
  font-size: 18px
  
.page-wrapper
  display: block
  width: 100%
 
@media (min-width: 700px)
  .page-wrapper
    display: flex
    
   
aside
  background:
    color: #222
  color: white
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  padding: 20px 0 40px
  
@media (min-width: 700px)
  aside
    background:
      color: #222
    color: white
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    height: 100vh
    position: fixed
    top: 0
    left: 0
    width: 50%
    flex: 0 0 50%
    padding: 0

h1,
.flourish
  font-size: 6vw
  margin: 10px 0
  font-family: 'Oxygen', sans-serif
  text-align: center
 
@media (min-width: 700px)
  h1,
  .flourish
    font-size: 4.5vw
    margin: 10px 0
    padding: 0 20px

h1 
  letter-spacing: 10px
  text-transform: uppercase

.flourish
  font-weight: bold

.bio
  margin: 0 20px
  text-align: center
  line-height: 1.5
  font-style: italic

@media (min-width: 1100px)
  .bio
    margin: 0 100px
    text-align: center
    line-height: 1.7
    font-size: 1.2em
  
article
  // flex: 0 0 50%
  margin: 0
  // padding-top: 30px
  
@media (min-width: 700px)
  article
    flex: 0 0 50%
    margin-left: 50%
    padding-top: 30px
    
.author,
.photographer
  text-transform: uppercase
  font-size: .7em
  letter-spacing: 1px
  color: #777
  padding: 0 20px
  margin: 0
  font-family: 'Oxygen', sans-serif

  & span
    color: rgba(black, 0.4)
    text-transform: capitalize

@media (min-width: 700px)
  .author,
  .photographer
    padding: 0 60px

.image
  img
    width: 100%
    margin: 20px 0

.text
  columns: 2
  column-width: 250px
  column-gap: 2em
  padding: 0 20px
  text-align: justify

  p:first-child
    margin-top: 0
  
    &:first-letter
      float: left
      color: red
      font-size: 4em
      line-height: 35px
      padding: 19px 10px 10px 0

@media (min-width: 1100px)
  .text
    padding: 0 60px
   
footer
  height: 40px