Homework answers / question archive / HW4 CSS Flex Winter 2022 You are provided with a repo that contains the necessary html file, a starter css file, and a screenshot of the final results

HW4 CSS Flex Winter 2022 You are provided with a repo that contains the necessary html file, a starter css file, and a screenshot of the final results

Computer Science

Share With

---

HW4 CSS Flex Winter 2022 You are provided with a repo that contains the necessary html file, a starter css file, and a screenshot of the final results. You will need to create a new css file named style.css to transform the original page to one that resembles our example using the outlined CSS styles

below. DO NOT CHANGE THE FILE NAMES. I want to see if you know how to submit the

proper URL if there is no index.html file.

Starter Code:

https://github.com/UMSIComplexWebDesign/hw4-2022

Demo of Assignment:

See Canvas for a sample video of the final product.

Requirements:

01. All files and folders present, HTML file and CSS stylesheet in proper format, no styles in

HTML. DO NOT ALTER THE HTML FILE IN ANY WAY.

02. Validate all of the code - do this throughout the entire process.

The following specifications are for the default view:

1. Edit the body element to use the Poppins font (using Google fonts) with serif as a

backup. It should also use the image “concrete_seamless.png” as a background-image

with a backup color of #f1f1f1.

Observe the image of the page at 720px.

2. Edit the css for the header tag (all instances) to use flex to match our example.

3. Edit the css for the nav_links class to use flex to match our example. Do not modify the

list items or the links - modify the nav_links class to use flex.

4. Style the links so that they have the same color even after they have been visited. This

is a “challenge” problem. You should not give or receive help when completing it.

5. Identify the proper selector to style ONLY those header elements that are direct children

of a card class. The required styling is the following:

a. background: #288088,

b. solid 2px border using #45ADAD,

c. 20px of padding on the top and the bottom,

d. 50px border-radius on the top left and right corners.

6. Check your work. The corners probably aren’t curving quite as you expected. Use

Inspect Element to fix this problem. You will need to utilize a second selector.

7. Edit the css for the pricing class to match our example. You should use flex and the

cards should be centered both horizontally and vertically.

**It might be easier to do step 8 before step 7**

8. Edit the css for the card class to match our example. Achieve this by using a

flex-property to specify an initial “size” of 450px. You need to think about this from a

“flex” perspective and realize that flex-direction will affect the size of the elements. You

can see that in the mobile view they all have the same width.

9. Style the images in the gallery class. These elements will have a solid 10px border with

a color of #50C7C7, 10px margin on all four sides and a width of 300px.

10. Edit the css for the gallery class to use flex to match our example. (You may want to

look the screen shots from 1200px and 1500px as well - the changes are not from

media queries, but from the use of flex.)

11. Animate the logo with keyframes. (Here is a keyframes reference.) It should start at a

width of 25px and grow to 475px. It should also start with an opacity of 0 and end with

an opacity of 1. The animation should take 5 seconds and only happen when the page

is loaded. **You can complete this step later in the process - it won’t affect the larger

views.

The following specifications are for when the screen-size is greater than

900px

Observe the screenshot from from 1200px

12. Edit the css for the header tag (all instances) and the nav_links class to match our

example using flex-properties. The logo should be as far to the left as possible and the

links as far to the right as possible. Use flex properties, NOT position properties.

13. Edit the css for the card class to match our example. Achieve this by using a

flex-property to specify a “size” of 250px. Notice that the elements do not have the same

height, but do have the same width.

14. Modify the first header (the one not inside main) so that it remains visible at the top of

the screen even as we scroll down. Make sure that it is always visible. You can see an

example of this in the video and in the screenshot at 1200px when scrolled. This is a

challenge problem. You should not give or receive help when completing it

 

 

 

Grading Rubric 

The following chart will be used as a rubric to grade your small-scale literature review:

	Target	Acceptable	Unacceptable
Content	The inquiry question was well established in the broader context of a topic.             (2 points)	The inquiry question was established in the context of a topic.   (2 - 1 point)	The inquiry question was not established in the context of a topic.  (0 point)
	At least five articles were selected and each specifically related to the initial inquiry question.  (5 points)	At least five articles were selected and related to the initial inquiry question. (5 - 4 points)	At least five articles were selected; some minimally related to the inquiry question. (3 - 0 points)
	The findings/results of articles were thoughtfully compared, contrasted and/or connected to each other.  (3 points)	The findings of articles were compared, contrasted and/or connected to each other. (2 points)	The findings of articles were mentioned with little and or no comparison or connection to each other.   (1 points)
	Identified the research problem and research questions (2 points)	Identified either the research problem or questions (1 points)	Did not succeed to identify either of them   (0 points)
	The conclusion of the review summarized the knowledge found from this review and related the knowledge gain to the inquiry question.  (2 points)	The conclusion of the review summarized the knowledge found from this review.   (1 point)	The conclusion of the review did not summarize the knowledge found from this review.   (0 point)
	The references were cited properly. (2 points)	The references were listed.  (1 point)	The references were not listed. (0 point)
Organization	The review was organized using subheadings. The review was suitably organized considering the contents of the selected articles.                 (2 points)	The review was suitably organized considering the contents of the selected articles. (1 point)	The review was minimally organized and writing was difficult to follow throughout.   (0 point)
Mechanics	There were no grammatical, spelling and/or punctuation errors and transitional phrases were used to guide the reader throughout the text.    (2 points)	There was an occasional grammatical, spelling and/or punctuation error that did not distract the reader.   (1 point)	There were many grammatical, spelling and/or punctuation errors that distracted the reader from the content of the writing.  (1 point)