I'm currently looking to try learn CSS properly and I'm looking to recreate the following image using CSS:Now I've managed to recreate the image (sort of) what I am looking to know though is based on my code what am I doing wrong/what would be the best practice. Many solutions fix a problem I want to know if my solution is reasonable.<div style=width:350px;height:380px;position:relative;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);border-color: #ddd;><div style=width:100%;height:70px;background-color:red></div><div style=height:180px;width:350px;background-color:gray;></div><div style=background-color:yellow;bottom:0px;position:absolute;width:350px;height:130px;>        <p style=margin-top:0px;position: absolute;top: 16px;left: 16px;>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>        <div style=width:25px;height:25px; background-color:blue;display:inline-block;position: absolute;bottom: 23.5px;left: 16px;></div>        <div style=width:25px;height:25px; background-color:blue;display:inline-block;position: absolute;bottom: 23.5px;left: 57px;></div>        <div style=width:90px;height:40px; background-color:pink;display:inline-block;position: absolute;right: 16px;bottom:16px;>Testing</div></div>Here is the CSS image:
Checking CSS code for best practices when mimicking
html;css;image