How TO - Erfahrungsberichte
Erfahren Sie, wie Sie mit CSS responsive Testimonials erstellen.
Ein Testimonial wird oft verwendet, um Menschen wissen zu lassen, was andere über Sie oder Ihr Produkt denken.
Chris Fox. CEO bei Mighty Schools.
John Doe hat uns vor einer Web-Katastrophe gerettet.
Rebekka Flex. CEO bei Unternehmen.
Niemand ist besser als John Doe.
Julia Roberts. Darsteller.
Liebe Johnny Boy einfach.
So gestalten Sie Testimonials
Schritt 1) HTML hinzufügen:
Beispiel
<div class="container">
<img src="bandmember.jpg" alt="Avatar"
style="width:90px">
<p><span>Chris Fox.</span> CEO at Mighty
Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div
class="container">
<img src="avatar_g2.jpg" alt="Avatar"
style="width:90px">
<p><span >Rebecca Flex.</span> CEO at
Company.</p>
<p>No one is better than John Doe.</p>
</div>
Schritt 2) CSS hinzufügen:
Beispiel
/* Style the container with a rounded border, grey background and some padding
and margin */
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear
floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images
inside the container to the left. Add a right margin, and style the image as a
circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/*
Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This
will center both the text and the image inside the container */
@media
(max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}