Scribd
Upload
28 views3 pages

Coding Jss

This document is an HTML template for an 'About Us' webpage featuring a profile image, a heading, and introductory text about three students. It includes CSS styles for layout and design, as well as a JavaScript function that triggers an alert when a button is clicked. The overall design emphasizes a clean and centered presentation with responsive features for mobile devices.

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
28 views3 pages

Coding Jss

This document is an HTML template for an 'About Us' webpage featuring a profile image, a heading, and introductory text about three students. It includes CSS styles for layout and design, as well as a JavaScript function that triggers an alert when a button is clicked. The overall design emphasizes a clean and centered presentation with responsive features for mobile devices.

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

CODING

Jss 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>About Us</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 container div */
.container {
background-color: #fff; /* White background for the 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: 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 content -->
<div class="container">
<!-- Profile image -->
<img src="profile_img.jpeg" alt="Profile Picture" class="profile-image">
<!-- Heading -->
<h1>About Us</h1>
<!-- Paragraphs with information -->
<p>We are Racheal, Suliyat, and Nifemi.</p>
<p>Students of GREAT ARISE AND SHINE COLLEGE.</p>
<p>Our class teacher is Mr. Charles.</p>
<!-- Button with an ID for JavaScript interaction -->
<button id="welcomeButton">Click Me!</button>
</div>
<script>
// JavaScript to handle button click event
document.getElementById('welcomeButton').addEventListener('click',
function() {
alert('Welcome to our About Us page!'); // Show an alert when the button
is clicked
});
</script>
</body>
</html>

You might also like