<style>
body {
background: #e9e9e9 !important;
color: #666666 !important;
font-family: 'RobotoDraft', 'Roboto', sans-serif !important;
font-size: 14px !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
direction: ltr !important;
}
/* Pen Title */
.pen-title {
padding: 50px ;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #ed2553;
}
.pen-title span a {
color: #ed2553;
font-weight: 600;
text-decoration: none;
}
/* Rerun */
.rerun {
margin: 30px;
text-align: center;
}
.rerun a {
cursor: pointer;
display: inline-block;
background: #ed2553;
border-radius: 3px;
-webkit-box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
padding: 10px 20px;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.rerun a:hover {
-webkit-box-shadow: 3px 6px rgba(0, 0, 0, 0.16), 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 3px 6px rgba(0, 0, 0, 0.16), 3px 6px rgba(0, 0, 0, 0.23);
}
/* Scroll To Bottom */
#codepen, #portfolio {
position: fixed;
bottom: 30px;
right: 30px;
background: #363636;
width: 56px;
height: 56px;
border-radius: 100%;
-webkit-box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
color: #ffffff;
text-align: center;
}
#codepen i, #portfolio i {
line-height: 56px;
}
#codepen:hover, #portfolio:hover {
-webkit-box-shadow: 10px 20px rgba(0, 0, 0, 0.19), 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 10px 20px rgba(0, 0, 0, 0.19), 6px 6px rgba(0, 0, 0, 0.23);
}
/* CodePen */
#portfolio {
bottom: 96px;
right: 36px;
background: #ed2553;
width: 44px;
height: 44px;
-webkit-animation: buttonFadeInUp 1s ease;
animation: buttonFadeInUp 1s ease;
}
#portfolio i {
line-height: 44px;
}
/* Container */
.container {
position: relative;
max-width: 460px;
width: 100%;
margin: auto 100px;
}
.container.active .card:first-child {
background: #f2f2f2;
margin: 15px;
}
.container.active .card:nth-child(2) {
background: #fafafa;
margin: 10px;
}
.container.active .card.alt {
top: 20px;
right: ;
width: 100%;
min-width: 100%;
height: auto;
border-radius: 5px;
padding: 60px 40px;
overflow: hidden;
}
.container.active .card.alt .toggle {
position: absolute;
top: 40px;
right: -70px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: scale(10);
transform: scale(10);
-webkit-transition: -webkit-transform .3s ease;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
}
.container.active .card.alt .toggle:before {
content: '';
}
.container.active .card.alt .title,
.container.active .card.alt .input-container,
.container.active .card.alt .button-container {
left: ;
opacity: 1;
visibility: visible;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.container.active .card.alt .title {
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
.container.active .card.alt .input-container {
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.container.active .card.alt .input-container:nth-child(2) {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
.container.active .card.alt .input-container:nth-child(3) {
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
.container.active .card.alt .button-container {
-webkit-transition-delay: .7s;
transition-delay: .7s;
}
/* Card */
.card {
position: relative;
background: #ffffff;
border-radius: 5px;
padding: 60px 40px ;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: .3s ease;
transition: .3s ease;
/* Title */
/* Inputs */
/* Button */
/* Footer */
/* Alt Card */
}
.card:first-child {
background: #fafafa;
height: 10px;
border-radius: 5px 5px ;
margin: 10px;
padding: ;
}
.card .title {
position: relative;
z-index: 1;
border-left: 5px solid #ed2553;
margin: 35px;
padding: 10px 10px 50px;
color: #ed2553;
font-size: 32px;
font-weight: 600;
text-transform: uppercase;
}
.card .input-container {
position: relative;
margin: 5px 50px 7px;
}
.card .input-container input {
outline: none;
z-index: 1;
position: relative;
background: none;
width: 100%;
height: 60px;
border: ;
color: #212121;
font-size: 24px;
font-weight: 400;
}
.card .input-container input:focus ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {
width: 50%;
}
.card .input-container input:valid ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container label {
position: absolute;
top: ;
right: ;
color: #757575;
font-size: 24px;
font-weight: 300;
line-height: 60px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.card .input-container .bar {
position: absolute;
left: ;
bottom: ;
background: #757575;
width: 100%;
height: 1px;
}
.card .input-container .bar:before, .card .input-container .bar:after {
content: '';
position: absolute;
background: #ed2553;
width: ;
height: 2px;
-webkit-transition: .2s ease;
transition: .2s ease;
}
.card .input-container .bar:before {
left: 50%;
}
.card .input-container .bar:after {
right: 50%;
}
.card .button-container {
margin: 60px;
text-align: center;
}
.card .button-container button {
outline: ;
cursor: pointer;
position: relative;
display: inline-block;
background: ;
width: 240px;
border: 2px solid #e3e3e3;
padding: 20px ;
font-size: 24px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.card .button-container button span {
position: relative;
z-index: 1;
color: #ddd;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.card .button-container button:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
background: #ed2553;
width: 30px;
height: 30px;
border-radius: 100%;
margin: -15px -15px;
opacity: ;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.card .button-container button:hover, .card .button-container button:active, .card .button-container button:focus {
border-color: #ed2553;
}
.card .button-container button:hover span, .card .button-container button:active span, .card .button-container button:focus span {
color: #ed2553;
}
.card .button-container button:active span, .card .button-container button:focus span {
color: #ffffff;
}
.card .button-container button:active:before, .card .button-container button:focus:before {
opacity: 1;
-webkit-transform: scale(10);
transform: scale(10);
}
.card .footer {
margin: 40px ;
color: #d3d3d3;
font-size: 24px;
font-weight: 300;
text-align: center;
}
.card .footer a {
color: inherit;
text-decoration: none;
-webkit-transition: .3s ease;
transition: .3s ease;
}
.card .footer a:hover {
color: #bababa;
}
.card.alt {
position: absolute;
top: 40px;
right: -70px;
z-index: 10;
width: 140px;
height: 140px;
background: none;
border-radius: 100%;
-webkit-box-shadow: none;
box-shadow: none;
padding: ;
-webkit-transition: .3s ease;
transition: .3s ease;
/* Toggle */
/* Title */
/* Input */
/* Button */
}
.card.alt .toggle {
position: relative;
background: #ed2553;
width: 140px;
height: 140px;
border-radius: 100%;
-webkit-box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 1px 3px rgba(0, 0, 0, 0.12), 1px 2px rgba(0, 0, 0, 0.24);
color: #ffffff;
font-size: 58px;
line-height: 140px;
text-align: center;
cursor: pointer;
}
.card.alt .toggle:before {
content: '\f040';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, );
transform: translate(0, );
}
.card.alt .title,
.card.alt .input-container,
.card.alt .button-container {
left: 100px;
opacity: ;
visibility: hidden;
}
.card.alt .title {
position: relative;
border-color: #ffffff;
color: #ffffff;
}
.card.alt .title .close {
cursor: pointer;
position: absolute;
top: ;
right: 60px;
display: inline;
color: #ffffff;
font-size: 58px;
font-weight: 400;
}
.card.alt .title .close:before {
content: '\00d7';
}
.card.alt .input-container input {
color: #ffffff;
}
.card.alt .input-container input:focus {
background:transparent;
}
.card.alt .input-container input:focus ~ label {
color: #ffffff;
}
.card.alt .input-container input:focus ~ .bar:before, .card.alt .input-container input:focus ~ .bar:after {
background: #ffffff;
}
.card.alt .input-container input:valid ~ label {
color: #ffffff;
}
.card.alt .input-container label {
color: rgba(255, 255, 255, 0.8);
}
.card.alt .input-container .bar {
background: rgba(255, 255, 255, 0.8);
}
.card.alt .button-container button {
width: 100%;
background: #ffffff;
border-color: #ffffff;
color: #ed2553;
}
.card.alt .button-container button span {
color: #ed2553;
}
.card.alt .button-container button:hover {
background: rgba(255, 255, 255, 0.9);
}
.card.alt .button-container button:active:before, .card.alt .button-container button:focus:before {
display: none;
}
/* Keyframes */
@-webkit-keyframes buttonFadeInUp {
0% {
bottom: 30px;
opacity: ;
}
}
@keyframes buttonFadeInUp {
0% {
bottom: 30px;
opacity: ;
}
}
</style>
سلام ببخشید جعبه دانلود کجاس؟ من کد ها رو زدم ولی کار ارور داشت و جاوا اسکریپتش عمل نمیکرد میخواستم از فایل امادتون استفاده کنم
سلام خدمت شما دوست از همین کد ها استفاده نمایید فایل آماده نداره
سلام ببخشید این فرم register.php رو در کجا باید ایجاد کنیم خود قالب؟
سلام خدمت شما دوست گرامی داخل فایل functions.php قرار بدید موفق باشید
عالی بود ممنون
سلام وقت بخیر سورس کدش در جعبه دانلود گفتید هست میشه لینکش رو بزارید؟
سلام خدمت شما دوست گرامی همین کد را کپی کنید مشکل نداره سورس کد داخل باکس دانلود قرار داده بودیم اما حذف شده پیشنهاد می کنم که از سایت جدید ما دیدن فرمایید مخصوص وردپرس است از لینک زیر مشاهده فرمایید.
پاسخ وردپرس
سلام، فرمی میخوام بسازم که نام کاربر رو از فرم دیگه ای در صفحه ی دیگری میگیره یعنی در یک برگه با فرم های گرویتی اطلاعات کاربر رو ثبت میکنه بعد از کلیک دکمه ی ثبت، اطلاعات( با استفاد ه از تگ ها) نام کاربر که ثبت شده ارسال میشه به برگه ی دیگه ای ، میخوام در این برگه ی دوم اطلاعات تگی که اومده داخل textbox نام کاربری بصورت پیش فرض بشینه و بقیه ی اطلاعات همون فرد رو بتونم در این برگه ثبت کنم. چطور باید اطلاعات ارسال شده به این صفحه رو خوند و در پیش فرض textbox قرار داد؟؟
سلام خدمت شما این کار میشه توسط کد نویسی php انجام داد که اینجا نمیشه توضیحاتش را داد برای این کار باید به کد نویسی php مسلط باشید
موفق باشید مثل همیشه
متاسفانه آخر کار اصلا خوب توضیح ندادید. الان کد های js کجاست که بخوایم اضافه کنیم؟؟ فقط توی فیلم رفتین کپی کردین و هیچ توضیحی از اینکه کجا باید پیداش کنیم ندادین. در آخر هم فقط نوشتین فایل های php را جایگزین html کنین که اصلا مشخص نیست یعنی چی. توی فیلم هم خیلی سریع و ناخوانا این قسمت را توضیح میدین و رد میشین
سلام خدمت شما دوست گرامی بعد از این که توی سایت لاگین کردید فایل به صورت آماده است ار اون استفاده فرمایید
این به صورت فیلم آموزشی است میتوانید هر موقع که ما خیلی سریع بگیم شما میتوانید فیلم را متوقف کرده و دوباره تماش فرمایید.
خیلی ممنونم از این که انتقاد خود را مطرح نمودید اینشالاه توی فیلم های بعدی حتما این را در نظر خواهیم گرفت موفق باشید مثل همیشه
سلام. خسته نباشید
اگر من بخوام بجای دریافت ایمیل و چک کردن ایمیل تکراری این کار رو با شماره موبایل انجام بدم توی کدهای php چه تغییری باید ایجاد کنم؟ خیلی ممنون
درود دوست گرامی همان طور که قبلا هم دوستان درخواست داده بودن برای این کار نیاز به یک آموزش جاداکانه نیاز است در اولین فرصت روی سایت قرار خواهد گرفت بعد می توانید از آن آموزش استفاده کنید
موفق پیروز باشید مثل همیشه
سلام ممنون بابت آموزش خوبتون.
من میخوام توی فرم ثبت نام شماره موبایل ثبت نام کننده رو هم بگیرم تا مستقیم توی شناسنامه کاربر (پروفایل) ثبت بشه. لطفا راهنمایی کنید.
دوره سپاس خدمت شما دوست گرامی
در این مورد هم توی چند روز آینده یک آموزش تهیه خواهم کرد
توی آموزش به صورت کامل توضیح داده میشه
موفق باشید
مچکرم من توسط آموزشتون تونستم فرم ورود هم بسازم :)
لطفا آموزش اینکه چگونه زیر مطلبتون دسته بندی و بازدید رو به قالبتون اضافه میکنید رو توضیح بدید منظورم زیریا هست
” آموزش های رایگان وردپرس
visibility 2,263 بازدید”
سلام خدمت شما دوست عزیز خیلی خوشحالم که برای شما مفید بود، چشم حتما به زود ترین فرصت موفق و پیروز باشید
با سلام و عرض ادب
از این که این آموزش رو قرار دارید کمال تشکر رو دارم. ولی میخواستم درخواست کنم که مکانی که باید کدهای css رو جایگذاری کنیم رو هم کاش میفرمودید. بنده کدهای css رو داخل سفارشی سازی وارد کردم اما خطا میداد و ذخیره نمیشد. داخل فایلی که تمام کدهای css سایت بود وارد کردم اما صفحه ثبت نام تغییری نکرد و مورد دیگه این که شما داخل آموزش فرمودید که باید کدهای php رو در آخر قرار بدیم. الان باید کدهایی که در مرحله آخر قرار دادید رو کجا دقیقا بذاریم؟ آیا باید جایگزین کدهای html بشن؟
متشکرم.
سلام خدمت شما دوست عزیز خیلی ممنونم از شما خوشحالم برای مفید بوده
در صورت مشکل کد های css دارید از فایل آماده استفاده نمایید یا اگه مشکل شما برطرف نشد فایل خودتان را به صورت کامل برای بنده داخل تلگرام ارسال فرمائید موافق باشید مثل همیشه
برای چی باید مقادیرو دوباره بزاریم؟ خودش اون مقادیر ایمیل و پسورد و بقیه چیزارو داره. چرا اینکارو میکنیم؟
سلام خدمت شما دوست عزیز درست منظور شما را متوجه نشدم لطفا اگه امکان داره یکم بیشتر توضیح بدید موافق باشید مثل همیشه

سلام من بخوام از کد های سایت codepen استفاده کنم و انهارو پیاده سازی کنم چیکار باید بکنم؟
سلام خدمت شما دوست بعد از این داخل سایت وارد شدید کد مورد نظر را دانلود نمایید و به راحتی استفاده نمایید موفق باشید مثل همیشه