Difference between revisions of "Ambrosia/Contacts"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
− | < | + | {{#css: |
− | + | ||
− | + | #contacts { | |
− | + | list-style-type: none; | |
− | + | align-content: center; | |
− | + | align-items: center; | |
+ | display: flex; | ||
+ | flex-flow: row wrap; | ||
+ | justify-content: center; | ||
+ | list-style: outside none none; | ||
+ | margin: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .contact-card { | ||
+ | margin: 0 6px; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | background-color: white; | ||
+ | max-width: 160px; | ||
+ | border-style: dotted; | ||
+ | border-width: 1px; | ||
+ | border-radius: 5px; | ||
+ | border-color: #331111; | ||
+ | } | ||
+ | |||
+ | .contact-card-placeholder { | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | height: 180px; | ||
+ | width: 124px; | ||
+ | background-color: darkslategray; | ||
+ | } | ||
+ | |||
+ | .contact-card img { | ||
+ | width: auto; | ||
+ | height: 180px; | ||
+ | } | ||
+ | |||
+ | }} | ||
+ | |||
+ | <ul id="contacts"> | ||
+ | <li><div class="contact-card">[[File:Stana8.jpg]]<span class="contact-name">Amelie Renoir</span></div></li> | ||
+ | <li><div class="contact-card">[[File:Calevaro3.jpg]]<span class="contact-name">Calevaro Stars</span></div></li> | ||
+ | <li><div class="contact-card">[[File:Dalvin_PB_1.jpg]]<span class="contact-name">Dalvin Marellson</span></div></li> | ||
+ | <li><div class="contact-card">[[File:ElPaige2.jpg]]<span class="contact-name">Paige Sands</span></div></li> | ||
+ | <li><div class="contact-card"><div class="contact-card-placeholder">[[File:Vamp-skull-01.png]]</div><span class="contact-name">Svetlana Seronva</span></div></li> | ||
+ | </ul> |