Just need help with these two steps: (I did them incorrectly b/c they are not sh
ID: 3727760 • Letter: J
Question
Just need help with these two steps: (I did them incorrectly b/c they are not showing up in my Chrome or Safari browswers)
5. Amy wants the individual list items in the tabs navigation list to appear as tabs in a recipe box. She wants each of these “tabs” to be trapezoidal in shape. To create this effect, you’ll create a style rule for the body > header nav.tabs li selector that transforms the list item by setting the perspective of its 3D space to 50 pixels and rotating it 20° around the x-axis.
10. Go to the Blockquote Styles section. Amy has included three sample reviews from users of the Save your Fork website. Amy wants the text of these reviews to appear within the image of a speech bubble. For every blockquote element, create a style rule that does the following: a) sets the background image to the sf_speech.png with no tiling and a horizontal and vertical size of 100% to cover the entire blockquote, and b) uses the drop-shadow filter to add a drop shadow around the speech bubble with horizontal and vertical offsets of 5 pixels, a blur of 10 pixels and the color RGB(51, 51, 51). 11. Amy has included the photo of each reviewer registered on the site within the citation for each review. She wants these images to appear as circles rather than squares. To do this, create a style rule for the selector cite img that sets the border-radius to 50%. 12. Save your changes to the style sheet file and then open sf_torte.html in your browser. Verify that the design of your page matches that shown in Figure 4-67. Confirm that when you hover the mouse over the navigation tabs the background color changes to match the page color. (Note: Some versions of Internet Explorer do not support the filter style, which means that you will not see drop shadows around the speech bubbles.)
My CSS Code Below (bolded my problem areas):
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4
Case Problem 2
Save your Fork Graphic Design Styles
Author: Dylan Chow
Date: 3/11/2018
Filename: sf_effects.css
*/
/* Body Header Styles */
body {
box-shadow: 10px 0px 50px rgb(51, 51, 51);
}
/* Navigation Tabs List Styles */
body > header nav.tabs {
background-image: url("sf_back1.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
body > header nav.tabs li{
transform: perspective(50px) rotate(20deg);
}
body > header nav.tabs li::hover{
background-color: rgb(231, 231, 231);
}
/* Left Section Styles */
section#left nav.vertical {
border-style: solid;
border-width: 1px;
border-color: rgb(20, 167, 170);
border-radius: 25px;
}
section#left nav.vertical h1{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
/* Center Article Styles */
section#center article{
background: radial-gradient(white 30%, rgb(151, 151, 151));
border-style: solid;
border-width: 1px;
border-color: rgb(151, 151, 151);
border-radius: 50px;
box-shadow: 10px 10px 20px rgb(51, 51, 51);
}
/* Blockquote Styles */
blockquote{
background-image: url("sf_speech.png");
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(5px 5px 10px rgb(51, 51, 51);
}
cite img{
border-radius: 50%;
}
What my code looks like right now:
HTML 336 HTML and CSS | Tutorial 4 Graphit Data Files needed for this Case Problem: st torte txt.html, sf effects. txt.ess, 2 CSS f a Save your Fork Amy Wu has asked for your help in redesigning her website, Save you for people who want to share dessert recipes and learn about baking in general. St Case Problem 2 ss files, 9 PNG 2. Go t scontaining a sample dessert recipe and links to other pages on the website. A re has you'll create is shown in Figure 4-67 of th Preview 3. Go rul of is 4. G Figure 4-67 Save your Fork sample recipe page Save your Fork 6 Apple Bavarian Torte. 0 O 2016 Cengage Learning: O Jelly Shutterstock.com Courtesy Patrick Caney Amy has already created a style sheet for the page layout and typography, so your work focused on enhancing the page with graphic design styles Complete the following 1. Using your editor, open the sf_torte_txt.html and s effects txt.css fils from the folder. Enter your name and the date in the comment section of each file, and sa sf torte.html and st effects.css respectively.Explanation / Answer
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4
Case Problem 2
Save your Fork Graphic Design Styles
Author: Dylan Chow
Date: 3/11/2018
Filename: sf_effects.css
*/
/* Body Header Styles */
body {
box-shadow: 10px 0px 50px rgb(51, 51, 51);
}
/* Navigation Tabs List Styles */
body > header nav.tabs {
background-image: url("sf_back1.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
body > header nav.tabs li
{
transform: perspective(30px) rotate(20deg);
}
body > header nav.tabs li::hover
{
background-color: rgb(231, 231, 231);
}
/* Left Section Styles */
section#left nav.vertical {
border-style: solid;
border-width: 1px;
border-color: rgb(20, 167, 170);
border-radius: 25px;
}
section#left nav.vertical h1{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
/* Center Article Styles */
section#center article{
background: radial-gradient(white 30%, rgb(151, 151, 151));
border-style: solid;
border-width: 1px;
border-color: rgb(151, 151, 151);
border-radius: 50px;
box-shadow: 10px 10px 20px rgb(51, 51, 51);
}
/* Blockquote Styles */
blockquote{
background-image: url("sf_speech.png");
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(5px 5px 10px rgb(51, 51, 51);
}
cite img{
border-radius: 30%;
}
check out this and still having any problem please feel free to ask. you can comment below.
thank you.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.