Create a web page with a grid of scrolling boxes. The following requirements mus
ID: 3834852 • Letter: C
Question
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") Type this in HTML format Containers: Containers Jaw Food Ca Freight containers are large, strong Jars can contain or They do typically contain ether jar inside containers that are designed for trampart via train, ship, or tuck. For ieeurity them. jars allow light to shine Menin Containers TinareN Toy chests can help to keep a todders
Explanation / Answer
Below is an example code:
<!DOCTYPE html>
<html>
<head>
<title>The Evolution of the Bicycle</title>
<style type="text/css">
body {
width: 970px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
vertical-align: middle;}
div {
width: 300px;
float: left;
margin: 5px;
padding: 5px;
height: 150px;
background-color: #efefef;
overflow: scroll;
}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<div>In 1817 Baron von Drais invented a walking machine that would heldiv him get around the royal gardens faster. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div>The device know as the Draisienne (or "hobby horse") was made of wood, and divropelled by pushing your feet on the ground in a gliding movement.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div>It was not seen as suitable for any place other than a well maintained pathway. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div>In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div>In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div>Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button">Reset</button>
<script>
function reset(){
var myDiv = document.getElementsByTagName('div');
for (var p = 0; p < myDiv.length; p++) {
myDiv[p].scrollTop =0;
}
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.