NicholasPM
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by NicholasPM
-
-
<!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>
I cant figure out how to make the 2nd image fade to the 3rd image after a set amount of seconds of hovering your mouse over the image, if I try the current code, it fades to the 3rd image without fading to the 2nd first
in CSS
Posted
2.html