File tree Expand file tree Collapse file tree 5 files changed +64
-0
lines changed Expand file tree Collapse file tree 5 files changed +64
-0
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7+ < title > CSS Assignment</ title >
8+ < link rel ="stylesheet " href ="style.css " />
9+ </ head >
10+ < body >
11+ < div id ="box1 "> This is box1</ div >
12+ < div id ="box2 "> This is box2</ div >
13+ < div id ="box3 "> This is box3</ div >
14+ < div id ="box4 "> This is box4</ div >
15+ < div id ="myPic "> This is my Pic</ div >
16+ </ body >
17+ </ html >
Original file line number Diff line number Diff line change 1+ /* Qs1. Add a 2s transition on box1 for width changes.
2+ It should have 'ease-in' speed curve & 0.5s delay */
3+
4+ # box1 {
5+ width : 100px ;
6+ height : 100px ;
7+ background : green;
8+ }
9+
10+ # box1 : hover {
11+ width : 600px ;
12+ }
13+
14+ /* Qs2. Using transform, move box2 200px to the right &
15+ 200px down. Also rotate it 90deg.*/
16+
17+ # box2 {
18+ width : 100px ;
19+ height : 100px ;
20+ background : red;
21+ }
22+
23+ /* Qs3. Using transform, skew box3 20deg along the x axis.*/
24+
25+ # box3 {
26+ width : 100px ;
27+ height : 100px ;
28+ background : lightblue;
29+ }
30+
31+ /* Qs4. Set a 2px horizontal & 2px vertical, green shadow
32+ for box4, with a 5px blur radius.*/
33+
34+ # box4 {
35+ width : 100px ;
36+ height : 100px ;
37+ background : lightgreen;
38+ }
39+
40+ /* Qs5. Set Your picture or any picture as the background of the div
41+ "myPic". Also, set transparency of this div to 50%. */
42+
43+ # myPic {
44+ width : 200px ;
45+ height : 200px ;
46+ background : pink;
47+ }
You can’t perform that action at this time.
0 commit comments