پیشنمایش زنده
کد HTML
<div class="card">
<div class="top">
<p class="title">script.py</p>
<span class="buttons">
<button class="minimize">
<svg viewBox="0 0 10.2 1" y="0px" x="0px"><rect height="1" width="10.2" y="50%" x="0"></rect></svg>
</button>
<button class="maximize">
<svg viewBox="0 0 10 10"><path d="M0,0v10h10V0H0z M9,9H1V1h8V9z"></path></svg>
</button>
<button class="close">
<svg viewBox="0 0 10 10"><polygon points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1"></polygon></svg>
</button>
</span>
</div>
<div class="topfix">
</div>
<hr>
<div class="content">
<p>
<code>
<i class="c1">import</i> os, sys<br>
<b class="c2">os</b>.system<b class="c3">(</b><b class="c4">"title test script"</b><b class="c3">)</b><br>
<b class="c2">print</b><b class="c3">(</b><b class="c4">"Hello UIVERSE.io!"</b><b class="c3">)</b><br>
<b class="c2">sys</b>.exit<b class="c3">(</b><b class="c3">)</b><br>
<i class="comment">#this is a comment.</i>
</code>
</p>
</div>
</div>
کد CSS
.card {
width: 250px;
height: 254px;
background: #121212;
border-radius: 10px;
border: 1px #212121 solid;
}
.card hr {
color: #313131;
margin-top: -3.5px
}
.content {
color: #8e8e8e;
margin-left: 0.3em;
}
.c1 {
color: rgb(55, 91, 158)
}
.c2 {
color: rgb(55, 158, 150)
}
.c3 {
color: rgb(158, 151, 55)
}
.c4 {
color: rgb(88, 158, 55)
}
.comment {
opacity: 50%
}
.title {
color: #e8e8e8;
font-size: small;
float: left;
margin-left: 0.6em;
margin-top: 0.6em;
}
.top {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 21px;
font-weight: 450;
background-color: #121212;
width: 100%;
text-align: right;
border-radius: 10px
}
.topfix {
background-color: #121212;
width: 100%;
height: 1em;
margin-top: -1em;
}
button {
width: 40px;
height: 35px;
margin-left: -5px;
border: 0;
outline: 0;
background: transparent;
transition: 0.2s;
}
button svg path,
button svg rect,
button svg polygon {
fill: #ffffff;
}
button svg {
width: 10px;
height: 10px;
}
.close:hover {
background-color: #ffffff10;
}
.maximize:hover {
background-color: #ffffff10;
}
.minimize:hover {
background-color: #ffffff10;
}