Card by Yaya12085

Made by

@Yaya12085

Theme:

Light

#card#dark#editor#code

#e8e8e8

368 views

CSSAdd prefixes

1.code-editor {
2  max-width: 300px;
3  background-color: #1d1e22;
4  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
5  border-radius: 8px;
6  padding: 2px;
7}
8
9.header {
10  display: flex;
11  align-items: center;
12  justify-content: space-between;
13  margin: 10px;
14}
15
16.title {
17  font-family: Lato, sans-serif;
18  font-weight: 900;
19  font-size: 14px;
20  letter-spacing: 1.57px;
21  color: rgb(212 212 212);
22}
23
24.icon {
25  width: 20px;
26  transition: .2s ease;
27}
28
29.icon:hover {
30  cursor: pointer;
31  border-radius: 50px;
32  background-color: #6e7281;
33}
34
35.editor-content {
36  margin: 0 10px 10px;
37  color: white;
38}
39
40.property {
41  margin-left: 30px;
42}
43
44.property:hover {
45  cursor: text;
46}
47
48.editor-content .color-0 {
49  color: rgb(86 156 214);
50}
51
52.editor-content .color-1 {
53  color: rgb(182 206 168);
54}
55
56.editor-content .color-2 {
57  color: rgb(156 220 254);
58}
59
60.editor-content .color-3 {
61  color: rgb(207 146 120);
62}
63
64.color-preview-1,.color-preview-2 {
65  height: 8px;
66  width: 8px;
67  border: 1px solid #fff;
68  display: inline-block;
69  margin-right: 3px;
70}
71
72.color-preview-1 {
73  background-color: #1d1e22;
74}
75
76.color-preview-1 {
77  background-color: rgba(0, 0, 0, 0.5);
78}

.code-editor {
  max-width: 300px;
  background-color: #1d1e22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 2px;
}

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

.title {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: rgb(212 212 212);
}

.icon {
  width: 20px;
  transition: .2s ease;
}

.icon:hover {
  cursor: pointer;
  border-radius: 50px;
  background-color: #6e7281;
}

.editor-content {
  margin: 0 10px 10px;
  color: white;
}

.property {
  margin-left: 30px;
}

.property:hover {
  cursor: text;
}

.editor-content .color-0 {
  color: rgb(86 156 214);
}

.editor-content .color-1 {
  color: rgb(182 206 168);
}

.editor-content .color-2 {
  color: rgb(156 220 254);
}

.editor-content .color-3 {
  color: rgb(207 146 120);
}

.color-preview-1,.color-preview-2 {
  height: 8px;
  width: 8px;
  border: 1px solid #fff;
  display: inline-block;
  margin-right: 3px;
}

.color-preview-1 {
  background-color: #1d1e22;
}

.color-preview-1 {
  background-color: rgba(0, 0, 0, 0.5);
}

HTML

1<div class="code-editor">
2      <div class="header">
3        <span class="title">CSS</span>
4       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M6 6L18 18"></path> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M18 6L6 18"></path> </g></svg>
5      </div>
6      <div class="editor-content">
7        <code class="code">
8          <p><span class="color-0">.code-editor </span> <span>{</span></p>
9
10          <p class="property">
11            <span class="color-2">max-width</span><span>:</span>
12            <span class="color-1">300px</span>;
13          </p>
14          <p class="property">
15            <span class="color-2">background-color</span><span>:</span>
16            <span class="color-preview-1"></span><span class="">#1d1e22</span>;
17          </p>
18          <p class="property">
19            <span class="color-2"> box-shadow</span><span>:</span>
20            <span class="color-1">0px 4px 30px  <span class="color-preview-2"></span><span class="color-3">rgba(</span>0, 0, 0, 0.5<span class="color-3">)</span></span>;
21          </p>
22          <p class="property">
23            <span class="color-2">border-radius</span><span>:</span>
24            <span class="color-1">8px</span>;
25          </p>
26          <span>}</span>
27        </code>
28      </div>
29    </div>

<div class="code-editor">
      <div class="header">
        <span class="title">CSS</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M6 6L18 18"></path> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M18 6L6 18"></path> </g></svg>
      </div>
      <div class="editor-content">
        <code class="code">
          <p><span class="color-0">.code-editor </span> <span>{</span></p>

          <p class="property">
            <span class="color-2">max-width</span><span>:</span>
            <span class="color-1">300px</span>;
          </p>
          <p class="property">
            <span class="color-2">background-color</span><span>:</span>
            <span class="color-preview-1"></span><span class="">#1d1e22</span>;
          </p>
          <p class="property">
            <span class="color-2"> box-shadow</span><span>:</span>
            <span class="color-1">0px 4px 30px  <span class="color-preview-2"></span><span class="color-3">rgba(</span>0, 0, 0, 0.5<span class="color-3">)</span></span>;
          </p>
          <p class="property">
            <span class="color-2">border-radius</span><span>:</span>
            <span class="color-1">8px</span>;
          </p>
          <span>}</span>
        </code>
      </div>
    </div>