More actions
Content deleted Content added
Created page with ".main-wrapper { font-family: barlow; padding: 20px; } h2 { margin: 5px 0; } .card { width: 300px; height: max-content; background: #FEFFF5; padding: 20px; box-shadow: 0 0 8px rgba(0,0,0,0.1); } .tags { margin-bottom: 10px; } .tag {..." |
.card width changed to 390px |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
.main-wrapper { |
.main-wrapper { |
||
font-family: barlow; |
|||
padding: 20px; |
|||
} |
|||
} |
|||
h2 { |
|||
margin: 5px 0; |
|||
} |
|||
} |
|||
.card { |
|||
color: #151515; |
|||
width: 390px; |
|||
height: max-content; |
|||
background: #FEFFF5; |
|||
background: #FEFFF5; |
|||
padding: 20px; |
|||
box-shadow: 0 0 8px rgba(0,0,0,0.1); |
|||
} |
|||
} |
|||
.tags { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
.tag { |
|||
background-color: #6fef93; |
|||
color: #000; |
|||
padding: 2px 8px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
.description { |
|||
color: #929292; |
|||
font-size: 20px; |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
.warning { |
|||
background: #DEDFD8; |
|||
color: #27282C; |
|||
padding: 14px; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
border-radius: 6px; |
|||
margin-bottom: 15px; |
|||
} |
|||
} |
|||
.divider { |
|||
border: none; |
|||
border-top: 1px solid #ccc; |
|||
margin: 8px 0; |
|||
} |
|||
} |
|||
.stats { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
margin-bottom: 20px; |
|||
} |
|||
.stats div { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
.bars { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 10px 10px; |
|||
} |
|||
margin-bottom: 20px; |
|||
} |
|||
.bar-item label { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
display: block; |
|||
margin-bottom: 4px; |
|||
} |
|||
.bar div { |
|||
background: #111; |
|||
height: 100%; |
|||
} |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
⚫ | |||
.bar div { |
|||
display: flex; |
|||
⚫ | |||
height: 100%; |
|||
⚫ | |||
} |
|||
⚫ | |||
} |
|||
.perks { |
|||
list-style: none; |
|||
padding-left: 0; |
|||
⚫ | |||
font-weight: 600; |
|||
margin-bottom: 15px; |
|||
} |
|||
.perks li::after { |
|||
content: "▲"; |
|||
color: #3bc; |
|||
} |
|||
⚫ | |||
display: flex; |
|||
⚫ | |||
⚫ | |||
font-size: 14px; |
|||
} |
Latest revision as of 17:19, 15 May 2025
.main-wrapper {
font-family: barlow;
padding: 20px;
}
h2 {
margin: 5px 0;
}
.card {
color: #151515;
width: 390px;
height: max-content;
background: #FEFFF5;
padding: 20px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.tags {
margin-bottom: 10px;
}
.tag {
background-color: #6fef93;
color: #000;
padding: 2px 8px;
font-size: 12px;
font-weight: 500;
}
.description {
color: #929292;
font-size: 20px;
font-weight: 500;
margin-bottom: 10px;
}
.warning {
background: #DEDFD8;
color: #27282C;
padding: 14px;
font-size: 14px;
font-weight: 600;
border-radius: 6px;
margin-bottom: 15px;
}
.divider {
border: none;
border-top: 1px solid #ccc;
margin: 8px 0;
}
.stats {
font-size: 16px;
font-weight: 500;
}
.stats div {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.bars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 10px;
}
.bar-item label {
font-size: 16px;
font-weight: 500;
}
.bar div {
background: #111;
height: 100%;
}
.footer {
display: flex;
justify-content: space-around;
font-weight: bold;
font-size: 14px;
}