Configure the opacity property
Program plan:
Include the HTML tag “<HTML>”.
- Include the title on the webpage using “<head>” tag.
- Open the “<meta>” tag to set the viewport for visible area of webpage.
- Include the title on the webpage using “<title>” tag.
- Include the style tag using “<style>” for internal style.
- Add the style for “body” element.
- Internal style for media queries to design the web page.
- Add the style for “wrapper” element.
- Add the style for “offer” element.
- Add the style for “offer a” element.
- Add the style for “nav” element.
- Add the style for “nav ul” element.
- Add the style for “nav li” element.
- Add the style for “nav a” element.
- Add the style for “nav a:link” element.
- Add the style for “nav a:visited” element.
- Add the style for “nav a:hover” element.
- Add the style for “main” element.
- Add the style for “header” element.
- Add the style for “h1” element.
- Add the style for “h2” element.
- Add the style for “figure” element.
- Add the style for “figcaption” element.
- Add the style for “footer” element.
- Open the body of the web page using “<body>” tag.
- Use the two-column layout to design the webpage using “div” tag with name “wrapper”.
- Open the header of the web page using “<header>” tag.
- Open the navigation link using “<nav>” tag.
- Open the main of the web page using “<main>” tag.
- Open the section of the web page using “<figure>” tag.
- Use the two-column layout to design the webpage using “div” tag with name “offer”.
- Open the footer of the web page using “<footer>” tag.
- Close all the tags.
The HTML code creates a webpage to configure the opacity to display the lighthouse figure; initially it displays figure at 50% opacity, then slowly changes to 100% when the user places the mouse over the figure area.
Explanation of Solution
Program:
Filename: index.html
<!-- html opening tag -->
<html lang="en">
<!-- head opening tag -->
<head>
<!-- Title opening tag -->
<title>Lighthouse Island Bistro</title>
<!--Define the meta tag-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Style tag-->
<style>
/*Internal style for "*"*/
*{ box-sizing: border-box; }
/*Internal style for body tag*/
body
{
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
/*Internal style for div tag with id of "wrapper" "*/
#wrapper
{
background-color: #b3c7e6;
color: #000066;
width: 90%;
margin: auto;
min-width: 450px;
max-width: 1020px;
}
/*Internal style for header tag */
header
{
background-color: #869dc7;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
color: #00005D;
padding: 10px;
}
/*Internal style for h1 tag */
header h1 { padding-left: 200px;}
/*Internal style for span tag */
header span
{
font-style: italic;
font-weight: bold;
color: #00005D;
padding-right: 15px;
text-align: right;
display: block;
}
/*Internal style for navigation tag */
nav
{
float: left;
width: 150px;
letter-spacing:0.1em;
font-weight: bold;
}
/*Internal style for navigation "unordered list" tag */
nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
/*Internal style for navigation "list" tag */
nav li { border-bottom: 1px solid #ffffff;}
/*Internal style for nav "a" tag */
nav a
{
text-decoration: none;
display: block;
padding: 15px;
transition: background-color 2s linear;
}
/*Internal style for nav "a:link" tag */
nav a:link { color: #ffffff; }
/*Internal style for nav "a:visited" tag */
nav a:visited { color: #eaeaea; }
/*Internal style for nav "a:hover" tag */
nav a:hover
{
color: #869dc7;
background-color: #eaeaea;
}
/*Internal style for main tag */
main
{ background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
/*Internal style for h2 tag */
h2
{
color: #869dc7;
font-family: arial, sans-serif;
margin: 5px;
}
/*Internal style for figure tag */
figure
{ float: right;
margin: 10px;
padding: 5px;
background-color: #FFF;
border: 1px solid #CCC;
box-shadow: 5px 5px 5px #828282;
/*Set the opacity as "50%" */
opacity: .5;
/*Set the transition to change the opacity value 50% to 100% */
transition: opacity 1s linear;
}
/*Internal style for figure tag when mouse over the figure */
figure:hover { opacity: 1; }
/*Internal style for figcaption tag */
figcaption
{
text-align: center;
font-size: .8em;
font-style: italic;
}
/*Internal style for footer tag */
footer
{ font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
/*Internal style for div tag with id of "offer" */
#offer
{
background-color: #eaeaea;
width: 10em;
margin: auto;
text-align: center;
}
/*Internal style for div tag with id of "offer a" */
#offer a
{
text-decoration: none;
color: #FF0000;
}
/*Internal style for header, main, nav, footer, figure, and figcaption tags */
header, main, nav, footer, figure, figcaption { display: block; }
/*Internal style for media queries to set maximum of 1024 size for web page. */
@media only screen and (max-width: 1024px)
{
body { margin: 0; background-color: #869dc7;}
#wrapper { width: auto; margin: 0; }
main { margin-left: 0; }
nav { float: none; width: auto; }
nav li { display: inline-block; padding: 0.5em; }
nav ul { text-align: center; }
nav a { border-style: none; }
h1, h2 { font-size: 120%; }
p { font-size: 90%; }
}
/*Internal style for media queries to set maximum of 768 size for web page. */
@media only screen and (max-width: 768px)
{
#wrapper { min-width: 0; }
header { background-image: url(lighthousemini.jpg); }
header h1 { padding-left: 0; }
h1, h2 { font-size: 100%; }
span { font-size: 80%; }
figure { display: none;}
nav, nav ul, nav li { padding: 0; }
nav li { display: block; }
nav a { display: block; padding: 0.5em 0; border-bottom: 2px ridge #00005D; }
}
<!--close the style tag-->
</style>
<!--Close head tag-->
</head>
<!-- Open the body tag-->
<body>
<!--open the div tag-->
<div id="wrapper">
<!--Open the header tag-->
<header>
<!--Display the h1 heading-->
<h1>Lighthouse Island Bistro</h1>
<!--Display the span tag-->
<span>the best coffee on the coast</span>
<!--Close the header tag-->
</header>
<!--Open the navigation tag-->
<nav>
<!--Open the unordered list tag-->
<ul>
<!--Display the navigation link using "a" tag-->
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
<!--Close the unordered list tag-->
</ul>
<!--Close the navigation tag-->
</nav>
<!--Open the main tag-->
<main>
<!--Open the figure tag-->
<figure>
<img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island">
<!--Display the caption using figcaption tag-->
<figcaption>Island Lighthouse, Built in 1870</figcaption>
<!--Close the figure tag-->
</figure>
<!--Display the h2 heading-->
<h2>Locally Roasted Free-Trade Coffee</h2>
<!--Display the content using paragraph tag-->
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<!--Display the h2 heading-->
<h2>Specialty Pastries</h2>
<!--Display the content using paragraph tag-->
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<!--Display the h2 heading-->
<h2>Lunchtime is Anytime</h2>
<!--Display the content using paragraph tag-->
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<!--Display the h2 heading-->
<h2>Panoramic View</h2>
<!--Display the content using paragraph tag-->
<p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
<!--open the div tag with id name of "offer"-->
<div id="offer">
<a href="#">Special Offer</a>
<!--Close the div tag-->
</div>
<!--Close the main tag-->
</main>
<!--Open the footer tag-->
<footer>Copyright © 2018
<!--Close the footer tag-->
</footer>
<!--Close the div tag-->
</div>
<!--Close the body tag-->
</body>
<!--Close the html tag-->
</html>
Output:
Note: Run the code and display the output web page.
Screenshot of the Webpage
Note: The lighthouse figure is initially at 50% opacity then it slowly changes to 100% when the user places the mouse over the figure area.
Screenshot of the Webpage
Want to see more full solutions like this?
Chapter 11 Solutions
Basics of Web Design: Html5 & Css3
- Create a menu item which restarts the game. Also add a timer, which counts the elapsed time since the start of the game level. When the restart is pressed, the restarted game should ask the player' name (in the GameGUI constructor) and set the score of player to 0 (player.setScore(0)), and the timer should restart again. And create a logic so that if the player loses his life (checkGame if the condition is false), then save this number together with his name into two variables. And display two buttons where one quits the game altogether (System.exit(0)) and the other restarts the game. public class GameGUI extends JPanel { private final Labyrinth labyrinth; private final Player player; private final Dragon dragon; private final ImageIcon playerIcon = new ImageIcon("data/images/player.png"); private final ImageIcon dragonIcon = new ImageIcon("data/images/dragon.png"); private final ImageIcon wallIcon = new ImageIcon("data/images/wall.png"); private final ImageIcon…arrow_forwardPlease original work Analyze the complexity issues of processing big data What are five complexities and talk about the reasons they make the implementation complex. Please cite in text references and add weblinksarrow_forwardCreate a Database in JAVA Netbeans that saves name of the player and how many labyrinths did the player solve. Record the number of how many labyrinths did the player solve, and if he loses his life, then save this number together with his name into the database. Create a menu item, which displays a highscore table of the players for the 10 best scores public class GameGUI extends JPanel { private final Labyrinth labyrinth; private final Player player; private final Dragon dragon; private void checkGameState() { if (player.getX() == 0 && player.getY() == labyrinth.getSize() - 1) { JOptionPane.showMessageDialog(this, "You escaped! Congratulations!"); System.exit(0); } if (Math.abs(player.getX() - dragon.getX()) <= 1 && Math.abs(player.getY() - dragon.getY()) <= 1) { JOptionPane.showMessageDialog(this, "The dragon caught you! Game Over."); System.exit(0); } } } public…arrow_forward
- Create a Database in JAVA OOP that saves name of the player and how many labyrinths did the player solve. Record the number of how many labyrinths did the player solve, and if he loses his life, then save this number together with his name into the database. Create a menu item, which displays a highscore table of the players for the 10 best scores. Also, create a menu item which restarts the game. public class GameGUI extends JPanel { private final Labyrinth labyrinth; private final Player player; private final Dragon dragon; private void checkGameState() { if (player.getX() == 0 && player.getY() == labyrinth.getSize() - 1) { JOptionPane.showMessageDialog(this, "You escaped! Congratulations!"); System.exit(0); } if (Math.abs(player.getX() - dragon.getX()) <= 1 && Math.abs(player.getY() - dragon.getY()) <= 1) { JOptionPane.showMessageDialog(this, "The dragon caught you! Game Over.");…arrow_forwardChange the following code so that the player can see only the neighboring fields at a distance of 3 units. public class GameGUI extends JPanel { private final Labyrinth labyrinth; private final Player player; private final Dragon dragon; private final ImageIcon playerIcon = new ImageIcon("data/images/player.png"); private final ImageIcon dragonIcon = new ImageIcon("data/images/dragon.png"); private final ImageIcon wallIcon = new ImageIcon("data/images/wall.png"); private final ImageIcon emptyIcon = new ImageIcon("data/images/empty.png"); public GameGUI(Labyrinth labyrinth, Player player, Dragon dragon) { this.labyrinth = labyrinth; this.player = player; this.dragon = dragon; setFocusable(true); addKeyListener(new KeyAdapter() { @Override public void keyPressed(KeyEvent e) { char move = switch (e.getKeyCode()) { case KeyEvent.VK_W -> 'W'; case…arrow_forwardQ/ Fill in the table below with the correct answers for the network devices and components required, then draw the topology diagram for the network of this three-story building: I want a drawing Cisco Packet tracer Ground Floor: This floor will house the main server room, reception area, and a few conference rooms. The server room should contain the core network devices that will connect the entire building. The reception area and conference rooms need network access require access for mobile devices for visitors and guests with devices. First Floor: This floor is dedicated to offices with workstations, each needing reliable network connectivity for staff computers, IP phones, IP camera, and printers. Second Floor (Education Department): This floor consists of educational spaces requiring controlled internet access. Only the educational website (https://uokerbala.edu.iq) should be accessible, with all other sites restricted.. Device Media type Location floor Type of IP Static/dynamic…arrow_forward
- Problem Statement You are working as a Devops Administrator. Y ou’ve been t asked to deploy a multi - tier application on Kubernetes Cluster. The application is a NodeJS application available on Docker Hub with the following name: d evopsedu/emp loyee This Node JS application works with a mongo database. MongoDB image is available on D ockerHub with the following name: m ongo You are required to deploy this application on Kubernetes: • NodeJS is available on port 8888 in the container and will be reaching out to por t 27017 for mongo database connection • MongoDB will be accepting connections on port 27017 You must deploy this application using the CL I . Once your application is up and running, ensure you can add an employee from the NodeJS application and verify by going to Get Employee page and retrieving your input. Hint: Name the Mongo DB Service and deployment, specifically as “mongo”.arrow_forwardI need help in server client project. It is around 1200 lines of code in both . I want to meet with the expert online because it is complicated. I want the server send a menu to the client and the client enters his choice and keep on this until the client chooses to exit . the problem is not in the connection itself as far as I know.I tried while loops but did not work. please help its emergentarrow_forwardI need help in my server client in C languagearrow_forward
- Exercise docID document text docID document text 1 hot chocolate cocoa beans 7 sweet sugar 2345 9 cocoa ghana africa 8 sugar cane brazil beans harvest ghana 9 sweet sugar beet cocoa butter butter truffles sweet chocolate 10 sweet cake icing 11 cake black forest Clustering by k-means, with preprocessing tokenization, term weighting TFIDF. Manhattan Distance. Number of cluster is 2. Centroid docID 2 and docID 9.arrow_forwardChange the following code so that there is always at least one way to get from the left corner to the top right, but the labyrinth is still randomized. The player starts at the bottom left corner of the labyrinth. He has to get to the top right corner of the labyrinth as fast he can, avoiding a meeting with the evil dragon. Take care that the player and the dragon cannot start off on walls. Also the dragon starts off from a randomly chosen position public class Labyrinth { private final int size; private final Cell[][] grid; public Labyrinth(int size) { this.size = size; this.grid = new Cell[size][size]; generateLabyrinth(); } private void generateLabyrinth() { Random rand = new Random(); for (int i = 0; i < size; i++) { for (int j = 0; j < size; j++) { // Randomly create walls and paths grid[i][j] = new Cell(rand.nextBoolean()); } } // Ensure start and end are…arrow_forwardChange the following code so that it checks the following 3 conditions: 1. there is no space between each cells (imgs) 2. even if it is resized, the components wouldn't disappear 3. The GameGUI JPanel takes all the JFrame space, so that there shouldn't be extra space appearing in the frame other than the game. Main(): Labyrinth labyrinth = new Labyrinth(10); Player player = new Player(9, 0); Dragon dragon = new Dragon(9, 9); JFrame frame = new JFrame("Labyrinth Game"); GameGUI gui = new GameGUI(labyrinth, player, dragon); frame.add(gui); frame.setSize(600, 600); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); public class GameGUI extends JPanel { private final Labyrinth labyrinth; private final Player player; private final Dragon dragon; //labyrinth, player, dragon are just public classes private final ImageIcon playerIcon = new ImageIcon("data/images/player.png");…arrow_forward
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
EBK JAVA PROGRAMMINGComputer ScienceISBN:9781337671385Author:FARRELLPublisher:CENGAGE LEARNING - CONSIGNMENT