Scribd
Upload
18 views9 pages

!DOCTYPE HTML

The document contains HTML code for a personal webpage and an artist portfolio, both featuring sections such as 'About Me', 'Portfolio' or 'Gallery', and 'Contact Me'. Each webpage is styled with CSS for a clean and responsive design, emphasizing user experience. The artist portfolio includes a gallery layout for displaying paintings, while the personal webpage highlights web development skills.

Uploaded by

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

!DOCTYPE HTML

The document contains HTML code for a personal webpage and an artist portfolio, both featuring sections such as 'About Me', 'Portfolio' or 'Gallery', and 'Contact Me'. Each webpage is styled with CSS for a clean and responsive design, emphasizing user experience. The artist portfolio includes a gallery layout for displaying paintings, while the personal webpage highlights web development skills.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Personal Webpage</title>
<style>
/* Basic styling for demonstration */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 20px;
}
.section h2 {
border-bottom: 2px solid #333;
padding-bottom: 5px;
}
.section p {
line-height: 1.8;
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Web Developer & Designer</p>
</header>
<div class="container">
<section class="section">
<h2>About Me</h2>
<p>Welcome to my personal webpage! I am a passionate web developer
specializing in [your field]. I love creating clean, responsive websites that
deliver a great user experience.</p>
</section>

<section class="section">
<h2>Portfolio</h2>
<p>Check out some of my latest projects:</p>
<ul>
<li><a href="#">Project 1</a> - Description of Project 1</li>
<li><a href="#">Project 2</a> - Description of Project 2</li>
<li><a href="#">Project 3</a> - Description of Project 3</li>
</ul>
</section>

<section class="section">
<h2>Contact Me</h2>
<p>Feel free to reach out to me via email at <a
href="mailto:[email protected]">[email protected]</a>. Connect with me on <a
href="#">LinkedIn</a> and <a href="#">GitHub</a>.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Personal Webpage</title>
<style>
/* Styling with pink color scheme */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f9f7f7;
margin: 0;
padding: 0;
}
header {
background-color: #e91e63;
color: #fff;
text-align: center;
padding: 1em 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 20px;
}
.section h2 {
border-bottom: 2px solid #e91e63;
padding-bottom: 5px;
color: #e91e63;
}
.section p {
line-height: 1.8;
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #e91e63;
color: #fff;
}
a {
color: #e91e63;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Web Developer & Designer</p>
</header>
<div class="container">
<section class="section">
<h2>About Me</h2>
<p>Welcome to my personal webpage! I am a passionate web developer
specializing in [your field]. I love creating clean, responsive websites that
deliver a great user experience.</p>
</section>

<section class="section">
<h2>Portfolio</h2>
<p>Check out some of my latest projects:</p>
<ul>
<li><a href="#">Project 1</a> - Description of Project 1</li>
<li><a href="#">Project 2</a> - Description of Project 2</li>
<li><a href="#">Project 3</a> - Description of Project 3</li>
</ul>
</section>

<section class="section">
<h2>Contact Me</h2>
<p>Feel free to reach out to me via email at <a
href="mailto:[email protected]">[email protected]</a>. Connect with me on <a
href="#">LinkedIn</a> and <a href="#">GitHub</a>.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Artist Portfolio</title>
<style>
/* Styling for artist portfolio */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #4a148c;
color: #fff;
text-align: center;
padding: 1em 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 20px;
}
.section h2 {
border-bottom: 2px solid #4a148c;
padding-bottom: 5px;
color: #4a148c;
}
.section p {
line-height: 1.8;
}
.painting-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}
.painting-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out;
}
.painting-item img {
width: 100%;
height: auto;
display: block;
}
.painting-item:hover {
transform: scale(1.05);
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #4a148c;
color: #fff;
}
a {
color: #4a148c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Artist Portfolio</p>
</header>
<div class="container">
<section class="section">
<h2>About Me</h2>
<p>Welcome to my art portfolio! I am passionate about painting and
creating art that inspires and tells stories. Explore my gallery below.</p>
</section>

<section class="section">
<h2>Gallery</h2>
<div class="painting-gallery">
<div class="painting-item">
<img src="painting1.jpg" alt="Painting 1">
</div>
<div class="painting-item">
<img src="painting2.jpg" alt="Painting 2">
</div>
<div class="painting-item">
<img src="painting3.jpg" alt="Painting 3">
</div>
<!-- Add more painting items as needed -->
</div>
</section>

<section class="section">
<h2>Contact Me</h2>
<p>Interested in my work? Reach out via email at <a
href="mailto:[email protected]">[email protected]</a>. Connect with me on <a
href="#">Instagram</a> and <a href="#">Facebook</a> for more updates.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Artist Portfolio</title>
<style>
/* Styling for artist portfolio */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #4a148c;
color: #fff;
text-align: center;
padding: 1em 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 20px;
}
.section h2 {
border-bottom: 2px solid #4a148c;
padding-bottom: 5px;
color: #4a148c;
}
.section p {
line-height: 1.8;
}
.painting-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}
.painting-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out;
}
.painting-item img {
width: 100%;
height: auto;
display: block;
}
.painting-item:hover {
transform: scale(1.05);
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #4a148c;
color: #fff;
}
a {
color: #4a148c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Artist Portfolio</p>
</header>
<div class="container">
<section class="section">
<h2>About Me</h2>
<p>Welcome to my art portfolio! I am passionate about painting and
creating art that inspires and tells stories. Explore my gallery below.</p>
</section>

<section class="section">
<h2>Gallery</h2>
<div class="painting-gallery">
<div class="painting-item">
<img src="painting1.jpg" alt="Painting 1">
</div>
<div class="painting-item">
<img src="painting2.jpg" alt="Painting 2">
</div>
<div class="painting-item">
<img src="painting3.jpg" alt="Painting 3">
</div>
<!-- Add more painting items as needed -->
</div>
</section>

<section class="section">
<h2>Contact Me</h2>
<p>Interested in my work? Reach out via email at <a
href="mailto:[email protected]">[email protected]</a>. Connect with me on <a
href="#">Instagram</a> and <a href="#">Facebook</a> for more updates.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Artist Portfolio</title>
<style>
/* Styling for artist portfolio */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #4a148c;
color: #fff;
text-align: center;
padding: 1em 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 20px;
}
.section h2 {
border-bottom: 2px solid #4a148c;
padding-bottom: 5px;
color: #4a148c;
}
.section p {
line-height: 1.8;
}
.painting-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}
.painting-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out;
}
.painting-item img {
width: 100%;
height: auto;
display: block;
}
.painting-item:hover {
transform: scale(1.05);
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #4a148c;
color: #fff;
}
a {
color: #4a148c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Artist Portfolio</p>
</header>
<div class="container">
<section class="section">
<h2>About Me</h2>
<p>Welcome to my art portfolio! I am passionate about painting and
creating art that inspires and tells stories. Explore my gallery below.</p>
</section>

<section class="section">
<h2>Gallery</h2>
<div class="painting-gallery">
<div class="painting-item">
<img src="painting1.jpg" alt="Painting 1">
</div>
<div class="painting-item">
<img src="painting2.jpg" alt="Painting 2">
</div>
<div class="painting-item">
<img src="painting3.jpg" alt="Painting 3">
</div>
<!-- Add more painting items as needed -->
</div>
</section>

<section class="section">
<h2>Contact Me</h2>
<p>Interested in my work? Reach out via email at <a
href="mailto:[email protected]">[email protected]</a>. Connect with me on <a
href="#">Instagram</a> and <a href="#">Facebook</a> for more updates.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>

You might also like