Difference between revisions of "WangYue.css"

From City of Hope MUSH
Jump to navigation Jump to search
Line 7: Line 7:
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
font-family: "Brush Script MT";
+
font-family: "Rage Italic";
 +
/* font-family: "Arial"; */
 
}
 
}
 
 
Line 26: Line 27:
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 
word-spacing: 2px;
 
word-spacing: 2px;
color: BLACK;
+
color: #000000;
 
font-weight: 700;
 
font-weight: 700;
 
text-decoration: none;
 
text-decoration: none;
Line 37: Line 38:
 
width: 30%;
 
width: 30%;
 
height: auto;
 
height: auto;
background-color: WHITE GRAY;
+
background-color: #eeeeee;
 
border: 0.75em;
 
border: 0.75em;
 
border-style: solid;
 
border-style: solid;
Line 52: Line 53:
 
}
 
}
 
 
.line-image {
+
.portrait-image {
 
width: 100%;
 
width: 100%;
 
}
 
}
 
 
.line-image img {
+
.portrait-image img {
 
width: 100%;
 
width: 100%;
 
height: auto;
 
height: auto;
Line 72: Line 73:
 
width: 50%;
 
width: 50%;
 
}
 
}
 
+
 
.icon {
 
.icon {
 
display: flex;
 
display: flex;
 
justify-content: center;
 
justify-content: center;
 
}
 
}
 
+
hr {
 
display: flex;
 
justify-content: center;
 
height: auto;
 
background-image: url('https://cityofhopemush.net/images/b/b0/GoldLine.png');
 
}
 
 
 
 
.photo-banner {
 
.photo-banner {
 
width: 100%;
 
width: 100%;

Revision as of 15:59, 7 November 2024

.container { display: flex; justify-content: center; width: 1000px; height: auto; margin: auto; display: flex; flex-direction: column; font-family: "Rage Italic"; /* font-family: "Arial"; */ }

.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: #000000; font-weight: 700; text-decoration: none; font-style: normal; font-variant: normal; text-transform: none; }

.left-panel { width: 30%; height: auto; background-color: #eeeeee; 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; }

.portrait-image { width: 100%; }

.portrait-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; }

.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 }