NicholasPM Posted March 4, 2021 Share Posted March 4, 2021 <!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> Link to comment Share on other sites More sharing options...
Joshua Swafford Posted March 5, 2021 Share Posted March 5, 2021 Why does this line of code look the way it is? header img#elizaPic { float:left; } header img#barbosPic { float:right; transform:rotate(180deg); } When you call an id it always should look like #elizaPic { float:left; } #barbosPic { float:right; transform:rotate(180deg); } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now