About Us Page with HTML, CSS, and GitHub
This article will guide you through the process of creating a basic "About Us" page using HTML, CSS, and GitHub. We'll focus on simple and effective design principles to create an informative and engaging page that showcases your company or project.
1. Project Setup
- Create a GitHub repository:
- Visit and sign in or create an account.
- Click on "New" to create a new repository.
- Give your repository a descriptive name, such as "about-us-page".
- Initialize the repository with a README.md file. This will be a good place to provide more detailed information about your project.
- Create an HTML file:
- Navigate to your repository's main directory using your terminal or command prompt.
- Create a new file named "index.html".
2. HTML Structure
Open your "index.html" file and add the following HTML code:
About Us - [Your Company Name]
About Us
Who We Are
This is where you'll write a brief description of your company, its mission, values, and history. Keep it concise and engaging.
Our Team
[Team Member Name]
[Team Member Role]
- Replace placeholders:
- Replace "[Your Company Name]" with your company or project name.
- Replace "your-company-logo.png" and "team-member-1.jpg" with the actual image file names you will be using.
3. CSS Styling (style.css)
Create a new file named "style.css" in the same directory as your "index.html" file. Add the following CSS code to style your page:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
}
h1 {
margin: 0;
}
main {
max-width: 960px;
margin: 2rem auto;
padding: 1rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 2rem;
}
.about-us img {
display: block;
margin: 1rem auto;
max-width: 100%;
}
.team-member {
text-align: center;
margin-bottom: 1rem;
}
.team-member img {
border-radius: 50%;
width: 150px;
height: 150px;
margin-bottom: 1rem;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This CSS code provides basic styling for the page elements, including a simple header, content sections, and a footer. You can customize this styling to match your brand's aesthetic.
4. Committing Changes to GitHub
- Add your changes: Use the command
git add .in your terminal to stage all the new files for commit. - Commit your changes: Use the command
git commit -m "Initial commit for About Us page"to commit the changes with a message. - Push to GitHub: Use the command
git push origin mainto push your local changes to the remote repository on GitHub.
5. Viewing Your About Us Page
- Open your repository on GitHub: Visit the URL of your repository on GitHub.
- Click on "index.html": You should see your About Us page rendered within the GitHub interface.
This basic layout serves as a foundation for your About Us page. You can expand on it by adding more sections, content, and advanced styling. Remember to commit and push your changes to GitHub regularly to keep your project synced.