<div class="wrapper">
  <div class="header">
    <div class="leftWrapper">
      <div class="eggIconWrapper"></div>
       <div class="titleWrapper">Eggs</div>
    </div>
    <div class="rightWrapper">
      <div class="menuTitle">Types</div>
      <div class="menuTitle">Cooking</div>
      <div class="menuTitle">History</div>
      <div class="iconWrapper">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
  </div>
  
  <div class="body">
    <div class="left">
      <div class="egg leftEgg"></div>
      <div class="egg rightEgg"></div>
      <div class="imageWrapper">
        <img src="https://images.pexels.com/photos/162712/egg-white-food-protein-162712.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="eggs hero" /></div>
      <div class="text">Egg yolks and whole eggs store significant amounts of protein and choline, and are widely used in cookery.</div>
    </div>
    <div class="right">
      <div class="top">Chicken eggs are widely used in many types of dishes, both sweet and savory, including many baked goods. Some of the most common preparation methods include scrambled, fried, poached, hard-boiled, soft-boiled, omelettes and pickled.</div>
      <div class="bottom">
        <div class="numbers">01/03</div>
        <video width="600" height="300" controls>
  <source src="https://i.vimeocdn.com/video/829151175.webp?mw=600&mh=300" type="video/mp4">
</video>
        <div class="description">
          <div class="panel">
            <div class="title">Chef</div>
            <div class="person">John Paul</div>
          </div>
          <div class="panel">
            <div class="title">Dish</div>
            <div class="person">Egg Blaster Pancakes</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #222;
  overflow: hidden;
  font-family: "Lato", sans-serif;

  .wrapper {
    position: relative;
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftWrapper {
        display: flex;
        align-items: center;
        .eggIconWrapper {
          height: 50px;
          width: 30px;
          border-radius: 50%;
          background-color: #c7c7c7;
          position: relative;
          margin-left: 20px;
          &:before {
            content: "";
            height: 50px;
            width: 30px;
            border-radius: 50%;
            background-color: #8c8c8c;
            position: absolute;
            left: -10px;
          }

          &:after {
            content: "";
            height: 50px;
            width: 30px;
            border-radius: 50%;
            background-color: #454545;
            position: absolute;
            left: -20px;
          }
        }

        .titleWrapper {
          color: #515151;
          font-size: 30px;
          padding-left: 20px;
        }
      }

      .rightWrapper {
        display: flex;
      align-items: center;
      justify-content: space-around;
        font-size: 24px;
        
        .menuTitle {
          padding-right: 45px;
        }
        
        .iconWrapper {
          cursor: pointer;
          padding-left: 50px;

          .line {
            background-color: #222;
            border-radius: 10px;
            height: 5px;
            width: 40px;
            margin: 5px 0;
          }
        }
      }
    }
    
    .body {
      display: flex;
      height: 100%;
      width: 100%;
      
      .left {
        position: relative;
        flex-basis: 65%;
        
        .egg {
          position: absolute;
           height: 350px;
          width: 250px;
          border-radius: 50%;
          background-color: #c7c7c7;
          opacity: .2;
          
          &.leftEgg {
            top: 300px;
          left: -100px;
          }
          
          &.rightEgg {
            top: 200px;
            left: 900px;
          }
        }
        
        .text {
          font-weight: bold;
          font-size: 60px;
          max-width: 1000px;
          padding-left: 200px;
          padding-top: 100px;
        }
        
        .imageWrapper {
          position: absolute;
          bottom: -100px;
          left: 50px;
          
          img {
            opacity: .2;
            height: auto;
            width: 1000px;
            border-radius: 20px;
          }
        }
      }
      
      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        height: 95%;
        flex-basis: 35%;
        
        .top {
          color: #777777;
          font-size: 24px;
          padding-bottom: 30px;
        }
        
        .bottom {
          position: relative;
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          
          .numbers {
            position: absolute;
            left: -70px;
            top: 20px;
            font-size: 30px;
            font-weight: bold;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
          }
          
          .description {
            display: flex;
            
            .panel {
              padding: 10px 20px 0 0;
              padding-right: 20px;
              
              .title {
                font-weight: bold;
              }
              
              .person {
                 color: #777777;
              }
            }
          }
        }
      }
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.