David/Style.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap'); | ||
.head { | |||
font-weight: bolder; | |||
font-size: 2em; | |||
} | |||
.subhead { | |||
font-weight: bold; | |||
font-size: 1.5em; | |||
} | |||
#mainpage { | #mainpage { | ||
| Line 75: | Line 85: | ||
} | } | ||
.box { | |||
border: solid 1px #999999; | border: solid 1px #999999; | ||
text-align: center; | text-align: center; | ||
width: 30%; | width: 30%; | ||
} | } | ||
Revision as of 13:38, 20 July 2020
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');
.head { font-weight: bolder; font-size: 2em; }
.subhead { font-weight: bold; font-size: 1.5em; }
- mainpage {
position: relative; width: 100%; background: #ffffff; text: #000000;
font-family: Sora, Helvetica, Arial, sans; font-size: 14px; }
- header {
position: relative; top: 0; height: 300px; width: 100%; background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); filter: grayscale(50%); }
- avatar {
position: relative; height: 100px; width: 100px; left: 50%; top: -70px; transform: translate(-50%, 0);
background: #000000;
border-radius: 50px; border: solid 3px white; }
- name {
position: relative; top: -60px; left: 50%; transform: translate(-50%, 0); width: 100%; background: #ffffff; text: #000000;
text-align: center; }
- name .main {
font-weight: bold; font-size: 1.6em; }
- name .sub {
color: #666666; font-weight: lighter; }
- body {
display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; }
- membership {
display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; justify-content: space-evenly; }
.box { border: solid 1px #999999; text-align: center; width: 30%; }
