Scribd
Upload
2 views

CSS Part4 (QS)

css ques

Uploaded by

Gaurav Jangid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS Part4 (QS)

css ques

Uploaded by

Gaurav Jangid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS (Part 4)

lakhan3singh302016@gmail.com
Practice Questions

We are given 2 files - HTML & CSS.


Complete the assignment according to the instructions in the CSS file.

You can also download these from Github :


https://github.com/apna-college/Delta/tree/main/CSS/Chapter4/Assignment

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS Assignment</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="box1">This is box1</div>
<div id="box2">This is box2</div>
<div id="box3">This is box3</div>
<div id="box4">This is box4</div>
<div id="myPic">This is my Pic</div>
</body>
</html>

lakhan3singh302016@gmail.com
CSS Code
/* Qs1. Add a 2s transition on box1 for width changes.
It should have 'ease-in' speed curve & 0.5s delay */

#box1 {
width: 100px;
height: 100px;
background: green;
}

#box1:hover {
width: 600px;
}

/* Qs2. Using transform, move box2 200px to the right &


200px down. Also rotate it 90deg.*/

#box2 {
width: 100px;
height: 100px;
background: red;
}

/* Qs3. Using transform, skew box3 20deg along the x axis.*/


#box3 {

lakhan3singh302016@gmail.com
width: 100px;
height: 100px;
background: lightblue;
}

/* Qs4. Set a 2px horizontal & 2px vertical, green shadow


for box4, with a 5px blur radius.*/

#box4 {
width: 100px;
height: 100px;
background: lightgreen;
}

/* Qs5. Set Your picture or any picture as the background of


the div
"myPic". Also, set transparency of this div to 50%. */

#myPic {
width: 200px;
height: 200px;
background: pink;
}

You might also like