آموزش CSS و HTML برای ساخت قالب فروشگاهی کافه – پروژه عملی

0 دیدگاه 25 آموزش HTML5 و CSS3, آموزش تکنیک های css

با HTML، CSS و کمی JavaScript

سلام دوستان عزیز!
من زمان الله ابراهیمی هستم و از صمیم قلب به شما خوش‌آمد می‌گویم. امروز قصد داریم با هم یک پروژه عملی بسازیم که شامل بخش‌های مختلف یک قالب فرشگاهی مدرن و زیباست. در این آموزش، به صورت قدم به قدم به بررسی هر بخش از کد HTML و استایل‌دهی CSS مربوط به آن می‌پردازیم تا حتی کسانی که تازه شروع کرده‌اند، بتوانند به راحتی آن را درک کنند.

همراه با ما باشید تا با زبان ساده و شیرین، دنیای طراحی وب را کشف کنیم!

بررسی گام به گام کدهای HTML

فهرست موضوعات در این آموزش

🚀 آموزش ویدیویی کامل 🚀

برای یادگیری حرفه‌ای طراحی قالب فروشگاهی
«کافه پاسخ وردپرس»
با HTML، CSS و JS، حتماً این ویدیوها رو ببین!

🎥 مشاهده آموزش ویدیو 🎥

۱. ساختار کلی HTML

ابتدای هر سند HTML باید شامل اعلام استاندارد HTML5 باشد:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

1 2	<!DOCTYPE html> <html lang="fa" dir="rtl">

توضیح:

<!DOCTYPE html> به مرورگر اعلام می‌کند که سند از HTML5 استفاده می‌کند.
lang="fa" زبان صفحه را به فارسی تغییر می‌دهد.
dir="rtl" جهت نوشتار را راست به چپ تنظیم می‌کند.

بخش Head در HTML

بخش Head اولین قسمت هر سند HTML است که اطلاعات متا، عنوان، لینک به فایل‌های CSS، فونت‌ها و کتابخانه‌های خارجی را در بر می‌گیرد. این قسمت از کد، اطلاعات مهمی را به مرورگر ارائه می‌دهد تا صفحه به درستی نمایش داده شود.

کد کامل بخش Head

<head>
  <!-- تنظیم کدگذاری کاراکترها (UTF-8) برای نمایش صحیح حروف فارسی -->
  <meta charset="UTF-8" />

  <!-- تنظیم viewport برای واکنشگرا بودن صفحه در دستگاه‌های مختلف -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- عنوان صفحه؛ این عنوان در تب مرورگر نمایش داده می‌شود و برای SEO اهمیت دارد -->
  <title>کافه پاسخ وردپرس | قالب فرشگاهی قهوه</title>

  <!-- لینک به کتابخانه آیکون‌های Font Awesome برای استفاده از آیکون‌های جذاب -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />

  <!-- لینک به فایل CSS پروژه؛ این فایل تمامی استایل‌های مورد نیاز را شامل می‌شود -->
  <link rel="stylesheet" href="style.css" />
</head>

<head>

<title>کافه پاسخ وردپرس | قالب فرشگاهی قهوه</title>

</head>

توضیح گام به گام

تگ meta charset=”UTF-8″:
- این خط تضمین می‌کند که تمامی حروف فارسی و علائم به درستی نمایش داده شوند.
- استفاده از UTF-8 به عنوان کدگذاری استاندارد باعث می‌شود که مشکلات نمایش کاراکترها کاهش یابد.
تگ meta viewport:
- این خط به مرورگر می‌گوید که عرض صفحه باید برابر با عرض دستگاه (width=device-width) باشد و مقیاس اولیه صفحه ۱ (initial-scale=1.0) تنظیم شود.
- این ویژگی باعث می‌شود صفحه در دستگاه‌های موبایل، تبلت و دسکتاپ به صورت واکنشگرا نمایش داده شود.
تگ title:
- عنوان صفحه را تعیین می‌کند.
- عنوانی مانند “کافه پاسخ وردپرس | قالب فرشگاهی قهوه” نه تنها نمایانگر محتوای صفحه است بلکه برای موتورهای جستجو (SEO) بسیار اهمیت دارد.
لینک‌دهی به فایل‌های CSS و کتابخانه‌ها:
- خط اول لینک‌دهی به کتابخانه Font Awesome است که آیکون‌های زیبا را در اختیار شما قرار می‌دهد.
- خط بعدی لینک به فایل CSS محلی (style.css) است که تمامی استایل‌های اختصاصی شما در آن قرار دارد.

این بخش از کد پایه‌ای برای شروع هر پروژه وب است. اگر به آموزش‌های بیشتری در زمینه آموزش HTML علاقه دارید، حتماً آن‌ها را مرور کنید.

بخش CSS: استایل‌دهی کامل قالب فرشگاهی

در ادامه به بررسی کامل کدهای CSS استفاده‌شده در این قالب می‌پردازیم. این بخش شامل موارد زیر است:

تعریف فونت‌های سفارشی و متغیرهای اصلی
ریست استایل‌ها و تنظیمات کلی
استایل‌دهی بخش‌های مختلف (هدر، صفحه اصلی، درباره ما، منو، محصولات، نظرات مشتریان، تماس با ما، وبلاگ و فوتر)
تنظیمات واکنشگرا (Media Queries)

۱. تعریف فونت‌ها و متغیرهای اصلی

کد فونت‌ها

@font-face {
  font-family: "Dana";
  src: url("fonts/Dana/woff2/DanaFaNum-DemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Dana";
  src: url("fonts/Dana/woff2/DanaFaNum-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Dana";
  src: url("fonts/Dana/woff2/DanaFaNum-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {

font-family: "Dana";

src: url("fonts/Dana/woff2/DanaFaNum-DemiBold.woff2") format("woff2");

font-weight: 600;

font-style: normal;

}

@font-face {

font-family: "Dana";

src: url("fonts/Dana/woff2/DanaFaNum-Medium.woff2") format("woff2");

font-weight: 500;

font-style: normal;

}

@font-face {

font-family: "Dana";

src: url("fonts/Dana/woff2/DanaFaNum-Regular.woff2") format("woff2");

font-weight: normal;

font-style: normal;

}

کد متغیرهای CSS در :root

:root {
  --colorMain: #d3ad7f;
  --black: #13131a;
  --bg: #010103;
  --textColor: #fff;
  --border: 1px solid #eeeeeeb9;
}

:root {

--colorMain: #d3ad7f;

--black: #13131a;

--bg: #010103;

--textColor: #fff;

--border: 1px solid #eeeeeeb9;

}

توضیح:

@font-face:
- با استفاده از این دستورات، فونت‌های دلخواه (Dana) با وزن‌های مختلف به پروژه اضافه می‌شوند.
- در ادامه در سایر بخش‌ها، با استفاده از font-family: "Dana"; این فونت به کار گرفته می‌شود.
متغیرهای CSS:
- تعریف رنگ‌های اصلی، رنگ پس‌زمینه، رنگ متن و سبک حاشیه در بخش :root باعث می‌شود تغییر این مقادیر در کل پروژه آسان شود.
- به عنوان مثال، اگر بخواهید رنگ اصلی (colorMain) را تغییر دهید، تنها کافی است مقدار آن در :root تغییر یابد.

۲. ریست استایل‌ها و تنظیمات کلی

* {
  font-family: "Dana";
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  transition: all 0.2s linear;
}

* {

font-family: "Dana";

margin: ;

padding: ;

box-sizing: border-box;

outline: none;

border: none;

text-decoration: none;

transition: all 0.2s linear;

}

توضیح:

انتخابگر *:
- این دستور به تمام عناصر HTML اعمال می‌شود تا از وجود فاصله و padding پیش‌فرض مرورگر جلوگیری شود.
- box-sizing: border-box; تضمین می‌کند که عرض و ارتفاع عناصر شامل padding و border نیز شوند.
transition:
- این ویژگی باعث می‌شود تغییرات اعمال‌شده روی هر ویژگی CSS به صورت نرم (smooth) و در مدت زمان ۰.۲ ثانیه صورت گیرد.

۳. استایل‌دهی به بخش‌های مختلف

برای هر بخش از قالب، کد HTML و CSS مربوط به آن را به همراه توضیحات زیر آورده‌ایم.

۱. بخش هدر (Header)

HTML هدر

در ابتدا، ساختار اصلی هدر شامل لوگو، منو و آیکون‌های تعاملی نمایش داده می‌شود:

<header class="header">
  <div class="container split">
    <!-- لوگو -->
    <a href="#" class="logo">
      <img src="images/logo.png" alt="logo" />
    </a>
    <!-- منوی ناوبری -->
    <nav class="navbar">
      <a href="#home">خانه</a>
      <a href="#about">درباره ما</a>
      <a href="#menu">منوی کافه</a>
      <a href="#product">محصولات</a>
      <a href="#reviews">نظرات کاربران</a>
      <a href="#contact">تماس باما</a>
      <a href="#blogs">وبلاگ</a>
    </nav>
    <!-- آیکون‌های هدر -->
    <div class="icons">
      <i class="fas fa-search" id="search-btn"></i>
      <i class="fas fa-shopping-cart" id="cart-btn"></i>
      <i class="fas fa-bars" id="menu-btn"></i>
    </div>
  </div>
</header>

</a>

<a href="#about">درباره ما</a>

<a href="#product">محصولات</a>

<a href="#reviews">نظرات کاربران</a>

<a href="#blogs">وبلاگ</a>

</nav>

</div>

</header>

CSS هدر

استایل‌دهی بخش هدر به این صورت انجام شده است:

.header {
  background-color: var(--bg);
  padding: 1.5rem 2rem;
  border-bottom: var(--border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.header .logo img {
  height: 6rem;
}
.header .navbar a {
  margin: 0 1rem;
  font-size: 2rem;
  color: var(--textColor);
}
.header .navbar a:hover {
  color: var(--colorMain);
  border-bottom: 0.1rem solid var(--colorMain);
  padding-bottom: 0.5rem;
}
.header .icons {
  color: var(--textColor);
  cursor: pointer;
  font-size: 2rem;
  margin-left: 2rem;
}
.header .icons i {
  padding-left: 1rem;
}
.header .icons i:hover {
  color: var(--colorMain);
}

.header {

background-color: var(--bg);

padding: 1.5rem 2rem;

border-bottom: var(--border);

position: fixed;

top: ;

left: ;

right: ;

z-index: 1000;

}

.header .logo img {

height: 6rem;

}

.header .navbar a {

margin: 1rem;

font-size: 2rem;

color: var(--textColor);

}

.header .navbar a:hover {

color: var(--colorMain);

border-bottom: 0.1rem solid var(--colorMain);

padding-bottom: 0.5rem;

}

.header .icons {

color: var(--textColor);

cursor: pointer;

font-size: 2rem;

margin-left: 2rem;

}

.header .icons i {

padding-left: 1rem;

}

.header .icons i:hover {

color: var(--colorMain);

}

آموزش طراحی باکس مطالب تصادفی در سایدبار

یک آموزش جذاب دیگه!

توضیح به زبان ساده

در بخش هدر، ما یک نوار ثابت در بالای صفحه داریم که همیشه نمایش داده می‌شود.

لوگو: با استفاده از تگ <a> و <img>، لوگوی کافه در سمت چپ قرار گرفته است.
ناوبری: لینک‌های منو درون تگ <nav> قرار دارند. وقتی کاربر ماوس را بر روی هر لینک می‌برد، رنگ آن تغییر می‌کند تا جذابیت بصری ایجاد شود.
آیکون‌ها: آیکون‌هایی مانند جستجو، سبد خرید و منو با استفاده از Font Awesome اضافه شده‌اند تا تعامل بیشتری با کاربر داشته باشند.

۲. بخش صفحه اصلی (Home)

HTML صفحه اصلی

بخش اصلی صفحه شامل یک تصویر پس‌زمینه زیبا و متن خوشامدگویی است:

<section class="home" id="home">
  <div class="container">
    <div class="content">
      <h3>قهوه تازه برای صبحی پرانرژی</h3>
      <p>
        روزت رو با یک فنجان قهوه تازه و انرژی‌بخش آغاز کن! طعمی که روزت رو
        روشن می‌کنه و انگیزه می‌ده تا بهترین خودت باشی.
      </p>
      <a href="#" class="btn">همین حالا سفارش بده</a>
    </div>
  </div>
</section>

<h3>قهوه تازه برای صبحی پرانرژی</h3>

<p>

روزت رو با یک فنجان قهوه تازه و انرژی‌بخش آغاز کن! طعمی که روزت رو

روشن می‌کنه و انگیزه می‌ده تا بهترین خودت باشی.

</p>

<a href="#" class="btn">همین حالا سفارش بده</a>

</div>

</section>

CSS صفحه اصلی

برای صفحه اصلی از استایل‌های زیر استفاده شده است:

.home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url("images/home-img.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}
.home .content {
  max-width: 60rem;
}
.home .content h3 {
  font-size: 6rem;
  color: var(--textColor);
}

.home {

min-height: 100vh;

display: flex;

align-items: center;

background: url("images/home-img.jpg") no-repeat;

background-size: cover;

background-position: center;

}

.home .content {

max-width: 60rem;

}

.home .content h3 {

font-size: 6rem;

color: var(--textColor);

}

توضیح به زبان ساده

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

تگ <section>: برای تعریف بخش اصلی صفحه استفاده شده است.
متن خوشامدگویی: شامل یک تیتر بزرگ (h3) و توضیحات کوتاه است.
دکمه سفارش: دکمه‌ای جذاب با کلاس btn وجود دارد که کاربران را به سفارش فرا می‌خواند.

۳. بخش درباره ما (About)

HTML درباره ما

در این بخش، اطلاعاتی درباره کافه و ویژگی‌های منحصر به فرد آن ارائه می‌شود:

<section class="about container" id="about">
  <h1 class="heading"><span>در باره</span> ما</h1>
  <div class="row">
    <div class="imgae">
      <img src="images/about-img.jpeg" alt="" />
    </div>
    <div class="content">
      <h3>چرا قهوه‌ی ما خاص است؟</h3>
      <p>
        ما با دقت و عشق، دانه‌های قهوه‌ی باکیفیت را از بهترین مزارع انتخاب می‌کنیم تا طعمی غنی و بی‌نظیر به شما هدیه دهیم.
      </p>
      <p>
        از فرآوری دقیق گرفته تا روش‌های خاص دم‌آوری، همه چیز برای اینکه شما تجربه‌ای دلپذیر داشته باشید، آماده شده است.
      </p>
      <a href="#" class="btn">بیشتر ببنید...</a>
    </div>
  </div>
</section>

</div>

<p>

ما با دقت و عشق، دانه‌های قهوه‌ی باکیفیت را از بهترین مزارع انتخاب می‌کنیم تا طعمی غنی و بی‌نظیر به شما هدیه دهیم.

</p>

<p>

از فرآوری دقیق گرفته تا روش‌های خاص دم‌آوری، همه چیز برای اینکه شما تجربه‌ای دلپذیر داشته باشید، آماده شده است.

</p>

<a href="#" class="btn">بیشتر ببنید...</a>

</div>

</section>

CSS درباره ما

استایل‌های مربوط به بخش «درباره ما» به صورت زیر است:

.heading {
  text-align: center;
  color: var(--textColor);
  padding-bottom: 3.5rem;
  font-size: 4rem;
}
.heading span {
  color: var(--colorMain);
}
.about .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.about .row .imgae {
  flex: 1 1 45rem;
}
.about .row .imgae img {
  width: 100%;
}
.about .row .content {
  flex: 1 1 45rem;
  padding: 2rem;
}
.about .row .content h3 {
  font-size: 3rem;
  color: var(--textColor);
}

.heading {

text-align: center;

color: var(--textColor);

padding-bottom: 3.5rem;

font-size: 4rem;

}

.heading span {

color: var(--colorMain);

}

.about .row {

display: flex;

align-items: center;

flex-wrap: wrap;

}

.about .row .imgae {

flex: 1 1 45rem;

}

.about .row .imgae img {

width: 100%;

}

.about .row .content {

flex: 1 1 45rem;

padding: 2rem;

}

.about .row .content h3 {

font-size: 3rem;

color: var(--textColor);

}

توضیح به زبان ساده

در این بخش، یک ساختار دو ستونه به کار رفته است:

تصویر: در ستون اول، تصویری زیبا به نمایش درمی‌آید که نشان‌دهنده فضای دلنشین کافه است.
متن: ستون دوم شامل توضیحات درباره ویژگی‌های منحصر به فرد قهوه و دعوت به آشنایی بیشتر با کافه می‌باشد.
استفاده از Flexbox باعث شده تا محتوا به صورت واکنشگرا و زیبا چیده شود.

۴. بخش منو (Menu)

HTML منو

این بخش شامل نمایش آیتم‌های منوی کافه با قیمت و دکمه افزودن به سبد خرید است:

<section class="menu container" id="menu">
  <h1 class="heading"><span>منوی</span> ما</h1>
  <div class="box-container">
    <div class="box">
      <img src="images/menu-1.png" alt="" />
      <div class="prcie">
        ۱,۵۰۰,۰۰۰ تومان
        <span>۱,۹۹۰,۰۰۰</span>
      </div>
      <a href="#" class="btn">افزودن به سبد خرید</a>
    </div>
    <!-- آیتم‌های مشابه منو -->
  </div>
</section>

۱,۵۰۰,۰۰۰ تومان

</div>

<a href="#" class="btn">افزودن به سبد خرید</a>

</div>

</div>

</section>

CSS منو

استایل‌های بخش منو به شرح زیر است:

.menu .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}
.menu .box-container .box {
  padding: 5rem;
  text-align: center;
  border: var(--border);
}
.menu .box-container .box .prcie {
  color: var(--textColor);
  font-size: 2.5rem;
  padding: 0.5rem 0;
}
.menu .box-container .box .prcie span {
  font-size: 1.5rem;
  text-decoration: line-through;
}

.menu .box-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));

gap: 1.5rem;

}

.menu .box-container .box {

padding: 5rem;

text-align: center;

border: var(--border);

}

.menu .box-container .box .prcie {

color: var(--textColor);

font-size: 2.5rem;

padding: 0.5rem ;

}

.menu .box-container .box .prcie span {

font-size: 1.5rem;

text-decoration: line-through;

}

توضیح به زبان ساده

در بخش منو، از یک ساختار Grid استفاده شده تا آیتم‌های منو به صورت منظم و زیبا در چند ستون چیده شوند.

تصویر منو: هر آیتم منو شامل یک تصویر جذاب است.
قیمت: قیمت اصلی همراه با تخفیف (به صورت خط خورده) نمایش داده می‌شود.
دکمه افزودن: دکمه‌ای با استایل جذاب جهت افزودن محصول به سبد خرید وجود دارد.

۵. بخش محصولات (Product)

HTML محصولات

در این بخش محصولات ویژه کافه به نمایش گذاشته می‌شوند:

<section class="product container" id="product">
  <h1 class="heading"><span>محصولات</span> ما</h1>
  <div class="box-container">
    <div class="box">
      <div class="icons">
        <a href="#" class="fas fa-shopping-cart"></a>
        <a href="#" class="far fa-heart"></a>
        <a href="#" class="fas fa-eye"></a>
      </div>
      <div class="image">
        <img src="images/product-1.png" alt="" />
      </div>
      <div class="content">
        <h3>قهوه تازه</h3>
        <div class="stars">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas far fa-star-half"></i>
        </div>
        <div class="prcie">
          ۱,۵۰۰,۰۰۰ تومان
          <span>۱,۹۹۰,۰۰۰</span>
        </div>
      </div>
    </div>
    <!-- سایر محصولات -->
  </div>
</section>

<h1 class="heading"><span>محصولات</span> ما</h1>

</div>

</div>

</div>

۱,۵۰۰,۰۰۰ تومان

</div>

</div>

</section>

CSS محصولات

استایل محصولات به شکل زیر است:

.box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}
.box-container .box {
  text-align: center;
  border: var(--border);
  padding: 2rem;
}
.product .box-container .box .icons a {
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  border: var(--border);
  color: var(--textColor);
  margin: 0.3rem;
}
.product .box-container .box .icons a:hover {
  background-color: var(--colorMain);
}
.product .box-container .box .image {
  padding: 2.5rem 0;
}
.product .box-container .box .image img {
  height: 25rem;
}
.product .box-container .box h3 {
  color: var(--textColor);
  font-size: 2.5rem;
}
.box-container .box .stars {
  padding: 1.5rem;
}
.box-container .box .stars i {
  font-size: 1.7rem;
  color: var(--colorMain);
}

.box-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));

gap: 1.5rem;

}

.box-container .box {

text-align: center;

border: var(--border);

padding: 2rem;

}

.product .box-container .box .icons a {

height: 5rem;

width: 5rem;

line-height: 5rem;

font-size: 2rem;

border: var(--border);

color: var(--textColor);

margin: 0.3rem;

}

.product .box-container .box .icons a:hover {

background-color: var(--colorMain);

}

.product .box-container .box .image {

padding: 2.5rem ;

}

.product .box-container .box .image img {

height: 25rem;

}

.product .box-container .box h3 {

color: var(--textColor);

font-size: 2.5rem;

}

.box-container .box .stars {

padding: 1.5rem;

}

.box-container .box .stars i {

font-size: 1.7rem;

color: var(--colorMain);

}

معرفی CSS و Selector های CSS جلسه 3

یک آموزش جذاب دیگه!

توضیح به زبان ساده

در این بخش، هر محصول شامل چند قسمت است:

آیکون‌های تعاملی: مانند سبد خرید، علاقه‌مندی و مشاهده جزئیات که با کلیک بر روی آنها می‌توانید عملیاتی انجام دهید.
تصویر محصول: که جذابیت محصول را به نمایش می‌گذارد.
امتیازدهی: با نمایش ستاره‌ها نشان می‌دهد کاربران از محصول راضی بوده‌اند.
قیمت: قیمت محصول همراه با تخفیف به صورت زیبا نمایش داده می‌شود.

۶. بخش نظرات مشتریان (Reviews)

HTML نظرات مشتریان

در این بخش نظرات مثبت مشتریان نمایش داده می‌شود:

<section class="reviews container" id="reviews">
  <h1 class="heading"><span>نظرات</span> مشتریان</h1>
  <div class="box-container">
    <div class="box">
      <i class="far fa-comment-dots"></i>
      <p>
        این متن به عنوان نظر مشتری قرار می‌گیرد. در اینجا توضیح داده می‌شود که چطور این محصول تجربه خوبی را به همراه داشته است.
      </p>
      <img src="images/pic-1.png" alt="" class="user" />
      <h3>علی احمدی</h3>
      <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas far fa-star-half"></i>
      </div>
    </div>
    <!-- سایر نظرات -->
  </div>
</section>

<h1 class="heading"><span>نظرات</span> مشتریان</h1>

<p>

این متن به عنوان نظر مشتری قرار می‌گیرد. در اینجا توضیح داده می‌شود که چطور این محصول تجربه خوبی را به همراه داشته است.

</p>

<h3>علی احمدی</h3>

</div>

</div>

</section>

CSS نظرات مشتریان

استایل مربوط به نظرات به این شکل است:

.reviews .box-container .box > i {
  color: var(--colorMain);
  font-size: 4.5rem;
  margin-bottom: 1rem;
}
.reviews .box-container .box .user {
  width: 12rem;
  border-radius: 50%;
  object-fit: cover;
}
.reviews .box-container .box h3 {
  padding: 1rem 0;
  color: var(--textColor);
  font-size: 2.5rem;
}

.reviews .box-container .box > i {

color: var(--colorMain);

font-size: 4.5rem;

margin-bottom: 1rem;

}

.reviews .box-container .box .user {

width: 12rem;

border-radius: 50%;

object-fit: cover;

}

.reviews .box-container .box h3 {

padding: 1rem ;

color: var(--textColor);

font-size: 2.5rem;

}

توضیح به زبان ساده

این بخش با نمایش نظرات مثبت مشتریان، حس اعتماد و اعتبار را برای کافه به وجود می‌آورد.

آیکون نظر: یک آیکون جذاب به همراه متن نظر، احساس رضایت را منتقل می‌کند.
عکس کاربر: به صورت دایره‌ای نمایش داده می‌شود تا نمایانگر شخصیت و ارتباط کاربر با محصول باشد.

۷. بخش تماس با ما (Contact)

HTML تماس

در این قسمت، اطلاعات تماس و فرم ارتباطی قرار داده شده است:

<section class="contact container" id="contact">
  <h1 class="heading"><span>تماس</span> باما</h1>
  <div class="row">
    <iframe class="map" src="https://www.google.com/maps/embed?..."></iframe>
    <form action="">
      <h3>تماس بگیرید</h3>
      <div class="inputBox">
        <span class="far fa-user"></span>
        <input type="text" placeholder="نام" />
      </div>
      <div class="inputBox">
        <span class="far fa-envelope"></span>
        <input type="email" placeholder="ایمیل" />
      </div>
      <div class="inputBox">
        <span class="fas fa-phone"></span>
        <input type="number" placeholder="شماره تماس" />
      </div>
      <input type="submit" value="همین حال تماس بگیرید" class="btn" />
    </form>
  </div>
</section>

<h3>تماس بگیرید</h3>

</div>

</div>

</div>

</form>

</div>

</section>

CSS تماس

استایل فرم تماس به این صورت است:

.contact .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.contact .row .map {
  flex: 1 1 45rem;
  width: 100%;
  object-fit: cover;
  padding-left: 2rem;
}
.contact .row form {
  flex: 1 1 45rem;
  padding: 5rem 2rem;
  text-align: center;
}
.contact .row form h3 {
  font-size: 3.5rem;
  color: var(--textColor);
}
.contact .row form .inputBox {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  background-color: var(--bg);
  border: var(--border);
}
.contact .row form .inputBox input {
  width: 100%;
  padding: 2rem;
  font-size: 1.7rem;
  color: var(--textColor);
  background: none;
}
.contact .row form .inputBox span {
  color: var(--textColor);
  font-size: 2rem;
  padding-right: 2rem;
}

.contact .row {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 1rem;

}

.contact .row .map {

flex: 1 1 45rem;

width: 100%;

object-fit: cover;

padding-left: 2rem;

}

.contact .row form {

flex: 1 1 45rem;

padding: 5rem 2rem;

text-align: center;

}

.contact .row form h3 {

font-size: 3.5rem;

color: var(--textColor);

}

.contact .row form .inputBox {

display: flex;

align-items: center;

margin: 2rem ;

background-color: var(--bg);

border: var(--border);

}

.contact .row form .inputBox input {

width: 100%;

padding: 2rem;

font-size: 1.7rem;

color: var(--textColor);

background: none;

}

.contact .row form .inputBox span {

color: var(--textColor);

font-size: 2rem;

padding-right: 2rem;

}

توضیح به زبان ساده

در بخش تماس، کاربران می‌توانند از طریق فرم ارتباطی با کافه تماس برقرار کنند.

نقشه: با استفاده از یک iframe، مکان کافه روی نقشه گوگل نمایش داده می‌شود.
فرم تماس: شامل فیلدهای نام، ایمیل و شماره تماس است. استفاده از آیکون‌های زیبا در کنار فیلدها کار را برای کاربران آسان‌تر و جذاب‌تر می‌کند.

در ادامه کد HTML مربوط به بخش وبلاگ (Blogs) و فوتر (Footer) را به همراه توضیح گام به گام و به زبان ساده برایتان آورده‌ایم تا دقیقاً متوجه شوید که هر قسمت چگونه عمل می‌کند و چه وظیفه‌ای دارد.

۸. بخش وبلاگ (Blogs) و فوتر (Footer)

الف) بخش وبلاگ (Blogs)

کد HTML بخش وبلاگ

<section class="blogs container" id="blogs">
  <h1 class="heading"><span>مطالب</span> وبلاگ</h1>
  <div class="box-container">
    <!-- اولین پست وبلاگ -->
    <div class="box">
      <div class="image">
        <img src="images/blog-1.jpeg" alt="تصویر پست اول وبلاگ" />
      </div>
      <div class="content">
        <a href="#" class="title">قهوه خوشمزه و تازه</a>
        <span>توسط ادمین / ۲۲ می، ۲۰۲۵</span>
        <p>
          لورم ایپسوم دولور سیت آمت، کانسکتتور آدیپیسینگ الیت. دیستینکتو نستروم ویلیت نیسی.
        </p>
        <a href="#" class="btn">ادامه مطالب</a>
      </div>
    </div>
    <!-- دومین پست وبلاگ -->
    <div class="box">
      <div class="image">
        <img src="images/blog-2.jpeg" alt="تصویر پست دوم وبلاگ" />
      </div>
      <div class="content">
        <a href="#" class="title">قهوه خوشمزه و تازه</a>
        <span>توسط ادمین / ۲۲ می، ۲۰۲۵</span>
        <p>
          لورم ایپسوم دولور سیت آمت، کانسکتتور آدیپیسینگ الیت. دیستینکتو نستروم ویلیت نیسی.
        </p>
        <a href="#" class="btn">ادامه مطالب</a>
      </div>
    </div>
    <!-- سومین پست وبلاگ -->
    <div class="box">
      <div class="image">
        <img src="images/blog-3.jpeg" alt="تصویر پست سوم وبلاگ" />
      </div>
      <div class="content">
        <a href="#" class="title">قهوه خوشمزه و تازه</a>
        <span>توسط ادمین / ۲۲ می، ۲۰۲۵</span>
        <p>
          لورم ایپسوم دولور سیت آمت، کانسکتتور آدیپیسینگ الیت. دیستینکتو نستروم ویلیت نیسی.
        </p>
        <a href="#" class="btn">ادامه مطالب</a>
      </div>
    </div>
  </div>
</section>

<h1 class="heading"><span>مطالب</span> وبلاگ</h1>

</div>

<a href="#" class="title">قهوه خوشمزه و تازه</a>

<span>توسط ادمین / ۲۲ می، ۲۰۲۵</span>

<p>

لورم ایپسوم دولور سیت آمت، کانسکتتور آدیپیسینگ الیت. دیستینکتو نستروم ویلیت نیسی.

</p>

<a href="#" class="btn">ادامه مطالب</a>

</div>

</div>

<a href="#" class="title">قهوه خوشمزه و تازه</a>

<span>توسط ادمین / ۲۲ می، ۲۰۲۵</span>

<p>

لورم ایپسوم دولور سیت آمت، کانسکتتور آدیپیسینگ الیت. دیستینکتو نستروم ویلیت نیسی.

</p>

<a href="#" class="btn">ادامه مطالب</a>

</div>

</div>

<a href="#" class="title">قهوه خوشمزه و تازه</a>

<span>توسط ادمین / ۲۲ می، ۲۰۲۵</span>

<p>

لورم ایپسوم دولور سیت آمت، کانسکتتور آدیپیسینگ الیت. دیستینکتو نستروم ویلیت نیسی.

</p>

<a href="#" class="btn">ادامه مطالب</a>

</div>

</section>

توضیح گام به گام بخش وبلاگ

تگ <section> با کلاس “blogs container” و id=”blogs”:
- این تگ کل بخش وبلاگ را در بر می‌گیرد. کلاس container باعث می‌شود که محتوا در یک کانتینر مرکزی قرار گیرد و id=”blogs” به شما یا موتورهای جستجو کمک می‌کند که به این بخش به راحتی ارجاع دهید.
عنوان بخش وبلاگ:
- تگ <h1 class="heading"> عنوان اصلی بخش را نمایش می‌دهد.
- درون عنوان، تگ <span> به کار رفته تا قسمت “مطالب” با رنگ یا استایل متفاوت نمایش داده شود.
- این تکنیک باعث جذابیت بیشتر عنوان می‌شود.
بخش “box-container”:
- این تگ یک ساختار Grid برای قرار دادن پست‌های وبلاگ فراهم می‌کند.
- هر پست وبلاگ در یک تگ <div class="box"> قرار دارد.
ساختار هر پست وبلاگ:
- بخش تصویر:
  - تگ <div class="image"> شامل یک تگ <img> است که تصویر مربوط به پست را نمایش می‌دهد.
  - ویژگی alt توضیح کوتاهی درباره تصویر ارائه می‌دهد.
- بخش محتوا:
  - تگ <div class="content"> شامل اطلاعات متنی پست است.
  - یک لینک با کلاس “title” عنوان پست را نشان می‌دهد.
  - تگ <span> اطلاعاتی مانند نام نویسنده و تاریخ پست را نمایش می‌دهد.
  - تگ <p> یک خلاصه یا متن کوتاه از پست را ارائه می‌کند.
  - دکمه “ادامه مطالب” (تگ <a> با کلاس btn) کاربر را به صفحه کامل پست هدایت می‌کند.

آموزش ساخت فرم ورود/ثبت نام سه بعدی با HTML و CSS پروژه محور رایگان

یک آموزش جذاب دیگه!

ب) بخش فوتر (Footer)

کد HTML بخش فوتر

<footer class="footer">
  <!-- بخش اشتراک‌گذاری در شبکه‌های اجتماعی -->
  <div class="share">
    <a href="#" class="fab fa-facebook-f"></a>
    <a href="#" class="fab fa-twitter"></a>
    <a href="#" class="fab fa-instagram"></a>
    <a href="#" class="fab fa-linkedin"></a>
    <a href="#" class="fab fa-pinterest"></a>
  </div>
  <!-- لینک‌های سریع فوتر -->
  <div class="links">
    <a href="#home">خانه</a>
    <a href="#about">درباره ما</a>
    <a href="#menu">منوی کافه</a>
    <a href="#product">محصولات</a>
    <a href="#reviews">نظرات کاربران</a>
    <a href="#contact">تماس باما</a>
    <a href="#blogs">وبلاگ</a>
  </div>
  <!-- اطلاعات حقوقی و معرفی سازنده -->
  <div class="credit">
    طراحی‌شده توسط <span>replywp.com</span> | تمامی حقوق محفوظ است
  </div>
</footer>

</div>

<a href="#about">درباره ما</a>

<a href="#product">محصولات</a>

<a href="#reviews">نظرات کاربران</a>

<a href="#blogs">وبلاگ</a>

</div>

طراحی‌شده توسط <span>replywp.com</span> | تمامی حقوق محفوظ است

</div>

</footer>

توضیح گام به گام بخش فوتر

تگ <footer> با کلاس “footer”:
- این تگ کل فوتر صفحه را در بر می‌گیرد و در انتهای صفحه نمایش داده می‌شود.
بخش “share”:
- تگ <div class="share"> شامل لینک‌های شبکه‌های اجتماعی است.
- از آیکون‌های Font Awesome (مثلاً کلاس‌های fab fa-facebook-f و … ) استفاده شده تا کاربر بتواند با کلیک روی آن‌ها به صفحات شبکه‌های اجتماعی مربوطه هدایت شود.
بخش “links”:
- تگ <div class="links"> شامل لینک‌های سریع به بخش‌های مختلف سایت است.
- این لینک‌ها به کاربران کمک می‌کنند تا به سرعت به بخش‌های اصلی (خانه، درباره ما، منوی کافه و غیره) دسترسی پیدا کنند.
بخش “credit”:
- تگ <div class="credit"> شامل اطلاعات حقوقی و معرفی سازنده یا شرکت طراحی وبسایت است.
- استفاده از تگ <span> در اینجا برای تأکید بر نام سازنده به کار رفته است.

CSS وبلاگ و فوتر

استایل‌های مربوط به وبلاگ و فوتر به این صورت است:

/* وبلاگ */
.blogs .box-container .box {
  padding: 0;
  text-align: right;
}
.blogs .box-container .box .image img {
  width: 100%;
  object-fit: cover;
  margin-bottom: 1.6rem;
}
.blogs .box-container .box .content {
  padding: 0 2rem;
}
.blogs .box-container .box .title {
  font-size: 2.5rem;
  line-height: 1.5;
  color: var(--textColor);
}

/* فوتر */
.footer {
  background: var(--black);
  text-align: center;
}
.footer .share {
  padding: 1rem 0;
}
.footer .share a {
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  color: var(--textColor);
  border: var(--border);
  margin: 0.3rem;
  border-radius: 50%;
}
.footer .share a:hover,
.footer .links a:hover {
  background-color: var(--colorMain);
}
.footer .links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2rem 0;
  gap: 1rem;
}
.footer .links a {
  padding: 0.7rem 2rem;
  color: var(--textColor);
  border: var(--border);
  font-size: 2rem;
}
.footer .credit {
  font-size: 2rem;
  color: var(--textColor);
  padding: 1.5rem;
}
.footer .credit span {
  color: var(--colorMain);
}

/* وبلاگ */

.blogs .box-container .box {

padding: ;

text-align: right;

}

.blogs .box-container .box .image img {

width: 100%;

object-fit: cover;

margin-bottom: 1.6rem;

}

.blogs .box-container .box .content {

padding: 2rem;

}

.blogs .box-container .box .title {

font-size: 2.5rem;

line-height: 1.5;

color: var(--textColor);

}

/* فوتر */

.footer {

background: var(--black);

text-align: center;

}

.footer .share {

padding: 1rem ;

}

.footer .share a {

height: 5rem;

width: 5rem;

line-height: 5rem;

font-size: 2rem;

color: var(--textColor);

border: var(--border);

margin: 0.3rem;

border-radius: 50%;

}

.footer .share a:hover,

.footer .links a:hover {

background-color: var(--colorMain);

}

.footer .links {

display: flex;

justify-content: center;

flex-wrap: wrap;

padding: 2rem ;

gap: 1rem;

}

.footer .links a {

padding: 0.7rem 2rem;

color: var(--textColor);

border: var(--border);

font-size: 2rem;

}

.footer .credit {

font-size: 2rem;

color: var(--textColor);

padding: 1.5rem;

}

.footer .credit span {

color: var(--colorMain);

}

توضیح به زبان ساده

در بخش وبلاگ، ما مقالات و اخبار جذاب را به همراه تصاویر و خلاصه‌ای از محتوا نمایش می‌دهیم.
فوتر نیز شامل لینک‌های سریع، آیکون‌های شبکه‌های اجتماعی و اطلاعات حقوقی است تا در انتهای صفحه همه چیز به زیبایی چیده شود.

۹. استایل‌های واکنشگرا (Media Queries)

CSS واکنشگرا

برای اطمینان از نمایش صحیح سایت در دستگاه‌های مختلف، از Media Queries استفاده شده است:

@media (max-width: 991px) {
  .container {
    width: 100%;
  }
  #menu-btn {
    display: block;
  }
  .header .navbar {
    position: absolute;
    top: 100%;
    right: -100%;
    background-color: var(--textColor);
    width: 30rem;
    height: calc(100vh - 9.5rem);
  }
  .header .navbar a {
    display: block;
    margin: 1.5rem;
    padding: 0.5rem;
    font-size: 2rem;
    color: var(--black);
  }
  .header .navbar.active {
    right: 0;
  }
  .header .icons {
    display: flex;
  }
  .header .search-form {
    width: 98%;
    left: 0;
  }
  html {
    font-size: 55%;
  }
  .home {
    background-position: left;
    justify-content: center;
    align-items: center;
  }
  .home .content {
    max-width: 90%;
    text-align: center;
  }
  .home .content h3 {
    font-size: 4.5rem;
  }
}

@media (max-width: 991px) {

.container {

width: 100%;

}

#menu-btn {

display: block;

}

.header .navbar {

position: absolute;

top: 100%;

right: -100%;

background-color: var(--textColor);

width: 30rem;

height: calc(100vh - 9.5rem);

}

.header .navbar a {

display: block;

margin: 1.5rem;

padding: 0.5rem;

font-size: 2rem;

color: var(--black);

}

.header .navbar.active {

right: ;

}

.header .icons {

display: flex;

}

.header .search-form {

width: 98%;

left: ;

}

html {

font-size: 55%;

}

.home {

background-position: left;

justify-content: center;

align-items: center;

}

.home .content {

max-width: 90%;

text-align: center;

}

.home .content h3 {

font-size: 4.5rem;

}

توضیح به زبان ساده

این بخش باعث می‌شود تا سایت در اندازه‌های کوچک‌تر (مانند موبایل) به درستی نمایش داده شود.

تغییر اندازه کانتینر: عرض کانتینرها به ۱۰۰% می‌رسد.
نمایش منوی موبایل: دکمه منو فعال شده و منو به صورت عمودی نمایش داده می‌شود.
تنظیم اندازه فونت‌ها: اندازه کلی فونت کاهش یافته تا خوانایی در صفحه‌های کوچک حفظ شود.

نتیجه‌گیری

در این مقاله، با هم به صورت گام به گام و با زبان ساده و دوستانه، تمامی مباحث استایل‌دهی قالب فرشگاهی «کافه پاسخ وردپرس» را بررسی کردیم. از تعریف فونت‌های سفارشی و متغیرهای CSS گرفته تا ریست استایل‌ها و استایل‌دهی بخش‌های هدر، صفحه اصلی، درباره ما، منو، محصولات، نظرات مشتریان، تماس با ما، وبلاگ و فوتر، همه به تفصیل توضیح داده شد. استفاده از Media Queries نیز باعث می‌شود که سایت شما در تمامی دستگاه‌ها زیبا و واکنشگرا نمایش داده شود.

اگر شما به دنبال یادگیری بیشتر و مشاهده آموزش‌های ویدیویی عملی هستید، پیشنهاد می‌کنم حتماً به کانال یوتیوب پاسخ وردپرس مراجعه کنید. در کانال، یک آموزش ویدیویی کامل با توضیحات جامع و مثال‌های عملی قرار داده شده است که به شما کمک می‌کند تا با قدم به قدم پیش رفتن در دنیای طراحی وب، پروژه‌های خود را به بهترین شکل بسازید.

جمع‌بندی

در این مقاله جامع، تمامی سورس کدهای CSS قالب فرشگاهی «کافه پاسخ وردپرس» را به صورت گام به گام بررسی کردیم. از تعریف فونت‌های سفارشی و متغیرهای CSS، ریست استایل‌های پیش‌فرض تا استایل‌دهی بخش‌های مختلف مانند هدر، صفحه اصلی، درباره ما، منو، محصولات، نظرات مشتریان، تماس با ما، وبلاگ و فوتر به تفصیل توضیح داده شد. همچنین نحوه استفاده از Media Queries برای واکنشگرا کردن سایت نیز بررسی شد.

این توضیحات به شما کمک می‌کند تا به عنوان یک توسعه‌دهنده یا طراح وب، اصول و مبانی آموزش html css را به‌خوبی فرا گیرید و در پروژه‌های خود به کار ببرید. اگر دوست دارید آموزش‌های عملی بیشتری داشته باشید، پیشنهاد می‌کنم به سایر مقالات آموزشی و ویدئوهای موجود در کانال مراجعه کنید.

نتیجه‌گیری

با مطالعه دقیق این مقاله، شما با تمامی جنبه‌های استایل‌دهی در قالب فرشگاهی «کافه پاسخ وردپرس» آشنا شدید. از تعریف فونت‌ها و متغیرهای CSS تا ریست استایل‌های پیش‌فرض، استایل‌دهی بخش‌های مختلف صفحه و بهینه‌سازی واکنشگرا، تمامی مباحث به صورت جامع توضیح داده شده‌اند. این آموزش به عنوان یکی از منابع کاربردی آموزش html css می‌تواند نقطه شروعی عالی برای توسعه و بهبود مهارت‌های طراحی وب شما باشد.

برای مشاهده منابع بیشتر و دریافت فایل تمرینی، حتماً به بخش‌های آموزش HTML و آموزش CSS در وب‌سایت مراجعه کنید. همچنین از نظرات و پیشنهادات شما استقبال می‌کنیم.

با آرزوی موفقیت در مسیر طراحی وب، امیدوارم این آموزش برای شما مفید و کاربردی واقع شود.

میانگین رتبه 5/5 تعداد رای : 2

بررسی گام به گام کدهای HTML

🚀 آموزش ویدیویی کامل 🚀

۱. ساختار کلی HTML

بخش Head در HTML

کد کامل بخش Head

توضیح گام به گام

بخش CSS: استایل‌دهی کامل قالب فرشگاهی

۱. تعریف فونت‌ها و متغیرهای اصلی

کد فونت‌ها

توضیح:

۲. ریست استایل‌ها و تنظیمات کلی

توضیح:

۳. استایل‌دهی به بخش‌های مختلف

۱. بخش هدر (Header)

HTML هدر

CSS هدر

توضیح به زبان ساده

۲. بخش صفحه اصلی (Home)

HTML صفحه اصلی

CSS صفحه اصلی

توضیح به زبان ساده

۳. بخش درباره ما (About)

HTML درباره ما

CSS درباره ما

توضیح به زبان ساده

۴. بخش منو (Menu)

HTML منو

CSS منو

توضیح به زبان ساده

۵. بخش محصولات (Product)

HTML محصولات

CSS محصولات

توضیح به زبان ساده

۶. بخش نظرات مشتریان (Reviews)

HTML نظرات مشتریان

CSS نظرات مشتریان

توضیح به زبان ساده

۷. بخش تماس با ما (Contact)

HTML تماس

CSS تماس

توضیح به زبان ساده

۸. بخش وبلاگ (Blogs) و فوتر (Footer)

الف) بخش وبلاگ (Blogs)

کد HTML بخش وبلاگ

توضیح گام به گام بخش وبلاگ

ب) بخش فوتر (Footer)

کد HTML بخش فوتر

توضیح گام به گام بخش فوتر

CSS وبلاگ و فوتر

توضیح به زبان ساده

۹. استایل‌های واکنشگرا (Media Queries)

CSS واکنشگرا

توضیح به زبان ساده

نتیجه‌گیری

جمع‌بندی

نتیجه‌گیری

مطالب مرتبط

انصراف

نظرات

بهترین دوره آموزش tailwindcss چیست و چه ویژگی هایی دارد؟

آموزش طراحی قالب دیجی کالا با flexbox

آموزش طراحی قالب واکنشگرا Responsive در css

آموزش CSS صفر تا ۱۰۰ رایگان پروژه طراحی قالب ۲۰۲۳

آموزش طراحی قالب وردپرس ❤️ رایگان ۲۰۲۳

دوره ساخت ابزارک widgets حرفه ای در وردپرس

آموزش طراحی قالب فروشگاهی وردپرس

آموزش html از صفر تا ۱۰۰ همراه HTML5

آموزش طراحی قالب وردپرس ❤️طراحی قالب وردپرس ۲۰۲۴

سفارشی سازی صفحه ورود ثبت نام وردپرس

آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش php ساخت CMS پیشرفته

آموزش طراحی سایت HTML5 CSS3 با bootstrap 5

آموزش طراحی UI سایت,طراحی قالب دیجی کالا در فتوشاپ

ایجاد حساب کاربری