Question: I would really love help trying to figure out the code for the T2 Case problem review. Every time I put my code in, it
I would really love help trying to figure out the code for the T2 Case problem review. Every time I put my code in, it tells me im wrong.
Setting Up Starter Files
Enter your name and the date in the comment section of tss_coach.html and coach_styles.css. These files will be saved automatically for you.
Go to the tss_coach.html file in your editor and then within the document head, create links to the coach_layout.css and coach_styles.css style sheets.
Before moving on to the next step, take some time to study the content and structure of the starter files.
Initial Setup
Click on the coach_styles.css file in the coding editor. At the top of the file and before the comment section do the following:
-
Insert an @charset rule to set the character encoding for the file to utf-8.
-
Use the @font-face rule to define a web font named Nobile, which is sourced from the nobile-webfont.woff file and, if that font format is not supported, the browser will fallback to the nobile-webfont.ttf file.
Note: The files nobile-webfont.woff and nobile-webfont.tff that are provided for you are not directly readable and are intended to display "random" characters when opened.
Main Structural Styles
Go to the Main Structural Styles section and do the following:
-
Change the background color of the browser window by creating a style rule for the html element that sets the background color to the value hsl(27, 72%, 72%).
-
For the body element, create a style rule to set the text color to the value rgb(91, 91, 91), the background color to ivory, and body text to the font stack: Verdana, Geneva, sans-serif.
Footer Address
Create a style rule for the body > footer address selector containing the following styles:
-
The background color set to the value rgb(222, 128, 60)
-
The font color to white and then to the semitransparent value rgba(255, 255, 255, 0.6)
-
The font style to normal displayed in bold small capital letters with a font size of 0.9em and a line height of 3em using the font stack Nobile, Verdana, Geneva, sans-serif
-
The text horizontally centered on the page
Heading Styles
Go to the Heading Styles section and create a style rule for every h1 heading that displays the text with a normal font weight from the font stack: Nobile, Verdana, Geneva, sans-serif. Set the letter spacing to 0.2em and the margin to 0 pixels.
Format Headings
Alison wants you to format the main h1 heading at the top of the page. Create a style rule for the section#tss_coaches h1 selector that sets the font size to 2.5em with a color value of hsl(27, 82%, 85%) and background color of hsl(27, 6%, 21%). Set the left padding space to 10 pixels.
Alison also wants you to format the h2 headings for each coach. Create a style rule for the article.coach_bio h2 selector that sets the font size to 1.6em with normal weight and the font color to rgb(240, 125, 0).
Alison has inserted a comment from an athlete about the coaches. Format this comment by going to the Blockquote Styles section and creating a style rule for the aside blockquote selector to do the following:
- Set the font size to 0.95em using the font stack 'Comic Sans MS', cursive.
- Set the font color to rgba(255, 255, 255, 0.75) and use a semi-transparent background color with the value rgb(222, 128, 60).
- Set the padding space to 10 pixels.
- Define opening and closing quotes for the element using the Unicode character 201C and 201D respectively.
Format Opening Quotes
Format the appearance of the opening quotes by creating a style rule for the aside blockquote::before selector to write a boldfaced open quote before the block quote with the font size set to 1.6em from the font stack Times New Roman, Times, serif.
Format Closing Quotes
Format the appearance of the closing quotes by creating a style rule for the aside blockquote::after selector to write a boldfaced open quote after the block quote with the font size once again set to 1.6em from the font stack 'Times New Roman, Times, serif.
Appearance of Navigation List
Next, youll format the appearance of the navigation list by going to the Navigation Styles section and creating a style rule for body > nav selector that sets the text of the navigation list in a 0.8em font size with a line height of 2em. Create a style rule for the nav > ul selector that removes the list marker and sets the left padding to 5 pixels.
Breaking Up Navigation List
Alison wants to break up the long list of links in the navigation list. Create style rules for the 6th and 16th li elements within the nav > ul selector that sets the size of the top margin of those items to 20 pixels.
Hypertext Links
For every previously visited or unvisited hypertext link within the nav > ul > li selector, set the text to the RGB color value rgb(151, 151, 151) and remove the underlining from the text link.
For every hovered or active hypertext link within the nav > ul > li selector, set the text color to RGB value rgb(222, 128, 60) and underline the hypertext link.
Paragraph Styles
Go to the Paragraph Styles section and insert a style rule that sets the top margin and bottom margin to 10 pixels, the right margin to 30 pixels, and the left margin to 0 pixels for every paragraph in the document.
List Styles
Every coach has a list of accomplishments.
Go to the List Styles section and insert a style rule for the article.coach_bio > header > ul selector that displays the check.png file as the list marker and sets the margin space to 0 pixels, except for the bottom margin, which should be set to 10 pixels.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
