Question

In: Computer Science

Create a style rule for the body element that: Sets the width to 90% of the...

Create a style rule for the body element that:

  1. Sets the width to 90% of the browser window, ranging from a minimum width of 640 pixels up to a maximum width of 1024 pixels.
  2. Sets the top/bottom margin to 30 pixels and the left/right margin to auto.
  3. Displays the body as a CSS grid.
  4. Creates six grid columns each with a width of 1fr.
  5. Creates five grid rows with widths of 50 pixels, 30 pixels, 1fr, 1fr, and 100 pixels.
  6. Adds a grid gap of 15 pixels.

Set the size of the grid items as follows:

  1. Have the header element span from gridline 1 to gridline -1.
  2. Have the article#intro element span two rows and two columns.
  3. Have the article#main element two rows and three columns.
  4. Have the footer element span two columns.

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin: 30px auto;
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-columns: 50px, 30px, 1fr, 1fr, 100px;
grid-gap: 15px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 10px;
}
</style>
</head>
<body{min-width: 640px; max-width: 1024px; width: 90%;}>

<h1>Grid-template-columns and Grid-template-columns</h1>

<p>You can use the <em><b>Grid-template-columns and Grid-template-columns</em></b> property to specify the number of columns in your grid layout.</p>

<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>

<p class="ex1">This paragraph has a top and bottom margins 30 pixels and right and left margins are auto.</p>

</body>
</html>

venereology answered 2 weeks ago
Next > < Previous

Related Solutions

1. Go to the Footer Styles section and create a style rule that displays the footer...
1. Go to the Footer Styles section and create a style rule that displays the footer only when both margins are clear of floating objects. 2. Go to the Topics Styles section. This section sets the styles for a list of four topics describing what the company is offering. Karen wants this list to also be displayed horizontally on the page. For list items within the ul element with the id topics, create a style rule to: a) display the...
For all img elements create a style rule that applies a sepia filter with a value...
For all img elements create a style rule that applies a sepia filter with a value of 1. Add a black box shadow with horizontal and vertical offsets of 0 pixels and a blur radius of 20 pixels. Create the following style rules for the five image elements: For the img1 image, translate the image -150 pixels along the z-axis. For the img2 image, rotate the image 90 degrees around the x-axis and translate the image -150 pixels along the...
What style property sets the kerning of the text within an element? letter-spacing word-spacing kerning-size kerning
What style property sets the kerning of the text within an element? letter-spacing word-spacing kerning-size kerning
What is the purpose of the overlap rule? An element of a superclass may not belong...
What is the purpose of the overlap rule? An element of a superclass may not belong to multiple subtypes An element of a supertype can belong to multiple subtypes A subtype of a supertype can be a supertype of a further subtype Two subtypes must have the exact same membership
Write a loop that sets each array element to the sum of itself and the next...
Write a loop that sets each array element to the sum of itself and the next element, except for the last element which stays the same. Be careful not to index beyond the last element. Ex: Initial scores: 10, 20, 30, 40 Scores after the loop: 30, 50, 70, 40 The first element is 30 or 10 + 20, the second element is 50 or 20 + 30, and the third element is 70 or 30 + 40. The last...
THE FOLLOWING IS CODED IN C Write a function that sets each element in an array...
THE FOLLOWING IS CODED IN C Write a function that sets each element in an array to the sum of the corresponding elements in two other arrays. That is, if array 1 has the values 2,4, 5, and 8 and array 2 has the values 1, 0, 4, and 6, the function assigns array 3 the values 3, 4, 9, and 14. The function should take three array names and an array size as arguments. Test the function in a...
Write a loop that sets each array element to the sum of itself and the next...
Write a loop that sets each array element to the sum of itself and the next element, except for the last element which stays the same. Be careful not to index beyond the last element. Ex: Initial scores: 10, 20, 30, 40 Scores after the loop: 30, 50, 70, 40 The first element is 30 or 10 + 20, the second element is 50 or 20 + 30, and the third element is 70 or 30 + 40. The last...
Provide a style rule to remove underlining from hypertext links marked with the <a> tag and...
Provide a style rule to remove underlining from hypertext links marked with the <a> tag and nested within a navigation list. nav > a {text-decoration: none;} nav > a {text-decoration: no-underline;} nav a {text-decoration: none;} nav a {text-decoration: underline=“no”;}
Create a program to input the length and width of a rectangle and calculate and print...
Create a program to input the length and width of a rectangle and calculate and print the perimeter and area of the rectangle. To do this you will need to write a Rectangle class and a separate runner class. Your program should include instance variables, constructors, an area method, a perimeter method, a toString method, accessor and mutator methods, and user input. Your runner class should include 3 Rectangle objects. One default rectangle, one coded rectangle, and one user input...
What are the four Rule types that you can create with the New Rule Outbound Wizard?...
What are the four Rule types that you can create with the New Rule Outbound Wizard? What is an easy way to test ICMP echo requests? What responses are possible? Do you have the option to block all incoming traffic? Why would you want to do this?
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT