<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value">font-size: medium;</code>
</p>
<div class="example-description">
<p>У тексті буде використано середній розмір браузера за умовчанням.</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div font-size " id="font-size-medium"><p>Hello world</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, iure.</p></div>
</div>
</aside>
<style type="text/css">#font-size-medium{ font-size:medium;}</style>
</section>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 20px;">font-size: 20px;</code>
</p>
<div class="example-description">
<p>Ви можете використовувати значення пікселів.</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div font-size " id="font-size-20px"><p>Hello world</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, consequuntur.</p></div>
</div>
</aside>
<style type="text/css">#font-size-20px{ font-size:20px;}</style>
</section>
.example {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2rem 3rem 0;
}
.example-header {
padding-right: 2rem;
width: 60%;
}
.example-value {
background: #ffdd57;
border-radius: 2px;
color: rgba(0,0,0,0.7);
display: inline-block;
padding: 0.1em 0.5em 0.15em;
vertical-align: top;
font-size: 20px;
}
.example-description {
font-size: 0.9rem;
margin-top: 0.5rem;
font-size: 18px;
}
.example-output {
border: 1px solid #e6e6e6;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0 2px 3px rgba(0,0,0,0.05);
font-size: 0.8em;
padding: 0.5em;
}
.example-preview {
width: 40%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.