Scribd
Upload
7 views3 pages

Activity 7

Uploaded by

patialshiv44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views3 pages

Activity 7

Uploaded by

patialshiv44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activity-7</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
width: 350px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
overflow: hidden;
background-color: #fff;
border: 1px solid black;
padding: 15px;
}
.card img {
width: auto;
height: 80%;
max-height: 150px;
object-fit: contain;
border-radius: 8px;
margin-bottom: 15px;
}
.card-content {
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
}
.green, .blue, .yellow, .purple, .orange {
margin-bottom: 10px;
}
.green {
background-color: #4CAF50;
color: white;
text-align: center;
height: 150px;
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 8px;
padding-left: 10px;
}
.blue {
background-color: #2196F3;
color: white;
text-align: left;
padding: 15px;
border-radius: 8px;
}
.yellow {
background-color: #FFEB3B;
color: #333;
padding: 15px;
border-radius: 8px;
}
.purple {
background-color: #9C27B0;
color: white;
padding: 15px;
border-radius: 8px;
}
.orange {
background-color: #FF9800;
color: white;
padding: 15px;
text-align: left;
border-radius: 8px;
}
.orange a {
color: yellow;
text-decoration: none;
margin: 0 10px;
}
h2, p {
margin: 0;
}
.highlight {
color: #FFEB3B;
}
</style>
</head>
<body>
<div class="card">
<div class="green">
<img class="hm" src="ramu.jpeg" alt="Mehul Sedhra">
</div>
<div class="blue">
<h2>Mehul Sedhra</h2>
<p><span class="highlight">Web Developer</span> at <span class="highlight">Tech
Solutions</span></p>
</div>
<div class="yellow card-content">
<p>Passionate about creating innovative web solutions that enhance user experience and
functionality. Experienced in HTML, CSS, JavaScript, and responsive design.</p>
</div>
<div class="purple card-content">
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</div>
<div class="orange">
<a href="#" class="highlight">Twitter</a>
<a href="#" class="highlight">LinkedIn</a>
</div>
</div>
</body>
</html>

You might also like