Template:CardPages/styles.css: Difference between revisions
Template page
More actions
BelowTheEcho (talk | contribs) No edit summary |
BelowTheEcho (talk | contribs) No edit summary |
||
| (159 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.main-banner { | .main-banner { | ||
position: relative; | position: relative; | ||
width: | width: 33%; | ||
min-height: | min-height: 600px; | ||
float: right; | |||
margin: 20px 0; | margin: 20px 0; | ||
border: 2px solid | /*border: 2px solid rgba(145, 145, 145, 0.25);*/ | ||
} | } | ||
.main-overlay { | .main-overlay { | ||
position: absolute; | position: absolute; | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
flex-direction: column; | |||
border: | border: 2px solid rgba(145, 145, 145, 0.25); | ||
padding: | padding: 5px; | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
.element-item { | .element-item { | ||
text-align: center; | text-align: center; | ||
align-items: center; | |||
/*border: 4px solid #F54927;*/ | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| Line 27: | Line 26: | ||
.element-item img { | .element-item img { | ||
width: 100%; | width: 100%; | ||
height: | height: auto; | ||
display: block; | |||
} | |||
.text-item { | |||
font-family: Barlow, sans-serif; | |||
font-size: 24px; | |||
text-align: center; | |||
align-items: center; | |||
/*border: 4px solid #F54927;*/ | |||
z-index: 2; | |||
} | |||
.text-header { | |||
display: flex; | |||
font-family: Barlow, sans-serif; | |||
font-size: 24px; | |||
color: #60BEC2; | |||
text-align: center; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
.text-header::after { | |||
flex: 1; | |||
content: ""; | |||
height: 1px; | |||
background: rgba(145, 145, 145, 0.25); | |||
} | |||
.grid-container { | |||
display:grid; | |||
} | |||
.grid-container div { | |||
text-align: center; | |||
font-size: 20px; | |||
} | |||
.item1 { | |||
grid-column-start: 1; | |||
grid-column-end: 3; | |||
} | |||
.header-banner { | |||
position: relative; | |||
width: 66%; | |||
min-height: 200px; | |||
} | |||
.header-overlay { | |||
position: relative; | |||
display: flex; | |||
line-height: 1.1; | |||
border-bottom: 1px solid rgba(145, 145, 145, 0.25); | |||
} | } | ||
Latest revision as of 21:13, 27 January 2026
.main-banner {
position: relative;
width: 33%;
min-height: 600px;
float: right;
margin: 20px 0;
/*border: 2px solid rgba(145, 145, 145, 0.25);*/
}
.main-overlay {
position: absolute;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 2px solid rgba(145, 145, 145, 0.25);
padding: 5px;
z-index: 1;
}
.element-item {
text-align: center;
align-items: center;
/*border: 4px solid #F54927;*/
cursor: pointer;
}
.element-item img {
width: 100%;
height: auto;
display: block;
}
.text-item {
font-family: Barlow, sans-serif;
font-size: 24px;
text-align: center;
align-items: center;
/*border: 4px solid #F54927;*/
z-index: 2;
}
.text-header {
display: flex;
font-family: Barlow, sans-serif;
font-size: 24px;
color: #60BEC2;
text-align: center;
align-items: center;
gap: 8px;
}
.text-header::after {
flex: 1;
content: "";
height: 1px;
background: rgba(145, 145, 145, 0.25);
}
.grid-container {
display:grid;
}
.grid-container div {
text-align: center;
font-size: 20px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.header-banner {
position: relative;
width: 66%;
min-height: 200px;
}
.header-overlay {
position: relative;
display: flex;
line-height: 1.1;
border-bottom: 1px solid rgba(145, 145, 145, 0.25);
}