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

0 دیدگاه 61 آموزش تکنیک های css

در این آموزش جامع، پروژه “فرم ورود / ثبت نام سه بعدی” را به‌صورت کامل و گام به گام با استفاده از HTML و CSS بررسی می‌کنیم. این پروژه نمونه‌ای جذاب و کاربردی است که در آن یک فرم ورود و ثبت‌نام با افکت سه‌بعدی طراحی شده است. هدف این آموزش، یادگیری مفاهیم پایه و پیشرفته طراحی وب به صورت پروژه محور است. در ادامه، بخش به بخش کدهای HTML و CSS پروژه را توضیح می‌دهیم تا حتی افرادی که از صفر شروع می‌کنند، بتوانند به راحتی آن را درک و اجرا کنند.

همچنین اگر به دنبال آموزش‌های html و css پروژه محور و آموزش‌های html و css رایگان هستید، پیشنهاد می‌کنیم به سایت
پاسخ وردپرس
و بخش
Essential CSS Tricks
مراجعه کنید.
برای مشاهده آموزش ویدیویی کامل این پروژه، حتماً به کانال یوتیوب پاسخ وردپرس مراجعه کنید:
مشاهده ویدیوها

مقدمه

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

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

این آموزش برای کسانی مناسب است که به دنبال آموزش html، آموزش html css، و همچنین آموزش html و css پروژه محور هستند. در ادامه هر بخش از کد پروژه را با جزئیات بررسی می‌کنیم.

بخش اول: بررسی HTML پروژه

۱. ساختار سند HTML

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- محتوای صفحه در اینجا قرار می‌گیرد -->
  </body>
</html>

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"

integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="

crossorigin="anonymous"

referrerpolicy="no-referrer"

</head>

<body>

</body>

</html>

توضیحات:

<!DOCTYPE html>: مشخص می‌کند که سند به زبان HTML5 نوشته شده است.
<html lang=”fa” dir=”rtl”>: تعیین می‌کند که زبان محتوا فارسی و جهت نوشتار از راست به چپ است.
بخش <head> شامل اطلاعات متا، عنوان صفحه و لینک‌دهی به فایل‌های CSS (شامل کتابخانه FontAwesome برای آیکون‌ها و فایل استایل اختصاصی) می‌باشد.

۲. منوی ناوبری (Navigation Bar)

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

<nav class="navbar">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="logo">پاسخ <span>وردپرس</span></div>
      <input type="checkbox" id="click" />
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a href="#" class="active">خانه</a></li>
        <li><a href="#"> درباره ما </a></li>
        <li><a href="#"> خدمات </a></li>
        <li><a href="#"> گالری </a></li>
        <li><a href="#"> باز خورد </a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="logo">پاسخ <span>وردپرس</span></div>

</label>

<ul>

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

<li><a href="#"> خدمات </a></li>

<li><a href="#"> گالری </a></li>

</ul>

</div>

</nav>

توضیحات:

<nav class=”navbar”>: بخش ناوبری با کلاس “navbar” که در CSS به‌صورت ثابت (fixed) و در بالای صفحه قرار گرفته است.
<div class=”logo”>: شامل نام سایت است؛ در اینجا “پاسخ وردپرس” به صورت ترکیبی از متن عادی و تگ <span> برای برجسته‌سازی قسمت “وردپرس”.
<input type=”checkbox” id=”click” /> و <label for=”click” class=”menu-btn”>: این دو تگ به کنترل منوی همبرگر در نمایش موبایل کمک می‌کنند.
<ul>: لیست آیتم‌های منو که در داخل هر تگ <li>، لینک‌های مربوط به صفحات مختلف قرار گرفته‌اند.

۳. بخش اصلی صفحه (Section)

صفحه به دو قسمت تقسیم شده است: بخش سمت چپ (معرفی و توضیحات) و بخش سمت راست (فرم ورود/ثبت‌نام سه بعدی).

<section>
  <div class="container">
    <div class="row full-screen align-items-center">
      <!-- بخش سمت چپ -->
      <div class="left">
        <span class="line"></span>
        <h2>
          سلام، من زمان الله ابراهیمی هستم، یک
          <span>طراح دیجیتال</span>
        </h2>
        <p>آموزش طراحی وب با استفاده از HTML و CSS</p>
        <a href="#" class="btn">تماس</a>
        <div class="social-media">
          <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
          <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
          <a href="#"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-youtube"></i></a>
          <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
        </div>
      </div>
      <!-- بخش سمت راست -->
      <div class="right">
        <!-- فرم ورود/ثبت نام سه بعدی -->
        <div class="form">
          <div class="text-center">
            <h6><span>ورود</span><span>ثبت نام</span></h6>
            <input type="checkbox" class="checkbox" id="reg-log" />
            <label for="reg-log"></label>
            <div class="card-3d-wrap">
              <div class="card-3d-wrapper">
                <!-- فرم ورود (قسمت جلویی کارت) -->
                <div class="card-front">
                  <div class="center-wrap">
                    <h4 class="heading">ورود</h4>
                    <div class="form-group">
                      <input
                        type="email"
                        class="form-style"
                        placeholder="ایمیل شما"
                      />
                      <i class="input-icon far fa-envelope"></i>
                    </div>
                    <div class="form-group">
                      <input
                        type="password"
                        class="form-style"
                        placeholder="رمز عبور شما"
                      />
                      <i class="input-icon fas fa-lock"></i>
                    </div>
                    <a href="#" class="btn">ارسال</a>
                    <p class="text-center">
                      <a href="#" class="link">رمز عبور خود را فراموش کرده‌اید؟</a>
                    </p>
                  </div>
                </div>
                <!-- فرم ثبت نام (قسمت پشتی کارت) -->
                <div class="card-back">
                  <div class="center-wrap">
                    <h4 class="heading">ثبت نام</h4>
                    <div class="form-group">
                      <input
                        type="text"
                        class="form-style"
                        placeholder="نام شما"
                      />
                      <i class="input-icon far fa-user"></i>
                    </div>
                    <div class="form-group">
                      <input
                        type="email"
                        class="form-style"
                        placeholder="ایمیل شما"
                      />
                      <i class="input-icon far fa-envelope"></i>
                    </div>
                    <div class="form-group">
                      <input
                        type="password"
                        class="form-style"
                        placeholder="رمز عبور شما"
                      />
                      <i class="input-icon fas fa-lock"></i>
                    </div>
                    <a href="#" class="btn">ارسال</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- پایان فرم -->
      </div>
    </div>
  </div>
</section>

<h2>

سلام، من زمان الله ابراهیمی هستم، یک

<span>طراح دیجیتال</span>

</h2>

<p>آموزش طراحی وب با استفاده از HTML و CSS</p>

</div>

<input

type="email"

class="form-style"

placeholder="ایمیل شما"

</div>

<input

type="password"

class="form-style"

placeholder="رمز عبور شما"

</div>

<a href="#" class="btn">ارسال</a>

<a href="#" class="link">رمز عبور خود را فراموش کرده‌اید؟</a>

</p>

</div>

<input

type="text"

class="form-style"

placeholder="نام شما"

</div>

<input

type="email"

class="form-style"

placeholder="ایمیل شما"

</div>

<input

type="password"

class="form-style"

placeholder="رمز عبور شما"

</div>

<a href="#" class="btn">ارسال</a>

</div>

</div>

</section>

طراحی وب سایت خودرو با استفاده از انیمیشن های CSS و HTML

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

توضیحات:

بخش سمت چپ (div.left): شامل یک خط تزئینی، عنوان خوشامدگویی با معرفی شخص (طراح دیجیتال)، یک توضیح کوتاه و دکمه تماس است. همچنین آیکون‌های شبکه‌های اجتماعی برای ارتباطات درج شده‌اند.
بخش سمت راست (div.right): فرم ورود/ثبت‌نام سه بعدی در این بخش قرار دارد.
- تگ <input type="checkbox" class="checkbox" id="reg-log" />: کنترل چرخش کارت (از ورود به ثبت‌نام) را بر عهده دارد.
- تگ <label for="reg-log"></label>: نمایش کنترل بصری برای تغییر فرم.
- ساختار ۳D فرم:
  - div.card-3d-wrap و div.card-3d-wrapper ظرف کلی کارت سه بعدی هستند.
  - div.card-front فرم ورود را نشان می‌دهد.
  - div.card-back فرم ثبت‌نام را نمایش می‌دهد.
- داخل هر بخش فرم، از تگ‌های <div class="form-group"> برای گروه‌بندی فیلدهای ورودی، تگ‌های <input> برای دریافت اطلاعات و تگ‌های <i> برای آیکون‌های همراه استفاده شده است.

بخش دوم: بررسی CSS پروژه

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

۱. بارگذاری فونت اختصاصی

@font-face {
  font-family: "iran-s";
  src: url("fonts/IRANSansWeb.ttf") format("truetyp"),
    url("fonts/IRANSansWeb.woff") format("woff");
}

@font-face {

font-family: "iran-s";

src: url("fonts/IRANSansWeb.ttf") format("truetyp"),

url("fonts/IRANSansWeb.woff") format("woff");

}

توضیح:
این دستور فونت “iran-s” را از مسیر مشخص بارگذاری می‌کند تا در سراسر پروژه مورد استفاده قرار گیرد.

۲. تعریف متغیرهای رنگ و سایه در :root

:root {
  --mainColor: #dc143c;
  --black: #000;
  --white: #fff;
  --whiteSmoke: #c4c3ca;
  --shadow: 0px 4px 8px 0 rgba(21, 21, 21, 0.2);
}

:root {

--mainColor: #dc143c;

--black: #000;

--white: #fff;

--whiteSmoke: #c4c3ca;

--shadow: 0px 4px 8px rgba(21, 21, 21, 0.2);

}

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

آموزش طراحی وبسایت با HTML و CSS: ایجاد یک قالب ساده و کاربردی

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

۳. استایل‌های عمومی و تنظیمات پایه

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "iran-s";
  font-size: 16px;
  font-weight: normal;
  background-color: var(--black);
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
.container {
  max-width: 1080px;
  margin: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.justify-content-between {
  justify-content: space-between;
}
.align-items-center {
  align-items: center;
}
.full-screen {
  min-height: 100vh;
  padding: 80px 0 0;
}
.text-center {
  text-align: center;
}

* {

margin: ;

padding: ;

box-sizing: border-box;

}

body {

font-family: "iran-s";

font-size: 16px;

font-weight: normal;

background-color: var(--black);

}

a {

text-decoration: none;

}

ul {

list-style-type: none;

}

.container {

max-width: 1080px;

margin: auto;

}

.row {

display: flex;

flex-wrap: wrap;

}

.justify-content-between {

justify-content: space-between;

}

.align-items-center {

align-items: center;

}

.full-screen {

min-height: 100vh;

padding: 80px ;

}

.text-center {

text-align: center;

}

توضیح:

تنظیم صفر کردن مارجین و پدینگ برای همه المان‌ها و تعیین box-sizing به صورت border-box.
تنظیم فونت پیش‌فرض، پس‌زمینه سیاه و تعریف کلاس‌های عمومی مانند container، row و کلاس‌های کمکی برای چینش محتوا.

۴. استایل‌دهی منوی ناوبری

nav {
  width: 100%;
  background-color: var(--black);
  position: fixed;
  z-index: 999;
  padding: 25px;
}
nav .logo {
  color: var(--white);
  font-size: 32px;
  font-weight: 600;
}
nav .logo span {
  color: var(--mainColor);
}
nav .menu-btn i {
  color: var(--white);
  font-size: 28px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"] {
  display: none;
}
nav .container {
  padding: 0 25px;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
}
nav ul li {
  margin: 0 5px;
}
nav ul li a {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
  color: var(--mainColor);
  background: var(--white);
}

nav {

width: 100%;

background-color: var(--black);

position: fixed;

z-index: 999;

padding: 25px;

}

nav .logo {

color: var(--white);

font-size: 32px;

font-weight: 600;

}

nav .logo span {

color: var(--mainColor);

}

nav .menu-btn i {

color: var(--white);

font-size: 28px;

cursor: pointer;

display: none;

}

input[type="checkbox"] {

display: none;

}

nav .container {

padding: 25px;

}

nav ul {

display: flex;

flex-wrap: wrap;

}

nav ul li {

margin: 5px;

}

nav ul li a {

color: var(--white);

font-size: 16px;

font-weight: 600;

padding: 8px 15px;

border-radius: 5px;

transition: all 0.3s ease;

}

nav ul li a.active,

nav ul li a:hover {

color: var(--mainColor);

background: var(--white);

}

توضیح:

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

۵. استایل‌بندی بخش‌های اصلی صفحه (سمت چپ و راست)

.left,
.right {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 20px;
}
.left .line {
  width: 15%;
  height: 2px;
  background-color: var(--mainColor);
  display: inline-block;
}
.left h2 {
  margin-top: 25px;
  font-size: 50px;
  color: var(--white);
  line-height: 70px;
}
.left h2 span {
  color: var(--mainColor);
  font-size: 52px;
}
.left p {
  color: var(--whiteSmoke);
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.btn {
  height: 44px;
  padding: 0 30px;
  background-color: var(--mainColor);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  margin-top: 15px;
  box-shadow: 0 8px 24px 0 rgba(228, 10, 257, 0.2);
  transition: all 0.2s ease;
}
.btn:hover {
  box-shadow: 0 8px 24px 0 rgba(138, 140, 146, 0.2);
  color: var(--mainColor);
  background-color: var(--white);
}

.left,

.right {

flex: 50%;

max-width: 50%;

padding: 20px;

}

.left .line {

width: 15%;

height: 2px;

background-color: var(--mainColor);

display: inline-block;

}

.left h2 {

margin-top: 25px;

font-size: 50px;

color: var(--white);

line-height: 70px;

}

.left h2 span {

color: var(--mainColor);

font-size: 52px;

}

.left p {

color: var(--whiteSmoke);

font-size: 16px;

margin-top: 20px;

margin-bottom: 10px;

}

.btn {

height: 44px;

padding: 30px;

background-color: var(--mainColor);

border-radius: 4px;

font-size: 13px;

font-weight: 600;

display: inline-flex;

justify-content: center;

align-items: center;

color: var(--white);

margin-top: 15px;

box-shadow: 8px 24px rgba(228, 10, 257, 0.2);

transition: all 0.2s ease;

}

.btn:hover {

box-shadow: 8px 24px rgba(138, 140, 146, 0.2);

color: var(--mainColor);

background-color: var(--white);

}

توضیح:

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

۶. استایل فرم ۳D ورود/ثبت‌نام

.form {
  width: 100%;
  display: flex;
  justify-content: center;
}
.form h6 {
  color: var(--white);
  margin-bottom: 20px;
}
.form h6 span {
  padding: 0 20px;
  font-weight: 700;
  font-size: 16px;
}
.form h4 {
  font-weight: 600;
  color: var(--white);
}
.checkbox:checked + label,
.checkbox:not(:checked) + label {
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--mainColor);
  margin: 10px auto;
  cursor: pointer;
}
.checkbox:checked + label::before,
.checkbox:not(:checked) + label::before {
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--white);
  font-family: "Font Awesome 6 free";
  content: "\f060";
  font-weight: 900;
  z-index: 20;
  top: -10px;
  right: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label::before {
  transform: translateX(-44px) rotate(-212deg);
}
.link {
  color: var(--whiteSmoke);
  margin-top: 20px;
  display: block;
}
.link:hover {
  color: var(--mainColor);
}
.card-3d-wrap {
  position: relative;
  width: 400px;
  max-width: 100%;
  height: 400px;
  margin-top: 60px;
  transform-style: preserve-3d;
  perspective: 800px;
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform-style: preserve-3d;
  transition: all 0.6s ease-out;
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}
.card-front,
.card-back {
  width: 100%;
  height: 100%;
  background-color: #1b1b1b;
  background-image: url("background.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 300%;
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
}
.card-back {
  transform: rotateY(180deg);
}

.form {

width: 100%;

display: flex;

justify-content: center;

}

.form h6 {

color: var(--white);

margin-bottom: 20px;

}

.form h6 span {

padding: 20px;

font-weight: 700;

font-size: 16px;

}

.form h4 {

font-weight: 600;

color: var(--white);

}

.checkbox:checked + label,

.checkbox:not(:checked) + label {

position: relative;

display: block;

text-align: center;

width: 60px;

height: 16px;

border-radius: 8px;

background-color: var(--mainColor);

margin: 10px auto;

cursor: pointer;

}

.checkbox:checked + label::before,

.checkbox:not(:checked) + label::before {

position: absolute;

display: block;

width: 36px;

height: 36px;

border-radius: 50%;

background-color: var(--white);

font-family: "Font Awesome 6 free";

content: "\f060";

font-weight: 900;

z-index: 20;

top: -10px;

right: -10px;

line-height: 36px;

text-align: center;

font-size: 24px;

transition: all 0.5s ease;

}

.checkbox:checked + label::before {

transform: translateX(-44px) rotate(-212deg);

}

.link {

color: var(--whiteSmoke);

margin-top: 20px;

display: block;

}

.link:hover {

color: var(--mainColor);

}

.card-3d-wrap {

position: relative;

width: 400px;

max-width: 100%;

height: 400px;

margin-top: 60px;

transform-style: preserve-3d;

perspective: 800px;

}

.card-3d-wrapper {

width: 100%;

height: 100%;

position: absolute;

top: ;

right: ;

transform-style: preserve-3d;

transition: all 0.6s ease-out;

}

.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {

transform: rotateY(180deg);

}

.card-front,

.card-back {

width: 100%;

height: 100%;

background-color: #1b1b1b;

background-image: url("background.png");

background-position: bottom center;

background-repeat: no-repeat;

background-size: 300%;

position: absolute;

right: ;

top: ;

transform-style: preserve-3d;

}

.card-back {

transform: rotateY(180deg);

}

توضیح:

فرم ۳D شامل دو بخش است:
- card-front: فرم ورود
- card-back: فرم ثبت‌نام
با استفاده از یک چک‌باکس کنترل می‌شود که کدام بخش نمایش داده شود.
انیمیشن چرخش کارت با استفاده از ویژگی‌های transform و transition به‌صورت نرم پیاده‌سازی شده است.

آموزش ساخت صفحه فرم لاگین سایت نتفلیکس ( Netflix )

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

۷. طراحی ریسپانسیو با مدیا کوئری‌ها

@media (max-width: 992px) {
  nav .menu-btn i {
    display: block;
  }
  nav .container {
    padding: 0;
  }
  nav ul {
    position: fixed;
    top: 85px;
    right: -100%;
    background-color: #1b1b1b;
    height: 350px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
  }
  #click:checked ~ ul {
    right: 0;
  }
  nav ul li {
    margin: 20px 0;
  }
  nav ul li a {
    display: block;
    font-size: 20px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    color: var(--mainColor);
    background: none;
  }
  .left h2 {
    font-size: 40px;
  }
  .left h2 span {
    font-size: 42px;
  }
  .left p {
    font-size: 14px;
  }
  .card-3d-wrap {
    width: 350px;
  }
}
@media (max-width: 768px) {
  .left,
  .right {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .left {
    display: grid;
    place-items: center;
    order: 2;
  }
  .right {
    order: 1;
  }
  .left h2 {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .left h2 {
    font-size: 28px;
  }
  .left h2 span {
    font-size: 30px;
  }
  .card-3d-wrap {
    width: 300px;
  }
}

@media (max-width: 992px) {

nav .menu-btn i {

display: block;

}

nav .container {

padding: ;

}

nav ul {

position: fixed;

top: 85px;

right: -100%;

background-color: #1b1b1b;

height: 350px;

width: 100%;

text-align: center;

transition: all 0.3s ease;

display: block;

}

#click:checked ~ ul {

right: ;

}

nav ul li {

margin: 20px ;

}

nav ul li a {

display: block;

font-size: 20px;

}

nav ul li a.active,

nav ul li a:hover {

color: var(--mainColor);

background: none;

}

.left h2 {

font-size: 40px;

}

.left h2 span {

font-size: 42px;

}

.left p {

font-size: 14px;

}

.card-3d-wrap {

width: 350px;

}

@media (max-width: 768px) {

.left,

.right {

flex: 100%;

max-width: 100%;

}

.left {

display: grid;

place-items: center;

order: 2;

}

.right {

order: 1;

}

.left h2 {

text-align: center;

}

@media (max-width: 480px) {

.left h2 {

font-size: 28px;

}

.left h2 span {

font-size: 30px;

}

.card-3d-wrap {

width: 300px;

}

توضیح:

با استفاده از مدیا کوئری‌ها، طراحی صفحه برای اندازه‌های مختلف صفحه (مانند دسکتاپ، تبلت و موبایل) بهینه شده است.
تغییرات مربوط به اندازه فونت‌ها، منو و فرم سه‌بعدی در دستگاه‌های کوچکتر اعمال می‌شود تا تجربه کاربری بهتری ارائه گردد.
نتیجه‌گیری
در این آموزش پروژه محور، ما به صورت کامل و گام به گام نحوه ساخت فرم ورود/ثبت‌نام سه بعدی را با استفاده از HTML و CSS بررسی کردیم. از تنظیمات اولیه سند HTML، لینک‌دهی به فایل‌های CSS و فونت، ایجاد منوی ناوبری، بخش‌های اصلی صفحه (سمت چپ معرفی و سمت راست فرم) تا پیاده‌سازی فرم ۳D با انیمیشن‌های چرخشی، تمامی بخش‌ها به تفصیل توضیح داده شدند.

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

برای مطالعه منابع بیشتر و دریافت نکات کاربردی در زمینه طراحی وب، به سایت
پاسخ وردپرس
و همچنین بخش
Essential CSS Tricks
مراجعه کنید.

همچنین، برای مشاهده آموزش ویدیویی کامل این پروژه، به کانال یوتیوب پاسخ وردپرس به آدرس
مشاهده ویدیوها
سر بزنید.

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

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

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

مقدمه

بخش اول: بررسی HTML پروژه

۱. ساختار سند HTML

۲. منوی ناوبری (Navigation Bar)

۳. بخش اصلی صفحه (Section)

بخش دوم: بررسی CSS پروژه

۱. بارگذاری فونت اختصاصی

۲. تعریف متغیرهای رنگ و سایه در :root

۳. استایل‌های عمومی و تنظیمات پایه

۴. استایل‌دهی منوی ناوبری

۵. استایل‌بندی بخش‌های اصلی صفحه (سمت چپ و راست)

۶. استایل فرم ۳D ورود/ثبت‌نام

۷. طراحی ریسپانسیو با مدیا کوئری‌ها

مطالب مرتبط

انصراف

نظرات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مقدمه

بخش اول: بررسی HTML پروژه

۱. ساختار سند HTML

۲. منوی ناوبری (Navigation Bar)

۳. بخش اصلی صفحه (Section)

بخش دوم: بررسی CSS پروژه

۱. بارگذاری فونت اختصاصی

۲. تعریف متغیرهای رنگ و سایه در :root

۳. استایل‌های عمومی و تنظیمات پایه

۴. استایل‌دهی منوی ناوبری

۵. استایل‌بندی بخش‌های اصلی صفحه (سمت چپ و راست)

۶. استایل فرم ۳D ورود/ثبت‌نام

۷. طراحی ریسپانسیو با مدیا کوئری‌ها

مطالب مرتبط

انصراف

نظرات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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