حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود

طراحی وبسایت شخصی

تمرین آسان 4616 visibility link download flag trending_up پربازدید

یک وبسایت شامل 4 صفحه بسازید که:


1.صفحه خانه (index.html):

شامل عنوان وب‌سایت و یک تصویر پروفایل.
مقدمه‌ای کوتاه درباره خودتان.
لینک‌هایی به صفحات دیگر وب‌سایت (درباره من، پروژه‌ها، تماس با من).


2.صفحه درباره من (about.html):

توضیحات درباره تحصیلات، تجربیات، و مهارت‌ها.
استفاده از لیست‌ها برای نمایش مهارت‌ها و تجربیات.
لینک به دیگر صفحات وب‌سایت.


3. صفحه پروژه‌ها (projects.html):

معرفی و توضیح پروژه‌های انجام شده.
استفاده از لینک‌ها یا تصاویر برای نمایش پروژه‌ها.
لینک به دیگر صفحات وب‌سایت.


4. صفحه تماس (contact.html):

فرم تماس شامل فیلدهای نام، ایمیل، موضوع، و پیام.
یک دکمه ارسال برای فرم (فقط طراحی، عملکرد واقعی نیاز نیست).
لینک به دیگر صفحات وب‌سایت.
این تمرین یه پروژه ست! یعنی پتانسیل اینو داره که خیلی بیشتر روش کار بشه بنابراین ایده اصلی رو از اینجا بردار و خودت بیشتر روش کار کن تا به یه تمرین بزرگتر تبدیل یشه
👨‍💻 11 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد
👨‍💻 7 ساعت قبل Hooman.sedigi این تمرین رو مشاهده کرد

reply 7

visibility 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه خانه</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>به وب‌سایت من خوش آمدید!</h1>
        <img src="profile.jpg" alt="پروفایل من" class="profile-img">
    </header>
    <main>
        <p>سلام! من یک توسعه‌دهنده وب هستم و در این وب‌سایت می‌خواهم درباره خودم، پروژه‌هایم و چگونگی تماس با من صحبت کنم.</p>
        <nav>
            <ul>
                <li><a href="about.html">درباره من</a></li>
                <li><a href="projects.html">پروژه‌ها</a></li>
                <li><a href="contact.html">تماس با من</a></li>
            </ul>
        </nav>
    </main>
    <footer>
        <p>حق کپی © 2024</p>
    </footer>
</body>
</html>
Mma123 HTML & CSS 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>رزومه من</title>
    <link rel="stylesheet" href="./css/css.css">
    <link rel="icon" href="./image/profail.jpg">
    <meta name="direction" content="روزمه شخصی محمد بیرامی جم فرانت کار">
</head>
<body>
    
    <heder>
        <div class="header">
            <img src="./image/profail.jpg" alt="" class="hader1">
        </div>

        <h1 class="name1"> رزومه محمد بیرامی جم  </h1>
        <div class="profail1">
            
        </div>
        <hr>
        <h2 class="about">درباره من</h2>
    <div class="a11">

        <p class="about1">با سلام خدمت شما دوست عزیز من محمد بیرامی جم هستم دانشجو رشته مهندسی کامپیوتر در حال آموزش و یادگیری برنامه نویسی فرانت اند برنامه نویسی رو در 11 سالگی آشنا شدم که زبان C# بود اون هم به صورت دست و پا شکسته بعد در 20 سالگی فرانت رو شروع کردم با دوره های سایت سبز لرن همچنین متولد سال 83 هستم و مشتاق یادگیری زبان برنامه نویسی هستم</p>

    </div>
        <h3 class="mahart">مهارت ها</h3>
        <p class="mahart1">HTML5, CSS3, EMMET, WORD, EXEL,...</p>
    </heder>
    <div>
        <h3 class="nemone">نمونه کارها</h3>
        <div class="nemone1">
            <img src="" alt="" class="1">
            <a href="#" class="1">مشاهده وبسایت</a>
            <div class="nemone2">
                <img src="" alt="" class="2">
                <a href="#" class="2">مشاهده وبسایت</a>
            </div>
        </div>
        <div class="phone">
            <p class="phone1">ارتباط با من  </p>
            <a href="tel:+989367320375" class="phone2" target="_blank">  تماس بامن  </a> 
        <div>
            <a href="https://t.me/MBJ_1383" class="telegram" target="_blank">تلگرام من</a>
        </div>
        <div>
            <a href="https://www.instagram.com/armiiin.bj/profilecard/?igsh=MW9qcDViYzBhM3JzNA==" class="insta" target="_blank">اینستاگرام من</a>

        </div>
        <a href="https://eitaa.com/Armin2367" class="ita" target="_blank">ایتا من</a>
        </div>
        
    </div>
</body>
</html>
User 669 HTML & CSS

roham hello roham
User 9021 HTML & CSS 
/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f4f4f4;
}
header {
    background-color: #333;
    color: white;
    padding: 15px;
}
nav a {
    margin: 0 15px;
    color: white;
    text-decoration: none;
    font-size: 18px;
}
.container {
    padding: 20px;
    max-width: 800px;
    margin: auto;
    background: white;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 10px;
}
img {
    width: 150px;
    border-radius: 50%;
}
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
button {
    background-color: #28a745;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/* index.html */
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>خانه</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">خانه</a>
            <a href="about.html">درباره من</a>
            <a href="projects.html">پروژه‌ها</a>
            <a href="contact.html">تماس</a>
        </nav>
    </header>
    <div class="container">
        <h1>خوش آمدید</h1>
        <img src="profile.jpg" alt="پروفایل">
        <p>سلام! من یک توسعه‌دهنده وب هستم و این وب‌سایت شخصی من است.</p>
    </div>
</body>
</html>

<!-- about.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>درباره من</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">خانه</a>
            <a href="about.html">درباره من</a>
            <a href="projects.html">پروژه‌ها</a>
            <a href="contact.html">تماس</a>
        </nav>
    </header>
    <div class="container">
        <h1>درباره من</h1>
        <p>من یک توسعه‌دهنده وب با تجربه در HTML، CSS، و JavaScript هستم.</p>
        <h2>مهارت‌ها:</h2>
        <ul>
            <li>HTML & CSS</li>
            <li>JavaScript</li>
            <li>Python</li>
        </ul>
    </div>
</body>
</html>

<!-- projects.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>پروژه‌ها</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">خانه</a>
            <a href="about.html">درباره من</a>
            <a href="projects.html">پروژه‌ها</a>
            <a href="contact.html">تماس</a>
        </nav>
    </header>
    <div class="container">
        <h1>پروژه‌ها</h1>
        <p>لیستی از پروژه‌های من:</p>
        <ul>
            <li><a href="#">پروژه ۱</a></li>
            <li><a href="#">پروژه ۲</a></li>
        </ul>
    </div>
</body>
</html>

<!-- contact.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تماس با من</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">خانه</a>
            <a href="about.html">درباره من</a>
            <a href="projects.html">پروژه‌ها</a>
            <a href="contact.html">تماس</a>
        </nav>
    </header>
    <div class="container">
        <h1>تماس با من</h1>
        <form>
            <input type="text" placeholder="نام" required>
            <input type="email" placeholder="ایمیل" required>
            <input type="text" placeholder="موضوع" required>
            <textarea placeholder="پیام خود را بنویسید" required>
User 3415 HTML & CSS 
<!-- index.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>خانه - وبسایت من</title>
</head>
<body>
<h1>وبسایت من</h1>
<img src="profile.jpg" alt="تصویر پروفایل" width="150" />
<p>سلام، من یک توسعه‌دهنده وب هستم که به طراحی و برنامه‌نویسی علاقه‌مندم.</p>
<nav>
<a href="index.html">خانه</a> |
<a href="about.html">درباره من</a> |
<a href="projects.html">پروژه‌ها</a> |
<a href="contact.html">تماس با من</a>
</nav>
</body>
</html>

<!-- about.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>درباره من</title>
</head>
<body>
<h1>درباره من</h1>
<p>تحصیلات: کارشناسی مهندسی کامپیوتر</p>
<p>تجربیات:</p>
<ul>
<li>توسعه وب 3 سال</li>
<li>برنامه‌نویسی پایتون 2 سال</li>
</ul>
<p>مهارت‌ها:</p>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Python</li>
<li>React</li>
</ul>
<nav>
<a href="index.html">خانه</a> |
<a href="about.html">درباره من</a> |
<a href="projects.html">پروژه‌ها</a> |
<a href="contact.html">تماس با من</a>
</nav>
</body>
</html>

<!-- projects.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>پروژه‌ها</title>
</head>
<body>
<h1>پروژه‌ها</h1>
<div>
<h3>پروژه 1: وبسایت شخصی</h3>
<p>طراحی و توسعه وبسایت شخصی با HTML و CSS.</p>
</div>
<div>
<h3>پروژه 2: اپلیکیشن مدیریت کارها</h3>
<p>ساخت اپلیکیشن با React برای مدیریت وظایف روزانه.</p>
</div>
<nav>
<a href="index.html">خانه</a> |
<a href="about.html">درباره من</a> |
<a href="projects.html">پروژه‌ها</a> |
<a href="contact.html">تماس با من</a>
</nav>
</body>
</html>

<!-- contact.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>تماس با من</title>
</head>
<body>
<h1>تماس با من</h1>
<form>
<label for="name">نام:</label><br />
<input type="text" id="name" name="name" /><br />
<label for="email">ایمیل:</label><br />
<input type="email" id="email" name="email" /><br />
<label for="subject">موضوع:</label><br />
<input type="text" id="subject" name="subject" /><br />
<label for="message">پیام:</label><br />
<textarea id="message" name="message"></textarea><br />
<button type="submit">ارسال</button>
</form>
<nav>
<a href="index.html">خانه</a> |
<a href="about.html">درباره من</a> |
<a href="projects.html">پروژه‌ها</a> |
<a href="contact.html">تماس با من</a>
</nav>
</body>
</html>
پاسخ هوش مصنوعی Ai HTML & CSS

دونه دونه مینویسم هر کدوم از فایل ها چی هستند.

<!--index.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>NEW PAGE</title>
        <link href="../photos/loading.ico" rel="icon" type="image/x-icon">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body dir="ltr">
        <h1>What to know about me</h1>
        <p id="property">My name is Mohammadmahdi     a programmer in Iran <br>
        I'm a boy of 16,  interesed in python programming.</p>
    </body>
    <a href="about me.html" target="_blank"> more about me</a><br>
    <a href="contact.html" target="_blank"> How to contact me</a><br>
    <a href="projects.html" target="_blank"> What are the projects you have done before?</a>
</html>

<!--projects.html-->

<!DOCTYPE html>
<html>
    <head><title>my profosianal projects
    </title>
        <title>Me</title>
        <link href="../photos/loading.ico" rel="icon" type="image/x-icon">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <p id="property">
            I have only python projects unfortuantlly,here are three of them
        <ul>
            <li>Mandegar Alborz</li>
            <li>TIC-TAC-TOE</li>
            <li>PING PONG</li>
        </ul>
        This imag is me while programming pyhton

        </p>
        <img src="../photos/python-imag.webp" alt="python programming" title="Me while programming">

    </body>

    <a href="about me.html" target="_blank"> more about me</a><br>
    <a href="contact.html" target="_blank"> How to contact me</a><br>
    <a href="index.html" target="_blank">who are you</a><br>
     if you want you can see my projects in<a href="https://codebezan.com/profile/mohammad.mahdi88" target="_blank">this codebezan webpage </a>
</html>

<!--contact.html-->
<!DOCTYPE html>
<html>

<head>
    <title>contact me</title>
    <link href="../photos/loading.ico" rel="icon" type="image/x-icon">
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1 style="font-style: italic;">contact me </h1>
    <p class="text" >Mohammadmahdi <br> 0933....98 <br>
        <input type="email" placeholder="send email" class="input-modern">
            <input type="text" placeholder="full name" class="input-modern">
                <input type="number" placeholder="phone number" class="input-modern">
                    <input type="text" placeholder="message" class="input-modern">
                        <input type="submit" value="Send the Form" onclick="submitForm()" class="input-modern" id="my-button"></p> 
</body>

<a href="about me.html" target="_blank"> more about me</a><br>
    <a href="index.html" target="_blank"> Who are you?</a><br>
     <a href="projects.html" target="_blank"> What are the projects you have done before?</a>
</html> -

<!--about me.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>Me</title>
        <link href="../photos/loading.ico" rel="icon" type="image/x-icon">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <p id="property">
            I am 10th Grade in a special High School  Emamhossein High school in Tehran<br>
        </p>
        <ul>
            what you can see now is my skils and characteristics
            <li>English language</li>
            <li>python programming</li>
            <li>Drawing</li>
            <li>Intelligent</li>
            <li>Hard_working</li>
        </ul>
    </body>

    <a href="index.html" target="_blank"> hwo are you?</a><br>
    <a href="contact.html" target="_blank"> How to contact me</a><br>
    <a href="projects.html" target="_blank"> What are the projects you have done before?</a>
</html>
<!--style.css-->
@charset "utf-8";

#property {
    border: 5px solid black;
    margin:5px auto;
    width: 600px;
    font-style: italic;
    text-align: center;
    font-size: medium;
    height: auto;
}
a {
    color:  blue;
    font-size: larger;
    margin: 10px 5px;
    font-style: italic;
    width: 60px;
    height: auto;
}
body {
    background-image:url(../photos/success.jpg) ;
    background-repeat: no-repeat;
    background-position:var(auto);
    border-radius:10px;
    background-size: 1500px 900px;
    direction: ltr;

}

.text {
    border: 5px solid rgb(38, 0, 255);
    margin:5px auto;
    width: 600px;
    font-style: italic;
    text-align: center;
    font-size: medium;
    height: auto;
    color: crimson;
    font-size:larger;
    padding:6px;

}

.input-modern {
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    width: 100%;
    max-width: 400px;
    outline: none;
  }

  .input-modern:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(14, 19, 24, 0.2);
  }

#my-button {
  background-color: #416542; /* رنگ سبز */
  color: white; /* رنگ متن */
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#my-button:hover {
    background-color: #00a708; /* رنگ سبز تیره‌تر */
    box-shadow: rgb(248, 2, 56);
  }

img {
    width: 500px;
    height: 400px;
    float:right;
    border-radius: 6px;
}

ul{
    font-size: larger;
    color: rgb(13, 0, 97);
}
Mohammad.mahdi88 HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>درباره من</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>درباره من</h1>
    </header>
    <main>
        <h2>تحصیلات</h2>
        <p>توضیحات درباره تحصیلات شما.</p>

        <h2>تجربیات</h2>
        <ul>
            <li>تجربه 1</li>
            <li>تجربه 2</li>
            <li>تجربه 3</li>
        </ul>

        <h2>مهارت‌ها</h2>
        <ul>
            <li>مهارت 1</li>
            <li>مهارت 2</li>
            <li>مهارت 3</li>
        </ul>

        <nav>
            <ul>
                <li><a href="index.html">صفحه خانه</a></li>
                <li><a href="projects.html">پروژه‌ها</a></li>
                <li><a href="contact.html">تماس با من</a></li>
            </ul>
        </nav>
    </main>
    <footer>
        <p>© 2024 [نام شما]</p>
    </footer>
</body>
</html><!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه خانه</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>وب‌سایت من</h1>
        <img src="profile.jpg" alt="پروفایل" class="profile-image">
    </header>
    <main>
        <p>سلام! من [نام شما] هستم. این وب‌سایت برای معرفی خودم و پروژه‌هایم ساخته شده است.</p>
        <nav>
            <ul>
                <li><a href="about.html">درباره من</a></li>
                <li><a href="projects.html">پروژه‌ها</a></li>
                <li><a href="contact.html">تماس با من</a></li>
            </ul>
        </nav>
    </main>
    <footer>
        <p>© 2024 [نام شما]</p>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>پروژه‌ها</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>پروژه‌ها</h1>
    </header>
    <main>
        <h2>معرفی پروژه‌ها</h2>
        <p>توضیحاتی درباره پروژه‌های انجام شده.</p>
        <ul>
            <li>
                <h3>پروژه 1</h3>
                <p>توضیحات پروژه 1.</p>
                <a href="link_to_project1">مشاهده پروژه</a>
            </li>
            <li>
                <h3>پروژه 2</h3>
                <p>توضیحات پروژه 2.</p>
                <a href="link_to_project2">مشاهده پروژه</a>
            </li>
            <li>
                <h3>پروژه 3</h3>
                <p>توضیحات پروژه 3.</p>
                <a href="link_to_project3">مشاهده پروژه</a>
            </li>
        </ul>

        <nav>
            <ul>
                <li><a href="index.html">صفحه خانه</a></li>
                <li><a href="about.html">درباره من</a></li>
                <li><a href="contact.html">تماس با من</a></li>
            </ul>
        </nav>
    </main>
    <footer>
        <p>© 2024 [نام شما]</p>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تماس با من</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>تماس با من</h1>
    </header>
    <main>
        <form action="#" method="post">
            <label for="name">نام:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">ایمیل:</label>
            <input type="email" id="email" name="email" required>

            <label for="subject">موضوع:</label>
            <input type="text" id="subject" name="subject" required>

            <label for="message">پیام:</label>
            <textarea id="message" name="message" required></textarea>

            <button type="submit">ارسال</button>
        </form>

        <nav>
            <ul>
                <li><a href="index.html">صفحه خانه</a></li>
                <li><a href="about.html">درباره من</a></li>
                <li><a href="projects.html">پروژه‌ها</a></li>
            </ul>
        </nav>
    </main>
    <footer>
        <p>© 2024 [نام شما]</p>
    </footer>
</body>
</html>
User 136 HTML & CSS

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن