index.html
<!DOCTYPE html> <html lang="en"> <!-- statements like these are comments. Use comments to document your code. --> <!-- head - information for the browser and search engines and does not show up on the visitors screen --> <head> <!-- title - this will show up in the top bar of a web window and will be used for display in a search engine. This is NOT the same as h1 - the heading tag in the body element that shows up on you page. The test may be the same but the purpose is different. --> <title>My Six-Word Summer</title> <!-- information to tell the browsers more about how to display this page --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- link to the .css styling information - separate file --> <link rel="Stylesheet" href="style.css" type="text/css"> <!-- import the webpage's javascript file --> <script src="/script.js <view-source:file:///script.js>" defer></script> </head> <!-- body - this is what shows up on the visitors screen --> <body> <h1 id="banner">My Six-Word Summer</h1> <!-- background picture --> <img id="myPic" src="https://farm5.staticflickr.com/4023/4229820086_091e1a5cbd_b.jpg <view-source:https://farm5.staticflickr.com/4023/4229820086_091e1a5cbd_b.jpg>"/ alt="kids summer in the city background"> <!-- the words of the story --> <p id="mySummer">Burning sidewalks.<br> Melted icecream.<br> Walked everywhere.</p> <!-- credit for the picture --> <p id="credits">Photo by <a href="https://www.flickr.com/photos/chrisschoenbohm/4229820086/in/photolist-7rLW9w-adW6RB-Chreb-ep2JdG-8TE548-8TE4iX-8THa3L-8THafd-8THan3-8TE4C8-8THabE-8TE5Hp-8TE6h8-8TE4Er-8TE6TB-8x9AFT-adYWku-adW8n8-6MJf9K-ogXUCg-tvN2SP-ub3Qas-tvN2ZT-uqjfLA-usQZJH-ubbRBF-ubbRH2-usR13t-7c8QL <view-source:https://www.flickr.com/photos/chrisschoenbohm/4229820086/in/photolist-7rLW9w-adW6RB-Chreb-ep2JdG-8TE548-8TE4iX-8THa3L-8THafd-8THan3-8TE4C8-8THabE-8TE5Hp-8TE6h8-8TE4Er-8TE6TB-8x9AFT-adYWku-adW8n8-6MJf9K-ogXUCg-tvN2SP-ub3Qas-tvN2ZT-uqjfLA-usQZJH-ubbRBF-ubbRH2-usR13t-7c8QL>">Chris Ford</a>.<br>CC-BY <a href="https://teach.mozilla.org <view-source:https://teach.mozilla.org/>">Mozilla Learning Networks</a>.</p> </body> </html>
style.css
#mySummer{ margin-left:auto; margin-right:auto; margin-top:8px; height:440px; width:500px; z-index:999; background-color:#fff; opacity:.75; padding:10px; font-family:monospace; font-size:64px; } #banner{ width:778px; padding:2px; margin-right:auto; margin-left:auto; margin-top:2px; background-color:#fff; opacity:.75; font-size:72px; font-family:monospace; color:#000; z-index:999; } #myPic{ position:fixed; top:0px; left:0px; height:100%; width:100%; z-index:-999; } #credits{ position:fixed; bottom:10px; font-family: monospace; font-size:12px; color:#000; z-index:999; background-color:#fff; opacity:.75; } a{ font-family:monospace; font-size:12px; color:#000; }