ابدأ التعلم

قوالب المحفظة المجانية

يمكنك نسخ الكود بحرية أو استخدام خدمتنا المجانيةالبرمجة المباشرةلتعديل الكود وفقًا لاحتياجاتك الخاصة.


قوالب مواقع الويب البسيطة للمحفظة


<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;
}

معاينة