Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

In this picture I need to know how to do QUESTIONS 1-3. I am not understanding what I am suppose to do and the 3

In this picture I need to know how to do QUESTIONS 1-3. I am not understanding what I am suppose to do and the 3rd question it wants me to link both the Br_reset.css and the Br_styles.css. However when I add the br_reset.css everything I did on the Br_styles disappears here is what I have so far in the Br_listing2048 and in the br_styles

This is the Br_listing2048

Browyer Realty

This is the br_styles

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 4

Case Problem 4

Browyer Realty Layout Styles

Author:

Date: 04/23/2018

Filename: br_styles.css

*/

body

{

margin: 0;

padding: 0;

}

.container

{

position: relative;

width: 950px;

min-height:800px;

margin: auto;

margin-top: 10px;

top:2%;

/*Background image with blue color and also applied radial gradient to background*/

background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#cde6f9), to(#6191bf));

/*page layout with black border of 2px*/

border: 2px solid black;

/*page layout with border radius (round edge) of 5px*/

border-radius:5px;

-webkit-box-shadow: -7px 11px 22px 2px rgba(0,0,0,0.74);

-moz-box-shadow: -7px 11px 22px 2px rgba(0,0,0,0.74);

box-shadow: -7px 11px 22px 2px rgba(0,0,0,0.74);

}

h1 {

margin-top: 6%;

text-align:center;

color: white;

/*Background image with lightblue color and also applied linear gradient to background*/

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb));

/*Header element with text shadown of darkblue with white font*/

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

/*Filter css applied to make a shadow effect to the header element*/

-webkit-filter: drop-shadow(33px 33px 20px black); This part does not work either I dont know what I am doing wrong.

/*transform the header element by rotating to 5 degree clockwise*/

-ms-transform: rotate(5deg); /* IE 9 */

-webkit-transform: rotate(5deg); /* Safari */

transform: rotate(5deg);

}

image text in transcribed

Chapter 4: Graphic Design with CSS 40 Case Problem 4 Data Files needed for this Case Problem: br Jliting204B bthtml, br styles ttcs, 1 C fle, 11 PNG files, 1 TXT file ny operating in Owatonna, Minnesota. She's asked you to help create a style design for the pages on her site that describe residential listings. Linda has already written up sample content for a listing and collected images of the property. She needs you to create the HTML file and write up the style sheets Complete the following 1. Using your editor, open the br listing2048 txt.html and br_styles txt.css files from the htm104 . case4 folder. Enter your name and the date in the comment section of each file and save them as br_listing2048.html and br_styles.css respectively 2. Using the content of the br_listing2048.txt file, create the content and structure of the br listing2048.html page. You are free to supplement the material in these text files with additional content of your own if appropriate. Use the symbol for the value of the href attribute in your hypertext links because you will be linking to pages that don't actually exist. 3. Link your home page to the br_reset.css and br_styles.css style sheets. Save your changes to the file. 4. Go to the br styles.css file in your editor and create the layout and design styles to be used in your page. The page design is up to you, but must include at least one example of the following graphic design features: . A background image . A border around a page element, including an example of a curved border . A box shadow around a page element . A text shadow around a section of element text . A background featuring a linear gradient and a radial gradient . Changing the appearance of an element using the transform property Changing the appearance of an element using the filter property 5. Include comments in your style sheet to make it easy for other users to interpret. 6. Test your layout and design on a variety of devices, browsers, and screen resolutions to ensure that your sample page is readable under different conditions

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

What is Change Control and how does it operate?

Answered: 1 week ago

Question

How do Data Requirements relate to Functional Requirements?

Answered: 1 week ago