编程代写 # Assignment 2

# Assignment 2

**Assignment and Code Blog Entry due at 11:59pm on Monday 4/25/2022**
**Demo due by 11:59pm on Monday 5/9/2022**

Copyright By PowCoder代写 加微信 powcoder

The goals of this assignment are to exercise your CSS skills and to give you practice at implementing a page that visualy matches a set of provided “mocks”, which is a common task for a web developer.

Here, you are provided with an un-styled `index.html` file, an empty `style.css` file, and a set of mocks (actually screenshots/captures) in the `mocks/` directory. Your task is to add styles to `style.css` to make your rendered `index.html` page matches the mocks as closely as possible. Below are listed some of the things you must accomplish.

## Text styling

* The font for the entire page should be [Roboto](https://fonts.google.com/specimen/Roboto). A third-party stylesheet is included in `index.html` to import this font from Google Fonts.

* Note the different font weights used across the page in the mocks. The font weight in the header is different than the font weight of the each twit’s text, which in turn is different than the font weight of each twit’s author.

* Pay attention to text alignment in the various elements of the page.

* The links in the navbar should have space around them.

* The search box and search button should be pushed all the way to the right of the navbar, while the other links should remain on the left side.

* The “active” navbar link should be indicated with an underline.

* When the user hovers over the navbar links or the search button their color should change to highlight the hovered element.

* When the search box is focused, its background color should change to indicate its focus. The unfocused search box should have a slightly dimmer background color.

* The twit layout should be somewhat responsive to the size of the browser viewport, in that columns should be added and removed as the size of the browser viewport changes. Note that there should be equal space between all twits, both vertically and horizontally.

* Try to style your page so all twits in the same row have the same height.

* Pay attention to the alignment of elements within a single twit. The top of the bullhorn icon should line up with the top of the twit text, and the right edge of the twit author should line up with the right edge of the twit itself (with just a bit of space between the edge of the author and the edge of the twit).

* Each twit should have a subtle border to help it stand out from the background.

* Note that the background behind the twits should not be pure white but a light gray.

* When the user hovers over a twit author, its color should change to highlight the hovered element.

## Add-twit button

* The location of the “add-twit” button should not not change relative to the viewport, even as the page is scrolled.

* The add-twit button itself should be a perfect circle.

* The add-twit button should have a subtle shadow behind it, to make it appear to be elevated slightly above the rest of the page.

* When the user hovers over the add-twit button, it should grow slightly and change color to indicate its interactivity. The mouse cursor should change to a pointing hand. When implementing CSS to make the add-twit button grow on hover, try to make it grow from the center instead of from the corner.

## Other notes on styling

* Again, your goal is to match the mocks as closely as possible. I’ll show some tools in class that will help you do this. Don’t worry, however, if you don’t get things like padding, margins, etc. exactly right (e.g. matching the mocks to the exact pixel value). Also, note that many style effects can be achieved in different ways using CSS. However you implement various style features, the important thing is that they match the mocks as closely as possible.

* One other thing to note is that the page incorporates several icons from the [Font Awesome icon library](https://fontawesome.com/icons?d=gallery). This library is incorporated as a 3rd-party CSS file, and the icons are placed into the page using `` elements whose HTML classes indicate which icon to display what icon style to use (e.g. `far`, `fas`, `fa-hand-lizard`, etc.). Do not use these classes to apply styles to the page or apply styles directly to the `` elements. You should be apply styles to other elements to match the appearance of the mocks.