<div class="wrap">
  <div class="container landscape-1">
    
    <header class="top">
      <h1 class="title">Welcome, Chris</h1>
      <time datetime="14-02-2020">14 February, 2020</time>
    </header>
    
    <div class="notification">
      <p>
        <strong>
          <img src="http://co0kie.github.io/codepen/mindful/notification.svg" alt="">
          Activities today
        </strong>
        Meditation and relaxation
      </p>  
      <small>8:00 p.m.</small>
    </div>
    
    <section class="content">
      <h2 class="heading">What do you need today?</h2>  
      <div class="slides">
        <article class="article">
          <img src="http://co0kie.github.io/codepen/mindful/buddhist-yoga-pose.svg" alt="">
          <div class="text">
            <h6>Meditation Zen</h6>
            <p>Recommended in the morning</p>
          </div>
        </article>
      </div>
    </section>
    
    <nav class="navigation">
      <a href="#">
        <img src="http://co0kie.github.io/codepen/mindful/home.svg" alt="">
      </a>
      <a href="#">
        <img src="http://co0kie.github.io/codepen/mindful/moon.svg" alt="">
      </a>
      <a href="#">
        <img src="http://co0kie.github.io/codepen/mindful/user.svg" alt="">
      </a>
    </nav>
    
  </div>
  
  <div class="container landscape-2 light">
    <header class="top">
      <h1 class="title">Good morning</h1>
      <time datetime="14-02-2020">14 February, 2020</time>
      <input type="checkbox" name="" id="a">
      <label for="a" class="switch"></label>
    </header>
    
    <section class="content">
      <h2 class="heading">Schedule <button>+</button></h2>
      <div class="timeline">
        <article class="item">
          <ul>
            <li>
              <img src="http://co0kie.github.io/codepen/mindful/buddhist-yoga-pose.svg" alt="">
              <p>
                <strong>Meditation Zen</strong>
                <span>In progress</span>
              </p>
              <small>8:00 a.m.</small>
            </li>
            <li>
              <img src="http://co0kie.github.io/codepen/mindful/coffee.svg" alt="">
              <p>
                <strong>Coffee</strong>
                <span>To do</span>
              </p>
              <small>9:00 a.m.</small>
            </li>
          </ul>
        </article>
      </div>
    </section>
    
    <nav class="navigation">
      <a href="#">
        <img src="http://co0kie.github.io/codepen/mindful/home.svg" alt="">
      </a>
      <a href="#">
        <img src="http://co0kie.github.io/codepen/mindful/moon.svg" alt="">
      </a>
      <a href="#">
        <img src="http://co0kie.github.io/codepen/mindful/user.svg" alt="">
      </a>
    </nav>
  </div>
</div>
*{
    box-sizing: border-box;
}
$purple1: #0C132F;
$purple2: #824970;
$blue1: #19234D;
$blue2: #D2D4DE;
$orange1: #F3851F;
$green1: #1CCA00;
$green2: #A89949;
$green3: #163026;
$green4: #169061;
// http://co0kie.github.io/codepen/mindful/

body{
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #211d1d;
  font-family: 'Robot', sans-serif;
}

.wrap{
  display: flex;
  height: 100vh;
  margin: 0 auto;
  max-width: 840px;
}

.container{
  width: 375px;
  height: 680px;
  margin: auto;
  border-radius: 30px;
  background-repeat: no-repeat;
}

.landscape-1{
  background-image: url('http://co0kie.github.io/codepen/mindful/landscape.jpg');
  background-size: 770px;
  background-position: -392px -88px;
  background-color: $purple1;
}

.landscape-2{
  background-image: url('http://co0kie.github.io/codepen/mindful/landscape2.jpg');
  background-size: 1050px;
  background-position: -332px -1px;
}

.top{
  margin: 110px 40px 0;
  color: white;
  > time{
    font-size: 16px;
  }
  .light &{
    color: #000;
  }
  [type="checkbox"]{
    display: none;
  }
  .switch{
    position: relative;
    width: 60px;
    border-radius: 20px;
    height: 30px;
    background-color: #fff;
    display: block;
    margin-top: 20px;
    transition: 200ms;
    &::before{ 
      content: '';
      position: absolute;
      background-color: $green1;
      transition: 200ms;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      top: 0;
      bottom: 0;
      margin: auto;
      left: 1px;
      box-shadow: 0 1px 2px 1px rgba(0,0,0,0.17);
    }
  }
  [type="checkbox"]:checked{
    ~ .switch{
      background-color: $green1;
      &::before{
        content: '';
        background-color: #fff;
        left: 31px;
      }
    }
  }
}

.title{
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 32px;
}

.notification{
  background-color: #fff;
  width: 80%;
  margin: auto;
  padding: 15px;
  border-radius: 10px;
  font-size: 13px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px 0 $purple2;
  > p{
    margin: 0;
  }
  > p > strong{
    display: block;
    color: $orange1;
    font-weight: 400;
    margin-bottom: 5px;
  }
  > p img{
    width: 17px;
    vertical-align: bottom;
    margin-right: 3px;
  }
  > small{
    margin-left: auto;
  }
}

.heading{
  color: white;
  font-size: 22px;
  font-weight: 400;
  position: relative;
  > button{
    position: absolute;
    background-color: $green4;
    border: 0;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: white;
    font-size: 27px;
    line-height: 1;
    height: 43px;
    right: -40px;
    top: -7px;
    width: 50px;
  }
}

.content{
  padding: 0 40px;
  margin-top: 130px;
}

.slides{
  display: flex;
  margin-top: 30px;
}

.article{
  display: flex;
  align-items: center;
  background-color: $blue1;
  padding: 30px 20px;
  border-radius: 10px;
  width: 100%;
  position: relative;
  &::before{
    content: '';
    position: absolute;
    right: -40px;
    height: 100%;
    width: 20px;
    background-color: $blue1;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  > img{
    width: 30px;
    margin-right: 20px;
    &:hover{
      filter: grayscale(100%) sepia(100%);
    }
  }
  > .text > h6{
    color: white;
    font-size: 14px;
    margin: 0 0 8px;
    font-weight: 400;
  }
  > .text > p{
    color: $blue2;
    font-size: 11px;
    margin: 0;
  }
}

.navigation{
  background-color: $blue1;
  padding: 15px 0;
  border-radius: 50px;
  margin: 40px 10px;
  display: flex;
  justify-content: space-around;
  > a > img{
    width: 26px;
    transition: 200ms;
  }
  > a:hover > img{
    filter: invert(0.6) sepia(1) hue-rotate(350deg) saturate(9);
  }
  .light &{
    background-color: $green3;
    > a:hover > img{
      filter: invert(0.6) sepia(1) hue-rotate(370deg) saturate(200);
    }
  }
}

.timeline{
  margin: 10px 0 67px;
  > .item > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  ul{
    &::before{
      content: '';
      height: 22%;
      width: 1px;
      background-color: $green2;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      left: 22px;
      z-index: 0;
    }
  }
  li{
    display: flex;
    align-items: center;
    color: white;
    + li{
      margin-top: 10px;
      opacity: .5;
    }
  }
  li > img{
    width: 45px;
    background-color: $green2;
    border-radius: 50%;
    padding: 8px;
    margin-right: 11px; 
  }
  li > p{
    font-size: 14px;
  }
  li > p span{
    color: rgba(255,255,255, 0.55);
  }
  li strong{
    display: block;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }
  li > small{
    margin-left: auto;
  }
}
View Compiled
// inspired by https://dribbble.com/shots/10423413-Mindfulness-App-Concept/attachments/2265280?mode=media

// yt - https://youtu.be/P_qjGB6W2To

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.