html and css آموزش – Telegram

html and css آموزش

@htmlcss_channels

21.3K subscribers

444 photos

221 videos

88 files

273 links

ادمین :
@Maryam3771

تعرفه تبلیغات:
https://t.iss.one/alloadv/822

Download Telegram

About

Blog

Apps

Platform

html and css آموزش

21.3K subscribers

html and css آموزش

👍3

16.7K views18:53

html and css آموزش

This media is not supported in your browser

VIEW IN TELEGRAM

با کلیک کردن، رنگ پس زمینه را تغییر دهید

این کد صفحه ای ایجاد می کند که با کلیک کردن یا بارگذاری صفحه، رنگ پس زمینه را تغییر می دهد. هر کلیک یک رنگ تصادفی جدید در قالب HEX ایجاد می کند:

body {
    transition: background-color 0.5s ease;
    margin: 0;
    height: 100vh;
}

function changeBackground() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}
document.body.addEventListener('click', changeBackground);

🆔 @htmlcss_channels

👍36❤10👎4🔥1

9.23K viewsedited 15:24

html and css آموزش

✅ ‌یه سایت خیلی خفن برای ساخت اسکرول بار های شخصی سازی شده برای خودتون

🔥 در اخر بهتون کد css میده که میتونید توی سایتتون ازش استفاده کنید

🌐 https://scrollbar.app

💎 Channel: @htmlcss_channels

Simple CSS scrollbar editor.

❤19👎4👍2🔥1🙏1

7.18K views06:25

html and css آموزش

This media is not supported in your browser

VIEW IN TELEGRAM

Circle Animation | HTML CSS

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

💎 Channel: @htmlcss_channels

❤90👍13🔥12👏4🙏2

6.97K viewsedited 13:35

html and css آموزش

🌐 unocss.dev : The instant on-demand Atomic CSS engine

یه فریمورک css مشابه Tailwind هستش ، اما با فیچر های خفن تر ، اگه قبلاً با Tailwind کار کردید شدیداً پیشنهاد می‌کنم تستش کنید

https://github.com/unocss/unocss

💎 Channel: @htmlcss_channels

👍16❤2🙏1

5.95K viewsedited 05:33

html and css آموزش

This media is not supported in your browser

VIEW IN TELEGRAM

Buttons | HTML CSS

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

💎 Channel: @htmlcss_channels

❤65👏12👍8🔥5

6.38K viewsedited 15:47

html and css آموزش

Frontend Mentor

پلتفرمی است که توسعه دهندگان می توانند چالش های کدنویسی را انجام دهند و پروژه های دنیای واقعی بسازند. چالش‌ها برای آزمایش مهارت‌های شما و کمک به شما در بهبود توانایی‌های حل مسئله طراحی شده‌اند. Frontend Mentor یک راه عالی برای تمرین مهارت‌های توسعه frontend و ایجاد مجموعه‌ای از پروژه‌ها است.

Frontend Mentor

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

💎 Channel: @htmlcss_channels

👍31❤7

6.14K viewsedited 05:39

html and css آموزش

طراحی وب سایت جستجوی فیلم با استفاده از HTML، CSS و جاوا اسکریپت

ابتدا یک هدر با تگ فرم ایجاد می کنیم. در تگ فرم، یک متن ورودی برای نوار جستجو وب سایت فیلم ایجاد می کنیم. سپس یک تگ اصلی ایجاد می کنیم، بنابراین وقتی همه فیلم ها توسط API بارگذاری می شوند، تمام محتوا را در تگ اصلی نشان می دهیم و در انتهای کد، یک فایل جاوا اسکریپت را پیوند می دهیم.

اول از همه، ما برخی از خانواده های فونت را با استفاده از URL فونت گوگل وارد می کنیم و سپس حاشیه را روی "صفر" قرار می دهیم. همچنین، با استفاده از ویژگی background-color، رنگ پس‌زمینه را روی «صورتی تیره» قرار می‌دهیم ، فونتی که استفاده کردیم poppins است.
استایل را به هدر وب سایت اضافه می کنیم. با استفاده از انتخابگر تگ هدر، پس‌زمینه هدر را روی آبی قرار می‌دهیم ، padding را روی 1rem و نوع نمایش را روی «فلکس» تنظیم می‌کنیم.

با استفاده از انتخابگر کلاس (search.) استایل را به نوار جستجوی سایت اضافه می کنیم. padding را روی 0.5 rem قرار می دهیم و با استفاده از ویژگی border-radius چند لبه منحنی اضافه می کنیم.

🗂 دریافت کدها در پست بعدی

💎 Channel: @htmlcss_channels

👍14❤1

5.83K viewsedited 15:01

html and css آموزش

<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>Movie Search</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<form id="form">

<input type="text" autocomplete="off" id="search" placeholder="Search" class="search">

</form>

</header>

<main id="main">

</main>

<!-- js here -->

<script src="app.js"></script>

</body>

</html>

ممنون که با ری اکشن هاتون بهمون انگیزه می دید ❤️

💎 Channel: @htmlcss_channels

👍37❤13🔥4

4.75K viewsedited 15:02

html and css آموزش

@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

👍37❤8🔥2

4.81K viewsedited 15:02

html and css آموزش

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

❤51👍7🔥6

6.04K viewsedited 15:02

html and css آموزش

Whatsapp Logo.zip

Whatsapp Logo | HTML CSS

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

💎 Channel: @htmlcss_channels

❤45👍6

4.83K views06:12

html and css آموزش

html and css آموزش

Whatsapp Logo.zip

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

❤47👍15🔥2

5.72K viewsedited 06:20

html and css آموزش

This media is not supported in your browser

VIEW IN TELEGRAM

Smoke | HTML CSS

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

💎 Channel: @htmlcss_channels

👍51❤15🔥12

6.17K viewsedited 08:38

html and css آموزش

This media is not supported in your browser

VIEW IN TELEGRAM

HTML & CSS

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

💎 Channel: @htmlcss_channels

👍55❤18🙏6

6.36K viewsedited 06:39

html and css آموزش

💎 Channel: @htmlcss_channels

👍18❤4👏1

5.9K viewsedited 06:39

html and css آموزش

💎 Channel: @htmlcss_channels

👍18❤4🔥2

5.38K viewsedited 06:39

html and css آموزش

This media is not supported in your browser

VIEW IN TELEGRAM

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

❤53👍7🔥6👏2

6.44K views15:50

html and css آموزش

instagram Logo.zip

Instagram Logo | HTML CSS

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

💎 Channel: @htmlcss_channels

❤26👍1

4.9K views09:47

html and css آموزش

html and css آموزش

instagram Logo.zip

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

❤13👍2👏2

5.16K views09:48