Scribd
Upload
11 views

HTML Css Experiment No. 2

Ip experiments

Uploaded by

saanvisawant1712
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
11 views

HTML Css Experiment No. 2

Ip experiments

Uploaded by

saanvisawant1712
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/ 7

AIM: To create a webpage using HTML and CSS functionilities.

Theory:

1. Background Color:
○ The background-color property sets the background
color for elements.
○ Example: background-color: #f0f8ff; sets a light
blue color for the body.
2. Text Color:
○ The color property changes the text color of an
element.
○ Example: color: #4a4a8a; sets a dark purple color
for the heading (h1).
3. Outline:
○ The outline property adds a visible border around
elements.
○ Example: outline: 2px solid #4a4a8a; gives a
2-pixel solid outline around the .content div.
4. Fonts:
○ The font-family property specifies the font type.
○ Example: font-family: Arial, sans-serif; sets
Arial as the default font, with sans-serif as a fallback.
5. Text Alignment:
○ The text-align property controls the alignment of text
inside an element.
○ Example: text-align: center; centers the text in
the h1 element.
6. Link to Upload an Image:
○ <a href="upload.html">Click here to upload
an image</a> is a link that, when clicked, directs users
to upload.html where an image upload form could be
set up. This can be useful for a separate upload page.

Summary
This HTML document demonstrates how to apply CSS styles to
create a visually appealing webpage with a specified background
color, text colors, fonts, and alignment. This combination of HTML
and CSS provides the foundation for building more sophisticated
webpages with effective styling and layout control.

Code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Portfolio</title>
<style>
body{
background-color: #1e1e1e;
font-family: 'Libre Baskerville';
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
}
.container{
width: 80%;
max-width: 1200px;
background-color: #2c2c2c;
padding: 50px;
border-radius:15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
text-align: center;
}
.profile_pic{
width:200px;
height: 200px;
border-radius: 50%;
border: 3px solid #ff6f61;
outline: 3px solid #ffAE42;
margin-bottom: 30px;
}
h1{
font-size: 40px;
color: #ff6f61;
margin-bottom: 20px;
}
h2{
font-size: 30px;
color:#ffae42;
margin-bottom: 30px;
}
p{
font-size: 20px;
line-height: 1.8;
color: white;
margin-bottom: 40px;
}
.button {
background-color: #ff6f61;
color: #ffffff;
padding: 15px 30px;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
font-size: 15px;
font-family: 'cambria';
transition: background-color 0.3s ease;
}
.button:hover{
background-color: #ffAE42;
}
a{
color:#ffae42;
text-decoration: none;
font-weight:bold;
}
a:hover{
color: #ff6f61;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to my Portfolio!!</h1>
<img src =
"https://images.unsplash.com/photo-1438761681033-6461ffad8d8
0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxM
jA3fDB8MHxzZWFyY2h8NHx8Z2lybCUyMGltYWdlJTIwcG9ydGZv
bGlvfGVufDB8fDB8fHwy" alt="Profile picture" class="profile_pic">
<h2>About Me</h2>
<P>Hello! I'm Sara, a creative professional with a passion for
design and development. I specialize in crafting dynamic
webpages.</P>
<h2>My Work</h2>
<p> Explore all my latest project here.</p>
<a href="https://github.com/Shivii0204" target="_blank"
class="button">View my Work</a>
<h2>Get In Touch</h2>
<p>Interested in working together? Let's connect and create
something amazing!</p>
<a href="mailto:[email protected]"
class="button">Contact Me</a>
</div>
</body>
</html>

Output:
lab outcome:Identify and apply the appropriate HTML tags and
css to develop a webpage.

Conclusion: we have successfully implemented the appropriate


HTML tags and css functionalities.

You might also like