This is a paragraph.
/* these are the main colors and header image replace them with anything you want! */ :root { --header-bg: url('images/header.png'); --accent-color: #DC7891; --link-color: #DC7891; --bg-color: #EFC9BE; --bg-color2: #865A54; --text-color: #4E1E1B; --favorite-color: #FFE5E3; /* you can change the stripe colors easily from here */ --stripe-color: #EFC9BE; --stripe-color2: #DFAD9F; } /* you can get hex codes from sites like this: https://palettes.shecodes.io/ i just looked up "css color templates" to find that link! */ /* this applies to all the content */ * { color: var(--text-color); /* change the font here, it's set up to all use the same one */ font-family: monospace; border-radius: 1em; } /* this is for when you select text on the page */ ::selection { background: var(--accent-color); color: var(--bg-color); } body { background-color: var(--bg-color2); margin: 0; } /* i think having better line spacing helps text to be more readable, but you can remove it if you want */ p {line-height: 1.5em;} header { background-color: var(--accent-color); /* you can add the image url in :root (at the top) if you want */ background: var(--header-bg); background-size: 100%; background-position: center; /* change the minimum height if you want it to take up more/less space */ min-height: 200px; /* can also limit the size of the header if you don't want to fill up the top. i recommend at least 800px tho! */ /*max-width: 980px;*/ margin: 0 auto; border-top: 4px solid var(--text-color); border-bottom: 4px solid var(--text-color); /* i have a default border-radius set, but i didn't want rounded corners on this element */ border-radius: 0; } /* this is your site title displayed at the top of the page */ header > h1 { margin: 20px auto; border-radius: .3em; max-width: 900px; padding: 12px; font-size: 4em; /* you can change the text-align to center or right if you want it placed differently */ text-align: center; background-color: var(--bg-color); border: 2px solid var(--text-color); text-shadow: var(--bg-color2) 1px 1px 3px; } nav { padding: 1em; margin: 1em; font-weight: bold; } nav > ul { max-width: 960px; margin: auto; line-height: 3rem; /* this line takes away the dot in front of the list items */ list-style-type: none; /* list items have default padding but we don't need it for these */ padding-left: 0; /* and this spaces out the buttons so they're not touching */ justify-content: space-evenly; } nav li { text-align: center; } nav li > a { background-color: var(--favorite-color); box-shadow: var(--accent-color) 4px 4px; padding: .5em 3em; /* this takes away the link underline */ text-decoration: none; } nav li > a:hover { box-shadow: var(--text-color) 4px 4px; } a { color: var(--link-color); border-radius: .3em; text-shadow: var(--bg-color) 1px 1px 2px; font-weight: bold; transition: background-color 400ms ease-out; } a:visited { color: var(--text-color); } a:hover { background-color: var(--accent-color); color: var(--text-color); } /* you can change this to anything you want :) */ ul { list-style-type: "❤︎ "; } #sidebar { /* made the stripe bg with a generator: https://stripesgenerator.com/ */ background-image: linear-gradient(45deg, var(--stripe-color) 25%, var(--stripe-color2) 25%, var(--stripe-color2) 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, var(--stripe-color2) 75%, var(--stripe-color2) 100%); background-size: 65.05px 65.05px; min-width: 220px; margin: 1em; padding: 1em; border: 2px solid var(--text-color); box-shadow: var(--accent-color) 4px 4px; } #avatar { margin: .5em auto; box-shadow: var(--accent-color) 4px 4px; /* image size is 160px so i made its container a little bigger to fit the borders */ max-width: 164px; max-height: 164px; border-radius: 1.5em; } #avatar img { background: var(--lighter-color); max-width: 160px; border: 2px solid var(--text-color); border-radius: 1.5em; } #bio { margin: 1em; background: var(--favorite-color); border: 2px solid var(--text-color); box-shadow: var(--accent-color) 4px 4px; text-shadow: var(--bg-color2) 0 0 2px; } #bio p { margin: 1em; } #content { display: flex; max-width: 960px; margin: auto; } main { background-color: var(--favorite-color); padding: 1em 2em; margin: 1em; border: 2px solid var(--text-color); box-shadow: var(--accent-color) 4px 4px; text-shadow: var(--bg-color2) 1px 1px 3px; } main > h1, main > h2, main > h3 { background-color: var(--bg-color); border-radius: .4em; padding: .2em .5em; text-shadow: var(--bg-color2) 1px 1px 3px; } /* a class for centering text and images */ .center { text-align: center; } footer { background-color: var(--bg-color); text-shadow: var(--bg-color2) 1px 1px 3px; text-align: center; font-size: small; padding: 1em; margin: 1em auto; max-width: 960px; } /* these are the mobile styles! */ @media only screen and (max-width: 800px) { #content { flex-wrap: wrap; } #sidebar { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: none; } header {min-height: 160px;} header > h1 { font-size: 3em; margin: .4em; } nav > ul { /* this stuff makes it wrap around on mobile */ display: flex; flex-wrap: wrap; flex-direction: row; } #avatar {margin: 0 1em;} #bio {width: 50%;} main {margin: 0 1em;} #sidebar ul { margin: 0 1em; display: flex; flex-wrap: wrap; line-height: 2em; } #sidebar li { padding-left: 0; margin: .3em 1em; } footer { margin: 1em; } }