style.css

   1 body {
   2   display: flex;
   3   justify-content: center;
   4   align-items: center;
   5   background: #242d60;
   6   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
   7   'Helvetica Neue', 'Ubuntu', sans-serif;
   8   height: 100vh;
   9   margin: 0;
  10   -webkit-font-smoothing: antialiased;
  11   -moz-osx-font-smoothing: grayscale;
  12 }
  13 section {
  14   background: #ffffff;
  15   display: flex;
  16   flex-direction: column;
  17   width: 400px;
  18   height: 112px;
  19   border-radius: 6px;
  20   justify-content: space-between;
  21 }
  22 .product {
  23   display: flex;
  24 }
  25 .description {
  26   display: flex;
  27   flex-direction: column;
  28   justify-content: center;
  29 }
  30 p {
  31   font-style: normal;
  32   font-weight: 500;
  33   font-size: 14px;
  34   line-height: 20px;
  35   letter-spacing: -0.154px;
  36   color: #242d60;
  37   height: 100%;
  38   width: 100%;
  39   padding: 0 20px;
  40   display: flex;
  41   align-items: center;
  42   justify-content: center;
  43   box-sizing: border-box;
  44 }
  45 img {
  46   border-radius: 6px;
  47   margin: 10px;
  48   width: 54px;
  49   height: 57px;
  50 }
  51 h3,
  52 h5 {
  53   font-style: normal;
  54   font-weight: 500;
  55   font-size: 14px;
  56   line-height: 20px;
  57   letter-spacing: -0.154px;
  58   color: #242d60;
  59   margin: 0;
  60 }
  61 h5 {
  62   opacity: 0.5;
  63 }
  64 button {
  65   height: 36px;
  66   background: #556cd6;
  67   color: white;
  68   width: 100%;
  69   font-size: 14px;
  70   border: 0;
  71   font-weight: 500;
  72   cursor: pointer;
  73   letter-spacing: 0.6;
  74   border-radius: 0 0 6px 6px;
  75   transition: all 0.2s ease;
  76   box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  77 }
  78 button:hover {
  79   opacity: 0.8;
  80 }