Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

HTML Css Experiment No. 2

Ip experiments

Uploaded by

saanvisawant1712
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML Css Experiment No. 2

Ip experiments

Uploaded by

saanvisawant1712
Copyright
© © All Rights Reserved
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:shivani.pillai2004@gmail.com"
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