20931
ادمین : @Maryam3771 تعرفه تبلیغات: https://t.me/alloadv/822
Whatsapp Logo | HTML CSS
اگه این پست برای شما مفید بوده با لایک و ری اکشن بهمون انرژی بدید ❤️
💎 Channel: @htmlcss_channels
@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;
}
طراحی وب سایت جستجوی فیلم با استفاده از HTML، CSS و جاوا اسکریپت
ابتدا یک هدر با تگ فرم ایجاد می کنیم. در تگ فرم، یک متن ورودی برای نوار جستجو وب سایت فیلم ایجاد می کنیم. سپس یک تگ اصلی ایجاد می کنیم، بنابراین وقتی همه فیلم ها توسط API بارگذاری می شوند، تمام محتوا را در تگ اصلی نشان می دهیم و در انتهای کد، یک فایل جاوا اسکریپت را پیوند می دهیم.
اول از همه، ما برخی از خانواده های فونت را با استفاده از URL فونت گوگل وارد می کنیم و سپس حاشیه را روی "صفر" قرار می دهیم. همچنین، با استفاده از ویژگی background-color، رنگ پسزمینه را روی «صورتی تیره» قرار میدهیم ، فونتی که استفاده کردیم poppins است.
استایل را به هدر وب سایت اضافه می کنیم. با استفاده از انتخابگر تگ هدر، پسزمینه هدر را روی آبی قرار میدهیم ، padding را روی 1rem و نوع نمایش را روی «فلکس» تنظیم میکنیم.
با استفاده از انتخابگر کلاس (search.) استایل را به نوار جستجوی سایت اضافه می کنیم. padding را روی 0.5 rem قرار می دهیم و با استفاده از ویژگی border-radius چند لبه منحنی اضافه می کنیم.
🗂 دریافت کدها در پست بعدی
💎 Channel: @htmlcss_channels
Buttons | HTML CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
Circle Animation | HTML CSS
با ری اکشن بهمون انرژی بدید❤️
💎 Channel: @htmlcss_channels
با کلیک کردن، رنگ پس زمینه را تغییر دهید
این کد صفحه ای ایجاد می کند که با کلیک کردن یا بارگذاری صفحه، رنگ پس زمینه را تغییر می دهد. هر کلیک یک رنگ تصادفی جدید در قالب 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);
دوستان گروه php رو میفروشم اگه کسی خریدار هست پیام بده
ایدی گپ @Phpgp
دوستان این دوره رو تخفیف زدیم مجدد
میتونید با قیمت 50 هزارتومن خرید کنید
برای خرید پیام بدید @nikoo_mohammad
اموزشی که روش ریپلی زدم ساخت اینو اموزش میدیم
برای درک بهتر اموزش ها بهتره همه ویدیو های چنلو از اول ببنید
قسمت اخر از اموزش صفحه بندی
با ری اکشن بهمون انرژی بدید❤️
این ویدیو برای 3 4 سال پیش بوده و کیفیت صدا کمی خوب نیست
ری اکشن بزارید حمایت کنید
قسمت اول
برا پست ها ری اکشن بزارید آموزش های بیشتری میزارم
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 = "";
}
});
<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>
Frontend Mentor
پلتفرمی است که توسعه دهندگان می توانند چالش های کدنویسی را انجام دهند و پروژه های دنیای واقعی بسازند. چالشها برای آزمایش مهارتهای شما و کمک به شما در بهبود تواناییهای حل مسئله طراحی شدهاند. Frontend Mentor یک راه عالی برای تمرین مهارتهای توسعه frontend و ایجاد مجموعهای از پروژهها است.
Frontend Mentor
با ری اکشن بهمون نشون بدید چه مطالبی براتون مفیده از این پستها بیشتر بذاریم❤️
💎 Channel: @htmlcss_channels
🌐 unocss.dev : The instant on-demand Atomic CSS engine
یه فریمورک css مشابه Tailwind هستش ، اما با فیچر های خفن تر ، اگه قبلاً با Tailwind کار کردید شدیداً پیشنهاد میکنم تستش کنید
https://github.com/unocss/unocss
💎 Channel: @htmlcss_channels
✅ یه سایت خیلی خفن برای ساخت اسکرول بار های شخصی سازی شده برای خودتون
🔥 در اخر بهتون کد css میده که میتونید توی سایتتون ازش استفاده کنید
🌐 https://scrollbar.app
💎 Channel: @htmlcss_channels
دوره طراحی قالب فروشگاه اینترنتی به صورت رسپانسیو
کد نویسی شده با : Html Css (FlexBox) javaScript
👈مدرس دوره : محمد نیکو
👈وضعیت دوره : تکمیل شده
👈تعداد جلسات : 43 جلسه
✅ قیمت : 100 هزار تومن با تخفیف
برای خرید پیام بدید
@nikoo_mohammad
دوستان راسی دموانلاین نمیکنه سایت رو بستیم
ولی نمونه اموزش از این دوره داخل همین چنل هست
/channel/htmlcss_channel/225
دوره طراحی قالب فروشگاه اینترنتی به صورت رسپانسیو
کد نویسی شده با : Html Css (FlexBox) javaScript jQuery
👈مدرس دوره : محمد نیکو
👈وضعیت دوره : تکمیل شده
👈تعداد جلسات : 43 جلسه
👈مدت زمان دوره : 12 ساعت
✅ قیمت : 350 هزار تومن
دمو قالبی که در این دوره پیاده سازی میشه 👇
https://bicoo.ir/shop/
https://bicoo.ir/shop/product.html
https://bicoo.ir/shop/category.html
https://bicoo.ir/shop/cart.html
https://bicoo.ir/shop/sign-in.html
https://bicoo.ir/shop/sign-up.html
برای خرید پیام بدید
@nikoo_mohammad
یه قابلیتی ک قبلا اضافه کرده بود ک بیشتر به درد برنامه نویسا میخوره
اگه کدتو بین سه تا back tick or back quote (`) قرار میدادی و جلوش اسم زبان برنامه نویسی مینوشتی کد ها مثه ادیتورا تقریبا به نمایش در میامد اینطوری مثلا
var i = 1;
text = 'iloblobla rifas twas'
for i in text[::-1]:
آموزش این نوگیشین توی چنل موجوده ریپلی زدم روش
Читать полностью…
آموزش صفحه بندی ساده در پست بعدی
html css js jquery
اموزش ساخت این اسلایدر رو با جاوا اسکریپت بزارم؟
ری اکشن 👍 به 100 برسه میزارم