Difference between revisions of "Yue"

From City of Hope MUSH
Jump to navigation Jump to search
Line 1: Line 1:
−
<div class="container">
+
.container {
−
<div class="top-section">
+
display: flex;
−
<div class="left-panel">
+
justify-content: center;
 +
width: 1000px;
 +
height: auto;
 +
margin: auto;
 +
display: flex;
 +
flex-direction: column;
 +
font-family: "Brush Script MT";
 +
background-color: #F7F6f4;
 +
}
 +
 +
.top-section {
 +
display: flex;
 +
}
 +
 +
.header-container {
 +
width: 100%;
 +
display: flex;
 +
justify-content: center;
 +
padding: 2em 0;
 +
}
 +
 +
.header-title {
 +
width: 94%;
 +
font-size: 50px;
 +
letter-spacing: 2px;
 +
word-spacing: 2px;
 +
color: BLACK;
 +
font-weight: 700;
 +
text-decoration: none;
 +
font-style: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
}
 +
 +
.left-panel {
 +
width: 30%;
 +
height: auto;
 +
background-color: WHITE GRAY;
 +
border: 0.75em;
 +
border-style: solid;
 +
border-color: black;
 +
border-bottom-style: hidden;
 +
font-size:1.7em;
 +
}
 +
 +
.right-panel {
 +
width: 70%;
 +
display: flex;
 +
flex-direction: column;
 +
justify-content: center;
 +
}
 +
 +
.hr-image {
 +
width: 100%;
 +
}
 +
 +
.hr-image img {
 +
width: 100%;
 +
height: auto;
 +
margin-bottom: 1em;
 +
}
 +
 +
.info-table {
 +
margin: auto;
 +
width: 100%;
 +
padding: 0 1em;
 +
}
 +
 +
.info-table-label {
 +
font-weight: 600;
 +
width: 50%;
 +
}
  
−
<div class="portrait-image">[[File:.jpg]]</div>
+
.icon {
 +
display: flex;
 +
justify-content: center;
 +
}
  
−
<table class="info-table">
+
hr {
−
<tr>
+
display: flex;
−
<td class="info-table-label">Full Name:</td>
+
justify-content: center;
−
<td>Wang Yue (黄景瑜)</td>
+
height: auto;
−
</tr>
+
background-image: url('https://cityofhopemush.net/images/b/b0/GoldLine.png');
−
<tr>
+
}
−
<td class="info-table-label">Position:</td>
 
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
 
−
</tr>
 
−
<tr>
 
−
<td class="info-table-label">Demeanor:</td>
 
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
 
−
</tr>
 
−
<tr>
 
−
<td class="info-table-label">Apparent Age:</td>
 
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
 
−
</tr>
 
−
</table>
 
−
 
−
<hr style="width: 90%" />
 
  
−
<table class="info-table">
+
.photo-banner {
−
<tr>
+
width: 100%;
−
<td class="info-table-label">Height:</td>
+
}
−
<td>6'1"</td>
+
−
</tr>
+
.photo-banner img {
−
<tr>
+
width: 100%;
−
<td class="info-table-label">Weight:</td>
+
height: auto;
−
<td>198lbs</td>
+
}
−
</tr>
+
−
<tr>
+
.mid-banner {
−
<td class="info-table-label">Hair:</td>
+
margin-bottom: -1em;
−
<td>Short black</td>
+
}
−
</tr>
+
−
<tr>
+
.biography-container {
−
<td class="info-table-label">Eyes:</td>
+
width: 94%;
−
<td>Winter storm grey</td>
+
padding: 1em 3%;
−
</tr>
+
font-size: 1.7em;
−
</table>
+
}
−
 
+
−
<hr style="width: 90%" />
+
.center {
−
 
+
text-align: center;
−
<table class="info-table">
+
}
−
<tr>
+
−
<td class="info-table-label">Hometown:</td>
+
.underline {
−
<td>Lanzhou, Gansu Province, China</td>
+
border-bottom-style: solid;
−
</tr>
+
border-bottom-width: 0.1em;
−
<tr>
+
border-color: black;
−
<td class="info-table-label">Race:</td>
+
padding-bottom: 0.5em;
−
<td>Kitsune</td>
+
}
−
</tr>
+
−
<tr>
+
.label {
−
<td class="info-table-label">Faction:</td>
+
margin: 0.2em 0;
−
<td>Gaian</td>
+
font-size: 1.7em;
−
</tr>
+
font-weight: 600;
−
<tr>
+
font-style: italic;
−
<td class="info-table-label">Title:</td>
+
}
−
<td>Lorem ipsum</td>
+
−
</tr>
+
.white {
−
</table>
+
color: lightgray;
−
 
+
border-color: lightgray;
−
<hr style="width: 90%" />
+
}
−
 
+
−
<div class="icon">[[File:Kitsune.png]]</div>
+
.hooks-container {
−
 
+
background-color: black;
−
</div>
+
color: lightgray;
−
 
+
width: 94%;
−
<div class="right-panel">
+
padding: 1em 3%;
−
 
+
font-size: 1.7em;
−
<div class="header-container">
+
display: flex;
−
<div class="header-title center">Wang Yue (黄景瑜)</div>
+
flex-direction: column;
−
+
}
−
<div class="hr-image">[[File:GoldLine.png]]</div>
+
−
</div>
+
.hooks-container, .contacts-container .label {
−
 
+
margin-bottom: 1em;
−
<!-- <div class="photo-banner">[[File:.jpg]]</div> -->
+
}
−
 
+
−
<div class="biography-container">
+
.contacts-container, .gallery-container, .logs-container {
−
<div class="label center underline">Biography</div>
+
background-color: white;
−
 
+
color: black;
−
<p>
+
width: 94%;
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra tincidunt est non semper. Sed ut vestibulum arcu, id sollicitudin nibh. Quisque nec quam risus. Praesent vitae odio mi. Mauris arcu odio, mattis non elementum laoreet, hendrerit eget nunc. Maecenas pretium turpis et tortor porttitor, non consequat magna dignissim. Sed posuere elit sed tempor molestie.
+
padding: 1em 3%;
−
 
+
display: flex;
−
Donec ligula nibh, blandit non convallis eget, tempus ac enim. Morbi ullamcorper a purus a iaculis. Quisque convallis velit efficitur aliquet pretium. Quisque cursus lacinia quam, a mattis nulla lobortis quis. Suspendisse elementum faucibus risus ac auctor. Sed tristique porta ligula in tristique. Sed posuere pretium libero sit amet pretium. Vivamus pretium mi ex, et porta augue interdum vitae. Pellentesque maximus blandit maximus. Integer vel libero et est gravida tincidunt. Ut rutrum magna in justo tincidunt, sit amet elementum dui vulputate. Vestibulum quis sem justo. Sed ultrices ipsum eu mi bibendum, at laoreet dui lobortis. Integer et lectus nec orci finibus auctor volutpat ac massa. Etiam ac purus dictum, elementum tellus non, semper mauris. Donec sagittis lorem id orci fermentum suscipit.
+
flex-direction: column;
−
</p>
+
}
−
+
−
<p>
+
.hooks-content {
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra tincidunt est non semper. Sed ut vestibulum arcu, id sollicitudin nibh. Quisque nec quam risus. Praesent vitae odio mi. Mauris arcu odio, mattis non elementum laoreet, hendrerit eget nunc. Maecenas pretium turpis et tortor porttitor, non consequat magna dignissim. Sed posuere elit sed tempor molestie.
+
width: 100%;
−
 
+
display: flex;
−
Donec ligula nibh, blandit non convallis eget, tempus ac enim. Morbi ullamcorper a purus a iaculis. Quisque convallis velit efficitur aliquet pretium. Quisque cursus lacinia quam, a mattis nulla lobortis quis. Suspendisse elementum faucibus risus ac auctor. Sed tristique porta ligula in tristique. Sed posuere pretium libero sit amet pretium. Vivamus pretium mi ex, et porta augue interdum vitae. Pellentesque maximus blandit maximus. Integer vel libero et est gravida tincidunt. Ut rutrum magna in justo tincidunt, sit amet elementum dui vulputate. Vestibulum quis sem justo. Sed ultrices ipsum eu mi bibendum, at laoreet dui lobortis. Integer et lectus nec orci finibus auctor volutpat ac massa. Etiam ac purus dictum, elementum tellus non, semper mauris. Donec sagittis lorem id orci fermentum suscipit.
+
}
−
</p>
+
−
 
+
.hooks-table {
−
</div>
+
width: 70%;
−
</div>
+
}
−
</div>
+
−
 
+
.hook-table-label {
−
<div class="hooks-container">
+
color: white;
−
<div class="label center underline white">Roleplay Hooks</div>
+
font-weight: 600;
−
 
+
padding-left: 0.5em;
−
<div class="hooks-content">
+
}
−
<table class="hooks-table">
+
−
<tr>
+
.anim-gif {
−
<td class="hook-table-label">Hook1:</td>
+
width: 30%;
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
display: flex;
−
</tr>
+
flex-direction: column;
−
<tr>
+
justify-content: center;
−
<td class="hook-table-label">Hook2:</td>
+
}
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
−
</tr>
+
.anim-gif img {
−
<tr>
+
width: 100%;
−
<td class="hook-table-label">Hook3:</td>
+
height: auto;
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
border-radius: 30%;
−
</tr>
+
}
−
<tr>
+
−
<td class="hook-table-label">Hook4:</td>
+
.contacts-container, .gallery-container {
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
background-color: black;
−
</tr>
+
color: lightgray;
−
<tr>
+
width: 94%;
−
<td class="hook-table-label">Hook5:</td>
+
padding: 1em 3%;
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
display: flex;
−
</tr>
+
flex-direction: column;
−
<tr>
+
}
−
<td class="hook-table-label">Hook6:</td>
+
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
.contacts-container a {
−
</tr>
+
  color: white
−
<tr>
+
}
−
<td class="hook-table-label">Hook7:</td>
+
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
.contacts-container a:visited {
−
</tr>
+
  color: white
−
<tr>
+
}
−
<td class="hook-table-label">Hook8:</td>
+
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
.contacts-container a:hover {
−
</tr>
+
  color: darkred
−
</table>
+
}
−
 
+
−
<div class="anim-gif">[[File:.gif]]</div>
+
.logs-container {
−
</div>
+
  margin: 0 1em;
−
</div>
+
}
−
 
+
−
<div class="photo-banner mid-banner">[[File:.jpg]]</div>
+
.logs-container a {
−
 
+
  color: black
−
<div class="contacts-container">
+
}
−
<div class="label center white underline">Contacts</div>
+
−
 
+
.logs-container a:visited {
−
<div class="hooks-content">
+
  color: black
−
<div class="anim-gif">[[File:.gif]]</div>
+
}
−
<table class="hooks-table">
+
−
<tr>
+
.logs-container a:hover {
−
<td class="hook-table-label">[[Name]]:</td>
+
  color: darkred
−
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+
}
−
</tr>
+
−
</table>
+
.gallery-content ul {
−
</div>
+
  display: flex;
−
</div>
+
  flex-wrap: wrap;
−
 
+
  list-style-type: none;
−
<div class="logs-container">
+
  justify-content: center;
−
<div class="label center underline">Logs</div>
+
}
−
<DynamicPageList>
+
−
category=Yue
+
.gallery-content img {
−
category=Logs
+
height: 240px;
−
ordermethod=sortkey
+
width: 100%;
−
order=ascending
+
max-width: 100%;
−
mode=none
+
}
−
</DynamicPageList>
+
−
</div>
+
.gallery-content a {
−
 
+
  color: lightgray
−
<div class="photo-banner mid-banner">[[File:.jpg]]</div>
+
}
−
 
+
−
<div class="gallery-container">
+
.gallery-content a:visited {
−
<div class="label center white underline">Gallery</div>
+
  color: lightgray
−
<div class="gallery-content">
+
}
−
<ul>
+
−
<li>[[File:.jpg]]</li>
+
.gallery-content a:hover {
−
<li>[[File:.jpg]]</li>
+
  color: darkred
−
<li>[[File:.jpg]]</li>
+
}
−
</ul>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
 
−
[[Category:PCs]][[Category:Active PCs]][[Category:Shifter]][[Category:Kojin]][[Category:Kitsune]][[Category:Shen]][[Category:Chinatown]][[Category:Gaian]]
 
−
 
 
−
{{#css:WangYue.css}}
 

Revision as of 15:29, 7 November 2024

.container { display: flex; justify-content: center; width: 1000px; height: auto; margin: auto; display: flex; flex-direction: column; font-family: "Brush Script MT"; background-color: #F7F6f4; }

.top-section { display: flex; }

.header-container { width: 100%; display: flex; justify-content: center; padding: 2em 0; }

.header-title { width: 94%; font-size: 50px; letter-spacing: 2px; word-spacing: 2px; color: BLACK; font-weight: 700; text-decoration: none; font-style: normal; font-variant: normal; text-transform: none; }

.left-panel { width: 30%; height: auto; background-color: WHITE GRAY; border: 0.75em; border-style: solid; border-color: black; border-bottom-style: hidden; font-size:1.7em; }

.right-panel { width: 70%; display: flex; flex-direction: column; justify-content: center; }

.hr-image { width: 100%; }

.hr-image img { width: 100%; height: auto; margin-bottom: 1em; }

.info-table { margin: auto; width: 100%; padding: 0 1em; }

.info-table-label { font-weight: 600; width: 50%; }

.icon { display: flex; justify-content: center; }

hr { display: flex; justify-content: center; height: auto; background-image: url('https://cityofhopemush.net/images/b/b0/GoldLine.png'); }

.photo-banner { width: 100%; }

.photo-banner img { width: 100%; height: auto; }

.mid-banner { margin-bottom: -1em; }

.biography-container { width: 94%; padding: 1em 3%; font-size: 1.7em; }

.center { text-align: center; }

.underline { border-bottom-style: solid; border-bottom-width: 0.1em; border-color: black; padding-bottom: 0.5em; }

.label { margin: 0.2em 0; font-size: 1.7em; font-weight: 600; font-style: italic; }

.white { color: lightgray; border-color: lightgray; }

.hooks-container { background-color: black; color: lightgray; width: 94%; padding: 1em 3%; font-size: 1.7em; display: flex; flex-direction: column; }

.hooks-container, .contacts-container .label { margin-bottom: 1em; }

.contacts-container, .gallery-container, .logs-container { background-color: white; color: black; width: 94%; padding: 1em 3%; display: flex; flex-direction: column; }

.hooks-content { width: 100%; display: flex; }

.hooks-table { width: 70%; }

.hook-table-label { color: white; font-weight: 600; padding-left: 0.5em; }

.anim-gif { width: 30%; display: flex; flex-direction: column; justify-content: center; }

.anim-gif img { width: 100%; height: auto; border-radius: 30%; }

.contacts-container, .gallery-container { background-color: black; color: lightgray; width: 94%; padding: 1em 3%; display: flex; flex-direction: column; }

.contacts-container a { color: white }

.contacts-container a:visited { color: white }

.contacts-container a:hover { color: darkred }

.logs-container { margin: 0 1em; }

.logs-container a { color: black }

.logs-container a:visited { color: black }

.logs-container a:hover { color: darkred }

.gallery-content ul { display: flex; flex-wrap: wrap; list-style-type: none; justify-content: center; }

.gallery-content img { height: 240px; width: 100%; max-width: 100%; }

.gallery-content a { color: lightgray }

.gallery-content a:visited { color: lightgray }

.gallery-content a:hover { color: darkred }

Retrieved from "https://cityofhopemush.net/index.php?title=Yue&oldid=254492"