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 temperature and relative humidity range that is appropriate for your workspace.arrow_forwardEvent Listeners Go to the co_cart.js file in your editor. Directly below the initial comment section, add an event listener for the window load event that does the following when the page is loaded: Runs the calcCart() function. Add an event handler to the modelQty field in the cart form that runs the calcCart() function when the field value is changed. A for loop that loops through every option in the group of shipping option buttons, adding an event handler to run the calcCart() function when each option button is clicked. JavaScript Functions Create the calcCart() function to calculate the cost of the customer’s order using field values in the cart form. Within the calcCart() function do the following: Create a variable named orderCost that is equal to the cost of the espresso machine stored in the modelCost field multiplied by the quantity of machines ordered as stored in the modelQty field. Display the value of the orderCost variable in the orderCost field, formatted as U.S.…arrow_forwardAdd an onclick event handler that calls the content() function to the button element in the main section.arrow_forward
- JAVAarrow_forwardCreate the Fragments-type app, and name it yourfirstinitial LastnameFragments. Label the fragments as is done in the video and change the background colors to those of your choice. Instead of two Fragments, use 3, and use buttons to show each one. Instead of the regular buttons, feel free to use the icon buttons. When you're finished, zip up this project and upload it to this assignment.arrow_forwardThe Demo page should have similar items grouped together. The controls and input fields should all do something. Entry fields and Password fields should print to a text box and/or a set of labels. Slider controls should show the values selected. A slider could set the level of a progress bar. etc. Half the elements need to be included: Buttons Buttons with graphics Buttons with images Labels Labels with graphics Labels with images TextField PasswordField TextArea as both entry and output. Scroll Bars on the TextArea two or more separate sets of RadioButtons two or more separate sets of CheckBoxes ComboBox ListView Sliders MenuBar (not in the text book, here is an example: https://www.geeksforgeeks.org/javafx-menubar-and-menu/ (Links to an external site.)) Tabs Spinners Colors Drop shadowsarrow_forward
- Create a products.html page and add five product images to the page. Create a Product class for each product with the following attributes: Price, Name, Description and Id for each of the product images. Under each product image add an "add to cart" button. Make the id property of the button the id for the product. Add a remove from cart button on each item as well. Create a ShoppingCart.js file (javascript) and include it in the products.html page (<script src ="shoppingcart.js">). In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products and store it in the products array when the script loads. The shopping cart script should have the following functions: add - Takes an id, finds the product object in the products array and adds it to the items purchased array, remove - Takes an id and removes the corresponding object from the items purchased array and Returns html for displaying the…arrow_forwardPlease send me a bed mockup for me to insert my image of my merchandise "blanket" -I have Photoshop elements okarrow_forwardOpen index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules: Add a declaration for the position property with a value of -webkit-sticky. Add a declaration for the position property with a value of sticky. Add a declaration for the top property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position. In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations: Add a declaration for the position property with a value of relative. Add another declaration for the top property and specify a value of 90px. Add another declaration for the left property…arrow_forward
- Make sure that the heading that starts with “Children’s Lessons” does not float to the right of the image by clearing the float at that element. In the ski.html file, add the following attribute/value pair to the opening tag that marks the Children’s Lessons heading: class="clearfloat"arrow_forwardThe slide images should update every 5 seconds. Fix the parameter values for the setInterval() method so that the showImage() function is run every 5 seconds.arrow_forwardNote: The remaining buttons and paragraphs do not have id attributes. You will need to construct selectors to meet these challenges. For the following I need the Javascript code not the HTML code. In the "myPage" section, select the third button and assign a "click" listener. When clicked, it should change the text content of the third paragraph in the "myPage" section to "Third button clicked." ///////// // HINT: You should look at the HTML carefully to // make your selectors. In the "myPage" section, select the fourth button and assign a "click" listener. When clicked, it should add a class named "fourthPara" to the fourth paragraph in the "myPage" section. In the "myPage" section, select the fifth button and assign a "click" listener. When clicked, it should toggle the class named "fourthPara" for the fifth paragraph in the "myPage" section. In the "myPage" section, select the sixth button and assign a "click" listener. When clicked, it should change the text content of the sixth…arrow_forward
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
EBK JAVA PROGRAMMINGComputer ScienceISBN:9781337671385Author:FARRELLPublisher:CENGAGE LEARNING - CONSIGNMENT- COMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L