CSS Assignment ( Smiley Face )
Question: Create a smiley face using HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smiley Face</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="face">
<div class="mouth">
<div class="eyes">
<div class="left-eye"></div>
<div class="right-eye"></div>
</div>
</div>
</div>
</body>
</html>
.face{
width: 400px;
height: 400px;
background-color: #ffa511;
border-radius: 50%;
}
.mouth{
height: 75px;
width: 200px;
background-color: brown;
border-radius: 0px 0px 50px 50px;
position: absolute;
top: 250px;
left: 100px
}
.left-eye,
.right-eye {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: black;
display: inline-block;
position: absolute;
bottom: 150px;
}
.right-eye{
left: 110px;
}
Question : There are two files HTML and CSS file change the HTML file according to the instructions written in CSS file
<!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>
/* 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 {
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;
}
Solution:
/* 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;
transition: 2s ease-in 0.5s;
}
#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;
transform: translate(200px,200px ) rotate(90deg);
}
/* Qs3. Using transform, skew box3 20deg along the x axis.*/
#box3 {
width: 100px;
height: 100px;
background: lightblue;
transform: skew(20deg);
}
/* Qs4. Set a 2px horizontal & 2px vertical, green shadow
for box4, with a 5px blur radius.*/
#box4 {
width: 100px;
height: 100px;
background: lightgreen;
box-shadow: 2px 2px 5px green;
}
/* 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;
background: url("man.jpg");
opacity: 50%;
background-size: cover;
}
