I need the help with the proper code to produce 3 columns using the directions below: Add a DIV element with a class value of "columns". Using style.css, set the width to 90%. Add three DIV elements within "columns" each with a class value of "column". Each DIV should contain identifying text like "DIV #1". Using style.css, set the width to 28.33%, set the margin and padding to 1%, set the height to 140 pixels, set the border to 1 pixel, solid, white. Add a float value of left. Using style.css, add the CSS property "clear", with a value of "both" to footer elements. Add a media selector to style.css for max-width of 479px that changes the float values of the column class to none, and width to 96%

I need the help with the proper code to produce 3 columns using the directions below: Add a DIV element with a class value of "columns". Using style.css, set the width to 90%. Add three DIV elements within "columns" each with a class value of "column". Each DIV should contain identifying text like "DIV #1". Using style.css, set the width to 28.33%, set the margin and padding to 1%, set the height to 140 pixels, set the border to 1 pixel, solid, white. Add a float value of left. Using style.css, add the CSS property "clear", with a value of "both" to footer elements. Add a media selector to style.css for max-width of 479px that changes the float values of the column class to none, and width to 96%

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter5: Designing For The Mobile Web: Creating A Mobile Website For A Daycare Center

Section: Chapter Questions

Problem 10RA

See similar textbooks

Similar questions

Open the code5-2_flex.css file. Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".
1. Open the code5-2_flex.css file. Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements". 2. Set the growth and shrink rate of the div elements of the card class to 1 and 1. Set the flex basis of those elements to 200 pixels. Display each div element of the card class itself as a flexbox. Next, apply the following flex layout to the items within the card div elements: Lay out the items in column order with no wrapping. Justify the content of the items within the flexbox with space between. Center each of the items with respect to the cross axis. Complete this task in conjunction with the previous task: "Style the section element as a flexbox".
Open the code4-2_grad.css file. Create a style rule for the article element that adds a black inset box shadow with a horizontal and vertical offset of 0 pixels, a blur radius of 50 pixels and a size of 20 pixels.
Draw a wireframe for the home page of your school's website. Write the CSS to configure a grid layout for the wireframe. Write the @media rule to target a typical smartphone device and configure the nav element selector with width set to auto.
Go to the cw_home.html and cw_styles.css files and enter your name and the date in the comment section of each file. In cw_styles.css file and at the top of the file, use the @import rule to import the contents of the cw_designs.css file, which contains several style rules that format the appearance of different page elements. Go to the cw_home.html file and within the document head, insert a meta element that sets the browser viewport for use with mobile devices. Also, create links to cw_reset.css and cw_styles.css style sheets. Take some time to study the contents and structure of the document.
Help me complete this task. Add the following style rules for the form elements. Create a style rule for the fieldset and input elements that sets the bottom margin to 2%. Create a style rule for the fieldset legend that sets the font-size to 1.25em and makes the font bold. Create a style rule for the label that sets the display to block and sets padding-top to 3%. Create a style rule for the btn class selector that removes the border, sets the top and bottom margin to zero and the left and right margin to auto, sets the display to a block, sets the padding to 5%, sets the background-color to 003399, sets the font-size to 1.25em, sets the border-radius to 10px, and sets the color to white (fff). --my css /* Style for body specifies a background color */ body { background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center; font-family: Geneva, Arial, sans-serif; } /* Style for the container element */ #container { width: 90%; margin: 0 auto; }…
4. Code a style rule for the main element that puts padding around its contents. Then, code a style rule for the footer that puts a blue border above it. Note that this border doesn’t touch the border for the body. 5. Code style rules for the h1, h2, and h3 elements. The h1 font should be 150% of the default specified in the body, the h2 font should be 125% of the default font, and the h3 font should be 115% of the default font. The h1 font should also be blue. Then, apply appropriate margins or padding to the h1, h2, and h3 elements so the spacing before and after the headings is similar to what’s shown above.6. Code the style rules for the <p>, blockquote, ul, and li elements so the spacing before and after the elements is similar to what’s shown above.7. Code a style rule for the cite element that changes its color to blue and removes the italics from the text.8. Code a style rule for the paragraphs that contain cite elements. This style rule should right align the paragraphs…
In the styles.css file, add the section, aside, figure, and figcaption elements to the CSS reset. Below the img style rule, add the following comment and style rule: /* Style rule for box sizing applies to all elements */ * { box-sizing: border-box; } Create a style rule for the aside element within the mobile viewport and include the following declarations: text-align: center; font-size: 1.5em; font-weight: bold; color: #373684; text-shadow: 3px 3px 10px #8280cb; Create a style rule for the figure element within the mobile viewport, and include the following declarations: position: relative; max-width: 275px; margin: 2% auto; border: 8px solid #373684; Create a style rule for the figcaption element within the mobile viewport, and include the following declarations: position: absolute; bottom: 0; background: rgba(55, 54, 132, 0.7); color: #fff; width: 100%; padding: 5% 0; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 1.5em; font-weight:…
Open index.html in your browser to view the webpage. Maximize the browser window to use a desktop viewport. Below the gradient style rules comment, create a style rule for the gradient1 class selector and add the following declaration to specify a linear-gradient for the background: background: linear-gradient(to right, #67afcb, #1a3e4c 25%); Create a style rule for the gradient2 class selector and add a declaration to specify a linear-gradient to the left, use #d4f7ec and #448d76 for color values, and use 90% as the color stop. Create a style rule for the gradient3 class selector and add a declaration to specify a linear-gradient to the top left, and use #efddfd and #36065b for color values. Create a style rule for the gradient4 class selector and add a declaration to specify a linear-gradient that uses the following four color values: #e6e6ff #70dbdb #ffffcc #cc6699 Create a style rule for the gradient5 class selector and add the following declaration to…
CSS question Scroll down to the section element and, directly after the initial paragraph, insert a form element that employs the action at the fictional address http://www.example.com/redball/customer using the post method. Within the form element, insert a div element that encloses a label with the text Name* associated with the nameBox control. Also, within the divelement, add an input text box with the ID nameBox, field name custName, and placeholder text First and Last Name. Make custName a required field. (Hint: To make a field required, add the required attribute to the corresponding control element e.g. <input ... required>)
Add a class attribute with the value mobile-tablet to the empty div element. Nest the following elements within this div element: An h3 element with the text Sponsorship Levels. Paragraph element with the text Green: $200. Paragraph element with the text Blue: $400. Paragraph element with the text Red: $600. Paragraph element with the text Purple: $800. Paragraph element with the text Silver: $1,000. Paragraph element with the text Gold: $1,500. Paragraph element with the text Each sponsorship supports our animals and operations. Business recognition is given at every sponsorship level. Contact us today to become a sponsor. <!DOCTYPE html>  <html lang="en"> <head> <title><span class="icon">🐾</span>Wild Rescues: Template</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css"> <meta…
Question: Go to the Customer Comment Styles section. In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ul element with the id comments, create a style rule that sets the width to 75% and centers the element by setting the top/bottom margin to 40 pixels and the left/right margin to auto. Karen wants the list items to appear in two columns on the page. In the same section, create a style rule for every list item in the comments list that: displays the item as a block with a width of 50% floated on the left and sets the size of the bottom margin to 30 pixels. Every customer comment is accompanied by an image of the student. Karen wants these images displayed to the left of the comment. Create a style rule to display the image within each comment list item as a block with a width of 20%, floated on the left, and with a left/right margin of 5%. Create a style rule for every paragraph nested within a customer list item that…