to style the section into a card, follow the steps below:
set background-color to .feature-container and button(for body as well)
this gives idea about elements’ size and shape
set the size for .feature-container and button
use width height for <div> and padding font-size for button
set border-radius for .feature-container and button, remove border on button
set box-shadow for .feature-container and button
set width for <img>
set flex layout on .features for its child element
set flex layout on .feature-container for its children elements
the completed css styles:
*{margin:0px;padding:0px;box-sizing:border-box;}body{/* bg color */background-color:#f7f7f7;font-family:Arial,sans-serif;}.features{padding-top:3rem;padding-left:3rem;/* position of children */display:flex;justify-content:center;min-height:100vh;align-items:center;gap:3rem;}.feature-container{/* bg color */background-color:#e0e0e0;/* size */width:300px;height:300px;/* shape */border-radius:1rem;/* shadow */box-shadow:026px29px#e8e8e8,0-26px100px#ffffff;/* layout for childrens */display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;}.featuresbutton{/* color */background-color:#5483f0;/* size border shape */padding:15px80px;border:none;border-radius:1rem;box-shadow:0px3px6px#00000044;font-size:1.15rem;color:white;cursor:pointer;}.featuresimg{width:75px;}
Summary(steps to make elements look better in CSS):