Scribd
Upload
12 views

Indexhtml

Uploaded by

gm.manohari
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
12 views

Indexhtml

Uploaded by

gm.manohari
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/ 10

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Your Name - Portfolio</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- Navigation -->

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<!-- Home Section -->

<section id="home">

<div class="container">

<h1>Hi, I'm [Your Name]</h1>

<p>I'm a Web Developer, Designer, and Creator.</p>

<button onclick="scrollToSection('about')">Learn More</button>

</div>

</section>

<!-- About Section -->

<section id="about">

<div class="container">
<h2>About Me</h2>

<img src="C:\Users\DELL\Desktop\iii.jfif" alt="Your Name" class="profile-img">

<p>I'm passionate about creating websites that are not only functional but also visually
appealing. With experience in both front-end and back-end development, I enjoy bringing ideas to
life on the web.</p>

</div>

</section>

<!-- Portfolio Section -->

<section id="portfolio">

<div class="container">

<h2>My Work</h2>

<div class="projects">

<div class="project">

<img src="C:\Users\DELL\Desktop\pp.jfif" alt="Project 1">

<h3>Project 1</h3>

<p>Web design for a local business. HTML, CSS, and JavaScript used.</p>

</div>

<div class="project">

<img src="images/project2.jpg" alt="Project 2">

<h3>Project 2</h3>

<p>i am a full stack developer.Responsive website built with React.js and Node.js.</p>

</div>

<!-- Add more projects as needed -->

</div>

</div>

</section>

<!-- Contact Section -->

<section id="contact">

<div class="container">

<h2>Contact Me</h2>
<form id="contactForm" onsubmit="handleSubmit(event)">

<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" required></textarea>

<button type="submit">Send Message</button>

</form>

<div id="messageSuccess" style="display:none;">Message sent successfully!</div>

</div>

</section>

<!-- Footer -->

<footer>

<div class="container">

<p>&copy; 2024 [oxford]. All rights reserved.</p>

</div>

</footer>

<script src="script.js"></script>

</body>

</html>
CSS

/* Reset some default styles */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

/* Basic styles */

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

color: #333;

nav {

background-color: #333;

padding: 1em;

position: sticky;

top: 0;

z-index: 1000;

nav ul {

list-style: none;

display: flex;

justify-content: center;

nav ul li {
margin: 0 1em;

nav ul li a {

color: white;

text-decoration: none;

font-size: 1.2em;

section {

padding: 4em 0;

.container {

width: 80%;

margin: 0 auto;

text-align: center;

#home {

background-color: #2b2b2b;

color: white;

padding: 6em 0;

#home h1 {

font-size: 3em;

margin-bottom: 0.5em;

#home p {
font-size: 1.5em;

margin-bottom: 1em;

button {

background-color: #ff6347;

color: white;

padding: 0.5em 1.5em;

border: none;

cursor: pointer;

font-size: 1.1em;

border-radius: 5px;

button:hover {

background-color: #ff4500;

#about {

background-color: white;

.profile-img {

width: 150px;

height: 150px;

border-radius: 50%;

margin: 1em 0;

#portfolio {

background-color: #f9f9f9;
}

.projects {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

.project {

width: 45%;

margin-bottom: 2em;

.project img {

width: 100%;

border-radius: 8px;

.project h3 {

margin-top: 1em;

#contact {

background-color: white;

form {

max-width: 600px;

margin: 0 auto;

text-align: left;

}
form label {

display: block;

margin-bottom: 0.5em;

form input,

form textarea {

width: 100%;

padding: 1em;

margin-bottom: 1em;

border-radius: 5px;

border: 1px solid #ccc;

form button {

background-color: #ff6347;

color: white;

padding: 0.7em 2em;

border: none;

border-radius: 5px;

cursor: pointer;

form button:hover {

background-color: #ff4500;

footer {

background-color: #333;

color: white;
padding: 1em 0;

text-align: center;

JS

// Smooth Scroll to Section

function scrollToSection(sectionId) {

const section = document.getElementById(sectionId);

window.scrollTo({

top: section.offsetTop,

behavior: "smooth"

});

// Contact Form Submit Handler

function handleSubmit(event) {

event.preventDefault();

const form = document.getElementById('contactForm');

const successMessage = document.getElementById('messageSuccess');

// Simulate sending a message (you'd replace this with actual form submission logic)

setTimeout(() => {

form.reset();

successMessage.style.display = 'block';

setTimeout(() => {

successMessage.style.display = 'none';

}, 3000);

}, 1000);
}

You might also like