Jump to content

NicholasPM

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by NicholasPM

  1. .fade-in-image#n1{ width:500px; height:500px; opacity: 100%; z-index: 0; position: absolute; transition: opacity 2s; display:block; background-image: url("../../images/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; } .fade-in-image#n1:hover { width:500px; height:500px; opacity:0%; transition:opacity 2s; position: absolute; z-index: 0; display:block; background-image: url("../../images/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; } .fade-in-image#n2{ width:500px; height:500px; opacity: 0%; transition: opacity 2s ease 0s; z-index: 1; position: absolute; background-image: url("../../images/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; display:block; } .fade-in-image#n2:hover { width:500px; height:500px; opacity:100%; transition: opacity 2s ease 0s; z-index: 1; position: absolute; background-image: url("../../images/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; display:block; } /* the code I want to get working .fade-in-image#n3{ width:500px; height:500px; opacity:0%; transition:opacity 2s ease 1s; z-index: 2; position: absolute; background-image: url("../../images/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; } .fade-in-image#n3:hover { width:500px; height:500px; opacity:100%; transition:opacity 2s ease 0s; z-index: 2; position: absolute; background-image: url("../../images/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; }*/ 2.html
  2. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> header h1{ text-align:center; } header img#elizaPic { float:left; } header img#barbosPic { float:right; transform:rotate(180deg); } p.eliza { display:block; text-align:left; border-top: 2px solid grey; border-bottom: 0px solid grey; } p.barbos { display:block; text-align:right; border-top: 2px solid grey; border-bottom: 0px solid grey; } p.eliza p.name { text-align:left; } p.barbos p.name { text-align:center; } p{ display:block; border-top: 2px solid grey; margin: 1em; border-bottom: 0px solid grey; } .name { display:inline-block; color: #008; background-color: #ddd; font-weight:bold; font-size: 20px; border-top: 0px solid grey; border-bottom: 0px solid grey; } p#action { text-align: center; font-style:italic; } </style> </head> <body> <!--The top heading should be center-aligned. The images of Eliza and Captain Barbos should be floating in the left and right corners respectively. Each line of dialogue should have a top border that is 2px thick and gray in color. Within each line of dialogue, the character's name should be shown in a "larger" font size, with the actor name text color set to #008 (a dark blue), with a background color of #ddd (a light gray), in bold. There should be 1em of vertical blank space separating neighboring lines of dialogue. Eliza's lines of dialogue should be aligned to the left, while Barbos's lines should be aligned to the right. The aside about Barbos laughing should be center-aligned and shown in an italic font. All other text uses default sizes and fonts. --> <header> <img src="eliza.png" id="elizaPic"/> <img src="barbos.png" id="barbosPic"/> <h1>Scene #7</h1> </header> <main> <p class="eliza"><p class="name">Eliza</p>Captain Barbos, I am here to negotiate the cessation of hostilities against Port Royal</p><br/> <p class="barbos"><p class="name">Barbos</p>There are a lot of long words in there, Miss. What is it that you want?</p><br/> <p class="eliza"><p class="name">Eliza</p>I want you to leave and never come back.</p><br/> <p id="action">(Barbos chuckles quietly. <br/>Eliza gives him an angry look.)</p><br/> <p class="barbos"><p class="name">Barbos</p>I'm disinclined to acquiesce to your request. Means "no."</p><br/> </main> </body> </html>
×
×
  • Create New...