Front-End
تمرین جدید
HTML & CSS
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
JavaScript - جاوا اسکریپت
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
let msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراکlet msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراکlet msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراک<!DOCTYPE html>
<html>
<head>
<style>
a {
color: rgb(0, 140, 255);
border: 2px solid rgb(0, 140, 255);
padding: 5px;
text-decoration: none;
box-shadow:0 0 5px rgb(0, 140, 255);
text-shadow: 0 0 2px rgb(0, 140, 255);
border-radius: 5px;
font-weight: bold;
font-size: 20px;
}
a:hover {
color:white;
background-color:rgb(0, 140, 255);
}
</style>
</head>
<body>
<a href="#">Go To Home</a>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignUp</title>
<style>
* {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
}
.button {
padding: 15px 30px;
background-color: rgba(255, 255, 255, 0.76);
color: blue;
border: rgb(0, 140, 255) 3px solid;
width: 200px;
height: 50px;
box-shadow: 0 4px 8px rgba(0, 200, 255, 0.83);
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
margin: 15px;
outline: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.4s ease;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.button:hover {
border-radius: 4px;
background-color: #0056b3;
padding: 10px;
color: white;
box-shadow: 0 4px 8px rgba(0, 200, 255, 0.83);
border: #0056b3 2px solid;
transform: scale(1.1);
}
.easy {
position: absolute;
color: rgba(0, 200, 255, 0.83);
bottom: 20px;
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<button class="button">SignUp</button>
<div class="easy">
<h3>easy!</h3>
</div>
</body>
</html>
CSS___________________
div
{
display: inline-block;
padding: 1px 40px;
border: 2px solid blue;
color: blue;
border-radius: 5px;
user-select: none;
transition:all .5s;
}
div:hover
{
background-color: blue;
color: white;
}
HTML__________________
<div>
ثبت نام
</div>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>دکمه نئونی</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="neon-button">تماس با ما</button>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>دکمه تغییر شکل</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.button {
padding: 15px 30px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.1);
border-radius: 20px; /* تغییر شکل به دایره‌ای */
}
</style>
</head>
<body>
<button class="button">دکمه</button>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{
margin-top: 300px;
}
.btn{
background-color: white;
color: #039be5;
padding: 10px 60px 10px 60px;
border-color: #039be5;
border-radius: 9px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.btn:hover{
background-color: #039be5;
color: white;
}
</style>
<title>neon button</title>
</head>
<body>
<center>
<div class="container">
<button class="btn">ثبت نام</button>
</div>
</center>
</body>
</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>دکمه نئونی</title>
<style>
.box{
border: 2px solid rgb(115, 115, 243);
display: inline-block;
border-radius: 10px;
background-color: #ffffff;
color: rgb(115, 115, 243);
box-shadow: 2px 1px 20px rgb(115, 115, 243);
transition: all 0.5s;
}
h2{
margin-left: 100px;
margin-right: 110px;
font-size: 20px;
padding: 5px;
}
.box:hover{
background-color: rgb(115, 115, 243);
color: #ffffff;
}
</style>
</head>
<body>
<div class="box">
<h2>ثبت نام</h2>
</div>
</body>
</html>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام