Creating a Responsive Div with Padding and Text
Here is some code to create a responsive div with purple background, white text, and centered formatting:
Style:
.testimonial { background-color: #693591; /* Purple background color */ color: #fff; /* White text color */ padding: 20px; margin: 20px; font-family: 'Georgia', serif; /* Font style */ font-size: 1.2rem; /* Adjust font size as needed */ line-height: 1.5; /* Line spacing */ border-radius: 8px; /* Rounded corners */ max-width: 600px; /* Optional max width for responsiveness */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ } .testimonial p { margin: 0;} .testimonial .author { margin-top: 10px; font-weight: bold; text-align: right; }
Body Div:
<div class="testimonial"> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nam facilisis, diam id gravida aliquam, ut fringilla felis lectus ut libero. <p> class="author">- Name.</p> </div>
- The .testimonial class styles the main container with a purple background, white text, padding, and rounded corners.
- The p element contains the main text, while the .author class is used to style and align the author’s name to the right.
- The box-shadow adds a subtle shadow for a slightly raised look.
Feel free to adjust the styles to fit your specific needs, such as changing font sizes, padding, or color shades.
Was this article helpful?
YesNo