Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/netcopyi/domains/netcopy.ir/public_html/wp-content/plugins/telegram-for-wp/inc/Notifcaster.class.php on line 318 Warning: session_start(): Cannot start session when headers already sent in /home/netcopyi/domains/netcopy.ir/public_html/wp-content/plugins/awesome-support/vendor/ericmann/wp-session-manager/wp-session-manager.php on line 147 Warning: Cannot modify header information - headers already sent by (output started at /home/netcopyi/domains/netcopy.ir/public_html/wp-content/plugins/telegram-for-wp/inc/Notifcaster.class.php:318) in /home/netcopyi/domains/netcopy.ir/public_html/wp-includes/feed-rss2.php on line 8 دوره های آموزشی - نت کپی | مرجع قالب و اسکریپت های فارسی  https://netcopy.ir/category/course/ نت کپی خرید و دانلود رایگان انواع قالب و اسکریپت کاربردی فارسی برای سایت و کسب و کار شما Thu, 02 Sep 2021 12:35:27 +0000 fa-IR hourly 1 https://netcopy.ir/wp-content/uploads/2021/09/code-icon-32x32.png دوره های آموزشی - نت کپی | مرجع قالب و اسکریپت های فارسی  https://netcopy.ir/category/course/ 32 32 آموزش ساخت گالری عکس https://netcopy.ir/image-gallery-flex/?utm_source=rss&utm_medium=rss&utm_campaign=image-gallery-flex https://netcopy.ir/image-gallery-flex/#respond Thu, 02 Sep 2021 12:35:27 +0000 https://netcopy.ir/?p=2205 سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت گالری عکس پس در ادامه این آموزش همراه باشید       با آموزش ساخت گالری عکس در خدمت شما هستیم   ابتدا یک فایل با نام […]

نوشته آموزش ساخت گالری عکس اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت گالری عکس

پس در ادامه این آموزش همراه باشید

 

پیش نمایش

 

آموزش ساخت گالری عکس آموزش رایگان برنامه نویسی

 

با آموزش ساخت گالری عکس در خدمت شما هستیم

 

ابتدا یک فایل با نام index.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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <div class="item show">
      <img src="img/1.jpg" alt="img">
      <div class="caption">
        <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p>
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" alt="img">
      <div class="caption">
        <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p>
      </div>
    </div>
    <div class="item">
      <img src="img/3.jpg" alt="img">
      <div class="caption">
        <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p>
      </div>
    </div>
    <div class="item">
      <img src="img/4.jpg" alt="img">
      <div class="caption">
        <h2>لورم ایپسوم متن ساختگی با تولید سادگی </h2>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است </p>
      </div>
    </div>
  </section>
  <script>
    const items = document.querySelectorAll('.item');
    items.forEach(item => {
      item.addEventListener('click', () => {
        items.forEach(item => item.classList.remove('show'));
        item.classList.add('show');
      })
    })
  </script>
</body>
</html>

 

سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم

@font-face {
  font-family: "Vazir";
  src: url(Vazir-Regular.ttf);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-size: 18px;
  font-family: "Vazir";
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item {
  height: 100%;
  width: 100%;
  flex: 1;
  transition: 0.3s ease flex;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.caption {
  position: absolute;
  right: 0px;
  bottom: 50px;
  color: #000;
  opacity: 0;
  transition: 0.3s ease opacity;
  background-color: rgba(255, 225, 225, 0.404);
  padding: 30px;
  margin: 20px;
  border-radius: 8px;
  text-align: right;
}
.item.show {
  flex: 8;
}
.item.show .caption {
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  section {
    flex-direction: column;
  }
  .item {
    flex: 1;
    height: 100px;
  }
  .item.show {
    flex: 10;
  }
  body {
    font-size: 14px;
  }
}

 

شما میتونید عکس های دلخواهتون را در پوشه img قرار بدید

 

ما در این آموزش از فونت زیبای وزیر یک فونت رایگان هستش استفاده کردیم شما میتونید از هر فونتی

که مد نظرتون هست استفاده کنید برای تغییر فونت کافیست کد های مربوط به فونت را عوض کنید

و فونت دلخواه خودتون رو قرار بدید.

 

به همین سادگی ما تونستیم یک گالری عکس زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂

 

نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.

 

با تشکر:)

 

نت کپی- مرجع دانلود قالب و اسکریپت فارسی

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

دانلود سورس

آموزش ویدئویی ساخت گالری عکس

 

نوشته آموزش ساخت گالری عکس اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> https://netcopy.ir/image-gallery-flex/feed/ 0 آموزش ساخت to do list https://netcopy.ir/learn-to-do-list/?utm_source=rss&utm_medium=rss&utm_campaign=learn-to-do-list https://netcopy.ir/learn-to-do-list/#respond Mon, 23 Aug 2021 13:15:09 +0000 https://netcopy.ir/?p=1966 سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت to do list پس در ادامه این آموزش همراه باشید         با آموزش ساخت to do list در خدمت شما هستیم   ابتدا یک […]

نوشته آموزش ساخت to do list اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت to do list

پس در ادامه این آموزش همراه باشید

 

 

آموزش رایگان برنامه نویسی آموزش ساخت to do list

 

 

با آموزش ساخت to do list در خدمت شما هستیم

 

ابتدا یک فایل با نام index.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>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
    <div class="container">
        <input type="text" id="input" placeholder="لطفا متن خود را وارد کنید">
        <ul></ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

 

سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم

@font-face {
    font-family: "Vazir";
    src: url(Vazir-Regular.ttf);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: capitalize;
    direction: rtl;
    font-family: "Vazir";
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #185adb 50%, #cd113b 50%);
}
.container {
    height: 450px;
    width: 330px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    padding: 10px;
    overflow-y: auto;
}
#input {
    height: 50px;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 5px;
    background: #666;
    color: #fff;
    padding: 0 10px;
    margin: 15px 0;
}
#input::placeholder {
    color: #bbb;
}
ul li {
    background: #eee;
    color: #333;
    height: 40px;
    border-radius: 50px;
    margin: 10px 0;
    padding: 10px;
    position: relative;
    list-style-type: none;
}
ul .fa-check, .fa-trash {
    position: absolute;
    cursor: pointer;
}
ul .fa-check {
    left: 40px;
    color: green;
}
ul .fa-trash {
    left: 15px;
    color: #ff0033;
}
ul .checked {
    background: lightgreen;
    text-decoration: line-through;
    transition: .2s;
}

 

و در مرحله آخر یک فایل با نام script.js میسازیم و کد های جاوا اسکریپت زیر را داخلش قرار میدیم

$(document).ready(function(){
    $('#input').change(function(){
        var input = $(this).val();
        $('ul').append('<li>'
        + input + 
        ' <i class="fas fa-check"></i> <i class="fas fa-trash"</i> </li>');
        $(this).val('');
    });
    $('ul').on('click','.fa-trash',function(){
        $(this).parent('li').fadeOut(200);
    });
    $('ul').on('click','.fa-check',function(){
        $(this).parent('li').toggleClass('checked');
    });
});

 

 

ما در این آموزش از دو کتابخانه Fontawesome و Jquery استفاده کردیم که آدرسشون رو قرار میدم.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

https://code.jquery.com/jquery-3.5.1.min.js

 

ما در این آموزش از فونت زیبای وزیر یک فونت رایگان هستش استفاده کردیم شما میتونید از هر فونتی

که مد نظرتون هست استفاده کنید برای تغییر فونت کافیست کد های مربوط به فونت را عوض کنید

و فونت دلخواه خودتون رو قرار بدید.

 

به همین سادگی ما تونستیم یک to do list زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂

 

نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.

 

با تشکر:)

 

نت کپی- مرجع دانلود قالب و اسکریپت فارسی

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

دانلود سورس

آموزش ویدئویی ساخت TO Do List

نوشته آموزش ساخت to do list اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> https://netcopy.ir/learn-to-do-list/feed/ 0 آموزش ساخت ساعت دیجیتال https://netcopy.ir/digital-clock-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=digital-clock-javascript https://netcopy.ir/digital-clock-javascript/#respond Sat, 21 Aug 2021 12:58:54 +0000 https://netcopy.ir/?p=1921 سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت ساعت دیجیتال پس در ادامه این آموزش همراه باشید         با آموزش ساخت ساعت دیجیتال در خدمت شما هستیم   ابتدا یک فایل با […]

نوشته آموزش ساخت ساعت دیجیتال اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت ساعت دیجیتال

پس در ادامه این آموزش همراه باشید

 

 

آموزش رایگان برنامه نویسی

 

 

با آموزش ساخت ساعت دیجیتال در خدمت شما هستیم

 

ابتدا یک فایل با نام index.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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="clock">
    <div class="display"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

 

سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم

@font-face {
    font-family: "Vazir";
    src: url(Vazir-Regular.ttf);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body {
    height: 100%;
}
body {
    display: grid;
    place-items: center;
    background: #131419;
    font-family: "Vazir";
}
.clock {
    background: #131419;
    height: 120px;
    line-height: 120px;
    text-align: center;
    padding: 0 30px;
    box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
                3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display {
    font-size: 60px;
    color: rgb(15, 250, 27);
    letter-spacing: 5px;
}

 

و در مرحله آخر یک فایل با نام script.js میسازیم و کد های جاوا اسکریپت زیر را داخلش قرار میدیم

 

setInterval(function(){
    const clock = document.querySelector(".display");
    let time = new Date();
    let sec = time.getSeconds();
    let min = time.getMinutes();
    let hr = time.getHours();
    let day = 'AM';
    if(hr > 12){
        day = 'PM';
        hr = hr -12;
    }
    if(hr == 0){
        hr = 12;
    }
    if(sec < 10){
        sec = '0' + sec;
    }
    if(min < 10){
        min = '0' + min;
    }
    if(hr < 10){
        hr = '0' + hr;
    }
    clock.textContent = hr + ':' + min + ':' + sec + " " + day;
})

 

ما در این آموزش از فونت زیبای وزیر یک فونت رایگان هستش استفاده کردیم شما میتونید از هر فونتی

که مد نظرتون هست استفاده کنید برای تغییر فونت کافیست کد های مربوط به فونت را عوض کنید

و فونت دلخواه خودتون رو قرار بدید.

 

به همین سادگی ما تونستیم یک ساعت دیجیتال زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂

 

نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.

 

با تشکر:)

نت کپی- مرجع دانلود قالب و اسکریپت فارسی

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

دانلود سورس

آموزش ویدئویی ساخت ساعت دیجیتال

نوشته آموزش ساخت ساعت دیجیتال اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> https://netcopy.ir/digital-clock-javascript/feed/ 0 آموزش ساخت Loading Bar https://netcopy.ir/loading-bar/?utm_source=rss&utm_medium=rss&utm_campaign=loading-bar https://netcopy.ir/loading-bar/#comments Mon, 09 Aug 2021 08:44:29 +0000 https://netcopy.ir/?p=1360 سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت Loading Bar به کمک html css javascript پس در ادامه این آموزش همراه باشید       با آموزش ساخت Loading Bar در خدمت شما هستیم   […]

نوشته آموزش ساخت Loading Bar اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت Loading Bar به کمک html css javascript

پس در ادامه این آموزش همراه باشید

 

 

آموزش ساخت Loading Bar آموزش html آموزش css آموزش رایگان برنامه نویسی

 

با آموزش ساخت Loading Bar در خدمت شما هستیم

 

ابتدا یک فایل با نام index.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-bar"></div>
    <h1 class="count"></h1>
    <script src="scripts.js"></script>
</body>
</html>

 

سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم

 

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}
.progress-bar {
    position: absolute;
    top: 50%;
    height: 2px;
    background: #1d84d3;
}
.count {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    font-weight: 100;
    font-size: 3em;
    margin-top: -1.33em;
    color: #1d84d3;
}
.done {
    top: 0;
    height: 100%;
    width: 100%;
    transition: all .33s ease;
}

 

در مرحله آخر به سراغ جاوا اسکریپت میریم یک فایل با نام script.js میسازیم و کد های js زیر را داخلش قرار میدیم

 

var body = document.querySelector('body'),
    bar = document.querySelector('.progress-bar'),
    counter = document.querySelector('.count'),
    i = 0,
    throttle = 0.7;

(function draw(){
    if(i <= 100) {
        var r = Math.random();
        requestAnimationFrame(draw);
        bar.style.width = i + '%';
        counter.innerHTML = Math.round(i) + '%';
        if(r < throttle) {
            i = i+ r;
        }
    }else {;
        bar.className += " done";
    } 
})();

به همین سادگی ما تونستیم یک Loading Bar زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂

 

نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.

 

با تشکر:)

 

نت کپی- مرجع دانلود قالب و اسکریپت فارسی

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

دانلود سورس

 آموزش ویدیویی طراحی این قالب

 

نوشته آموزش ساخت Loading Bar اولین بار در نت کپی | مرجع قالب و اسکریپت های فارسی. پدیدار شد.

]]> https://netcopy.ir/loading-bar/feed/ 2