CodePen Embed - for people

<section class="video-wrapper">
    <div class="video-reviews-wrapper">
        <div class="recent-reviews">
            Recent Reviews
        </div>
        <div class="container_steve-woz-david-collum">
            <div class="reviews-mobile-wrapper_steve-woz">
                <div class="recent-reviews_steave-woz">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed incididunt ut labore et dolore magn.</div>
                <div class="steve-woz"><strong>- Steve Woz</strong></div>
                <div class="steve-woz_dash"></div>
            </div>
            <div class="reviews-mobile-wrapper_david-collum">
                <div class="recent-reviews_david-collum">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed incididunt ut labore et dolore magn.</div>
                <div class="david-collum"><strong>- David Collum</strong></div>
                <div class="david-collum_dash"></div>
            </div>
        </div>
       <div class="quotes-top">
                <img class="quotes-top__img" src="https://svgshare.com/i/GUH.svg' title='quotes" alt="quote">
            </div>

        <div class="quotes-buttom">
                <img class="quotes-buttom__img" src="https://svgshare.com/i/GUH.svg' title='quotes" alt="quote">
            </div>

    </div>
    <div class="mobile-wrapper">
        <div class="video-center-wrapper">
           <div class="video-center">
               <img src="https://habrastorage.org/webt/hq/8b/cn/hq8bcnkpqccpdbjnsbhiiijulpa.jpeg" />
            </div>

            <div class="play-circle-video-wrapper">
                <div class="play-circle">
                    <div class="play-triangle"></div>
                </div>
            </div>
        </div>
        <div class="user-video-wrapper">
            <div class="user-video-text">
                User Videos
            </div>
            <div class="user-video-one-wrapper">
                <div class="user-video-one">
                   <img src="https://habrastorage.org/webt/0u/ze/ej/0uzeejnwhmrttyfpmhpxpyiflgm.jpeg" />
                </div>

                <div class="play-circle-wrapper-one">
                    <div class="play-circle">
                        <div class="play-triangle"></div>
                    </div>
                </div>
            </div>
            <div class="user-video-two-wrapper">
                <div class="user-video-two">
                   <img src="https://habrastorage.org/webt/kf/dv/nm/kfdvnmnu2y5av2cb2y4d5h0wl1y.jpeg" />
                </div>

                <div class="play-circle-wrapper-two">
                    <div class="play-circle">
                        <div class="play-triangle"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

 html {
  overflow-x: hidden;
}

  html,body {
    height: 100%; 
  }


.mobile-wrapper { 
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    // order: 1;
    // flex-wrap: wrap;


    @media (min-width: 1450px) {
        flex-direction: row;
    }


   


     @media (min-width: 1801px) {
        
        flex-direction: row;
        // order: 0;

        

    }

}

.video-center-wrapper {
  position: relative;
    display: flex;

    

     @media (min-width: 1450px) { 
        margin-left: 160px;
    }



    @media (min-width: 1801px) {
    margin-left: 0;
    }

}

.video-center {
     
    position: relative;
    margin-top: 200px;

    img {
        width: 100%;
        height: auto;
    }

    @media (min-width: 1450px) {
        margin-top: 0;
    }
}


.play-circle-video-wrapper {
    position: absolute; 
  bottom: 50px;
  left: 24px;

    @media (min-width: 622px) {
        
    }


    @media (min-width: 1450px) {
        margin-top: 348px;
    }
}


.play-circle {
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border-radius: 50%;
    position: relative;

     &:hover {
        background-color: green;
        transition: all 0.5s ease-out;
    }
     
}



.play-triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 10px solid black;
    border-bottom: 6px solid transparent;


}


.user-video-wrapper { 



    display: flex;




     @media (min-width: 1450px) {  
        display: block;
    }
}




.user-video-text {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(50%, 0);








    color: #000000;
    font-family: "Playfair Display";
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.29px;


    @media (min-width: 1450px) {
        position: static;
        margin-left: 132px;
        margin-right: 268px;
        margin-top: 26px;
    }




}

.user-video-one-wrapper {
    margin-right: 28px;
    margin-top: 20px; 
    justify-content: center;
    align-items: center;


    position: relative;


    @media (min-width: 1450px) {
        margin-left: 131px;
        margin-top: 34px; 
        margin-right: 180px; 
    }

     
     

}

.user-video-one {
     img {
        width: 100%;
        height: auto;
    }
}


.user-video-two {
     img {
        width: 100%;
        height: auto;
    }
}


.play-circle-wrapper-one {
    top: 114px;
    right: 234px;
    position: absolute;



}

.user-video-two-wrapper {
    margin-left: 28px;
    margin-top: 20px; 

    position: relative;

    @media (min-width: 1450px) {
        margin-left: 131px;
        margin-top: 36px;
        margin-right: 180px;
    }

}


.play-circle-wrapper-two {
     top: 114px;
    right: 234px;
    position: absolute; 
}


.video-wrapper {  
    position: relative;


    width: 100%;
  height: 1000px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 233px;
    // order: 1;
    // flex-wrap: wrap;



    @media (min-width: 1801px) {
        position: static; 


        height: 436px; 
        flex-direction: row;
        // order: 0;

    
    }

    



}

.video-reviews-wrapper {
    position: relative;
  display: flex;
  width: 617px;
  flex-direction: column;
     
    order: 2;
    // flex-wrap: wrap;

    @media (min-width: 1450px) {
        width: 1000px;
    }

    @media (min-width: 1801px) {
         


      order: 0;  
      width: 592px;
      
         

        

    }


     

   

}

.recent-reviews {
    display: flex;
    justify-content: center;
    align-items: center; 


    margin-top: 27px; 
    color: #000000;
    font-family: "Playfair Display";
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.29px;
    align-items: center;

     @media (min-width: 1450px) { 
     }

    @media (min-width: 1801px) {
            justify-content: flex-start;
            margin-right: 0;
            margin-left: 182px;


    }



}


.container_steve-woz-david-collum {
     display: flex;
     flex-direction: column;
    justify-content: center;
    align-items: center;


    

    @media (min-width: 622px) {
         display: flex;
    flex-direction: row;
    
    }



    @media (min-width: 1801px) {
        display: block;


    }
}

.recent-reviews_steave-woz {
     width: 300px;



    margin-top: 25px;

    color: #999999;
    font-family: "Avenir - Book Oblique";
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;

    @media (min-width: 622px) {
    width: auto;

    }

    @media (min-width: 1801px) {
        margin-left: 181px;
        margin-right: 154px;

    }
}

.steve-woz {
    margin-top: 22px;

    color: #000000;
    font-family: "Avenir";
    font-size: 16px;
    font-weight: 400;
    line-height: 1;

    @media (min-width: 1801px) {
        margin-left: 180px;
    }
}

.steve-woz_dash {
    margin-top: 22px;

    width: 260px;
    height: 1px;
    background-color: #e7e7e7;

    @media (min-width: 1801px) {
        margin-left: 179px;
    }

}

.recent-reviews_david-collum {
    width: 300px;



    margin-top: 33px;
    color: #999999;
    font-family: "Avenir - Book Oblique";
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;

    @media (min-width: 622px) {
        width: auto;
    }

    @media (min-width: 1801px) {
        margin-left: 181px;
        margin-right: 154px;
    }
}

.david-collum {
    margin-top: 22px;

    color: #000000;
    font-family: "Avenir";
    font-size: 16px;
    font-weight: 400;
    line-height: 1;

    @media (min-width: 1801px) {
        margin-left: 180px;
    }
}

.david-collum_dash {

    margin-top: 19px;
    width: 260px;
    height: 1px;
    background-color: #e7e7e7;

    @media (min-width: 1801px) {
        margin-left: 179px;
    }
}

.quotes-top {
    position: absolute; 

    margin-top: 114px; 

    @media (min-width: 1801px) {
        margin-top: 109px;
        margin-left: 163px;
    }



}


.quotes-buttom {
    position: absolute;
    margin-top: 120px;
    margin-left: 308px;
    

    @media (min-width: 1450px) {
        margin-left: 500px;
    }

    @media (min-width: 1801px) {

        margin-top: 295px;
        margin-left: 163px;
    }
}

View Compiled

This Pen is owned by Anton on CodePen.

See more by @neverov12 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.