Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

It keeps telling my my code is wrong. Please help. HTML Styles Return to the cf_effects.css file in your editor and go to the HTML

It keeps telling my my code is wrong. Please help.

HTML Styles

Return to the cf_effects.css file in your editor and go to the HTML Styles section. Debra wants a background displaying a scene from last years festival. Add a style rule for the html element that displays the cf_back1.png as a fixed background, centered horizontally and vertically in the browser window and covering the entire window.

Body Styles

Go to the Body Styles section and set the background color of the page body to rgba(255, 255, 255, 0.3).

Body Header Styles

Go to the Body Header Styles section and change the background color of the body header to rgba(51, 51, 51, 0.5).

Aside Styles

Debra has placed useful information for the festival in aside elements placed within the left and right section elements. Go to the Aside Styles section and create a style rule for the section aside selector that adds a 10-pixel double border with color rgba(92, 42, 8, 0.3) and a border radius of 30 pixels.

Debra wants a curved border for every h1 heading within an aside element. For the selector section aside h1, create a style rule that sets the border radius of the top-left and top-right corners to 30 pixels.

Define the perspective of the 3D space for the left and right sections by creating a style rule for those two sections that sets their perspective value to 450 pixels.

Create a style rule that rotates the aside elements within the left section 25 around the y-axis. Create another style rule that rotates the aside elements within the right section 25 around the y-axis.

cf_effects.css

/* To set background image */

body {

background-image: url("cf_back1.png");

height: 100%;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

/* To set the background color of the page body */

body {

background-color:rgba(255,255,255,0.3);

}

/* To set the background color of the body header */

h1 {

background-color:rgba(51,51,51,0.3);

}

/* To set styles for Aside section */

.Aside {

border-style: double;

border-width: 10px;

border-radius: 30px;

border-color: rgba(92,42,8,0.3);

}

/* To set styles for Aside header */

.h1_Aside {

border-top-left-radius: 30px;

border-top-right-radius: 30px;

}

/* To set perspective */

perspective: 450px;

/* To rotate for Aside elements */

transform: rotateY(25deg);

transform: rotateY(-25deg);

/* To set styles Cube */

#cube {

position: relative;

height: 400px;

width: 400px;

margin-top: 180px;

margin-bottom: 150px;

margin-right: auto;

margin-left: auto;

perspective: 450px;

}

#cube_bottom {

position: absolute;

height: 400px;

width: 400px;

}

#cube_top {

position: absolute;

height: 400px;

width: 400px;

}

#cube_right {

position: absolute;

height: 400px;

width: 400px;

}

#cube_left {

position: absolute;

height: 400px;

width: 400px;

}

#cube_front {

position: absolute;

height: 400px;

width: 400px;

}

/* To transfore cube elements */

#cube_front {

transform: translateZ(-50px);

}

#cube_left {

transform: translateX(-200px);

transform: rotateY(90deg);

}

#cube_right {

transform: translateX(200px);

transform: rotateY(-90deg);

}

#cube_top {

transform: translateY(-200px);

transform: rotateY(-90deg);

}

#cube_bottom {

transform: translateY(200px);

transform: rotateX(90deg);

}

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions

Question

5. Benchmark current training practices.

Answered: 1 week ago