CSS infobox
Informace - infobox
Jak postupovat při vizuální kontrole a kontrole funkčnosti danných prvků.
- 1 Úvod / Prohlédněte si HTML a CSS prvku.
- 2 Zkouška / Vyzkoušejte si funkčnost a podívejte se na vzhled prvku.
- 3 Kopírovat / Zkopírujte kód na vlastní webové stránky.
- 4 Kontrola / Zkontrolujte prvek, přípaně ho dále upravte.
Kód:
<style>
.info-box {
display: flex-block;
width: 600px;
min-width: 350px;
font-family: arial,sans-serif;
}
.info {
display: flex-block;
width: auto;
min-width: 300px;
font-size: 16px;
padding: 20px;
border: 1px solid #dadce0;
background-color: white;
color: #555;
box-shadow: rgba(0, 0, 0, .1) 0 2px 4px;
border-radius: 6px;
}
ul.list-group {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.list-group .badge {
background-color: #1A73E8;
color: #fff;
font-weight: bold;
border-radius: 50%;
padding: 5px 9px;
text-align: center;
margin-left: 0px;
}
</style>
<div class="info-box">
<h3>Informace</h3>
<p>Jak postupovat při vizuální kontrole a kontrole funkčnosti danných prvků.</p>
<div class="info">
<ul class="list-group">
<li><span class="badge">1</span><strong> Úvod</strong> / Prohlédněte si HTML a CSS prvku.</li>
</ul>
</div>
<br>
<div class="info">
<ul class="list-group">
<li><span class="badge">2</span><strong> Zkouška</strong> / Vyzkoušejte si funkčnost a podívejte se na vzhled prvku.</li>
</ul>
</div>
<br>
<div class="info">
<ul class="list-group">
<li><span class="badge">3</span><strong> Kopírovat</strong> / Zkopírujte kód na vlastní webové stránky.</li>
</ul>
</div>
<br>
<div class="info">
<ul class="list-group">
<li><span class="badge">4</span><strong> Kontrola</strong> / Zkontrolujte prvek, přípaně ho dále upravte.</li>
</ul>
</div>
</div>