آموزش طراحی فرم لاگین با HTML و CSS

آموزش طراحی فرم لاگین با HTML و CSS

جلسه 1
اسلایدر کارت وبلاگ متحرک با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

جلسه 2
آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

جلسه 3
نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

جلسه 4
ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

جلسه 5
مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

جلسه 6
ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

جلسه 7
ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

جلسه 8
ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

جلسه 9

شما در حال مشاهده
جلسه 10 هستید

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

جلسه 10
آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

جلسه 11
افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

جلسه 12
آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

جلسه 13
ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

جلسه 14
آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

جلسه 15
آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

جلسه 16
ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

جلسه 17
آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

جلسه 18
آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

جلسه 19
آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

جلسه 20
ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

جلسه 21
آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

جلسه 22
آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

جلسه 23
طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

جلسه 24
طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

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

جلسه 25
آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

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

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

جلسه 27

مدرس دوره

نبی عبدی

زمان ویدیو

31:45 دقیقه

برو به دیگر جلسات

مینی پروژه HTML و CSS

برای دانلود ویدیو

وارد شوید

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

منتشر شده در تاریخ : 27 مرداد 1401

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

طراحی پروفایل کارت

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

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در جاوا اسکریپت را مشاهده کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navid Dev - Card With Dynamic Themes</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <img src="./naviddev.jpg" alt="profile img" />
        <h2>Navid Dev</h2>
        <h3>Senior Web Developer</h3>
        <div class="details">
          <div class="col">
            <h4>1.5K</h4>
            <span>Followers</span>
          </div>
          <div class="col">
            <h4>369</h4>
            <span>Following</span>
          </div>
        </div>
        <div class="buttons">
          <button>Follow</button>
          <button>Message</button>
        </div>
      </div>
      <div class="themes">
        <button class="btn btn1"></button>
        <button class="btn btn2"></button>
        <button class="btn btn3"></button>
        <button class="btn btn4"></button>
        <button class="btn btn5"></button>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در جاوا اسکریپت را مشاهده کنید.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
:root {
  --theme-color: #ff1756;
}
body {
  background-color: #c1e0ff;
  font-family: "Poppins", sans-serif;
}
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.card {
  height: 420px;
  width: 350px;
  background: linear-gradient(to bottom, var(--theme-color) 110px, #fff 110px);
  border-radius: 28px;
  padding: 50px 25px;
}
img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 0 8px #fff;
}
.card h2 {
  color: var(--theme-color);
  font-size: 20px;
  margin: 15px 0 5px 0;
}
.card h3 {
  color: #454545;
  font-weight: 400;
  font-size: 16px;
}
.card * {
  text-align: center;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.details,
.buttons {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
.details h4 {
  font-weight: 400;
}
.details span {
  color: var(--theme-color);
}
.buttons button {
  width: 130px;
  padding: 12px 0;
  border-radius: 25px;
  border: 3px solid var(--theme-color);
  cursor: pointer;
  background-color: var(--theme-color);
  color: #fff;
}
.buttons button:last-child {
  background-color: transparent;
  color: var(--theme-color);
}
.themes {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 50px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
}
.themes button {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid #d1f0ff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
.themes button:hover {
  border: 3px solid #6dceff;
}
.btn1 {
  background-color: #3498db;
}
.btn2 {
  background-color: #ff1756;
}
.btn3 {
  background-color: #1cb65d;
}
.btn4 {
  background-color: #8e44ad;
}
.btn5 {
  background-color: #f4b932;
}

کدهای جاوا اسکریپت پروژه

در زیر می‌توانید کدهای جاوا اسکریپت مربوط به مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در جاوا اسکریپت را مشاهده کنید.

const theme = document.querySelector(":root");
const btns = document.querySelectorAll(".btn");

btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const color = e.currentTarget.classList;
    if (color.contains("btn1")) {
      theme.style.setProperty("--theme-color", "#3498db");
    } else if (color.contains("btn2")) {
      theme.style.setProperty("--theme-color", "#ff1756");
    } else if (color.contains("btn3")) {
      theme.style.setProperty("--theme-color", "#1cb65d");
    } else if (color.contains("btn4")) {
      theme.style.setProperty("--theme-color", "#8e44ad");
    } else if (color.contains("btn5")) {
      theme.style.setProperty("--theme-color", "#f4b932");
    }
  });
});

جمع بندی

در انتها امیدواریم که آموزش ساخت مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در HTML CSS و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

3/5 - (2 امتیاز)

دیدگاه و پرسش

آموزش‌های ویدیویی جدید فقط در یوتیوب منتشر می‌شود!

بزن بریــم!