Card by Mhyar-nsi

Made by

@Mhyar-nsi

Theme:

Dark

#card

#212121

1.2K views

CSSAdd prefixes

1.card {
2  font-family: monospace;
3  margin-top: 40px;
4  width: 350px;
5  height: 260px;
6  background: #292828da;
7  border: 2px solid #000;
8  border-radius: 15px;
9}
10
11.top {
12  display: flex;
13  justify-content: space-between;
14  align-items: center;
15  margin: 10px;
16}
17
18.dots {
19  display: flex;
20  justify-content: last baseline;
21}
22
23.dot {
24  width: 15px;
25  height: 15px;
26  border-radius: 50%;
27}
28
29.dot-1 {
30  background-color: rgb(0, 132, 255);
31}
32
33.dot-2 {
34  background-color: rgb(230, 0, 255);
35}
36
37.dot-3 {
38  background-color: rgb(0, 255, 89);
39}
40
41.top p {
42  font-size: 20px;
43  font-weight: bold;
44}
45
46.dot , .top p {
47  margin: 5px;
48}
49
50.g-color {
51  color: darkgreen;
52}
53
54.bottom {
55  margin-top: 30px;
56  padding: 0 25px;
57}
58
59.code {
60  font-size: 15px;
61}
62
63.red {
64  color: rgb(210, 63, 52);
65}
66
67.violet {
68  color: rgb(181, 40, 203);
69}
70
71.blue {
72  color: rgb(91, 131, 223);
73}
74
75.orange {
76  color: rgb(195, 128, 3);
77}
78
79.white {
80  color: rgb(163, 163, 163);
81}
82
83.space-4 {
84  margin-left: 35px;
85}
86
87.space-4x2 {
88  margin-left: 70px;
89}

.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;
}

HTML

1    <div class="card">
2        <div class="top">
3            <div class="dots">
4                <div class="dot dot-1"></div>
5                <div class="dot dot-2"></div>
6                <div class="dot dot-3"></div>
7              </div>
8            <p class="g-color">_&gt;</p>
9        </div>
10        <div class="bottom">
11            <p class="code">
12                <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>
13                    <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>
14                        <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>
15                    <span class="orange space-4">}</span><br>
16                <span class="blue">}</span><br>
17                <br>
18                <span class="violet">helloWorld</span><span class="blue">('Hello World')</span><span class="white">;</span>
19            </p>            
20        </div>
21      </div>

    <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>