Hoe OM - Getuigskrifte
Leer hoe om responsiewe getuigskrifte met CSS te skep.
’n Getuigskrif word dikwels gebruik om mense te laat weet wat ander mense van jou of jou produk dink.
Chris Fox. HUB by Mighty Schools.
John Doe het ons van 'n webramp gered.
Rebecca Flex. HUB by Maatskappy.
Niemand is beter as John Doe nie.
Julia Roberts. Akteur.
Hou eenvoudig van Johnny Boy.
Hoe om getuigskrifte te styl
Stap 1) Voeg HTML by:
Voorbeeld
<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>
Stap 2) Voeg CSS by:
Voorbeeld
/* 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;
}
}