sketchyTK
commented
1 month ago add to CSS:
coinBounce {animation: coinBounce 0.1s 1 linear;} @keyframes coinBounce { 0% { position: relative; top: 0; } 50% { position: relative; top: -5px; } 100% { position: relative; top: 0; } }
[x] Review PSD file page design.psd for CSS
[x] Body - background-color: #84a2fe
[x] Body - font color: #fffffff
[x] Header & Main - max-width: 1200px, margin: 0 auto
[x] Header Nav ul - single row, no bullet points, margin 0, padding 0;
[x] nav list items: font size, color and family in the page design PSD
[x] first li will have an h1 tag, need to make sure no h1 CSS from bootstrap is messing up the title tag
[x] Banner Image - center image, width 100%; height auto
[x] Add margin between Header and Banner Image sections (roughly 40px)
[x] Add margin between Banner Image and Main (roughly 40px)
[ ] Main section
[x] Form:
[x] Text Input field, submit button - center text, copy font styles from PSD - remove default input field CSS (background, border, padding, etc).
[x] submit button/text should have the mouse/cursor icon change to a hand icon on hover
[x] (Optional - add hover states for Input & button to show a mushroom graphic on the left side of the page.
[x] Top Name paragraph - center, use font styles from PSD
[ ] Modal
[ ] center on page vertically & horizontally. position absolute
[ ] use Mario Cosplay Randomizer background image file for modal background
[ ] center image and center paragraph
[ ] Close button - position absolute, bottom 20px
[ ] Add margin between Main Section and Footer (roughly 200px)
[ ] add Hill background image so it shows up above the footer
[ ] add pipe background image so it shows up above the footer
[ ] set CSS for the question block element so it is fixed on the right side of the page near the pipe, but above.
[x] Footer - use background image, footer-bg.png, repeat horizontally, set width at 100%, set height at 135px
[ ] Responsive Design
[ ] Add @media queries for max width of 1024, 768 and 450 pixels
[ ] Add CSS to make the page look good when the web browser width is within the above browser widths.