I need help to achieve the desired web page, the following style rules should be utilized: tag: set display to be flex and justify-content to be space-between content class: set display to be flex and flex-wrap to be wrap main-content class: set display to be flex, flex-wrap to be wrap, flex-grow to be 1, and flex-basis to be 70% title class: set display to be flex and align-items to be baseline summary class: set display to be flex, justify-content to be space-evenly, flex-grow to be 1, and flex-basis to be 100% tag child of tag child of summary class: set display to be flex and justify-content to be space-between ingredients and directions classes: set flex-grow to be 1 and flex-basis to be 45% related-content class: set flex-grow to be 1 and flex-basis to be 20%

I need help to achieve the desired web page, the following style rules should be utilized: tag: set display to be flex and justify-content to be space-between content class: set display to be flex and flex-wrap to be wrap main-content class: set display to be flex, flex-wrap to be wrap, flex-grow to be 1, and flex-basis to be 70% title class: set display to be flex and align-items to be baseline summary class: set display to be flex, justify-content to be space-evenly, flex-grow to be 1, and flex-basis to be 100% tag child of tag child of summary class: set display to be flex and justify-content to be space-between ingredients and directions classes: set flex-grow to be 1 and flex-basis to be 45% related-content class: set flex-grow to be 1 and flex-basis to be 20%

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 4CP3

See similar textbooks

Similar questions

Complete the following webpage assignment. Assignment Instructions: Design a webpage to simulate a Blog. The website must have a banner image and a featured image with multiple resolutions to be active at different resolution breakpoints just as discussed in this lesson. Include a jQuery script in your project to further enhance the user experience. Use one of the CDN libraries. The script is up to your discretion though you must be able to justify its use. The blog page must be aesthetically pleasing and follow a traditional blog structure. It may help to look at the many WordPress templates available on the net.
Your completed assignment should contain all of the following: ■ Your color scheme's name should be set as the table's header. It should have one or more font styles applied to it to differentiate it from other text in the table. ▪ You should list each color name, with each cell having its color set as its background color. ■ Include cells that give each color's hex value. ■ Include cells that give each color's rgb value. ▪ Include cells that give each color's hsl value. ▪ Your HTML table should be logically and properly constructed.
Assume a web page contains header div and a content div below it. Header has its sub elements like logo, title and 3 links. Content div will be with its sub elements like div, headings and paragraphs. Write html code along with the style of all these elements that existing on the page in external style sheet
this is the "index page "code index .hbs<!DOCTYPE html><html><head><link rel="stylesheet" href="./data/l.css"></head><body><div class="flex"><div class="element-center"><div id="acctBalance"><span class="wrap"></span></a><h1>Total Balance</h1><label id="acctBalanceLbl"></label><input id="txtid" name="txtid" type="text" maxlength="10" placeholder="Accountnumber"><br><br></div><div id="inputs"><h2>Deposit</h2><input type="text" id="userDeposit" required><button id="btnDeposit">Deposit</button><h2>Withdraw</h2><input type="text" id="userWithdraw" required><button id="btnWithdraw">Withdraw</button><label id="usernameLb2"></label>// add label for displaying user name</div></div></div><script type="text/javascript" src="bank_account_script.js"></script><script…
this is the "index page "code index .hbs<!DOCTYPE html><html><head><link rel="stylesheet" href="./data/l.css"></head><body><div class="flex"><div class="element-center"><div id="acctBalance"><span class="wrap"></span></a><h1>Total Balance</h1><label id="acctBalanceLbl"></label><input id="txtid" name="txtid" type="text" maxlength="10" placeholder="Accountnumber"><br><br></div><div id="inputs"><h2>Deposit</h2><input type="text" id="userDeposit" required><button id="btnDeposit">Deposit</button><h2>Withdraw</h2><input type="text" id="userWithdraw" required><button id="btnWithdraw">Withdraw</button><label id="usernameLb2"></label>// add label for displaying user name</div></div></div><script type="text/javascript" src="bank_account_script.js"></script><script…
Assume a web page contains header div and a content div below it. Header has its sub elements like logo, title and 3 links. Content div will be with its sub elements like div, headings and paragraphs. Write html code along with the style of all these elements that existing on the page in external style sheet. MC MoviesCounter Cl
For this assignment you are to create a site template (called template.htm) that uses the different parts of HTML 5 and CSS that we've been talking about all term. As a minimum it should have: Proper HTML structure including html, head, and body tags. A page header Site navigation (nav with anchor links) should have at least 5 links on the menu those links may not be complete, so the href can be just "#" probably should be in your page header A main section
Create a website that will feature ONLY one (1) product- a webpage or section about the featured product (i.e. pizza), with enough text description andnecessary pictures Using Forms, identify three (3) features about the product that the user can choose from; (i.e. Pizza type, sauce, toppings, etc)- have predefined values set and included in the user-defined values; if using arrays, usenecessary methods to add user-defined values (i.e. basic toppings: cheese, bell pepper)- assign price value (in Php) for every customized feature and will be computed to provide the user his/her final/total cost to purchase the customized product.If the user didn’t choose to customize the feature, pre-defined values will be used and NO extra fee will be charged to the user.- use onblur and onfocus to assist user in his/her transaction; you may use any CSS style rule/s to highlight necessary action Provide a Reset Button in case the user wants to change his/her order Using onSubmit, ask User’s Information…
Create a products.html page and add five product images to the page. Create a Product class for each of the product images with the following attributes: Price, Name, Description and Id. Under each product image add an "add to cart" button and a "remove from cart button". Make the id property of the button the id for the product.
Add an id attributes for each product and make the id property of both of the buttons the id of the product. Existing code: <!DOCTYPE html><html><head> <div class="card"><img src="img/clorox.jpg"><h1>Clorox</h1><p class="price">$20.00</p><p>Household Cleaner</p><p><button>Add to Cart</button></p><p><button>Remove from Cart</button></p></div> <div class="card"><img src="img/oxiclean.jpg"><h1>Oxiclean</h1><p class="price">$8.00</p><p>Household Cleaner</p><p><button>Add to Cart</button></p><p><button>Remove from Cart</button></p></div> <div class="card"><img src="img/pinesol.jpg"><h1>PineSol</h1><p class="price">$11.00</p><p>Household Cleaner</p><p><button>Add to…
write a CSS style rule to set up a linear gradient background based on the following requirements: it is for a class named peterthe direction of the linear gradient is to be from right to left and must be represented by degreesthe starting colour must be red and presented in the RGB formatthe ending colour must be blue and presented in hexadecimal format
Add JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names. Code for index.html: <!DOCTYPE html><html><head><title>Discussion 12</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><header><h1>Custom Computers</h1></header><section><h2>Our custom models</h2><p>Our computer models are built using high-performance hardware</p><div class="computer"><div>The standard model</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulummetus velit a tortor. Phasellus vel quam eu nunc molestie porta. Maurismassa justo, dignissim eget eleifend sit amet, condimentum.</p></div><div class="computer"><div>The casual gaming model</div><p>Lorem ipsum dolor sit…