NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
FULL STACK WEB DEV DA ASSIGNMENT
i). Create a text shadow on the phrase “new features in css” with an offset-x
of 4px, an offset y on 10x, blur radius of 12px and a text shadow color red.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Text Shadow Example</title>
<style>
.text-shadow-example {
text-shadow: 4px 10px 12px red;
}
</style>
</head>
<body>
<p class="text-shadow-example">new features in CSS</p>
</body>
</html>
OUTPUT
ii).Create 3 div elements of varying colors, each with a width & height of
400px. On the first box, add a dim grey box shadow with an offset x-30px, an
offset y of 30 px and blur radius of 30px.
2nd box- dimgrey -30px, -30px, blur-60px
3rd box-- dimgrey 30px, 30px, blur20px
CODE
<!DOCTYPE html>
<html lang="en">
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box Shadow Examples</title>
<style>
.box-example {
width: 400px;
height: 400px;
margin: 20px;
display: inline-block;
}
.box-example:nth-child(1) {
background-color: #66c2ff;
box-shadow: -30px 30px 30px dimgrey;
}
.box-example:nth-child(2) {
background-color: #ffcc66;
box-shadow: -30px -30px 60px dimgrey;
}
.box-example:nth-child(3) {
background-color: #99ff99;
box-shadow: 30px 30px 20px dimgrey;
}
</style>
</head>
<body>
<div class="box-example"></div>
<div class="box-example"></div>
<div class="box-example"></div>
</body>
</html>
OUTPUT
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
iii) Write the CSS code necessary to recreate the following appearance on-screen, exactly as
shown. The menu items (Summary to Trailers and Videos) are white text on a black background.
There is 20px space between the words and the right and left sides of their black boxes. There is
3px of blank space to the right of each. The score information should be 50% wide. The movie
rating has a green background and white text. The number is in 30pt font. There is 20px space
between the number and the edges of the green background. There is 5px blank space around the
green background. The background color of the page is gray but the background color of the area
containing everything is white. The white area is 80% wide and centered. There is 20px of space
between the edge of the white background and everything inside it.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
body {
background-color: grey;
display: flex;
justify-content: center;
}
#container {
background-color: white;
width: 80%;
padding: 20px;
}
#head {
text-align: center;
}
#nav {
display: flex;
}
#nav p {
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
margin-right: 3px;
}
#score {
width: 50%;
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
display: flex;
}
#rate {
background-color: rgb(30, 162, 30);
color: white;
font-size: 30pt;
padding: 20px;
margin: 5px;
height: 60px;
}
</style>
</head>
<body>
<div id="container">
<h1 id="head">WALL-E</h1>
<p>Walt Disney Studios Motion Pictures | Release date: Jun 27,
2008</p>
<div id="nav">
<p>Summary</p>
<p>Critic Reviews</p>
<p>User Reviews</p>
<p>Details and Credits</p>
<p>Trailers and Videos</p>
</div>
<div id="score">
<img src="[Link]" height="150px">
<p id="rate">94</p>
<div id="metascore">
<h1>Metascore</h1>
<p>Universal acclaim based on 39 Critics</p>
<ul>
<li>Starring: Ben Bwtt, Elissa Knight, Jeff
Garlin.</li>
<li>Summary: After hundreds of lonely years of
doing what he was built for, WALL-E discovers a new purpose in life
when he meets a sleek search robot named EVE [Walt Disney
Pictures].</li>
</ul>
</div>
</div>
</div>
</body>
</html>
OUTPUT
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
iv) Write the HTML and CSS box model to recreate the following appearance. No manual line
breaks have been inserted.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script src="[Link]
crossorigin="anonymous"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: url("sat_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Times New Roman', Times, serif, 'Trebuchet MS',
sans-serif;
}
#head {
color: white;
text-align: center;
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
margin-top: 70px;
}
.box {
background-color: rgba(3, 3, 3, 0.4);
width: 350px;
height: 400px;
position: absolute;
}
.heading {
background-color: chocolate;
width: 350px;
height: 70px;
color: white;
font-size: 20px;
padding-top: 20px;
text-align: center;
}
.box p {
color: white;
margin: 40px;
margin-bottom: 20px;
font-size: 20px;
}
.button {
margin-left: 110px;
background-color: coral;
color: white;
height: 35px;
width: 140px;
border: 2px transparent;
font-size: 17px;
}
#container {
display: flex;
justify-content: center;
}
#head2, #b2 {
background-color: rgb(209, 12, 133);
}
#head3, #b3 {
background-color: rgb(7, 150, 102);
}
#box1 {
top: 200px;
left: 150px;
}
#box2 {
top: 200px;
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
left: 600px;
}
#box3 {
top: 200px;
left: 1050px;
}
</style>
</head>
<body>
<h1 id="head">BROAD BAND PRICE TABLE</h1>
<div id="container">
<div class="box" id="box1">
<h6 class="heading" id="head1">Standard</h6>
<p><i class="fa-solid fa-download" style="color:
#e5e5e6;"></i> Unlimited Download</p>
<p><i class="fa-solid fa-jar"></i> 20GB Storage</p>
<p><i class="fa-solid fa-gauge-high" style="color:
#e9ecf1;"></i> Unlimited Speed</p>
<p><i class="fa-solid fa-database" style="color:
#f4f7fa;"></i> 30 Domains</p>
<input type="button" id="b1" class="button" value="GET
STARTED">
</div>
<div class="box" id="box2">
<h6 class="heading" id="head2">Enhanced</h6>
<p><i class="fa-solid fa-download" style="color:
#e5e5e6;"></i> Unlimited Download</p>
<p><i class="fa-solid fa-jar"></i> 20GB Storage</p>
<p><i class="fa-solid fa-gauge-high" style="color:
#e9ecf1;"></i> Unlimited Speed</p>
<p><i class="fa-solid fa-database" style="color:
#f4f7fa;"></i> 30 Domains</p>
<input type="button" id="b2" class="button" value="GET
STARTED">
</div>
<div class="box" id="box3">
<h6 class="heading" id="head3">Unlimited</h6>
<p><i class="fa-solid fa-download" style="color:
#e5e5e6;"></i> Unlimited Download</p>
<p><i class="fa-solid fa-jar"></i> 20GB Storage</p>
<p><i class="fa-solid fa-gauge-high" style="color:
#e9ecf1;"></i> Unlimited Speed</p>
<p><i class="fa-solid fa-database" style="color:
#f4f7fa;"></i> 30 Domains</p>
<input type="button" id="b3" class="button" value="GET
STARTED">
</div>
</div>
NAME: AADITYA PRADEEP CHANDRASEKHAR
REG_NO:23MCA0272
</body>
</html>
OUTPUT
