Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dhruva1231
Dhruva1231 authored Sep 25, 2024
1 parent 140ac8b commit 2ad0f18
Showing 1 changed file with 179 additions and 18 deletions.
197 changes: 179 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,191 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dhruva's Portfolio</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Basic Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}

nav {
display: flex;
justify-content: center;
margin: 0;
}

nav a {
color: white;
text-decoration: none;
padding: 14px 20px;
text-transform: uppercase;
}

nav a:hover {
background-color: #555;
transition: background-color 0.3s;
}

section {
padding: 60px 20px;
margin-top: 70px;
}

.about {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 900px;
margin: auto;
}

.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.project-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

.project-card:hover {
transform: translateY(-5px);
}

.project-image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}

.project-content {
padding: 20px;
}

.contact-form {
max-width: 600px;
margin: auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-form label {
display: block;
margin: 10px 0 5px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}

.contact-form button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.contact-form button:hover {
background-color: #555;
}
</style>
</head>
<body>

<!-- Header and Navigation -->
<header>
<h1>Welcome to My Custom Website</h1>
<p>This is a custom website aksjdnaksjdnaksjdnakjsdnakjsdasdbuilt with HTML.</p>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>

<main>
<section>
<h2>About Me</h2>
<p>Describe yourself or your project here.</p>
</section>
<section>
<h2>Projects</h2>
<p>Detail your projects here with links or images.</p>
</section>
</main>

<footer>
<p>Contact: your-email@example.com</p>
</footer>
<!-- About Section -->
<section id="about" class="about">
<h1>About Me</h1>
<p>Hello, I'm Dhruva, an inventor, robotics enthusiast, and engineer. I enjoy creating technologies that positively impact people's lives, whether it's a robotic arm for ALS patients or traffic systems for smarter cities. With experience in robotics, AI, and app development, my goal is to innovate solutions that bridge the gap between technology and society.</p>
</section>

<!-- Projects Section -->
<section id="projects" class="projects">
<h2>My Projects</h2>
<div class="project-card">
<div class="project-image" style="background-image: url('project1.jpg');"></div>
<div class="project-content">
<h3>Transcend Traffic System</h3>
<p>An intelligent traffic management system that reduces delays by 78% and improves road visibility up to 1000 meters.</p>
</div>
</div>

<div class="project-card">
<div class="project-image" style="background-image: url('project2.jpg');"></div>
<div class="project-content">
<h3>A.I.D App</h3>
<p>A disaster relief app connecting volunteers and victims in real-time to assist during natural disasters.</p>
</div>
</div>

<div class="project-card">
<div class="project-image" style="background-image: url('project3.jpg');"></div>
<div class="project-content">
<h3>Ken's Robotic Arm</h3>
<p>A robotic arm designed to help ALS patients regain some functionality for everyday tasks.</p>
</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact">
<h2>Contact Me</h2>
<div class="contact-form">
<form action="mailto:youremail@example.com" method="POST" enctype="text/plain">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Your Email</label>
<input type="email" id="email" name="email" required>

<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" required></textarea>

<button type="submit">Send Message</button>
</form>
</div>
</section>

</body>
</html>

0 comments on commit 2ad0f18

Please sign in to comment.