Scribd
Upload
5 views4 pages

Coding SSS

The document is an HTML template for a personal profile webpage featuring a styled profile container with an image, heading, and description of a software developer named John Doe. It includes CSS for layout and design, such as background colors and button styles, as well as JavaScript to change the background color when a button is clicked. The overall design is mobile-friendly and visually appealing.

Uploaded by

isrealadeniyi58
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
5 views4 pages

Coding SSS

The document is an HTML template for a personal profile webpage featuring a styled profile container with an image, heading, and description of a software developer named John Doe. It includes CSS for layout and design, such as background colors and button styles, as well as JavaScript to change the background color when a button is clicked. The overall design is mobile-friendly and visually appealing.

Uploaded by

isrealadeniyi58
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/ 4

CODING

Sss Project

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Specifies the character encoding for the HTML
document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Ensures proper rendering and touch zooming on mobile devices -->
<title>Personal Profile</title> <!-- The title of the webpage -->
<style>
/* Styles for the body element */
body {
background-color: #e0f7fa; /* Light cyan background */
font-family: Arial, sans-serif; /* Font family for the text */
color: #333; /* Text color */
text-align: center; /* Center-align text */
padding: 20px; /* Padding around the body */
}
/* Styles for the profile container */
.profile-container {
background-color: #fff; /* White background for the profile container */
padding: 20px; /* Padding inside the container */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
max-width: 400px; /* Maximum width of the container */
margin: auto; /* Center the container */
}
/* Styles for the profile image */
.profile-image {
width: 100px; /* Width of the image */
height: 100px; /* Height of the image */
border-radius: 50%; /* Circular image */
border: 3px solid #ff69b4; /* Pink border around the image */
margin-bottom: 20px; /* Space below the image */
}
/* Styles for the heading */
h1 {
color: #00796b; /* Teal color for the heading */
margin-bottom: 10px; /* Space below the heading */
}
/* Styles for the paragraph text */
p{
font-size: 16px; /* Font size for the text */
color: #555; /* Softer color for the text */
}
/* Styles for the button */
button {
margin-top: 20px; /* Space above the button */
padding: 10px 20px; /* Padding inside the button */
font-size: 16px; /* Font size for the button text */
background-color: #ff69b4; /* Pink background color */
color: white; /* White text color */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
}
/* Styles for the button on hover */
button:hover {
background-color: #ff1493; /* Darker pink background on hover */
}
</style>
</head>
<body>
<!-- Container div for the profile content -->
<div class="profile-container">
<!-- Profile image -->
<img src="profile_img.jpeg" alt="Profile Picture" class="profile-image">
<!-- Heading -->
<h1>John Doe</h1>
<!-- Paragraph with information -->
<p>Hello! My name is John Doe. I am a software developer with a passion
for creating innovative solutions.</p>
<!-- Button with an ID for JavaScript interaction -->
<button id="colorButton">Change Background Color</button>
</div>
<script>
// JavaScript to handle button click event
const colors = ['#ffeb3b', '#8bc34a', '#03a9f4', '#e91e63', '#9c27b0']; // Array
of colors
let colorIndex = 0; // Initial color index

document.getElementById('colorButton').addEventListener('click',
function() {
document.body.style.backgroundColor = colors[colorIndex]; // Change
background color
colorIndex = (colorIndex + 1) % colors.length; // Update color index
});
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy