card | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

    <div class="card">
        <div class="top">
            <div class="dots">
                <div class="dot dot-1"></div>
                <div class="dot dot-2"></div>
                <div class="dot dot-3"></div>
              </div>
            <p class="g-color">_&gt;</p>
        </div>
        <div class="bottom">
            <p class="code">
                <span class="red">function</span> <span class="violet">helloWorld</span><span class="blue">(</span><span class="orange">text</span><span class="blue">)</span><span class="blue">{</span><br>
                    <span class="red space-4">for</span><span class="orange">(</span><span class="red">let</span> <span class="white">i</span> <span class="red">=</span> <span class="blue">0</span> <span class="white">; i</span> <span class="red">&lt;</span> <span class="blue">10</span> <span class="white">; i</span><span class="red">++</span><span class="orange">){</span><br>
                        <span class="blue space-4x2">console</span><span class="white">.</span><span class="violet">log(</span><span class="blue">`${</span><span class="orange">text</span><span class="blue">}`</span><span class="violet">)</span><span class="white">;</span><br>
                    <span class="orange space-4">}</span><br>
                <span class="blue">}</span><br>
                <br>
                <span class="violet">helloWorld</span><span class="blue">('Hello World')</span><span class="white">;</span>
            </p>            
        </div>
      </div>

کد CSS

.card {
  font-family: monospace;
  margin-top: 40px;
  width: 350px;
  height: 260px;
  background: #292828da;
  border: 2px solid #000;
  border-radius: 15px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}

.dots {
  display: flex;
  justify-content: last baseline;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.dot-1 {
  background-color: rgb(0, 132, 255);
}

.dot-2 {
  background-color: rgb(230, 0, 255);
}

.dot-3 {
  background-color: rgb(0, 255, 89);
}

.top p {
  font-size: 20px;
  font-weight: bold;
}

.dot , .top p {
  margin: 5px;
}

.g-color {
  color: darkgreen;
}

.bottom {
  margin-top: 30px;
  padding: 0 25px;
}

.code {
  font-size: 15px;
}

.red {
  color: rgb(210, 63, 52);
}

.violet {
  color: rgb(181, 40, 203);
}

.blue {
  color: rgb(91, 131, 223);
}

.orange {
  color: rgb(195, 128, 3);
}

.white {
  color: rgb(163, 163, 163);
}

.space-4 {
  margin-left: 35px;
}

.space-4x2 {
  margin-left: 70px;
}

نوع: card

تاریخ ایجاد: 2026/06/06

آخرین بروزرسانی: 2026/06/06