Scribd
Upload
28 views6 pages

Activity 7

htmls css descriptiom

Uploaded by

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

Activity 7

htmls css descriptiom

Uploaded by

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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Profile Card</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.card {

width: 320px;

background-color: white;

border-radius: 15px;

overflow: hidden;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

border: 2px solid black;

padding: 10px;

margin: 20px;

text-align: center;

}
.profile-image {

background-color: #4CAF50;

padding: 20px;

border-radius: 10px;

margin-bottom: 10px;

.profile-image img {

border-radius: 50%;

width: 100px;

height: 100px;

.info-section {

padding: 15px;

border-radius: 10px;

margin-bottom: 10px;

.name {

background-color: #2196F3;

color: white;

.description {

background-color: #FFEB3B;

.contact {
background-color: #9C27B0;

color: white;

.social {

background-color: #FF5722;

display: flex;

justify-content: center;

gap: 10px;

padding: 10px;

border-radius: 10px;

.social-btn {

background-color: white;

border: none;

color: #FF5722;

padding: 8px 16px;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

font-weight: bold;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

.social-btn:hover {

background-color: #FFC107;

color: white;

}
</style>

</head>

<body>

<div class="card">

<div class="profile-image">

<img
src="https://th.bing.com/th/id/OIP.sbRjMD2zaP12rWg1bR1PDAHaHa?rs=1&pid=ImgDetMain"
alt="Profile Image">

</div>

<div class="info-section name">

<h2>John Doe</h2>

<p>Web Developer at Tech Solutions</p>

</div>

<div class="info-section description">

<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="info-section contact">

<p>Email: [email protected]</p>

<p>Phone: (123) 456-7890</p>

</div>

<div class="info-section social">

<button class="social-btn twitter">Twitter</button>

<button class="social-btn linkedin">LinkedIn</button>

</div>

</div>

<script>

document.querySelector('.twitter').addEventListener('click', function() {

window.open('https://twitter.com/', '_blank');
});

document.querySelector('.linkedin').addEventListener('click', function() {

window.open('https://linkedin.com/', '_blank');

});

</script>

</body>

</html>

You might also like