* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.insta {
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  border-radius: 35px;
  display: grid;
  place-items: center;
}

.innerbox {
  width: 120px;
  height: 120px;
  border: 10px solid #fff;
  border-radius: 32px;
  display: grid;
  place-items: center;
  position: relative;
}

.innerbox::before {
  content: "";
  width: 45px;
  height: 45px;
  border: 10px solid #fff;
  border-radius: 50%;
  background: transparent;
  position: absolute;
}

.innerbox::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 8px;
  right: 10px;
}

💎 Channel: @htmlcss_channels

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

🔖برگه تقلب HTML و XHTML

HTML XHTML Tag Sheet
HTML Cheat Sheet

🔖برگه تقلب HTML5

HTML5 Cheat Sheet

🔖برگه تقلب HTML5 Canvas

HTML5 Canvas Cheat Sheet

🔖برگه تقلب CSS
CSS Cheat Sheet
CSS 2 Cheat Sheet
CSS 3 Cheat Sheet

🔖برگه تقلب JavaScript

JavaScript Cheat Sheet


♨️ چیت شیتهای بیشتری لازم دارید ؟؟ با لایک اطلاع بدید که بازم بفرستم 👍

#cheat_sheet

💎 Channel: @htmlcss_channels

نقشه راه فرانت‌اند (Front-end) به زبان فارسی

ترجمه از AliRadmanesh


#roadmap


💎 Channel: @htmlcss_channels

New Animation | HTML CSS



با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

Style Elements | HTML CSS



با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

♦️از اونجایی که از چیت‌شیت ها استقبال خوبی داشتید و هدف این کانال هم اینه که تمامی ابزارهای طراحی و توسعه سایت در دسترس شما عزیزان باشه که با تمرین و انجام دادن پروژه های مختلف مهارت هاتون رو ارتقا بدید ، یه پکیج کاربردی از برگه های تقلب CSS3 براتون پیدا کردم که امیدوارم استفاده کنید و براتون مفید باشه

♨️ چیت شیتهای بیشتری لازم دارید ؟؟ با لایک اطلاع بدید که بازم بفرستم 👍 اگه هم چیت شیتی دارید که می خواهید با دوستاتون به اشتراک بذارید پی وی برام بفرستید

#cheat_sheet

💎 Channel: @htmlcss_channels

Creates a horizontally scrollable image gallery | HTML & CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

<div class="gallery-container">
  <div class="thumbnails"></div>
  <div class="scrollbar">
    <div class="thumb"></div>
  </div>
  <div class="slides">
    <div><img src="https://picsum.photos/id/1067/540/720"></div>
    <div><img src="https://picsum.photos/id/122/540/720"></div>
    <div><img src="https://picsum.photos/id/188/540/720"></div>
    <div><img src="https://picsum.photos/id/249/540/720"></div>
    <div><img src="https://picsum.photos/id/257/540/720"></div>
    <div><img src="https://picsum.photos/id/259/540/720"></div>
    <div><img src="https://picsum.photos/id/283/540/720"></div>
    <div><img src="https://picsum.photos/id/288/540/720"></div>
    <div><img src="https://picsum.photos/id/299/540/720"></div>
  </div>
</div>
.gallery-container {
  display: flex;
  justify-content: center;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thumbnails img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.scrollbar {
  width: 1px;
  height: 720px;
  background: #ccc;
  display: block;
  margin: 0 0 0 8px;
}

.thumb {
  width: 1px;
  position: absolute;
  height: 0;
  background: #000;
}

.slides {
  margin: 0 16px;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(540px + 1rem);
  padding: 0 0.25rem;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.slides > div {
  scroll-snap-align: start;
}

.slides img {
  width: 540px;
  object-fit: contain;
}

.slides::-webkit-scrollbar {
  display: none;
}
const slideGallery = document.querySelector('.slides');
const slides = slideGallery.querySelectorAll('div');
const scrollbarThumb = document.querySelector('.thumb');
const slideCount = slides.length;
const slideHeight = 720;
const marginTop = 16;

const scrollThumb = () => {
  const index = Math.floor(slideGallery.scrollTop / slideHeight);
  scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`;
};

const scrollToElement = el => {
  const index = parseInt(el.dataset.id, 10);
  slideGallery.scrollTo(0, index * slideHeight + marginTop);
};

document.querySelector('.thumbnails').innerHTML += [...slides]
  .map(
    (slide, i) => `<img src="${slide.querySelector('img').src}" data-id="${i}">`
  )
  .join('');

document.querySelectorAll('.thumbnails img').forEach(el => {
  el.addEventListener('click', () => scrollToElement(el));
});

slideGallery.addEventListener('scroll', e => scrollThumb());

scrollThumb();

با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

Display Emojis Using HTML

➤ <h1> &#128526; </h1> 😎
➤ <h1> &#128578; </h1> 😊
➤ <h1> &#128525; </h1> 😍
➤ <h1> &#129324; </h1> 🤬
➤ <h1> &#128514; </h1> 😂
➤ <h1> &#128520; </h1> 😈
➤ <h1> &#129313; </h1> 🤡
➤ <h1> &#128564; </h1> 😴
➤ <h1> &#129297; </h1> 🤑

با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

پروژه Makar Sankranti با استفاده از Html و Css
  
  
برای ارسال مطالب بیشتر مانند این پست  با ری اکشن بهمون انرژی دهید ❤️


💎 Channel: @htmlcss_channels

نکات و ترفندهای CSS برای حرفه ای ها


💎 Channel: @htmlcss_channels

Buttons | HTML CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

صفحه 404 یکی از صفحه های سایت است که کمتر کسی به آن اهمیت می دهد، غافل از اینکه طراحی این صفحه می تواند به سئوی سایت کمک کند. جدا از بحث سئو، هنگامی که به هر دلیلی صفحه مورد نظر مخاطب با مشکل مواجه شد بهتر است به جای دیدن صفحه بی رنگ 404 سرور، با یک صفحه جذاب رو به رو شود که او را به صفحه اصلی سایت هدایت می کند.

در پست بعد فایل های این قالب جذاب رو می فرستم برای حمایت از ما لطفا ری اکشن بذارید❤️

💎 Channel: @htmlcss_channels

با ری اکشن بهمون انرژی بدید❤️

#page404

💎 Channel: @htmlcss_channels

Navigation-tabs | HTML & CSS & JS


💎 Channel: @htmlcss_channels

با ری اکشن بهم انرژی بدید تا پست های هیجان انگیز بیشتری براتون بذارم ❤️

💎 Channel: @htmlcss_channels

نقشه راه توسعه دهنده وب

#roadmap

💎 Channel: @htmlcss_channels