Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update index.htm and main.css #415

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update index.htm and main.css #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 75 additions & 9 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"
/>
<link rel="stylesheet" href="main.css" />
<title>HTML Portfolio</title>
</head>
<body>
<header>
<h1>Software Developer Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

Welcome to the HTML Portfolio Project
<section id="about">
<h2>About Me</h2>
<p>
I'm a passionate software developer with expertise in web development,
mobile app development, and software engineering. I have a strong
background in programming languages such as JavaScript, Python, Java,
and C++, and I enjoy solving complex problems and creating innovative
solutions.
</p>
</section>

</body>
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Portfolio Website</h3>
<p>
A responsive portfolio website showcasing my skills, projects, and
experience. Built using HTML, CSS, and JavaScript.
</p>
</div>
<div class="project">
<h3>E-commerce Website</h3>
<p>
An e-commerce platform developed using React.js for the frontend and
Node.js with Express.js for the backend. Integrated with payment
gateways and user authentication.
</p>
</div>
<div class="project">
<h3>Mobile App</h3>
<p>
A mobile application built for iOS and Android using React Native. The
app helps users track their fitness goals and provides personalized
workout plans.
</p>
</div>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p>
Feel free to reach out to me for collaboration opportunities, project
inquiries, or just to say hello!
</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="4" required></textarea
><br />
<button type="submit">Send Message</button>
</form>
</section>
</body>
</html>
102 changes: 102 additions & 0 deletions src/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/* Resetting default margin and padding */
body,
h1,
h2,
h3,
p,
ul {
margin: 0;
padding: 0;
}

/* Setting default font */
body {
font-family: Arial, sans-serif;
}

/* Header styles */
header {
background-color: #1e88e5; /* Blue */
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

/* Main content styles */
main {
padding: 20px;
}

section {
margin-bottom: 40px;
}

section h2 {
color: #1e88e5; /* Blue */
margin-bottom: 20px;
}

/* Project styles */
.project {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.project h3 {
color: #1e88e5; /* Blue */
}

/* Contact form styles */
form {
max-width: 500px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background-color: #4caf50; /* Green */
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049; /* Darker Green */
}