Jak NA TO - Ohlasy
Naučte se vytvářet responzivní posudky pomocí CSS.
Posudek se často používá k tomu, aby lidé věděli, co si o vás nebo vašem produktu myslí ostatní.
Chris Fox. CEO ve společnosti Mighty Schools.
John Doe nás zachránil před webovou katastrofou.
Rebecca Flexová. CEO ve společnosti Company.
Nikdo není lepší než John Doe.
Julia Robertsová. Herec.
Jednoduše milujte Johnnyho Boye.
Jak stylovat posudky
Krok 1) Přidejte HTML:
Příklad
<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>
Krok 2) Přidejte CSS:
Příklad
/* 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;
}
}