Scribd
Upload
66 views

Website

The document describes how to build a personal portfolio website using HTML, CSS, and JavaScript. It includes sections for navigation, hero, about, skills, projects, contact, and footer. Code snippets are provided for the HTML, CSS, and JavaScript to create the site structure and functionality like smooth scrolling and form submission handling.

Uploaded by

AbdulkhadarJilani Shaik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views

Website

The document describes how to build a personal portfolio website using HTML, CSS, and JavaScript. It includes sections for navigation, hero, about, skills, projects, contact, and footer. Code snippets are provided for the HTML, CSS, and JavaScript to create the site structure and functionality like smooth scrolling and form submission handling.

Uploaded by

AbdulkhadarJilani Shaik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Personal PortFolio Website:

------------------------------------------

HTML:

----------

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Personal Portfolio</title>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

<nav>

<div class="logo">Your Logo</div>

<ul class="nav-links">

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

<li><a href="#skills">Skills</a></li>

<li><a href="#projects">Projects</a></li>

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

</ul>

</nav>

<header>
<h1>Welcome to My Portfolio</h1>

<p>A showcase of my skills, projects, and achievements</p>

</header>

<section id="about">

<h2>About Me</h2>

<div class="about-content">

<p>Write a brief introduction about yourself here.</p>

</div>

</section>

<section id="skills">

<h2>Skills</h2>

<ul class="skills-list">

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</section>

<section id="projects">

<h2>Projects</h2>

<div class="project">

<h3>Project Title</h3>

<p>Project description</p>
<a href="project-demo.html">Live Demo</a>

<a href="project-repo.html">GitHub Repository</a>

</div>

</section>

<section id="contact">

<h2>Contact Me</h2>

<form id="contact-form">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="message">Message:</label>

<textarea id="message" name="message" required></textarea>

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

</form>

</section>

<footer>

<p>&copy; 2023 Your Name</p>

</footer>

<script data-two_delay_id="two_65b8f79c52b96" data-two_delay_src="script.js"></script>

</body>

</html>
styles.css

----------------

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

/* Navigation Bar */

nav {

background-color: #333;

color: #fff;

padding: 20px;

.logo {

font-size: 24px;

font-weight: bold;

margin-right: 20px;

.nav-links {

list-style-type: none;
margin: 0;

padding: 0;

display: flex;

.nav-links li {

margin-right: 20px;

.nav-links li a {

color: #fff;

text-decoration: none;

/* Hero Section */

header {

background-color: #f2f2f2;

padding: 50px;

text-align: center;

/* About Me Section */

#about {

padding: 50px;

text-align: center;
}

/* Skills Section */

#skills {

padding: 50px;

background-color: #f2f2f2;

text-align: center;

.skills-list {

list-style-type: none;

padding: 0;

.skills-list li {

display: inline-block;

margin: 0 10px;

/* Projects Section */

#projects {

padding: 50px;

text-align: center;

}
.project {

margin-bottom: 20px;

.project a {

display: block;

margin-top: 10px;

/* Contact Section */

#contact {

padding: 50px;

text-align: center;

#contact-form {

display: flex;

flex-direction: column;

align-items: center;

#contact-form label {

margin-bottom: 10px;

}
#contact-form input,

#contact-form textarea {

width: 100%;

padding: 10px;

margin-bottom: 10px;

box-sizing: border-box;

#contact-form button {

background-color: #333;

color: #fff;

border: none;

padding: 10px 20px;

cursor: pointer;

/* Footer */

footer {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;

script.js
-------------
document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

});

});

// Form submission handling

document.getElementById('contact-form').addEventListener('submit', function (e) {

e.preventDefault();

// You can add code here to handle form submission, such as sending an email or storing the data.

// For demonstration purposes, let's log the form data to the console.

const formData = new FormData(this);

console.log('Form data:', Object.fromEntries(formData));

// Clear the form inputs

this.reset();

});

You might also like