Your job is to style the color.fun website. Use your CSS framework as a starting point. You don't have to write all of the styles from scratch!
Feel free to modify the HTML markup on the page in any way that you wish. You must not break the functionality! Two things happen here:
- Color swatches are generated in
div.swatches
. - Clicking swatches adds colors to the cart.
Use your CSS framework! Your framework styles should cover much of the problems here. You will have to write some CSS to fill in some details.
Some problems will not be covered by your framework for these you will need to write your own styles.
The page is structured as:
- main
- section#nav
- section#banner
- section#about
- section#popular
- section#swatches
- section#cart
- section#contact
Each section should have a min-height
equal to the height of the window. Some sections might need to be larger. So min-height
would be the best coice.
What to do: Give each section a min-height
of 100vh;
Set the font style for text and headings. All fonts on the page should be styled. I should not see the default Times New Roman anywhere!
What do to Style the text content. This includes: text (paragraphs etc.) headings, and links. None of these elements should have the default HTML appearance.
Style the navbar and links. The navbar should include the links and the page title.
What to do: Create a navbar along the top of the page. It should be a horizontal bar containing the links in section#nav
Extra credit: Make the navbar sticky. A sticky navbar always stays at the top of the page even when the page scrolls.
These cards have an image and text. The cards should sit in a horizontal row.
What to do: In section#popular
there are three divs each containing an image and a paragraph. Style these so that they look like cards. The cards should be arranged in a horizontal row, use flex.
There is an image in each card. Style these images so they look nice and fit the card.
The section#swatches
contains 100 div.swatch
elements. Each of these is a color that is for sale! Currently each swatch looks like a red box. You'll give each one of these a color in the next step.
Clicking a swatch will add it to the shopping cart.
What to do: Arrange the color divs in the #swatches section in a grid. Change the size of the swatches. The current style makes each swatch is 100px by 100px. They can be any other size!
There are 100 color swatches but all 100 are red. You need to generate 100 unique colors and display each color in a swatch. You can do this in any way you like.
Possible solutions for this problem would be to use JS or SASS.
-
JS solution would need to assign an inline color to each color swatch.
-
The SASS solution would require using a loop to generate style rules for all 100 color properties. Notice that each color has a class name of
color-#
where # is the color number. Your SASS code could generate something like:
.color-0 { background-color: red; }
.color-1 { background-color: green; }
.color-2 { background-color: blue; }
What to do: Generate 100 colors. Make sure each color swatch has a unique color.
Make sure each swatch displays a different color!
NOTE! Each swatch needs to keep the class name: add-to-cart
or it will break the shopping cart system!
Clicking a color swatch adds it to the shopping cart. The cart is a list and each row is made up of some text, buttons, and an input. You should style these.
In this step, your goal is to style the form elements that show up in the shopping cart.
The cart displays when you click a swatch. You won't see it unless you click a swatch to add a swatch to the cart!
If you need to change the structure of the shopping cart list item you can. Look for it in the script tag at the bottom of the page, there is a comment calling it out.
What to do: Style the shopping cart. There is text, input, and three buttons here. All three of these things should have a style!
Be sure to style all of the form elements: buttons and inputs!
At the bottom of the page is a contact form. Your goal is to style this.
None of the elements should use the default styles.
What to do: Style the form elements. There are several inputs and a button, style all of these.
Center the content of each section. I'll leave this up to you to how you handle it. generally the content should be centered. Especially for the banner, card, and contact sections. For other sections you may decide otherwise.
What to do: Arrange the content in each section. Use flex to place the content in the center of a section or arrange it another way.
Create a web component that animates the text inside with a ticker-tape effect. Use the ticker tape component at the top of the page to animate the text: <h1>...Color.com is awesome...</h1>
.
The ticker tape should move the text across the screen. You can take one of two approaches.
- Manipulate the string content. Use a timer to take the first character of the string and move it to the end of the string. Doing this over time you'll end up with:
- Hello
- elloH
- lloHe
- loHel
- oHell
- Hello
- Create an inner element containing the text. Transform this element from right to left. At the end of the animation Move it back to the right and start over again.
Taking this approach it would be easiest to use @keyframes
. To do this in a web component you'll want to define this in a template. See the example here. Note the styles are in a string in a <style>
tag. You could define your @keyframes
block here along with other animation styles.
Notice that all of the styles here are defined in a template and the template is used in the component.
const tempNode = template.content.cloneNode(true)
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.appendChild(tempNode)
Submit your work on GradeScope.