طراحی سایت با هوش مصنوعی؟
طراحی سایت با هوش مصنوعی مسیر ورود به دنیای وب را ساده‌تر و سریع‌تر کرده است. امروز حتی بدون دانش عمیق برنامه‌نویسی می‌توانید با چند پرامپت، کد یک سایت را تولید و نتیجه آن را مشاهده کنید. در این راهنم
طراحی سایت با هوش مصنوعی، از چند میلیون تومان هزینه تا چند پرامپت ساده!
طراحی سایت در گذشته برای بسیاری از افراد یک پروژه زمان‌بر و پرهزینه بود. اگر فردی می‌خواست یک وبسایت اختصاصی برای کسب‌وکار، نمونه‌کار یا فعالیت شخصی خود داشته باشد، معمولاً باید سراغ طراح یا برنامه‌نویس می‌رفت و بسته به امکانات و سطح پروژه، هزینه طراحی یک سایت می‌توانست کم‌کم از حدود ۲۰، ۳۰ یا حتی ۴۰ میلیون تومان شروع شود و با افزایش امکانات، هزینه بیشتری هم داشته باشد. علاوه بر هزینه، اجرای پروژه ممکن بود هفته‌ها یا حتی چند ماه زمان ببرد.
امروز اما شرایط تغییر کرده است. طراحی سایت با هوش مصنوعی باعث شده بخش زیادی از کارهایی که قبلاً به دانش فنی و ساعت‌ها کدنویسی نیاز داشت، با کمک ابزارهای هوش مصنوعی انجام شود. حتی لازم نیست حتماً یک کامپیوتر قدرتمند داشته باشید؛ با یک گوشی ساده، اتصال به اینترنت و ابزارهایی مانند ChatGPT یا Claude می‌توانید کدهای یک صفحه وب را تولید کنید، آن‌ها را اجرا کنید و نتیجه را ببینید. البته این به معنی بی‌نیازی کامل از یادگیری برنامه‌نویسی نیست؛ بلکه AI نقطه شروع را بسیار ساده‌تر کرده است.
در این آموزش قرار نیست از همان ابتدا وارد مفاهیم پیچیده برنامه‌نویسی شویم. هدف این است که قدم‌به‌قدم ببینیم یک سایت از چه بخش‌هایی تشکیل شده، کدهای HTML، CSS و JavaScript چه کاری انجام می‌دهند و چگونه می‌توانیم با کمک هوش مصنوعی اولین صفحه وب خودمان را بسازیم.
مرحله اول: اولین سایت زندگی‌ات را بساز
برای شروع ساخت سایت با هوش مصنوعی به یک پرامپت پیچیده و تخصصی نیاز ندارید. کافی است یک درخواست ساده و واضح را در ابزارهایی مانند ChatGPT یا Claude وارد کنید و از هوش مصنوعی بخواهید کدهای یک سایت را برای شما تولید کند.
برای مثال می‌توانید چنین درخواستی داشته باشید:
مرحله دوم: نتیجه کدها را ببینید
حالا که کدهای HTML را از هوش مصنوعی دریافت کرده‌اید، زمان آن رسیده است که نتیجه واقعی آن را در مرورگر ببینید. برای این کار می‌توانید از یک HTML Viewer آنلاین استفاده کنید. برای نمونه وارد سایت CodeShack HTML Viewer شوید.
در صفحه HTML Viewer، کدی را که از هوش مصنوعی (مرحله قبل) دریافت کرده‌اید در قسمت مربوط به HTML وارد یا Paste کنید. سپس در بخش نمایش نتیجه، خروجی صفحه‌ای را که ساخته‌اید مشاهده خواهید کرد.
<!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>
<meta name="description" content="رزومه شخصی احمد دالوند، برنامه‌نویس و طراح سایت‌های گردشگری و سفر">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container nav">
<a href="#home" class="logo">احمد دالوند</a>
<nav class="menu">
<a href="#about">درباره من</a>
<a href="#skills">مهارت‌ها</a>
<a href="#projects">پروژه‌ها</a>
<a href="#services">خدمات</a>
<a href="#contact">تماس</a>
</nav>
</div>
</header>
<main>
<!-- Hero -->
<section id="home" class="hero">
<div class="container hero-content">
<div class="hero-text">
<span class="tag">برنامه‌نویس تازه‌کار</span>
<h1>
سلام، من <strong>احمد دالوند</strong> هستم.
</h1>
<p>
در زمینه طراحی و توسعه سایت‌های گردشگری و سفر فعالیت می‌کنم
و به ساخت وب‌سایت‌های ساده، کاربردی و مدرن علاقه دارم.
</p>
<div class="hero-buttons">
<a href="#projects" class="btn primary">مشاهده پروژه‌ها</a>
<a href="#contact" class="btn secondary">تماس با من</a>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="section">
<div class="container">
<div class="section-title">
<span>01</span>
<h2>درباره من</h2>
</div>
<div class="about-box">
<p>
من احمد دالوند، یک برنامه‌نویس تازه‌کار هستم که به طراحی
و توسعه وبسایت علاقه دارم. تمرکز اصلی من طراحی سایت‌های
مرتبط با گردشگری و سفر است.
</p>
<p>
هدف من ایجاد وب‌سایت‌هایی تمیز، سریع، Responsive و
کاربرپسند است و در حال توسعه مهارت‌هایم در زمینه
برنامه‌نویسی و طراحی وب هستم.
</p>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="section light">
<div class="container">
<div class="section-title">
<span>02</span>
<h2>مهارت‌ها</h2>
</div>
<div class="skills">
<div class="skill">
<div class="skill-info">
<span>HTML</span>
<span>80%</span>
</div>
<div class="progress">
<div class="progress-bar html"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>CSS</span>
<span>75%</span>
</div>
<div class="progress">
<div class="progress-bar css"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>JavaScript</span>
<span>60%</span>
</div>
<div class="progress">
<div class="progress-bar js"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>Responsive Design</span>
<span>70%</span>
</div>
<div class="progress">
<div class="progress-bar responsive"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section id="projects" class="section">
<div class="container">
<div class="section-title">
<span>03</span>
<h2>پروژه‌ها</h2>
</div>
<div class="projects">
<article class="project-card">
<div class="project-number">01</div>
<h3>سایت گردشگری</h3>
<p>
طراحی یک وبسایت معرفی مقاصد گردشگری با ظاهر ساده
و مناسب برای موبایل.
</p>
<span class="project-type">HTML / CSS / JavaScript</span>
</article>
<article class="project-card">
<div class="project-number">02</div>
<h3>سایت معرفی سفر</h3>
<p>
یک وبسایت ساده برای معرفی تورها، مکان‌های دیدنی
و برنامه‌های سفر.
</p>
<span class="project-type">Responsive Design</span>
</article>
<article class="project-card">
<div class="project-number">03</div>
<h3>صفحه معرفی مقصد</h3>
<p>
طراحی صفحه‌ای مینیمال برای معرفی یک مقصد گردشگری
و نمایش اطلاعات سفر.
</p>
<span class="project-type">Web Design</span>
</article>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="section light">
<div class="container">
<div class="section-title">
<span>04</span>
<h2>خدمات</h2>
</div>
<div class="services">
<div class="service-card">
<span class="service-icon">01</span>
<h3>طراحی سایت</h3>
<p>
طراحی وب‌سایت‌های ساده و مدرن متناسب با نیاز پروژه.
</p>
</div>
<div class="service-card">
<span class="service-icon">02</span>
<h3>سایت گردشگری</h3>
<p>
طراحی سایت برای معرفی شهرها، مکان‌های دیدنی،
تورها و خدمات گردشگری.
</p>
</div>
<div class="service-card">
<span class="service-icon">03</span>
<h3>طراحی Responsive</h3>
<p>
طراحی سایت‌هایی که در موبایل، تبلت و کامپیوتر
به‌درستی نمایش داده می‌شوند.
</p>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="section contact">
<div class="container">
<div class="section-title">
<span>05</span>
<h2>اطلاعات تماس</h2>
</div>
<div class="contact-box">
<div class="contact-item">
<span>ایمیل</span>
<a href="mailto:ahmad@gmail.com">
ahmad@gmail.com
</a>
</div>
<div class="contact-item">
<span>موبایل</span>
<a href="tel:09932223321">
09932223321
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<p>
© <span id="year"></span> احمد دالوند — تمامی حقوق محفوظ است.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>ممکن است نتیجه اولین پروژه شما بسیار ساده باشد؛ اما نکته مهم این است که همین صفحه ساده واقعاً توسط شما ساخته شده است. شما یک دستور را به هوش مصنوعی داده‌اید، کد دریافت کرده‌اید، آن را اجرا کرده‌اید و خروجی گرفته‌اید. اگر چیزی در ظاهر صفحه درست نبود، می‌توانید همان کد را دوباره به AI بدهید و دقیقاً توضیح دهید چه چیزی را تغییر دهد. این چرخه «درخواست، تولید کد، اجرا، بررسی و اصلاح» یکی از مهم‌ترین روش‌های ساخت سایت با هوش مصنوعی است.
تبریک می‌گویم؛ شما همین حالا اولین قدم خود را برای ورود به دنیای وب و برنامه‌نویسی برداشته‌اید.
مرحله سوم: HTML، CSS و JavaScript چه هستند؟
صفحات وبی که هر روز در اینترنت می‌بینید، از ترکیب فناوری‌های مختلف ساخته شده‌اند؛ اما در یک توضیح ساده، سه فناوری HTML، CSS و JavaScript نقش بسیار مهمی در ساخت رابط کاربری صفحات دارند. برای درک بهتر، یک وبسایت را مثل یک ساختمان در نظر بگیرید.
اول HTML: اسکلت اصلی سایت
زبان HTML پایه ساختار صفحات وب است. اگر بخواهیم خیلی ساده توضیح دهیم، HTML به مرورگر می‌گوید چه چیزی در صفحه وجود دارد و هر عنصر کجا قرار می‌گیرد.
برای مثال وقتی می‌نویسیم:
<h2>این یک تیتر است</h2> <p>این یک پاراگراف متن است.</p> <img src="image.jpg" alt="تصویر"> <button>این یک دکمه است</button>به مرورگر می‌گوییم یک تیتر، یک پاراگراف، یک تصویر و یک دکمه در صفحه وجود دارد.
بنابراین HTML را می‌توان اسکلت ساختمان سایت دانست. همان‌طور که یک ساختمان بدون اسکلت ساختار مشخصی ندارد، یک صفحه وب نیز برای مشخص‌کردن عناصر اصلی خود به HTML نیاز دارد. در واقع HTML محتوای صفحه و ساختار معنایی آن را مشخص می‌کند؛ از تیترها و متن‌ها گرفته تا تصاویر، لینک‌ها، فرم‌ها، دکمه‌ها و بخش‌های مختلف صفحه.
دوم CSS: ظاهر و پوسته سایت
حالا تصور کنید اسکلت ساختمان ساخته شده، اما هنوز رنگ‌آمیزی، دکوراسیون، اندازه‌ها و ظاهر آن مشخص نیست. اینجا CSS وارد عمل می‌شود.
در CSS وظیفه تعیین ظاهر عناصر HTML را بر عهده دارد. با CSS می‌توانیم مشخص کنیم یک دکمه چه رنگی داشته باشد، متن با چه فونتی نمایش داده شود، اندازه تیتر چقدر باشد، فاصله بین عناصر چقدر باشد، پس‌زمینه چه رنگ یا تصویری داشته باشد و عناصر در موبایل و دسکتاپ چگونه کنار یکدیگر قرار بگیرند.
برای مثال ممکن است در HTML یک دکمه داشته باشیم، اما با CSS مشخص کنیم این دکمه گوشه‌های گرد، رنگ خاص، سایه، اندازه مناسب و افکت هنگام حرکت ماوس داشته باشد.
به همین دلیل CSS را می‌توان بخش طراحی و استایل یک سایت دانست. اگر HTML ساختار باشد، CSS ظاهر آن ساختار را شکل می‌دهد. طراحی واکنش‌گرا یا Responsive Design نیز بخش مهمی از همین حوزه است و باعث می‌شود سایت در صفحه‌نمایش موبایل، تبلت و کامپیوتر ظاهر مناسبی داشته باشد.
سوم JavaScript: مغز و رفتار سایت
سومین بخش مهم JavaScript است. اگر HTML را اسکلت و CSS را ظاهر سایت بدانیم، JavaScript مسئول بسیاری از رفتارها و تعاملات صفحه است.
برای مثال وقتی روی یک دکمه کلیک می‌کنید و منویی باز می‌شود، یک فرم بدون بارگذاری مجدد صفحه بررسی می‌شود، یک اسلایدر تصاویر حرکت می‌کند یا یک بخش از صفحه به شکل پویا تغییر می‌کند، JavaScript می‌تواند در اجرای این رفتار نقش داشته باشد.
در JavaScript همچنین امکان ایجاد تعاملات پیچیده‌تر را فراهم می‌کند. از منوی همبرگری موبایل و تب‌های مختلف گرفته تا فرم‌های تعاملی، فیلتر محصولات، اسلایدرها، انیمیشن‌ها و دریافت اطلاعات از سرویس‌های مختلف، همگی می‌توانند با JavaScript پیاده‌سازی شوند.
البته هر انیمیشنی الزاماً با JavaScript ساخته نمی‌شود و CSS نیز قابلیت‌های انیمیشنی قدرتمندی دارد. اما JavaScript زمانی اهمیت بیشتری پیدا می‌کند که سایت نیاز به منطق، تصمیم‌گیری و واکنش به رفتار کاربر داشته باشد.
مرحله چهارم: بخش‌های اصلی یک سایت را بشناسید
برای طراحی سایت حرفه‌ای فقط شناخت کدها کافی نیست. باید بدانید صفحه‌ای که طراحی می‌کنید از چه بخش‌هایی تشکیل شده است. چهار اصطلاح بسیار مهم در این زمینه، Header، Hero Section، Body و Footer هستند.
هدر سایت چیست؟
برای Header یا هدر معمولاً قسمت بالایی سایت است و می‌تواند شامل لوگو، نام برند، لینک‌های منو، دکمه ورود، تماس یا سایر گزینه‌های مهم باشد. در طراحی موبایل، معمولاً منوی اصلی به شکل یک منوی همبرگری نمایش داده می‌شود تا فضای صفحه مدیریت شود.
هیرو سکشن چیست؟
اما Hero Section معمولاً اولین بخش بزرگ و شاخصی است که کاربر پس از ورود به سایت مشاهده می‌کند. این قسمت می‌تواند شامل تیتر اصلی، توضیح کوتاه، تصویر، ویدیو یا یک دکمه دعوت به اقدام یا CTA باشد. هدف هیرو سکشن این است که در چند ثانیه اول، موضوع سایت و ارزش اصلی آن را به کاربر منتقل کند.
بادی یا Body یا بدنه سایت چیست؟
بادی به بخش اصلی محتوای صفحه گفته می‌شود؛ جایی که اطلاعات اصلی سایت قرار می‌گیرد. معرفی خدمات، ویژگی‌ها، نمونه‌کارها، مقالات، محصولات، نظرات کاربران و سایر محتواها می‌توانند در این بخش قرار بگیرند.
فوتر چیست؟
فوتر یا Footer معمولاً در پایین صفحه قرار دارد و اطلاعات تکمیلی مانند لینک‌های مهم، اطلاعات تماس، شبکه‌های اجتماعی، قوانین سایت و کپی‌رایت را در خود جای می‌دهد. فوتر خوب باید ساده، منظم و کاربردی باشد و کاربر را با حجم زیادی از اطلاعات مواجه نکند.
یک نکته مهم: Color Palette
یکی از تفاوت‌های سایت‌های آماتور و حرفه‌ای، توجه به Color Palette یا پالت رنگ است. سایت‌های حرفه‌ای معمولاً بدون برنامه رنگ‌آمیزی نمی‌شوند. طراح از قبل رنگ اصلی، رنگ‌های مکمل، رنگ متن، پس‌زمینه و رنگ بخش‌های مهم را مشخص می‌کند.
برای مثال می‌توان یک رنگ اصلی برای برند، یک رنگ تیره برای متن، یک رنگ روشن برای پس‌زمینه و یک رنگ تأکیدی برای دکمه‌های مهم انتخاب کرد. این کار باعث می‌شود ظاهر صفحات منسجم و حرفه‌ای باشد و کاربر احساس نکند هر بخش از سایت با رنگی تصادفی طراحی شده است.
مرحله پنجم: حالا یک پرامپت پیشرفته‌تر بنویسید
تا اینجا با مفاهیم مهمی مثل HTML، CSS، JavaScript، Header، Hero Section، Body، Footer، Responsive Design و Color Palette آشنا شدید. حالا می‌توانید همین اطلاعات را وارد پرامپت خود کنید تا طراحی سایت با هوش مصنوعی از یک صفحه ساده به یک پروژه حرفه‌ای‌تر نزدیک شود.
برای مثال به‌جای اینکه فقط بگویید «یک سایت بساز»، می‌توانید درباره نوع سایت، مخاطب هدف، رنگ‌های اصلی، ساختار صفحه، سبک طراحی، واکنش‌گرایی، انیمیشن‌ها، تایپوگرافی، فاصله‌گذاری، دکمه‌ها و نحوه نمایش در موبایل توضیح دهید.
نمونه یک پرامپت پیشرفته می‌تواند چنین ساختاری داشته باشد
تفاوت اصلی این پرامپت با درخواست اول، میزان اطلاعاتی است که درباره خروجی موردنظر در اختیار مدل قرار می‌دهید. هرچه نیاز خود را دقیق‌تر تعریف کنید، احتمال رسیدن به خروجی مناسب‌تر افزایش پیدا می‌کند.
مرحله ششم: نتیجه پرامپت پیشرفته‌تر را ببینید
اکنون کدهای پرامپت پیشرفته را دریافت کنید و مانند مرحله دوم، خروجی HTML را در HTML Viewer مشاهده کنید. این بار تفاوت نتیجه را با اولین پروژه خود مقایسه کنید.
<!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>
<style>
/* ==============================
RESET
============================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:
"Vazirmatn",
"Vazir",
Tahoma,
Arial,
sans-serif;
background:#0d120d;
color:#fff;
line-height:1.8;
overflow-x:hidden;
}
a{
text-decoration:none;
color:inherit;
}
button{
font-family:inherit;
}
.container{
width:min(1180px, 90%);
margin:auto;
}
/* ==============================
COLORS
============================== */
:root{
--green:#597445;
--green-dark:#3e5231;
--green-light:#6d8b54;
--yellow:#E7D37F;
--black:#0d120d;
--black2:#121912;
--black3:#182018;
--white:#fff;
--gray:#9da79a;
--border:rgba(255,255,255,.10);
}
/* ==============================
HEADER
============================== */
.header{
position:fixed;
top:0;
right:0;
left:0;
z-index:999;
padding:18px 0;
transition:.35s;
}
.header.scrolled{
background:rgba(13,18,13,.88);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--border);
padding:12px 0;
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
display:flex;
flex-direction:column;
line-height:1;
}
.logo-main{
font-size:25px;
font-weight:900;
}
.logo-sub{
color:var(--yellow);
font-size:8px;
letter-spacing:4px;
margin-top:6px;
direction:ltr;
}
/* MENU BUTTON */
.menu-button{
width:48px;
height:48px;
border:1px solid var(--border);
border-radius:50%;
background:rgba(255,255,255,.05);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
cursor:pointer;
transition:.3s;
}
.menu-button:hover{
background:var(--green);
}
.menu-button span{
width:19px;
height:2px;
background:white;
transition:.3s;
}
.menu-button.active span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.menu-button.active span:nth-child(2){
opacity:0;
}
.menu-button.active span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
/* NAV MENU */
.menu{
position:fixed;
top:0;
right:0;
width:350px;
max-width:85%;
height:100vh;
padding:120px 45px;
background:#101610;
border-left:1px solid var(--border);
transform:translateX(100%);
transition:.5s cubic-bezier(.77,0,.18,1);
}
.menu.active{
transform:translateX(0);
}
.menu a{
display:block;
padding:17px 0;
border-bottom:1px solid var(--border);
color:#9da79a;
font-size:18px;
transition:.3s;
}
.menu a:hover{
color:var(--yellow);
padding-right:10px;
}
/* ==============================
HERO
============================== */
.hero{
min-height:100vh;
position:relative;
display:flex;
align-items:center;
overflow:hidden;
background:
radial-gradient(
circle at 85% 30%,
rgba(89,116,69,.30),
transparent 30%
),
radial-gradient(
circle at 10% 80%,
rgba(231,211,127,.08),
transparent 25%
),
#0d120d;
}
.hero::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:55px 55px;
mask-image:linear-gradient(
to bottom,
black,
transparent
);
}
.hero-content{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.15fr .85fr;
align-items:center;
gap:80px;
padding-top:80px;
}
/* HERO TEXT */
.hero-label{
display:inline-flex;
align-items:center;
gap:9px;
padding:7px 14px;
border:1px solid rgba(231,211,127,.25);
border-radius:50px;
color:var(--yellow);
background:rgba(231,211,127,.05);
font-size:11px;
margin-bottom:25px;
animation:up .8s ease both;
}
.hero-label i{
width:7px;
height:7px;
border-radius:50%;
background:var(--yellow);
box-shadow:0 0 15px var(--yellow);
}
.hero h1{
font-size:clamp(42px,6vw,78px);
line-height:1.25;
font-weight:900;
letter-spacing:-3px;
animation:up .8s .1s ease both;
}
.hero h1 span{
color:var(--yellow);
}
.hero-description{
max-width:650px;
margin-top:25px;
color:#aeb6aa;
font-size:15px;
line-height:2.2;
animation:up .8s .2s ease both;
}
.hero-buttons{
display:flex;
gap:12px;
margin-top:32px;
animation:up .8s .3s ease both;
}
.primary-btn{
display:flex;
align-items:center;
gap:20px;
padding:10px 12px 10px 22px;
background:var(--yellow);
color:#111;
border-radius:50px;
font-size:13px;
font-weight:bold;
transition:.3s;
}
.primary-btn strong{
width:38px;
height:38px;
display:grid;
place-items:center;
background:#111;
color:var(--yellow);
border-radius:50%;
font-size:18px;
}
.primary-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(231,211,127,.18);
}
.outline-btn{
padding:12px 22px;
border:1px solid var(--border);
border-radius:50px;
color:#dce1d9;
font-size:13px;
transition:.3s;
}
.outline-btn:hover{
background:var(--green);
border-color:var(--green);
}
/* HERO STATS */
.hero-stats{
display:flex;
gap:45px;
margin-top:55px;
animation:up .8s .4s ease both;
}
.hero-stat{
display:flex;
flex-direction:column;
}
.hero-stat strong{
font-size:25px;
}
.hero-stat span{
color:#7f897c;
font-size:10px;
}
/* ==============================
HERO VISUAL
============================== */
.hero-visual{
position:relative;
height:500px;
animation:up 1s .2s ease both;
}
.visual-card{
position:absolute;
width:330px;
height:410px;
top:30px;
right:50%;
transform:translateX(50%) rotate(5deg);
border:1px solid rgba(255,255,255,.12);
border-radius:30px;
overflow:hidden;
background:
linear-gradient(
145deg,
#597445,
#273523
);
box-shadow:
0 30px 80px rgba(0,0,0,.5);
transition:.5s;
}
.visual-card:hover{
transform:translateX(50%) rotate(0deg) translateY(-10px);
}
.visual-card::before{
content:"";
position:absolute;
width:250px;
height:250px;
border-radius:50%;
background:rgba(231,211,127,.18);
top:-100px;
left:-100px;
}
.visual-card::after{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:rgba(0,0,0,.15);
bottom:-80px;
right:-50px;
}
.visual-content{
position:absolute;
inset:0;
padding:30px;
display:flex;
flex-direction:column;
justify-content:space-between;
z-index:2;
}
.visual-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.visual-number{
font-size:12px;
color:rgba(255,255,255,.65);
}
.compass{
width:55px;
height:55px;
border:1px solid rgba(255,255,255,.3);
border-radius:50%;
display:grid;
place-items:center;
font-size:20px;
color:var(--yellow);
}
.visual-title{
font-size:42px;
line-height:1.2;
font-weight:900;
}
.visual-title small{
display:block;
font-size:10px;
letter-spacing:5px;
color:var(--yellow);
direction:ltr;
}
/* FLOATING CARD */
.float-card{
position:absolute;
left:0;
bottom:70px;
width:220px;
padding:18px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(20,28,19,.85);
backdrop-filter:blur(15px);
box-shadow:0 20px 50px rgba(0,0,0,.35);
z-index:5;
}
.float-card small{
color:#879182;
font-size:9px;
}
.float-card strong{
display:block;
margin-top:3px;
color:var(--yellow);
font-size:20px;
}
/* ==============================
SECTION COMMON
============================== */
.section{
padding:120px 0;
}
.section-dark{
background:#111811;
}
.section-head{
max-width:650px;
margin-bottom:55px;
}
.section-number{
color:var(--yellow);
font-size:10px;
letter-spacing:1px;
}
.section-head h2{
margin-top:8px;
font-size:clamp(32px,5vw,52px);
line-height:1.4;
}
.section-head h2 span{
color:var(--green-light);
}
.section-head p{
margin-top:10px;
color:#849080;
font-size:13px;
}
/* ==============================
SPECIALTIES
============================== */
.specialties{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}
.specialty{
position:relative;
min-height:270px;
padding:28px;
overflow:hidden;
border:1px solid var(--border);
border-radius:24px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.045),
rgba(255,255,255,.01)
);
transition:.4s;
}
.specialty:hover{
transform:translateY(-8px);
border-color:rgba(89,116,69,.7);
background:rgba(89,116,69,.10);
}
.specialty-number{
color:#657060;
font-size:10px;
}
.specialty-icon{
margin-top:45px;
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:15px;
background:rgba(231,211,127,.08);
color:var(--yellow);
font-size:23px;
}
.specialty h3{
margin-top:18px;
font-size:20px;
}
.specialty p{
margin-top:6px;
color:#818b7d;
font-size:11px;
}
/* ==============================
TESTIMONIALS
============================== */
.testimonials{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.testimonial{
padding:30px;
border:1px solid var(--border);
border-radius:24px;
background:#0d120d;
transition:.4s;
}
.testimonial:hover{
transform:translateY(-7px);
border-color:rgba(231,211,127,.25);
}
.quote{
color:var(--yellow);
font-family:Georgia,serif;
font-size:60px;
line-height:.6;
}
.testimonial-text{
margin-top:22px;
min-height:110px;
color:#c5cbc1;
font-size:12px;
line-height:2;
}
.client{
display:flex;
align-items:center;
gap:12px;
padding-top:20px;
border-top:1px solid var(--border);
margin-top:20px;
}
.client-avatar{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--green);
font-weight:bold;
}
.client-info strong{
display:block;
font-size:12px;
}
.client-info span{
display:block;
color:#727d70;
font-size:9px;
}
/* ==============================
CONTACT
============================== */
.contact-section{
padding:110px 0;
background:#0d120d;
}
.contact-wrapper{
position:relative;
overflow:hidden;
border-radius:30px;
padding:65px;
background:
linear-gradient(
120deg,
#3f5531,
#597445
);
display:grid;
grid-template-columns:1.2fr .8fr;
gap:50px;
align-items:center;
}
.contact-wrapper::before{
content:"";
position:absolute;
width:450px;
height:450px;
border-radius:50%;
border:1px solid rgba(255,255,255,.10);
left:-180px;
bottom:-250px;
}
.contact-wrapper h2{
margin-top:10px;
font-size:clamp(35px,5vw,58px);
line-height:1.35;
}
.contact-wrapper h2 span{
display:block;
color:var(--yellow);
}
.contact-wrapper p{
max-width:560px;
margin-top:12px;
color:rgba(255,255,255,.7);
font-size:13px;
}
/* CONTACT BUTTONS */
.contact-options{
display:grid;
gap:12px;
position:relative;
z-index:2;
}
.contact-button{
display:flex;
align-items:center;
gap:14px;
padding:15px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(0,0,0,.13);
transition:.3s;
}
.contact-button:hover{
transform:translateX(-5px);
background:rgba(0,0,0,.25);
}
.contact-icon{
width:45px;
height:45px;
flex-shrink:0;
display:grid;
place-items:center;
border-radius:13px;
background:var(--yellow);
color:#111;
font-weight:bold;
}
.contact-button small{
display:block;
color:rgba(255,255,255,.55);
font-size:9px;
}
.contact-button strong{
display:block;
margin-top:2px;
direction:ltr;
font-size:12px;
}
/* ==============================
FOOTER
============================== */
.footer{
background:#090d09;
}
.footer-main{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:60px;
padding:70px 0;
}
.footer-description{
max-width:260px;
margin-top:18px;
color:#6e786c;
font-size:11px;
}
.footer h4{
margin-bottom:18px;
font-size:12px;
}
.footer-links{
display:flex;
flex-direction:column;
gap:9px;
}
.footer-links a{
color:#737d71;
font-size:11px;
transition:.3s;
}
.footer-links a:hover{
color:var(--yellow);
}
.footer-contact{
display:flex;
flex-direction:column;
gap:9px;
}
.footer-contact a{
color:#737d71;
font-size:11px;
direction:ltr;
text-align:right;
}
.footer-bottom{
border-top:1px solid var(--border);
}
.footer-bottom .container{
min-height:65px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.footer-bottom p,
.footer-bottom span{
color:#697268;
font-size:9px;
}
/* ==============================
ANIMATION
============================== */
@keyframes up{
from{
opacity:0;
transform:translateY(25px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* ==============================
RESPONSIVE
============================== */
@media(max-width:950px){
.hero-content{
grid-template-columns:1fr;
gap:30px;
}
.hero-visual{
display:none;
}
.specialties{
grid-template-columns:repeat(2,1fr);
}
.contact-wrapper{
grid-template-columns:1fr;
}
}
@media(max-width:650px){
.container{
width:88%;
}
.hero-content{
padding-top:100px;
}
.hero h1{
font-size:40px;
letter-spacing:-1.5px;
}
.hero-description{
font-size:13px;
}
.hero-buttons{
flex-direction:column;
}
.primary-btn,
.outline-btn{
justify-content:center;
text-align:center;
}
.hero-stats{
gap:22px;
margin-top:40px;
}
.hero-stat strong{
font-size:19px;
}
.hero-stat span{
font-size:8px;
}
.section{
padding:80px 0;
}
.section-head{
margin-bottom:35px;
}
.section-head h2{
font-size:34px;
}
.specialties{
grid-template-columns:1fr;
}
.specialty{
min-height:220px;
}
.specialty-icon{
margin-top:25px;
}
.testimonials{
grid-template-columns:1fr;
}
.testimonial-text{
min-height:auto;
}
.contact-wrapper{
padding:40px 25px;
border-radius:22px;
}
.footer-main{
grid-template-columns:1fr;
gap:35px;
padding:50px 0;
}
.footer-bottom .container{
min-height:auto;
padding:20px 0;
flex-direction:column;
align-items:flex-start;
}
}
</style>
</head>
<body>
<!-- =========================
HEADER
========================= -->
<header class="header" id="header">
<div class="container nav">
<a href="#home" class="logo">
<span class="logo-main">
دالوند
</span>
<span class="logo-sub">
TRAVEL
</span>
</a>
<button
class="menu-button"
id="menuButton"
aria-label="منوی سایت"
>
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav class="menu" id="menu">
<a href="#home">خانه</a>
<a href="#specialties">تخصص‌های من</a>
<a href="#clients">تجربه مشتریان</a>
<a href="#contact">ارتباط با من</a>
</nav>
</header>
<!-- =========================
HERO
========================= -->
<section class="hero" id="home">
<div class="container hero-content">
<div class="hero-text">
<div class="hero-label">
<i></i>
همراه شما برای یک سفر متفاوت
</div>
<h1>
سفر را آغاز کن،
<span>خاطره‌ها را ماندگار کن</span>
</h1>
<p class="hero-description">
به وبسایت گردشگری دالوند خوش اومدین،
من یه گردشگر حرفه‌ای با ارائه تورهای متناسب هستم
و آماده‌ام که شما رو در سریع‌ترین زمان ممکن
به مقصد برسونم.
</p>
<div class="hero-buttons">
<a
href="tel:09932223321"
class="primary-btn"
>
<span>
تماس مستقیم با من
</span>
<strong>
←
</strong>
</a>
<a
href="#specialties"
class="outline-btn"
>
مشاهده تخصص‌ها
</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
<strong>+100</strong>
<span>
مسافر موفق
</span>
</div>
<div class="hero-stat">
<strong>+20</strong>
<span>
تور برگزار شده
</span>
</div>
<div class="hero-stat">
<strong>24/7</strong>
<span>
پشتیبانی
</span>
</div>
</div>
</div>
<!-- VISUAL -->
<div class="hero-visual">
<div class="visual-card">
<div class="visual-content">
<div class="visual-top">
<span class="visual-number">
01 / TRAVEL
</span>
<div class="compass">
✦
</div>
</div>
<div class="visual-title">
EXPLORE
<small>
YOUR NEXT JOURNEY
</small>
</div>
</div>
</div>
<div class="float-card">
<small>
مقصد بعدی شما؟
</small>
<strong>
آماده حرکت هستیم ✦
</strong>
</div>
</div>
</div>
</section>
<!-- =========================
SPECIALTIES
========================= -->
<section
class="section section-dark"
id="specialties"
>
<div class="container">
<div class="section-head">
<span class="section-number">
01 / تخصص‌های من
</span>
<h2>
تجربه‌ای برای
<span>سفر بهتر</span>
</h2>
<p>
تجربه، برنامه‌ریزی و شناخت مسیرها برای ساختن
یک سفر مطمئن و خاطره‌انگیز.
</p>
</div>
<div class="specialties">
<div class="specialty">
<span class="specialty-number">
01
</span>
<div class="specialty-icon">
✦
</div>
<h3>
مدیر شرکت
</h3>
<p>
مدیریت و برنامه‌ریزی حرفه‌ای خدمات گردشگری
و سفر.
</p>
</div>
<div class="specialty">
<span class="specialty-number">
02
</span>
<div class="specialty-icon">
◈
</div>
<h3>
لیدر تور
</h3>
<p>
همراهی مسافران و مدیریت مسیر برای تجربه‌ای
امن و لذت‌بخش.
</p>
</div>
<div class="specialty">
<span class="specialty-number">
03
</span>
<div class="specialty-icon">
◇
</div>
<h3>
برگزارکننده تور
</h3>
<p>
طراحی و اجرای تورهای متناسب با نیاز
و بودجه شما.
</p>
</div>
<div class="specialty">
<span class="specialty-number">
04
</span>
<div class="specialty-icon">
✧
</div>
<h3>
مشاور سفر
</h3>
<p>
کمک به انتخاب مقصد، مسیر و بهترین
برنامه سفر.
</p>
</div>
</div>
</div>
</section>
<!-- =========================
CLIENTS
========================= -->
<section
class="section"
id="clients"
>
<div class="container">
<div class="section-head">
<span class="section-number">
02 / تجربه مشتریان
</span>
<h2>
سفری که
<span>خاطره شد</span>
</h2>
<p>
تجربه چند مسافر فرضی از همکاری با تیم دالوند.
</p>
</div>
<div class="testimonials">
<article class="testimonial">
<div class="quote">
“
</div>
<p class="testimonial-text">
برنامه‌ریزی تور فوق‌العاده بود.
همه چیز دقیق و منظم انجام شد و
سفر خیلی بهتر از چیزی بود که تصور می‌کردم.
</p>
<div class="client">
<div class="client-avatar">
م
</div>
<div class="client-info">
<strong>
محمد رضایی
</strong>
<span>
مسافر تور شمال
</span>
</div>
</div>
</article>
<article class="testimonial">
<div class="quote">
“
</div>
<p class="testimonial-text">
انتخاب مقصد و برنامه سفر خیلی حرفه‌ای بود.
بدون نگرانی از جزئیات، فقط از سفر لذت بردیم.
</p>
<div class="client">
<div class="client-avatar">
س
</div>
<div class="client-info">
<strong>
سارا احمدی
</strong>
<span>
مسافر تور کویر
</span>
</div>
</div>
</article>
<article class="testimonial">
<div class="quote">
“
</div>
<p class="testimonial-text">
برخورد عالی و پشتیبانی کامل باعث شد
تجربه بسیار خوبی داشته باشیم.
حتماً دوباره همکاری می‌کنیم.
</p>
<div class="client">
<div class="client-avatar">
ع
</div>
<div class="client-info">
<strong>
علی کریمی
</strong>
<span>
مسافر تور جنوب
</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- =========================
CONTACT
========================= -->
<section
class="contact-section"
id="contact"
>
<div class="container">
<div class="contact-wrapper">
<div>
<span class="section-number">
03 / ارتباط با من
</span>
<h2>
آماده‌ای
<span>
سفر رو شروع کنی؟
</span>
</h2>
<p>
برای دریافت اطلاعات بیشتر درباره تورها،
مقصدها و برنامه‌ریزی سفر، از طریق یکی
از راه‌های زیر با من در ارتباط باشید.
</p>
</div>
<div class="contact-options">
<a
href="mailto:ahmad@gmail.com"
class="contact-button"
>
<div class="contact-icon">
@
</div>
<div>
<small>
ایمیل
</small>
<strong>
ahmad@gmail.com
</strong>
</div>
</a>
<a
href="tel:09932223321"
class="contact-button"
>
<div class="contact-icon">
☎
</div>
<div>
<small>
شماره تماس
</small>
<strong>
09932223321
</strong>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- =========================
FOOTER
========================= -->
<footer class="footer">
<div class="container footer-main">
<div>
<a href="#home" class="logo">
<span class="logo-main">
دالوند
</span>
<span class="logo-sub">
TRAVEL
</span>
</a>
<p class="footer-description">
سفر خوب، شروع یک خاطره خوب است.
همراه شما برای تجربه‌ای متفاوت
از گردشگری و سفر.
</p>
</div>
<div>
<h4>
دسترسی سریع
</h4>
<div class="footer-links">
<a href="#home">
خانه
</a>
<a href="#specialties">
تخصص‌های من
</a>
<a href="#clients">
تجربه مشتریان
</a>
<a href="#contact">
ارتباط با من
</a>
</div>
</div>
<div>
<h4>
ارتباط
</h4>
<div class="footer-contact">
<a href="mailto:ahmad@gmail.com">
ahmad@gmail.com
</a>
<a href="tel:09932223321">
09932223321
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>
این سایت توسط تیم دالوند ساخته شده است - 2026
</p>
<span>
© تمامی حقوق محفوظ است.
</span>
</div>
</div>
</footer>
<script>
/* ==============================
MENU
============================== */
const menuButton =
document.getElementById("menuButton");
const menu =
document.getElementById("menu");
const links =
document.querySelectorAll(".menu a");
menuButton.addEventListener("click", function(){
menuButton.classList.toggle("active");
menu.classList.toggle("active");
});
links.forEach(function(link){
link.addEventListener("click", function(){
menuButton.classList.remove("active");
menu.classList.remove("active");
});
});
/* ==============================
HEADER SCROLL
============================== */
const header =
document.getElementById("header");
window.addEventListener("scroll", function(){
if(window.scrollY > 40){
header.classList.add("scrolled");
}else{
header.classList.remove("scrolled");
}
});
</script>
</body>
</html>احتمالاً حالا با صفحه‌ای مواجه می‌شوید که ساختار مشخص‌تری دارد، رنگ‌ها هماهنگ هستند، بخش‌های مختلف از یکدیگر تفکیک شده‌اند و در موبایل نیز چیدمان مناسب‌تری دارند. اگر خروجی دقیقاً مطابق انتظار شما نیست، این پایان کار نیست. یکی از قابلیت‌های مهم ساخت سایت با هوش مصنوعی این است که می‌توانید فرآیند اصلاح را ادامه دهید.
برای مثال به هوش مصنوعی بگویید: «رنگ دکمه‌های CTA را تغییر بده»، «Hero Section را جذاب‌تر کن»، «فاصله بین بخش‌ها را بیشتر کن»، «هدر را برای موبایل بهینه کن» یا «پالت رنگ را به بنفش، مشکی و زرد تیره تغییر بده». سپس نسخه جدید کد را دریافت و دوباره اجرا کنید.
در پروژه‌های واقعی نیز طراحی یک‌باره انجام نمی‌شود. معمولاً طراح یا توسعه‌دهنده چندین بار خروجی را بررسی می‌کند، مشکلات رابط کاربری را پیدا می‌کند و بر اساس بازخورد، تغییرات لازم را اعمال می‌کند. هوش مصنوعی سرعت همین چرخه را به شکل قابل توجهی افزایش داده است.
اگر سایت ساختید، آن را با ما به اشتراک بگذارید
اگر با همین روش اولین سایت خودتان را ساختید، نتیجه کار را در قسمت نظرات با ما و دیگر کاربران به اشتراک بگذارید. دیدن پروژه‌هایی که از یک پرامپت ساده شروع شده‌اند و به یک صفحه وب واقعی تبدیل شده‌اند، می‌تواند برای دیگر علاقه‌مندان نیز انگیزه‌بخش باشد. حتی اگر پروژه اول شما کاملاً حرفه‌ای نیست، آن را منتشر کنید؛ چون هر پروژه جدید، فرصتی برای یادگیری و بهترشدن است.
نتیجه‌گیری
طراحی سایت دیگر فقط یک مهارت مخصوص برنامه‌نویسان حرفه‌ای نیست. ابزارهای هوش مصنوعی مسیر ورود به این حوزه را بسیار ساده‌تر کرده‌اند و امروز یک فرد مبتدی می‌تواند با توضیح نیاز خود، کد اولیه دریافت کند، آن را اجرا کند، خروجی را ببیند و مرحله‌به‌مرحله پروژه را توسعه دهد. این تغییر به‌خصوص برای افرادی اهمیت دارد که بودجه محدودی دارند یا می‌خواهند پیش از پرداخت هزینه‌های سنگین، ایده وبسایت خود را آزمایش کنند.
با این حال، نباید تصور کنیم که هوش مصنوعی جای دانش طراحی و توسعه وب را به‌طور کامل گرفته است. AI ابزار قدرتمندی برای تولید، اصلاح و یادگیری کد است؛ اما شناخت HTML، CSS، JavaScript، اصول UI/UX، Responsive Design، ساختار صفحات، تایپوگرافی و انتخاب رنگ همچنان ارزش زیادی دارد. اگر این مفاهیم را یاد بگیرید و در کنار آن از AI کمک بگیرید، می‌توانید سریع‌تر از گذشته پروژه‌های واقعی بسازید و کیفیت خروجی خود را نیز کنترل کنید. در واقع آینده وب بیشتر به سمت همکاری انسان و هوش مصنوعی حرکت می‌کند؛ جایی که شما ایده و نیاز را مشخص می‌کنید و AI بخش زیادی از اجرای فنی اولیه را سرعت می‌بخشد.
ادامه دارد...
احمد دالوند طراح، مدرس و پشتیبان مجموعه بیت‌گرف با تخصص در طراحی گرافیک، طراحی رابط کاربری (UI)، موشن گرافیک و هنر هوش مصنوعی. تمرکز اصلی من بر خلق راهکارهای بصری خلاقانه، انتقال مؤثر مفاهیم و همراهی هنرجویان در مسیر یادگیری و توسعه مهارت‌های تخصصی است.
گفتگو و سوالات شما
۰در این قسمت می‌توانید سوال یا نظر خود در مورد مقاله را مطرح کنید.
برای ثبت دیدگاه ابتدا وارد شوید
ورود به حسابهنوز دیدگاهی ثبت نشده. اولین نفر باشید!