You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You are provided with an HTML file containing a series of <div> elements inside a container. Each <div> has a specific class associated with it that controls its styling. Your task is to implement the provided CSS to style these <div> elements according to the classes assigned to them.
5
+
6
+
Note: Please don't change any of the given HTML markup and the styles already present inside the style tag.
7
+
8
+
Here are the steps you need to follow:
9
+
10
+
Understand the Structure:
11
+
12
+
The main container has the class main-container and contains multiple <div> elements, each assigned a class ranging from div1 to div5.
13
+
CSS Rules Provided:
14
+
15
+
The provided CSS already defines specific height, width, and background color for each class (div1, div2, div3, div4, div5). Your task is to ensure that each <div> element inherits the correct styles based on its class.
16
+
Task:
17
+
18
+
Identify the class for each <div> element.
19
+
Apply the CSS rules to these <div> elements so that they display with the correct height, width, and background color as specified in the CSS.
20
+
CSS to be applied according to class names :
21
+
div1
22
+
background color :
23
+
#AA0000
24
+
Copy Icon
25
+
height:30px;
26
+
width: 100%
27
+
div2
28
+
background color :
29
+
#E52B50
30
+
Copy Icon
31
+
;
32
+
height:30px;
33
+
width:100%
34
+
div3
35
+
background color :
36
+
#E32636
37
+
Copy Icon
38
+
;
39
+
height : 30px;
40
+
width:100%
41
+
div4
42
+
background color :
43
+
#FD5C63
44
+
Copy Icon
45
+
;
46
+
height: 30px;
47
+
width: 100%
48
+
div5
49
+
background color :
50
+
#FBCEB1
51
+
Copy Icon
52
+
;
53
+
height : 30px;
54
+
width: 100%
55
+
Expected Outcome:
56
+
57
+
The webpage should display a stacked series of colored bars inside the main container, with each bar's color determined by the corresponding class.
58
+
The main container should display 10 colored bars, each 30px high and 300px wide, in the order defined by the HTML structure.
0 commit comments