Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- :root {
- --header-image: url('url'); /* This is the header background image */
- --body-bg-image: url('url');
- /* colors */
- --content: #fff;
- }
- @font-face {
- font-family: family;
- src: url('url');
- }
- html {
- cursor: url('GB.png'), auto; /* change the url here for the cursor image you want */
- }
- body {
- font-family: 'Arial', sans-serif;
- margin: 0;
- background-color: #fff;
- color: #fff;
- background-image: var(--body-bg-image);
- }
- * {
- box-sizing: border-box;
- }
- /* this is where to edit the width of your site */
- #container {
- max-width: 1200px;
- /* this is the width */
- margin: 0 auto;
- /* this centers the entire page */
- }
- /* links*/
- #container a {
- color: #D42D3D;
- font-weight: bold;
- }
- #header {
- width: 100%;
- background-color: #c5c5c5; /* header color */
- height: 150px; /* adjusts header height */
- background-image: var(--header-image); /* this is only for a background image! */
- background-size: 100%;
- }
- /* navigation */
- #navbar {
- background-color: #000; /* navbar color */
- width: 100%;
- flex-wrap: wrap;
- margin-top: 10px;
- }
- #navbar ul {
- display: flex;
- padding: 0;
- margin: 0;
- list-style-type: none;
- justify-content: space-evenly;
- }
- #navbar li {
- padding-top: 10px;
- }
- /* navigation links*/
- #navbar li a {
- color: #fff; /* navbar text color */
- font-weight: 800; /* thickness of font */
- text-decoration: none;
- }
- /* this is how you have an image behind each link. it creates a button that the text can go in. see the nav bar on the html page */
- .button{
- background: url(image.png) no-repeat;
- cursor:pointer;
- border: none;
- width:100px;
- height:100px;
- }
- #flex {
- display: flex;
- }
- /* this is the color of the main content area */
- main {
- background-color: #c5c5c5;
- flex: 1;
- padding: 20px;
- order: 2;
- }
- h1,
- h2,
- h3 {
- color: #D42D3D;
- }
- h1 {
- font-size: 25px;
- }
- strong {
- color: #D42D3D;
- }
- /* Responsive for mobile devices */
- @media only screen and (max-width: 800px) {
- #flex {
- flex-wrap: wrap;
- }
- aside {
- width: 100%;
- }
- main {
- order: 1;
- }
- #navbar ul {
- flex-wrap: wrap;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement