Question: MUST USE GRID PAGE STRUCTURE AND CSS FILE PROVIDED, GRID HAS TO BE 2 ROWS 3 COLUMNS DO NOT MAKE YOUR OWN CODE, MY GRADE

MUST USE GRID PAGE STRUCTURE AND CSS FILE PROVIDED, GRID HAS TO BE 2 ROWS 3 COLUMNS

DO NOT MAKE YOUR OWN CODE, MY GRADE DEPENDS ON THISMUST USE GRID PAGE STRUCTURE AND CSS FILE PROVIDED, GRID HAS TOBE 2 ROWS 3 COLUMNS DO NOT MAKE YOUR OWN CODE, MYGRADE DEPENDS ON THIS Given these starter files, this is the expected

Given these starter files, this is the expected output.

Grid Page Structure

===================

title

column header

image

text (paragraphs, each with class="column")

column header

image

text (paragraphs, each with class="column")

column header

image

text (paragraphs, each with class="column")

column header

image

text (paragraphs, each with class="column")

column header

image

text (paragraphs, each with class="column")

column header

image

text (paragraphs, each with class="column")

Reset button


CSS file

/*

In the following selector,

add a background color style of your choice.

*/

div.columnHeader

{

margin-bottom:5px;

padding-top:2px;

padding-bottom:2px;

}

h2

{

margin:3px 0px 5px 5px;

}

img

{

width:250px;

}

p.column

{

font-family: verdana, arial, helvetica, sans-serif;

font-size: 10pt;

margin:0px 0px 0px 5px;

text-align:left;

text-indent:1em;

}

/*

In the following selector,

add the style to change its display type to inline-block,

add the style to enable vertical scrolling.

*/

.columnOf3

{

border:1px solid DarkGray;

height:250px;

margin:0px 5px -4px 5px;

width:315px;

}

.columnOf3Container

{

border:0px solid red;

margin-left:auto;

margin-right:auto;

text-align:center;

}

Create a web page with a grid of scrolling boxes. The following requirements must be met: You must choose a theme different from the example output's "Containers" theme. Your grid must consist of 6 boxes: 2 rows with 3 boxes in each row. Your page must follow the layout design outlined in the Grid Page Structure file. This design uses div's and styles, not tables, to achieve its layout. You must use the external style sheet "styles.css" provided in the starter files folder. You must add some missing styles to this CSS file. There are comments in the CSS file that show where your styles must appear. Clicking on the Reset button must call a JavaScript function to reset all the scroll bars This function is provided in this week's example files in the "Scrollable div" example. You must change the line: if (div.className == "scroll") to if (div.className"columnOf3")

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!