Instructions: Perform the following tasks:1. Open the styles.css file in your text editor. Below the last style rule, add a comment with thetext, Media Query for Tablet Viewport.2. Below the comment, add a media query that targets a screen with a minimum width of 620pxand print.3. Add the following comments to the tablet media query:a. Tablet Viewport: Show tab-desk class, hide mobile classb. Tablet Viewport: Style rules for nav area4. Add the following style rules below the Show tab-desk class, hide mobile class comment:a. Style rule for the tab-desk class selector that sets the display to a block.b. Style rule for the mobile class selector that sets the display to none.5. Add the following style rules below the style rules for nav area comment:a. Style rule for the nav li selector that removes the top border, sets the display to an inline-block, and sets the font size to 1.25 em.b. Style rule for the nav li a selector that sets the padding to 0.5em.6. In the contact.html file, add mobile to the existing class attribute within the paragraphelement on Line 44.7. Insert a new Line 45 and add a paragraph element with the tab-desk class. Wrap the phonenumber, (814) 555-9228, within the paragraph element.8. In the styles.css file, below the tablet media query, add a comment with the text, MediaQuery for Desktop Viewport.9. Below the comment, add a media query that targets a screen with a minimum width of 1000pxand print. 10. Within the desktop media query, add a comment with the text, Desktop Viewport: Stylerules for nav area. Add the following style rules below the comment.a. Style rule for the nav li selector that sets the font size to 1.5emb. Style rule for the nav li a selector that sets the top and bottom padding to 0.5em and theleft and right padding to 1.5emc. Style rule for the nav li a selector with a hover pseudo-class that sets the color to #2a1f14and the background color to #f6eee411. Within the desktop media query, add a comment with the text, Desktop Viewport: Stylerules for main content. Below the comment, add a style rule for the #info ul selectorthat sets the left margin to 5%.12. In the index.html, about.html, contact.html, and template.html files, wrap all of the elementsbetween the body tags within a single, parent div element with an id attribute of wrapper.Indent all nested elements.13. In the styles.css file, below the tablet media query, add a comment with the text, MediaQuery for Large Desktop Viewports.14. Below the comment, add a media query that targets a screen with a minimum width of 1921px.Add the following style rules to the large desktop media query:a. Style rule for the body element that sets the background to a linear gradient with the colorvalues #f6eee4 and #78593ab. Style rule for the #wrapper selector that sets the width to 1920px, top and bottom marginto 0, and left and right margins to autoc. Style rule for the main selector that sets the background color to #f6eee415. Below the large desktop media query, add a comment with the text, Media Query forPrint. Below the comment, add a media query that targets print.16. In the print media query, add a style rule for the body selector that sets the background color towhite and the font color to black.17. Check your spelling. Validate all HTML and CSS files and correct any errors. Save your changes.18. Open the index.html file in Google Chrome's device mode to view the home page in a tabletviewport. Navigate to the About Us and Contact pages to view the tablet design for each page.19. Open the index.html file in Google Chrome's device mode to view the home page in a desktopviewport. Navigate to the About Us and Contact pages to view the desktop design for eachpage. Exit device mode to view and test the hover pseudo-class.20. Open the index.html file in Google Chrome's device mode to view the home page in a largedesktop viewport (at least 1950px). Navigate to the About Us and Contact pages to view thelarge desktop design for each page.21. Submit your assignment in the format specified by your instructor.this22. In step 14, you created a style rule for a gradient. Discuss at least three different waysgradient could be applied.

Answered: Image /qna-images/answer/685eb9da-187f-4268-a4f8-6594fd9effe9.jpg

Instructions: Perform the following tasks: 1. Open the styles.css file in your text editor. Below the last style rule, add a comment with the text, Media Query for Tablet Viewport. 2. Below the comment, add a media query that targets a screen with a minimum width of 620px and print. 3. Add the following comments to the tablet media query: a. Tablet Viewport: Show tab-desk class, hide mobile class b. Tablet Viewport: Style rules for nav area 4. Add the following style rules below the Show tab-desk class, hide mobile class comment: a. Style rule for the tab-desk class selector that sets the display to a block. b. Style rule for the mobile class selector that sets the display to none. 5. Add the following style rules below the style rules for nav area comment: a. Style rule for the nav li selector that removes the top border, sets the display to an inline-

Instructions: Perform the following tasks: 1. Open the styles.css file in your text editor. Below the last style rule, add a comment with the text, Media Query for Tablet Viewport. 2. Below the comment, add a media query that targets a screen with a minimum width of 620px and print. 3. Add the following comments to the tablet media query: a. Tablet Viewport: Show tab-desk class, hide mobile class b. Tablet Viewport: Style rules for nav area 4. Add the following style rules below the Show tab-desk class, hide mobile class comment: a. Style rule for the tab-desk class selector that sets the display to a block. b. Style rule for the mobile class selector that sets the display to none. 5. Add the following style rules below the style rules for nav area comment: a. Style rule for the nav li selector that removes the top border, sets the display to an inline-

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Similar questions

Add a blank line after the main content style rules, add a comment with the text Style rules for class and id selectors and then create the style rules for the .link, .action, and #contact selectors: Create a style rule for the class selector link that sets the font color to #4d3319, removes the text decoration, sets the font weight value to bold, and sets the font style value to italic. Create a style rule for the class selector action that sets the font size to 1.75em, sets the font weight value to bold, and aligns text center. Create a style rule for the id selector contact that aligns text center. In the about.html file, within the #info div element, complete the following: Add a class attribute with the value of link to the anchor element with the text "National Wildlife Rehabilitators Association.". Remove the height and width attributes from the tortoise image (img) element. Add a class attribute with the value of action to the paragraph element where the text is "Did you…
Configure the text, Image Gallery, within an h1 element, and within the title element. 2. Code a div assigned to the id named gallery. This div will contain the thumbnail images, which will be configured within an unordered list. 3. Configure an unordered list within the div. Code four li elements, one for each thumbnail image. The thumbnail images will function as image links with a :hover pseudo-class that causes the larger image to display on the page. We’ll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is <li><a href="photo1.png"><img src="photo1thumb.png" width="100" height="75" alt="Golden Gate Bridge"> <span><img src="photo1.png" width="250" height="150" alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a> </li> 3.Photo2 is California Beach…
Tablet Element Styles The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels.
In the mobile style rules section, below the style rule for footer a, create a new style rule for images within the social class that sets the display to an inline block and sets the padding to 4%. Not right how I do it. see below:
Open 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…
Complete the following: 1. Using your editor, open the sp_home_txt.html and sp_layout_txt.css files from the html03 c folder. Enter your name and the date in the comment section of each file, and save them as sp_home.html and sp_layout.css respectively. 2. Go to the sp_home.html file in your editor. Within the document head, create links to the sp_base.css, sp_styles.css, and sp_layout.css style sheet files. Study the content and structure of the file and then save your changes to the document. dou you know the solution?
Task 1. Create a new page (games.html):Use the music page as the starting point for the Game page. In your text editor open music.htmland save it as games.html. After modifying the games page, it will look similar to the Games pagein Figure 1.Change the page title to an appropriate phrase.Delete the div element with id="musicbg", then open the style.css in your text editor and deleteall the rules for id = “musicbg”. This will remove the music image from the new page.Replace the text within the h2 element with following: “My Favorite Video Games”.Delete paragraph, h3 and table elements.Place an unordered list with your 4 favorite video games as list items.Create a photo gallery with 4 pictures:• Search on the internet for cover picture of your favorite games, and same them in your folder.For each image create another image as thumbnail. You can use windows paint or any otherimage editor to resize the images.• After completing the previous step, in your folder, you will have 8 new image…
In this exercise, you will create and modify style rules to learn more about how to place elements on a page using positions. An example of page element positions is shown in Figure 5-66. Figure 5-66 Grading Complete each task listed in this lab. Each task contains automated checks which are used to calculate your grade. You can use the Website Refresh button to refresh your website preview at any point. You can view a full-page version of your website by clicking the arrow in the top right corner of your website preview. When you have completed each task by clicking the checkbox, open the task list panel on the left navigation bar and click the "Submit" button. Perform the following tasks: Tasks Open index.html file and update the comment with your name (firstname lastname), the file name, and today’s date (MM/DD/YYYY). Open index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. 4 Open the styles.css…
How to do this exercise? Halloween 15 Add a transition and an animation In this exercise, you’ll add a transition and an animation to the product page that you created in exercise 11. When you’re done, the page should look similar to this: Specifications • Add a transition for the widths of the images in the right sidebar of the cat.html file in the products folder that will last for three seconds and use the linear speed curve. The transition should increase the width of an image to 125 pixels when the mouse hovers over an image. Be sure to provide for all browsers. • Add an animation for the image in the section that will cause the image to move up and down when the page is loaded. The animation should last for half a second, use the ease-in-out speed curve, repeat six times, and alternate directions on each repetition
Use media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0. 2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following: Set the display of the img element within the article element to none. Center the text contained within the ul element belonging to the submenu class. 3. Create a media query for devices with a minimum width of 501 pixels. Within the query do the following: Float the nav element on the left page margin. Set the width of the nav element to 130 pixels and the height to 400 pixels. Set the…
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…
Write the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include: a table that includes the same content as in the image below. Note that the heading is a part of the table, so that screen readers will know that the heading is associated with the table. Add internal/embedded CSS (and extra HTML if you need to) so that your page looks like the image below. DON'T include more CSS than you need to. Tip: You will need to use pseudo-classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes