Sem resumo de edição |
Sem resumo de edição |
||
(6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
Linha 8: | Linha 8: | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
. | .IntroCardOrigem { | ||
position: relative; | position: relative; | ||
float:left; | float:left; | ||
min-height: 560px; | min-height: 560px; | ||
width: | width: 250px; | ||
color: #2b282c; | color: #2b282c; | ||
margin: 15px 15px 15px 0; | margin: 15px 15px 15px 0; | ||
} | } | ||
.IntroCardOrigem:hover{ | |||
transform: scale(1.05); | |||
} | |||
*, :after, :before { | *, :after, :before { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Linha 22: | Linha 27: | ||
display: block; | display: block; | ||
} | } | ||
. | .IntroCardOrigem:before { | ||
content: ""; | content: ""; | ||
display: block; | display: block; | ||
Linha 34: | Linha 39: | ||
border: 1px solid #897051; | border: 1px solid #897051; | ||
} | } | ||
. | .OutlineFrameOrigem { | ||
position: relative; | position: relative; | ||
min-height: 560px; | min-height: 560px; | ||
} | } | ||
. | .IntroCardOrigem-content { | ||
position: relative; | position: relative; | ||
min-height: 560px; | min-height: 560px; | ||
/*text-align: center;*/ | /*text-align: center;*/ | ||
} | } | ||
. | .topleftOrigem{ | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 0px; | ||
left: 15px; | left: 15px; | ||
font-size: 18px; | font-size: 18px; | ||
Linha 52: | Linha 57: | ||
background: #897051; | background: #897051; | ||
} | } | ||
. | .topleftOrigem a { | ||
color: #A88541; | color: #A88541; | ||
} | } | ||
. | .topleftOrigem a:hover { | ||
color: #FFF; | color: #FFF; | ||
} | } | ||
Linha 64: | Linha 69: | ||
} | } | ||
} | } | ||
. | .IntroCardOrigem-figure { | ||
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
Linha 70: | Linha 75: | ||
height: 225px; | height: 225px; | ||
} | } | ||
. | .IntroCardOrigem-figure{ | ||
margin: 0; | margin: 0; | ||
} | } | ||
@media (min-width: 1024px) { | @media (min-width: 1024px) { | ||
. | .IntroCardOrigem-figure:before { | ||
content: ""; | content: ""; | ||
display: block; | display: block; | ||
Linha 80: | Linha 85: | ||
} | } | ||
} | } | ||
. | .IntroCardOrigem-figure:before { | ||
content: ""; | content: ""; | ||
display: block; | display: block; | ||
padding-top: 0; | padding-top: 0; | ||
} | } | ||
. | .IntroCardOrigem-image { | ||
height: 100%; | height: 100%; | ||
width: 100%; | width: 100%; | ||
Linha 94: | Linha 99: | ||
object-position: 50% 0; | object-position: 50% 0; | ||
} | } | ||
. | .IntroCardOrigem-image img { | ||
border-style: none; | border-style: none; | ||
border-radius: 15px 15px 0 0; | border-radius: 15px 15px 0 0; | ||
} | } | ||
. | .IntroCardOrigem-figure:after { | ||
content: ""; | content: ""; | ||
display: block; | display: block; | ||
Linha 109: | Linha 114: | ||
/* Borda Personalizada */ | /* Borda Personalizada */ | ||
. | .OutlineFrameOrigem .OutlineFrame-ext { | ||
overflow: hidden; | overflow: hidden; | ||
position: absolute; | position: absolute; | ||
Linha 120: | Linha 125: | ||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-ext:before { | ||
position: absolute; | position: absolute; | ||
top: 1em; | top: 1em; | ||
Linha 130: | Linha 135: | ||
content: ""; | content: ""; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-circles { | ||
position: absolute; | position: absolute; | ||
height: 1em; | height: 1em; | ||
Linha 137: | Linha 142: | ||
right: 0; | right: 0; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-circles:before { | ||
left: 0.2em; | left: 0.2em; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-circles:before, | ||
. | .OutlineFrameOrigem .OutlineFrame-circles:after { | ||
position: absolute; | position: absolute; | ||
height: 0.15em; | height: 0.15em; | ||
Linha 150: | Linha 155: | ||
content: ""; | content: ""; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-circles:after { | ||
right: 0.2em; | right: 0.2em; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-cutOuts { | ||
display: block; | display: block; | ||
height: 1em; | height: 1em; | ||
Linha 159: | Linha 164: | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-cutOuts:before { | ||
left: -1em; | left: -1em; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-cutOuts:before, | ||
. | .OutlineFrameOrigem .OutlineFrame-cutOuts:after { | ||
position: absolute; | position: absolute; | ||
top: -1em; | top: -1em; | ||
Linha 172: | Linha 177: | ||
content: ""; | content: ""; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-cutOuts:after { | ||
right: -1em; | right: -1em; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-topCut { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Linha 184: | Linha 189: | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-topCut:before { | ||
left: 0; | left: 0; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-topCut:before, | ||
. | .OutlineFrameOrigem .OutlineFrame-topCut:after { | ||
position: absolute; | position: absolute; | ||
background: currentColor; | background: currentColor; | ||
Linha 195: | Linha 200: | ||
content: ""; | content: ""; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-topCut:after { | ||
right: 0; | right: 0; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-cut { | ||
position: absolute; | position: absolute; | ||
top: -0.2em; | top: -0.2em; | ||
Linha 207: | Linha 212: | ||
height: 0.4em; | height: 0.4em; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-cut:before { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Linha 217: | Linha 222: | ||
content: ""; | content: ""; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-ext.isDark { | ||
top: 0.85rem; | top: 0.85rem; | ||
bottom: 0.55rem; | bottom: 0.55rem; | ||
Linha 225: | Linha 230: | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
} | } | ||
. | .OutlineFrameOrigem .OutlineFrame-ext.isDark:after { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Linha 275: | Linha 280: | ||
/* Tabela interna */ | /* Tabela interna */ | ||
. | .OutlineFrameOrigem table { | ||
margin: 15px 0 0 0; | margin: 15px 0 0 0; | ||
width: 435px; | width: 435px; | ||
Linha 283: | Linha 288: | ||
background-size: contain; | background-size: contain; | ||
} | } | ||
. | .OutlineFrameOrigem td { | ||
text-align: left; | text-align: left; | ||
vertical-align: top; | vertical-align: top; |
Edição atual tal como às 16h52min de 23 de maio de 2023
/* Estrutura Base */ .CardsColumns{ display: flex; flex-direction: row; flex-wrap: wrap; margin-left: auto; margin-right: auto; justify-content: center; } .IntroCardOrigem { position: relative; float:left; min-height: 560px; width: 250px; color: #2b282c; margin: 15px 15px 15px 0; } .IntroCardOrigem:hover{ transform: scale(1.05); } *, :after, :before { box-sizing: border-box; } div { display: block; } .IntroCardOrigem:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #cecbc5; border-radius: 15px; border: 1px solid #897051; } .OutlineFrameOrigem { position: relative; min-height: 560px; } .IntroCardOrigem-content { position: relative; min-height: 560px; /*text-align: center;*/ } .topleftOrigem{ position: absolute; bottom: 0px; left: 15px; font-size: 18px; color: #FFF; padding: 5px; background: #897051; } .topleftOrigem a { color: #A88541; } .topleftOrigem a:hover { color: #FFF; } @media (min-width: 1024px) { .IntroCard-figure { position: relative; overflow: hidden; } } .IntroCardOrigem-figure { position: relative; width: 100%; overflow: hidden; height: 225px; } .IntroCardOrigem-figure{ margin: 0; } @media (min-width: 1024px) { .IntroCardOrigem-figure:before { content: ""; display: block; padding-top: 0; } } .IntroCardOrigem-figure:before { content: ""; display: block; padding-top: 0; } .IntroCardOrigem-image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; object-position: 50% 0; } .IntroCardOrigem-image img { border-style: none; border-radius: 15px 15px 0 0; } .IntroCardOrigem-figure:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; } /* Borda Personalizada */ .OutlineFrameOrigem .OutlineFrame-ext { overflow: hidden; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; color: #99664d; font-size: 2rem; pointer-events: none; } .OutlineFrameOrigem .OutlineFrame-ext:before { position: absolute; top: 1em; bottom: 0; left: 0; right: 0; border: 1px solid; border-top: none; content: ""; } .OutlineFrameOrigem .OutlineFrame-circles { position: absolute; height: 1em; top: 0; left: 0; right: 0; } .OutlineFrameOrigem .OutlineFrame-circles:before { left: 0.2em; } .OutlineFrameOrigem .OutlineFrame-circles:before, .OutlineFrameOrigem .OutlineFrame-circles:after { position: absolute; height: 0.15em; width: 0.15em; top: 0.25em; border-radius: 50%; border: 1px solid #99664d; content: ""; } .OutlineFrameOrigem .OutlineFrame-circles:after { right: 0.2em; } .OutlineFrameOrigem .OutlineFrame-cutOuts { display: block; height: 1em; position: relative; overflow: hidden; } .OutlineFrameOrigem .OutlineFrame-cutOuts:before { left: -1em; } .OutlineFrameOrigem .OutlineFrame-cutOuts:before, .OutlineFrameOrigem .OutlineFrame-cutOuts:after { position: absolute; top: -1em; height: 2em; width: 2em; border: 1px solid; border-radius: 50%; content: ""; } .OutlineFrameOrigem .OutlineFrame-cutOuts:after { right: -1em; } .OutlineFrameOrigem .OutlineFrame-topCut { position: absolute; top: 0; left: 1em; right: 1em; height: 1em; color: #99664d; overflow: hidden; } .OutlineFrameOrigem .OutlineFrame-topCut:before { left: 0; } .OutlineFrameOrigem .OutlineFrame-topCut:before, .OutlineFrameOrigem .OutlineFrame-topCut:after { position: absolute; background: currentColor; height: 0.1rem; width: calc(50% - 0.25em); content: ""; } .OutlineFrameOrigem .OutlineFrame-topCut:after { right: 0; } .OutlineFrameOrigem .OutlineFrame-cut { position: absolute; top: -0.2em; left: 50%; transform: translateX(-50%); display: block; width: 0.4em; height: 0.4em; } .OutlineFrameOrigem .OutlineFrame-cut:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid; transform: rotate(45deg); content: ""; } .OutlineFrameOrigem .OutlineFrame-ext.isDark { top: 0.85rem; bottom: 0.55rem; left: 0.85rem; right: 0.85rem; color: #68482c; font-size: 1.1rem; } .OutlineFrameOrigem .OutlineFrame-ext.isDark:after { position: absolute; top: 0; bottom: 0; left: 1em; right: 1em; border-top: 1px solid; content: ""; } /* Conteúdo do Card */ .IntroCard-wrapper { position: relative; padding: 0.5rem 0.95rem 0.5rem; } @media (min-width: 1024px) { .IntroCard-title { font-size: 2.2rem; } } .IntroCard-title { padding: 0 5px 0 5px; margin: 0 0 0 0; font-size: 20px; } #ClassName{ border-bottom: 2px solid #68482c; margin-top: 0px; margin-bottom: 0px; } #lore-separador{ padding:10px; min-height:125px; border-top: 2px solid #68482c; border-bottom: 2px solid #68482c; background: rgba(137, 112, 81, 0.3);; } #lore{ font-style:italic; font-size:14px; margin: 0; text-align: left; } #lore:first-letter{ font-size:18px; font-weight:bold; color: #897051; } /* Tabela interna */ .OutlineFrameOrigem table { margin: 15px 0 0 0; width: 435px; background: linear-gradient(rgba(206,203,197,0.9), rgba(206,203,197,.9)); background-position: center; background-repeat: no-repeat; background-size: contain; } .OutlineFrameOrigem td { text-align: left; vertical-align: top; padding: 0 0 0 10px; } #titulo{ font-weight:bold; width:140px; } #titulo_traco{ color:#897051; font-weight:bold; font-size:17px; } #traco_origem{ font-style:italic; font-size:14px; margin: 5px; text-align: left; }