Start learning

Portfolio Free Templates

You can freely copy the code or you can use our freelive HTML editorto modify the code according to your specific needs.


Simple Portfolio website Templates


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <nav>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<section id="home"<
    <h1>Welcome to Your Portfolio</h1>
    <p>This is the home section of your portfolio.</p>
</section>

<section id="about">
    <h2>About Me</h2>
    <p>Write a brief introduction about yourself here.</p>
</section>

<section id="contact">
    <h2>Contact Me</h2>
    <p>Feel free to reach out to me using the form below.</p>
    <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>
<script src="script.js"></script>
</body>
</html>

 body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #333;
    color: white;
    padding: 1em;
    text-align: center;
}

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

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

.nav-links a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

section {
    padding: 50px;
    text-align: center;
}

#home {
    background-color: #f0f0f0;
}

form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}

label {
    margin-bottom: 8px;
}

input,
textarea {
    padding: 8px;
    margin-bottom: 16px;
}

button {
    padding: 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

Preview