<div class="wrapper">

  
  <div class="overviewInfo">
    <div class="actions">
      <div class="backbutton ">
   <svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1.02698 11.9929L5.26242 16.2426L6.67902 14.8308L4.85766 13.0033L22.9731 13.0012L22.9728 11.0012L4.85309 11.0033L6.6886 9.17398L5.27677 7.75739L1.02698 11.9929Z"
    fill="currentColor"
  />
</svg>
      </div>
      <div class="cartbutton neurobutton"> 
 <svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M5.79166 2H1V4H4.2184L6.9872 16.6776H7V17H20V16.7519L22.1932 7.09095L22.5308 6H6.6552L6.08485 3.38852L5.79166 2ZM19.9869 8H7.092L8.62081 15H18.3978L19.9869 8Z"
    fill="currentColor"
  />
  <path
    d="M10 22C11.1046 22 12 21.1046 12 20C12 18.8954 11.1046 18 10 18C8.89543 18 8 18.8954 8 20C8 21.1046 8.89543 22 10 22Z"
    fill="currentColor"
  />
  <path
    d="M19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z"
    fill="currentColor"
  />
</svg>
      </div>
    </div>
    
    <div class="productinfo">
      <div class="grouptext">
         <h3>PLATFORM</h3>
         <p>PS5</p>
      </div>
      <div class="grouptext">
         <h3>RELEASE</h3>
         <p>Fall 2020</p>
      </div>
      <div class="grouptext">
         <h3>PRICE</h3>
         <p>$50</p>
      </div>
      
      
      <div class="productImage">
        <img src="https://i.imgur.com/ckSgzLQ.png" alt="product: ps5 controller image">
      </div>
      
  </div>
     
</div> 
  <!-- overview info -->
  
  <div class="productSpecifications">
    <h1> Dual Sense </h1>
    <p> DualSense also adds a build-in microphone array, which will enable players to easily chat with friends without a headset... </p>
    
    <div class="productFeatures">
      <div class="feature">
        <div class="featureIcon">
        </div>
        <div class="featureText">
          <p> <strong>Futuristic</strong></p>
          <p>Design</p>
        </div>
      </div>
      <div class="feature">
        <div class="featureIcon">
        </div>
         <div class="featureText">
          <p> <strong>Built-in</strong></p>
          <p>Microphone</p>
        </div>
       </div>
      <div class="feature">
        <div class="featureIcon">
        </div>
         <div class="featureText">
          <p> <strong>Haptic</strong></p>
          <p>Feedback</p>
        </div>
        </div>
      <div class="feature">
        <div class="featureIcon">
        </div>
         <div class="featureText">
          <p> <strong>Fast charge</strong></p>
          <p>USB-C port</p>
        </div>
      </div>
    </div>
    
    <div class="checkoutButton">
      <div class="priceTag">
        <span>$</span>50
      </div>
      <button class="preorder">
        <p>Preorder</p>
        <div class="buttonaction">
         <svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M23.0677 11.9929L18.818 7.75739L17.4061 9.17398L19.2415 11.0032L0.932469 11.0012L0.932251 13.0012L19.2369 13.0032L17.4155 14.8308L18.8321 16.2426L23.0677 11.9929Z"
    fill="currentColor"
  />
</svg>
        </div>
      </button> 
    </div>
  </div>
  <!-- product specificaiton -->
  
</div>
<!-- wrapper-->
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500&display=swap');
*, button, input{
margin: 0px;
padding: 0px;
box-sizing: border-box;
  
  font-family: 'Roboto', sans-serif;
}

:root{
  --bg-shape-color:linear-gradient(120deg,  #343A4F, #0F1620) ;
 --lightblue: #3D9DEA;
 --darkblue: #4A4EEE;
 --text-color: #D5E1EF;
}

html,body{
  width: 100%; 
  min-height: 100vh;
  background-image: linear-gradient(90deg, #414850, #131720);
  color: var(--text-color);
}
body{
  display:flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0px;
}
.wrapper{
  width:350px;
  border-radius: 40px;
  background-image: var(--bg-shape-color);
  overflow: hidden;
}
.overviewInfo, .productSpecifications {
  padding: 24px;
}
.overviewInfo{
  background-image:  linear-gradient(176deg, var(--lightblue), var(--darkblue));
}
.actions{
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  
  .cartbutton{
    position:relative;
  }
  .cartbutton::after {
      content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-image: linear-gradient(90deg, #489be2, #0f629c);
    border-radius: 50%;
    position: absolute;
    top: 11px;
    right: 8px;
}
  
  .cartbutton svg {
    color: #ababab73;
}
  .backbutton, .cartbutton{
    
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
.neurobutton{
  background-image: var(--bg-shape-color);
   
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 3px 4px 5px 0px rgba(197, 197, 197, 0.1), inset 3px 6px 6px 5px rgba(78, 77, 77, 0.1), -2px -2px 8px 2px rgba(255,255,255,0.1), 2px 2px 6px 3px rgba(0,0,0,0.4);
}

.productinfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    min-height: 200px;
    margin-bottom: 50px;
}

.productImage {
    position: absolute;
  
    width: 321px;
    height: auto;
    transform: rotate(-90deg) translate(-56px, 66px);
  
 // animation: updowncontroller infinite 3s alternate;
img{ width: 100%; height: auto}
  transition: ease 2s all ;
  &:hover{
      transition: ease 2s all ;
    animation: none;
    transform: rotate(-70deg) translate( 10px, 66px);
  }
}
 

h1{
  font-family: 'Michroma', sans-serif;
}
.grouptext{
h3 {
    letter-spacing: 3.2px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
  p {
    font-size: 12px;
    opacity: 0.8;
  } 
  
}


/* product specifications */
.featureIcon{
  width: 40px;
  height: 40px;
  background-image: var(--bg-shape-color);
  border-radius: 8px; 
    margin-right: 16px;
}
.productSpecifications{

  h1{
    margin-top: 10px; 
    margin-bottom: 16px;
    font-size: 32px;
  }
  
  p {
    opacity: 0.8;
    font-size: 15px;
    line-height: 1.5;
}
  
  .productFeatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px; 
    grid-row-gap: 16px;
    .feature{ display:flex;}
  }
}



.checkoutButton {
    display: flex;
    width: 100%;
    background-image: var(--bg-shape-color);
    border-radius: 12px;
    overflow: hidden;
        box-shadow: -2px -2px 2px 0px rgba(80, 80, 80, 0.1), 2px 2px 3px 0px rgba(12, 12, 12, 0.3), inset 0px 0px 0px 2px rgba(80, 80, 80, 0.2);
    margin-top: 30px;
    padding: 14px;
  
    justify-content: space-between;
    align-items: center;
}

.priceTag {
    display: flex;
    align-items: center;
    font-size: 32px;
}

.priceTag span {
    color: #488dc7;
    font-size: 20px;
}


/* checkout button*/
button.preorder {
    outline: 0;
    border: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: linear-gradient(85deg, #61c7ef, #4833fb);
    color: white;
}

.preorder p {
    padding: 8px 17px;
    border-right: 1px solid rgba(0,0,0,0.4);
}

.buttonaction {
    border-left: 1px solid rgba(255,255,255,.2);
    padding: 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
}




/* animation */

@keyframes updowncontroller{
  0%  {
    transform: rotate(-90deg) translate(-56px, 66px);}
  80%, 100%{
    transform: rotate(-70deg) translate( 10px, 66px);}
}
View Compiled
//based on https://www.linkedin.com/feed/update/urn:li:activity:6738102449434832897/

External CSS

  1. https://css.gg/css

External JavaScript

This Pen doesn't use any external JavaScript resources.