Difference between revisions of "WangYue.css"
(37 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
.container { | .container { | ||
display: flex; | display: flex; | ||
Line 9: | Line 7: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
− | font-family: " | + | font-family: "Arial"; |
+ | font-size: 1.2em; | ||
background-color: #F7F6f4; | background-color: #F7F6f4; | ||
} | } | ||
Line 29: | Line 28: | ||
letter-spacing: 2px; | letter-spacing: 2px; | ||
word-spacing: 2px; | word-spacing: 2px; | ||
− | |||
font-weight: 700; | font-weight: 700; | ||
text-decoration: none; | text-decoration: none; | ||
Line 35: | Line 33: | ||
font-variant: normal; | font-variant: normal; | ||
text-transform: none; | text-transform: none; | ||
+ | } | ||
+ | |||
+ | .quote { | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
} | } | ||
Line 40: | Line 43: | ||
width: 30%; | width: 30%; | ||
height: auto; | height: auto; | ||
− | font-size:1. | + | font-size:1.2em; |
} | } | ||
Line 57: | Line 60: | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
− | margin-bottom: | + | margin-bottom: 1.2em; |
} | } | ||
Line 68: | Line 71: | ||
.info-table { | .info-table { | ||
margin: auto; | margin: auto; | ||
− | width: | + | width: 30%; |
− | padding: 0 | + | padding: 0 1.2em; |
} | } | ||
Line 79: | Line 82: | ||
.icon { | .icon { | ||
display: flex; | display: flex; | ||
− | + | margin-left: auto; | |
+ | margin-right: auto; | ||
} | } | ||
− | . | + | .biography-container { |
− | width: | + | width: 94%; |
+ | padding: 1.2em 3%; | ||
} | } | ||
− | . | + | .appearance-container { |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
width: 94%; | width: 94%; | ||
− | padding: | + | padding: 1.2em 3%; |
− | |||
} | } | ||
− | + | ||
.center { | .center { | ||
text-align: center; | text-align: center; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.label { | .label { | ||
margin: 0.2em 0; | margin: 0.2em 0; | ||
− | |||
font-weight: 600; | font-weight: 600; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.hooks-container { | .hooks-container { | ||
− | + | width: 100%; | |
− | + | padding: 1.2em 3%; | |
− | width: | ||
− | padding: | ||
− | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
Line 135: | Line 113: | ||
.hooks-container, .contacts-container .label { | .hooks-container, .contacts-container .label { | ||
− | + | margin-bottom: 1.2em; | |
} | } | ||
.contacts-container, .gallery-container, .logs-container { | .contacts-container, .gallery-container, .logs-container { | ||
− | |||
− | |||
width: 94%; | width: 94%; | ||
− | padding: | + | padding: 1.2em 3%; |
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
Line 150: | Line 126: | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
+ | justify-content: center; | ||
} | } | ||
.hooks-table { | .hooks-table { | ||
− | width: | + | width: 100%; |
} | } | ||
− | . | + | .hooks-table-label { |
− | |||
font-weight: 600; | font-weight: 600; | ||
− | padding-left: | + | padding-left: 1.2em; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.contacts-container, .gallery-container { | .contacts-container, .gallery-container { | ||
− | |||
− | |||
width: 94%; | width: 94%; | ||
− | padding: | + | padding: 1.2em 3%; |
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
Line 185: | Line 146: | ||
.contacts-container a { | .contacts-container a { | ||
− | + | color: blue | |
} | } | ||
.contacts-container a:visited { | .contacts-container a:visited { | ||
− | + | color: purple | |
} | } | ||
.contacts-container a:hover { | .contacts-container a:hover { | ||
− | + | color: darkred | |
} | } | ||
.logs-container { | .logs-container { | ||
− | + | margin: 0 1.2em; | |
} | } | ||
.logs-container a { | .logs-container a { | ||
− | + | color: blue | |
} | } | ||
.logs-container a:visited { | .logs-container a:visited { | ||
− | + | color: purple | |
} | } | ||
.logs-container a:hover { | .logs-container a:hover { | ||
− | + | color: darkred | |
} | } | ||
− | .gallery-content | + | .gallery-content { |
− | + | display: flex; | |
− | + | flex-wrap: wrap; | |
− | + | justify-content: center; | |
− | + | font-size: 15px; | |
+ | text-align: center; | ||
} | } | ||
.gallery-content img { | .gallery-content img { | ||
height: 240px; | height: 240px; | ||
− | width: | + | width: auto; |
− | |||
} | } | ||
.gallery-content a { | .gallery-content a { | ||
− | + | color: blue | |
} | } | ||
.gallery-content a:visited { | .gallery-content a:visited { | ||
− | + | color: purple | |
} | } | ||
.gallery-content a:hover { | .gallery-content a:hover { | ||
− | + | color: darkred | |
} | } |
Latest revision as of 10:42, 11 November 2024
.container { display: flex; justify-content: center; width: 100%; height: auto; margin: auto; display: flex; flex-direction: column; font-family: "Arial"; font-size: 1.2em; 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: 70px; letter-spacing: 2px; word-spacing: 2px; font-weight: 700; text-decoration: none; font-style: normal; font-variant: normal; text-transform: none; }
.quote { font-size: 30px; text-align: center; }
.left-panel { width: 30%; height: auto; font-size:1.2em; }
.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: 1.2em; }
.hr-image { width 100px; height: auto; text-align: center; }
.info-table { margin: auto; width: 30%; padding: 0 1.2em; }
.info-table-label { font-weight: 600; width: 50%; }
.icon { display: flex; margin-left: auto; margin-right: auto; }
.biography-container { width: 94%; padding: 1.2em 3%; }
.appearance-container { width: 94%; padding: 1.2em 3%; }
.center { text-align: center; }
.label { margin: 0.2em 0; font-weight: 600; }
.hooks-container { width: 100%; padding: 1.2em 3%; display: flex; flex-direction: column; }
.hooks-container, .contacts-container .label { margin-bottom: 1.2em; }
.contacts-container, .gallery-container, .logs-container { width: 94%; padding: 1.2em 3%; display: flex; flex-direction: column; }
.hooks-content { width: 100%; display: flex; justify-content: center; }
.hooks-table { width: 100%; }
.hooks-table-label { font-weight: 600; padding-left: 1.2em; }
.contacts-container, .gallery-container { width: 94%; padding: 1.2em 3%; display: flex; flex-direction: column; }
.contacts-container a { color: blue }
.contacts-container a:visited { color: purple }
.contacts-container a:hover { color: darkred }
.logs-container { margin: 0 1.2em; }
.logs-container a { color: blue }
.logs-container a:visited { color: purple }
.logs-container a:hover { color: darkred }
.gallery-content { display: flex; flex-wrap: wrap; justify-content: center; font-size: 15px; text-align: center; }
.gallery-content img { height: 240px; width: auto; }
.gallery-content a { color: blue }
.gallery-content a:visited { color: purple }
.gallery-content a:hover { color: darkred }