Name: Siddha Tharun sai
[Link]: 12410865
Input:
<!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>
#div1{
border: 2px solid black;
height:730px;
width: 530px;
padding: 20px;
padding-right: 50px;
border-radius: 20px;
}
#div2{
border:2px solid black;
padding: 20px;
height: 680px;
width: 500px;
border-radius: 20px;
margin: 5px;
}
#div3{
height: 100px;
width: 460px;
background-color: green;
padding: 20px;
border-radius: 5px;
}
img{
border-radius: 50%;
float: left;
}
#div4{
width: 500px;
background-color: blue;
height: 120px;
border-radius: 5px;
}
h2{
color: white;
padding-left: 20px;
padding-top: 20px;
}
#para1{
color: gold;
font-size: larger;
padding-left: 20px;
padding-bottom: 20px;
}
Span{
color: white;
}
#div5{
width:500px ;
background-color: yellowgreen;
height: 130px;
border-radius: 5px;
}
#para2{
color: white;
padding: 20px;
}
#div6{
background-color: blueviolet;
margin-top: 17px;
height: 90px;
color: white;
padding: 20px;
border-radius: 5px;
}
#div7{
background-color: red;
margin-top: 20px;
border-radius: 5px;
height: 30px;
padding: 20px;
}
#div7 a{
padding: 20px;
font-size: 20px;
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<img src="../html..png" width="100" height="100">
</div>
<div id="div4">
<h2>
John Doe</h2>
<p id="para1">Web developer <span>at</span> Tech solution
</p>
</div>
<div id="div5">
<p id="para2">
The standard chunk of Lorem Ipsum used since the 1500s is
reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de
Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact
original form, accompanied by English versions from the 1914 translation by H.
Rackham
</p>
</div>
<div id="div6">
Email:<a
href="[Link] style="text-
decoration: none; color: wheat;"> [Link]@[Link]</a>
<p id="para3">Phone:+91 1234567890</p>
</div>
<div id="div7">
<a href="https//:[Link]" style="text-decoration:
none;color: brown;">Twitter</a>
<a href="https//:[Link]" style="text-decoration:
none;color: brown;">linkedin</a>
</div>
</div>
</div>
</body>
</html>
Output:
