Dribbble Rise - food blog

In this example below you will see how to do a Dribbble Rise - food blog with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by FilipVitas, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright FilipVitas ©
  • HTML
  • CSS
  • JavaScript
    
.center
  .left
    .header.bold
      i.fa.fa-arrow-left
      .title Rise
      .search
        i.fa.fa-search
      
    .author
      .author-image      
      .author-info
        .author-name.bold Alli Alisha
        .author-job confectioner
      
    h1.bold Brownie with Oreo
    
    .article-info
      .published Published on December 27
      .likes 
        i.fa.fa-heart
        span 834
    
    .article
      p As we grow, we do so in fits and starts, lurching forward then back, sometimes looking more like clowns than seekers.
      
      p Winston Churchill wrote: "Man will occasionally stumble over the truth, but most of the time he will pick himself up and continue on as though nothing has happend."
      
    .ingredients
      .measures
        .measure
          .value 1/2 cup
          .type.bold Butter

        .measure
          .value 2 coup
          .type.bold Whater

        .measure
          .value 1 cup
          .type.bold White sugar

      .measures
        .measure
          .value 1/4 teaspoon
          .type.bold Salt

        .measure
          .value 1/2 cup all-p
          .type.bold Purpose flour

        .measure
          .value 1 tablespoon
          .type.bold Honey

      .measures
        .measure
          .value 10 cookies
          .type.bold Oreo

        .measure
          .value 1/2 coup
          .type.bold Flour
  
        .measure
        
  .right
    .image
  

a(href="https://dribbble.com/shots/4145099-Rise-food-blog" class="inspiration" target="_blank") inspiration


/*Downloaded from https://www.codeseek.co/FilipVitas/dribbble-rise-food-blog-ddVPav */
    *, *:before, *:after 
  box-sizing: border-box
  
body
  width: 100vw
  height: 100vh
  font-family: 'Mukta Mahee', sans-serif
  font-size: 15px
  font-weight: 300
  letter-spacing: 0.5px
  line-height: 1.3
  color: #222
  
.inspiration
  position: fixed
  bottom: 0
  right: 0
  padding: 10px
  text-align: center
  text-decoration: none
  font-family: 'Gill Sans', sans-serif
  font-size: 12px
  color: rgb(127, 127, 127)
  
.bold
  font-weight: bold
  
.center
  position: absolute
  top: 50%
  left: 50%
  display: flex
  width: 100vw
  height: 100vh
  transform: translate(-50%, -50%)
  
.left
.right
  width: 50%
  height: 100%
  flex: 1 0 auto

.left
  position: relative
  padding: 0 50px
  
  @media screen and (max-height: 500px)
    padding: 0 20px
  
  .header
    display: flex
    justify-content: space-between
    align-items: center
    height: 80px
    font-size: 20px
    
    @media screen and (max-height: 500px)
      height: 50px
    
  .author
    display: flex
    align-items: center
    padding: 20px 0 10px

    @media screen and (max-height: 500px)
      padding: 0
    
  .author-info
    padding-left: 20px
    
  .author-image
    width: 55px
    height: 55px
    border-radius: 50%
    background: black
    background-image: url('http://i1.adis.ws/i/boohooamplience/dzz63831_grey_xl?$product_page_main_magic_zoom$')
    border: 1px solid #ccc
    background-position-x: center
    background-size: 60px
    
    @media screen and (max-height: 500px)
      width: 40px
      height: 40px
    
  h1
    padding: 20px 0 10px
    font-size: 45px
    
    @media screen and (max-height: 500px)
      font-size: 35px
    
  .article
    padding: 20px 0
    
    @media screen and (max-height: 500px)
      padding: 0
    
  .article-info
    display: flex
    justify-content: space-between
    
  .published
    color: #bbb
    
  .likes
    color: #a1a1a1
    
    .fa
      font-size: 18px
      vertical-align: middle
      
    span
      padding-left: 10px
    
  p
    padding: 10px 0
    
  .ingredients
    background-color: #ececec
    position: absolute
    bottom: 0
    left: 0
    display: flex
    flex-direction: column
    width: 100%
    padding-left: 30px
    
  .measures
    display: flex
  
  .measure
    flex: 1 0 33%
    height: 80px
    padding: 20px
    
    @media screen and (max-height: 500px)
      height: 40px
      padding: 0
      transform: scale(0.7)
    
  .type
    font-size: 18px
    
.next
  position: absolute
  left: 50%
  bottom: 0
  padding: 15px 40px
  border: none
  outline: none
  font-size: 21px
  color: white
  background-color: #ff781a
  transform: translateX(-50%)
  z-index: 1
  
  @media screen and (max-height: 500px)
    padding: 10px 20px
    font-size: 10px

.image
  height: 100%
  background-size: cover
  background-image: linear-gradient(to top right, #c94b4b, #4b134f)
  background-image: url('http://i.imgur.com/yeMRWQD.png')
  
  


/*Downloaded from https://www.codeseek.co/FilipVitas/dribbble-rise-food-blog-ddVPav */
    /*
  Inspired by: "Rise - food blog"
  By: Alexey Savitskiy
  Link: https://dribbble.com/shots/4145099-Rise-food-blog
*/

Comments