@import url('https://fonts.googleapis.com/css2?family=Poppin
*{

box-sizing: border-box;

}

body{

margin: 0;

background-color: #cd094e;

font-family: "Poppins", sans-serif;

}

header{

background-color: #0615de;

padding: 1rem;

display: flex;

justify-content: flex-end;

}

.search {

padding: 0.5rem 1rem;

border-radius: 50px;

border: 2px solid #22254b;

background-color: transparent;

font-family: inherit;

color: #eee;

font-size: 1rem;

}

.search::placeholder{

color: #afb2dc;

}

.search:focus{

outline: none;

background-color: #05082c;

}

main{

display: flex;

flex-wrap: wrap;

}

/* ye baad me dekhte hai */

.movie{

box-shadow: 0 4px 5px rgba(0,0,0,0.2);

border-radius: 3px;

width: 300px;

background-color: #0d1dd2;

margin: 1rem;

overflow: hidden;

position: relative;

}

.movie img{

width: 100%;

}

.movie-info{

display: flex;

justify-content: space-between;

padding: 0.5rem 1rem 1rem;

color: #eee;

letter-spacing: 0.5px;

align-items: center;

}

.movie-info h3{

margin: 0;

}

.movie-info span{

background-color: #22254b;

padding: 0.25rem 0.5rem;

border-radius: 3px;

font-weight: bold;

}
movie-info span.green{
color: rgb(46, 194, 46);
}
.movie-info span.orange{
color: orange;
}
.movie-info span.red{
color: red;
}
.overview{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #fff;
padding: 2rem;
transform: translateY(100%);
transition: transform 1s ease-in;
max-width: 100%;
overflow: auto;
}
.movie:hover .overview{
transform: translateY(0);
}
.overview h4{
margin-top: 0;
}

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

💎 Channel: @htmlcss_channels

JavaScript Code For Movie Website:-

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

const IMGPATH = "https://image.tmdb.org/t/p/w1280";

const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

// ye HTML WALE TAG

const main = document.getElementById("main");

const form = document.getElementById("form");

const search = document.getElementById("search");

///initalyy get fav movies

getMovies(APIURL);

async function getMovies(url) {

const resp = await fetch(url);

const respData = await resp.json();

// movie aa gyi

console.log(respData);

// yaha pe show karenge

showMovies(respData.results);

}

function showMovies(movies) {

//clear main

main.innerHTML = "";

movies.forEach((movie) => {

const { poster_path, title, vote_average, overview } = movie;

// raja

const movieEl = document.createElement("div");

movieEl.classList.add("movie");

movieEl.innerHTML = 

<img src="${IMGPATH + poster_path}" alt="${title}"/>

<div class="movie-info">

<h3>${title}</h3>

<span class="${getClassByRate(vote_average)}">${vote_average}</span>

</div> 

<div class="overview">

<h2>Overview:</h2>

${overview}

</div>

;

main.appendChild(movieEl)

});

}

function getClassByRate(vote) {
return 'green';

} else if (vote >= 5) {

return 'orange'

} else {

return 'red';

}

}

form.addEventListener("submit", (e) => {

e.preventDefault();

const searchTerm = search.value;

if (searchTerm) {

getMovies(SEARCHAPI + searchTerm);

search.value = "";

}

});

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


💎 Channel: @htmlcss_channels

Whatsapp Logo | HTML CSS


اگه این پست برای شما مفید بوده با لایک و ری اکشن بهمون انرژی بدید ❤️

💎 Channel: @htmlcss_channels

body {
    margin: 0;
    padding: 0;
    background: lightblue;
}

div {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #3AC371;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.white {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}


.white::before {
    content: "";
    top: 65px;
    left: -15px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    transform: rotate(-50deg) rotateX(-55deg);
}

.white::after {
    content: "";
    top: 63px;
    left: -4px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #3AC371 transparent transparent;
    position: absolute;
    transform: rotate(-51deg) rotateX(-50deg);
}

.fas {
    left: 17px;
    top: 18px;
    position: absolute;
    font-size: 35px;
    color: #fff;
    transform: rotate(90deg);
}

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


💎 Channel: @htmlcss_channels

Smoke | HTML CSS



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

💎 Channel: @htmlcss_channels

HTML & CSS


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

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

Simple implementation of Dropdown Menu in HTML & CSS

HTML:

  <div class="dropdown">
    <button class="dropbtn">Menu</button>
    <div class="dropdown-content">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
  </div>

CSS:

.dropdown {
  position: relative;
  left: 200px;
  top: 200px;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

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

💎 Channel: @htmlcss_channels

Instagram Logo |  HTML CSS


اگه این پست برای شما مفید بوده با لایک و ری اکشن بهمون انرژی بدید ❤️

💎 Channel: @htmlcss_channels

* {
  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