<div class="container">
   <section class="section">
      <h1 class="heading">Profile Card</h1>
      <div class="wrapper">
         <div class="member">
            <img src="https://vpinedabucket.s3.amazonaws.com/people1.jpg" alt="" class="img">
            <h2 class="name">Darcey Pay <span>(Designer)</span></h2>
            <ul class="skills">
               <li>PS</li>
               <li>FIGMA</li>
               <li>HTML5</li>
               <li>CSS3</li>
               <li>AI</li>
            </ul>
            <a href="#" class="btn">Projects</a>
            <div class="story-bth">
                  <div class="line"></div>
            </div>
            <div class="story">
               <h4 class="story-heading">About me</h4>
               <p class="story-paragraph">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod similique rem culpa quam exercitationem alias, accusantium tempore sint blanditiis minus, pariatur aut natus voluptas, deserunt reiciendis suscipit harum voluptates quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               </p>
            </div>
         </div>
          <div class="member">
            <img src="https://vpinedabucket.s3.amazonaws.com/people2.jpg" alt="" class="img">
            <h2 class="name">Daniel Hernandez<span>(Designer)</span></h2>
            <ul class="skills">
               <li>PS</li>
               <li>FIGMA</li>
               <li>HTML5</li>
               <li>CSS3</li>
               <li>AI</li>
            </ul>
            <a href="#" class="btn">Projects</a>
            <div class="story-btn">
                  <div class="line"></div>
            </div>
            <div class="story">
               <h4 class="story-heading">About me</h4>
               <p class="story-paragraph">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod similique rem culpa quam exercitationem alias, accusantium tempore sint blanditiis minus, pariatur aut natus voluptas, deserunt reiciendis suscipit harum voluptates quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               </p>
            </div>
         </div>
          <div class="member">
            <img src="https://vpinedabucket.s3.amazonaws.com/people3.jpg" alt="" class="img">
            <h2 class="name">Darcey Pay <span>(Designer)</span></h2>
            <ul class="skills">
               <li>PS</li>
               <li>FIGMA</li>
               <li>HTML5</li>
               <li>CSS3</li>
               <li>AI</li>
            </ul>
            <a href="#" class="btn">Projects</a>
            <div class="story-bth">
                  <div class="line"></div>
            </div>
            <div class="story">
               <h4 class="story-heading">About me</h4>
               <p class="story-paragraph">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod similique rem culpa quam exercitationem alias, accusantium tempore sint blanditiis minus, pariatur aut natus voluptas, deserunt reiciendis suscipit harum voluptates quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               </p>
            </div>
         </div>
         
      </div>
   </section>
</div>    

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style:none;
   outline:none; 
   font-family: monospace;
   font-weight: 400;
   
}
html {
   font-size: 79.4%;
   
}

.container { 
   background: #051127;
   width: 100%;
   overflow-x: hidden;
}


.heading { 
   font-size: 6rem;
   margin-top: 30px;
   margin-bottom: 40px;
   font-weight: bold;
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   opacity: 0.9;
   text-shadow: 2em 2rem 4rem #aaa;
   
}


.section { 
   width: 100%;
   display: flex;
   height: 100vh;
   flex-direction: column;
}

.wrapper {
   display: flex;
   justify-content: space-evenly;
   
}

.member { 
   width: 35rem;
   background-color: #fffeee;
   padding: 1rem 1rem 2rem 1rem; 
   position: relative;
   opacity: 0.7;
   transition: opacity 0.5s;
}

.member:hover {
   opacity: 1;
   ss
} 

.img { 
   /*with radius make margin automtic*/
   width: 100%;
   border-radius: 0.5rem;
   
}


.name {
   font-size: 2.3rem;
   font-weight: 500;
   color: #796717;
   margin-top: 2rem;
}
.name span { 
   font-size: 1.7rem;
   
}

.skills { 
   display: flex;
   justify-content: space-between;
   margin: 1rem 0 2rem 0;
}

.skills li {
   font-size: 1.5rem;
   color: #505050;
}

.btn {
   background-color: #fab34a;
   color: #fff;
   padding: 0.5rem 1.5rem;
   border-radius: 5rem;
   font-size: 1.5rem;
   letter-spacing: 0.2rem;
}

.story-btn {
   width: 4rem;
   height: 4rem;
   background-color: #222;
   position: absolute;
   top: -1rem;
   right: -1rem;
   border-radius: 5rem;
   display: flex;
   align-items: center;
   padding:0.5rem;
   cursor: pointer;
   z-index: 50;
   transition: transform 0.5s;
}
/* undefine class to call from js*/
.change.story-btn {
   transform: rotate(405deg);
   
}

.line { 
   width: 100%;
   height: 0.1rem;
   background-color: #fff;
   
}

.story {
   
   width: 100%;
   height: 100%;
   background-color: #d5adc8;
   background-image: linear-gradient(315deg, #d5adc8 0%, #ff8489 74%);
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 2rem;
   transform: scale(0);
   transform-origin: ;top right;
   /* border-radius: 50rem 0 50rem 50rem; */
   transition: all 0.5s;
}


.change.story {
   transition: scale(1);
   border:0;
   
}

.story-heading {
   font-size: 4rem;
   font-weight: 400;
   color: #fff;
   margin: 2rem;
   font-family: monospace;
}

.story-paragraph{
   font-size: 1.8rem;
   color: #eee;
   text-align: center;
   letter-spacing: 0.1rem;
   text-indent: 2rem;
   font-family: monospace;
}

document.querySelectorAll('.story-btn').forEach(btn => {
   btn.addEventListener('click', () => {
      btn.classList.toggle('change')
      btn.nextElementSibling.classList.toggle('change')
      console.log('test');
   })
}