diff --git a/css1/01_css.html b/css1/01_css.html
new file mode 100644
index 0000000..5a2561a
--- /dev/null
+++ b/css1/01_css.html
@@ -0,0 +1,98 @@
+<!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">
+    <!-- <link rel="preload" as="font" href="https://rupic.ir/wp-content/themes/pooshe/dist/font/iransans/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2" type="font/woff2"> -->
+    <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap" rel="stylesheet">
+    <style>
+        /* @font-face {
+            font-family: "lato";
+            src: url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:wght@400;500;700&family=Roboto:wght@400;700&family=Staatliches&display=swap');
+        } */
+
+        body {
+            font-family: 'Noto Sans Arabic', sans-serif;
+        }
+
+        .box-model {
+            background-color: #919191;
+            color: #ffffff;
+            width: 300px;
+            height: 300px;
+            border: 3px solid #000;
+            /* padding: top right bottom left */
+            padding: 10px;
+            margin: 30px;
+        }
+    </style>
+</head>
+
+
+
+<body>
+    <!-- 
+        زبان هایی زبان برنامه نویسی هستند که بتوانند پردازش اطلاعات را داشته باشند 
+        اما سی اس اس این توانایی را ندارد و صرفا یک سری کار های بصری انجام می دهند 
+        راهکار هایی را برای نشان دادن این که چکونه المان ها در صفحه نشان داده شوند ارایه میدهد
+        هر چه نام سلکتور ها خلاصه تر باشد برای سئو بهتر است .
+        override:
+        می توان در استایل ها از بالا به پایین کامپایل میشوند
+        سلسله مراتب از بالا به پایین است.
+
+         المان ها میتوانند بیش از یک کلاس داشته باشند 
+         این مورد فقط در مورد کلاس صدق میکند
+
+         اولویت ایدی از کلاس بیشتر است
+     -->
+
+    <!--box model 
+        تمامی المان ها در ماهیت باکس هستند 
+        اما ساختار آنها را میتوان عوض کرد که به ط.ر مثال یک قلب یا یک دایره باشند 
+        padding amd margin به اندازه المان اضافه میشوند و به طول و عرض المان تاثیر میگذارند
+        
+        در نهایت تمامی المان ها در صفحه  به صورت مستطیل هستند
+
+        padding: 
+        به معنی حاشیه داخلی محتوا از گوشه های والد است.
+
+        margin:
+        عنصر کلی نسبت به عناصر کناری فاصله میگیرد
+
+        box-model:
+        combination of padding border margin and width and the height.
+        and all of elements use this rule.
+
+        the total width of an element should be calculated like this;
+        total element width = width + left padding + right padding + left border + right border + left margin + right margin;
+
+        the total height of an element should be calculated like this :
+        total elemnet height = height + top padding + bottomPadding + top border + bottom Border + top margin + bottom margin;
+
+        box-sizing: border-box;
+        اگر بخواهیم که پدینگ و ضعامت حاشیه در اندازه طول و عرض ما تاثیر گذار باشد 
+        
+        *
+        با این سلکتور بر روی تمامی المان ها اعمال میشود 
+        تمامی تگ های موجود در سند هر استایلی در نظر بگیریم بر روی آنها اعمال میشود
+
+        css reset {
+            box-sizing: border-box;
+            margin:0;
+            padding:0;
+        }
+
+        خود مرورگر برای عناصر به طور پیشفرض مقداری فاصله در نظر میگیرد
+
+
+    -->
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/02_cssText.html b/css1/02_cssText.html
new file mode 100644
index 0000000..ade62cd
--- /dev/null
+++ b/css1/02_cssText.html
@@ -0,0 +1,155 @@
+<!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>Css Text</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        .test {
+            color: red;
+            background-color: #000;
+            padding: 10px;
+            text-align: right;
+            text-align: left;
+            text-align: center;
+            text-align: justify;
+            font-size: 20px;
+            line-height: 30px;
+        }
+
+        .test-2 {
+            text-decoration: overline;
+            text-decoration: underline;
+            text-decoration: line-through;
+            text-transform: capitalize;
+            text-transform: lowercase;
+            text-transform: uppercase;
+        }
+
+        .test-4 {
+            text-indent: 10px;
+            letter-spacing: 10px;
+            word-spacing: 10px;
+        }
+
+        .taxt-shadow {
+            text-shadow: 5px 5px 5px green;
+        }
+
+        .test-5 {
+            width: 150px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: clip;
+            text-overflow: ellipsis;
+            word-break: break-all;
+        }
+
+        .test-6 {
+            writing-mode: horizontal-tb;
+            /* حالت عادی */
+        }
+ 
+        .test-7 {
+            writing-mode: vertical-rl;
+        }
+    </style>
+</head>
+<!-- 
+    text-align: justify
+    برای تراز کردن متن استفاده میشود به طور مثال اگر متن طولانی باشد باعث میشود که متن تا انتها را پر میکند.
+
+    line-height:
+    فاصله ی بین خطوط را مشحص میکند
+    سایز فونت * 1.5 
+    مقدار بالا بهترین مقدار برای متون فارسی است
+    سایز فونت * 1.6 
+    مقدار بالا بهترین مقدار برای متون انگلیسی است
+
+    text-decoration:
+    روی متن خط میکشد
+    همهان کار <s>
+
+    text-indent:
+    از سر خط فاصله میگذارد
+    همان کار پدینگ را انجام0 میدهد
+    اما فقط برای خط اول
+    
+    letter-spacing: 
+    فاصله ی بین حروف
+
+    word-spacing: 
+    فاصله ی بین کلمات
+
+    taxt-shadow:
+    مقدار اول : میزان فاصله از محور x
+    مقدار دوم : میزان فاصله از محور y
+    مقدار سوم : میزان بلور 
+
+    white-space: nowrap
+    متن را نمیشکند 
+
+    text-overflow: ellipsis
+    حتما باید متن اندازه داشته باشد و اگر متن سرریز کند سه نقطه قرار میدهد
+    باید با 
+    overflow: hidden 
+    حتما بیاید در غیر این صورت کار نخواهد کرد
+
+    word-wrap: breack-word;
+    کلمه ای که اندازه آن بیشتر از طول متن است را میشکند که بسیار نادر است
+
+    word-break: break-all
+    مشابه 
+    text-align: justify
+    است
+    اما تفاوت این دو در این است که این مورد کلمه را می شکند اما قیلی کلمه را نمیشکند و
+    به شکلی متن را فاصله می دهد که فضا را بپوشاند
+    word-break : keep-all
+    حالت پیشفرض است
+    
+    vertical-align: top;
+    برای این مورد نسبت به بزرگترین المانی که در آن وجود دارد الاین میشود
+    برای بزرگترین عنصر از نظر ارتفاع در کنار بقیه ی اعضا
+    vertical-align: base-line
+    میشود جایی که ارتفاع برزگترین عنصر تمام شده است
+    یعنی در پایین آن
+    middle top baseline bottom
+    می توان به آن مقدار عددی داد
+    vertical align : 20px;
+    عدد منفی هم میگیرد
+      
+    font shorthand: 
+    font: fontstyle  fontweight  fontsize  fontfamily; 
+ -->
+
+<body>
+    <p class="test">این یک متن تستی است</p>
+    <a href="">link</a>
+    <p class="test-2">this is some random text</p>
+    <p class="test-4">this is some random text</p>
+    <p class="taxt-shadow">this is some random text</p>
+    <p class="test-5">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, asperiores! Voluptatum alias
+        porro exercitationem magni, explicabo quo facere? Nisi repellat delectus, eaque sit temporibus nam itaque saepe
+        ullam suscipit debitis! Ea eius, modi laborum dicta nobis dolor illum officia eaque. Quam, facere obcaecati
+        exercitationem consequuntur nam alias non quibusdam voluptatum. Possimus itaque labore autem quas ea illo unde
+        dolorum dicta?
+    </p>
+    <p class="test-6">این یک متن تستی است </p>
+    <p>این تستی <span class="test-7">یک متن </span> است </p>
+    <p class="test-8">این یک متن تستی است </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/03_cssFonts.html b/css1/03_cssFonts.html
new file mode 100644
index 0000000..56a435d
--- /dev/null
+++ b/css1/03_cssFonts.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="rtl">
+
+<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">
+    <link rel="stylesheet" href="./styles/03_css.css">
+    <title>Fonts</title>
+    <style>
+
+    </style>
+</head>
+<!-- 
+    نهایتا دو فونت فیس در وبسایت استفاده شود 
+    یکی بولد برای تیتر ها و یکی نرمال برای سایر نوشته ها
+    font shorthand:
+    font: fontStyle fontWeight fontsize/lineHeight fontFamily
+ -->
+
+<body>
+    <p>
+        این یک متن تستی است
+    </p>
+    <p class="text-bold">
+        این یه متن بولده
+    </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/04_cssBackground.html b/css1/04_cssBackground.html
new file mode 100644
index 0000000..ba7ef9b
--- /dev/null
+++ b/css1/04_cssBackground.html
@@ -0,0 +1,65 @@
+<!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>css background</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background-color: #efefef;
+            background-image: url('some sourse');
+            background-repeat: no-repeat;
+            background-repeat: repeat-x;
+            background-repeat: repeat-y;
+            background-position: right;
+            background-position: top right;
+            background-attachment: fixed;
+        }
+
+        header {
+            width: 100%;
+            background-image: url('some File');
+            height: 400px;
+            background-size: cover;
+            background-attachment: fixed;
+            background-clip: border-box;
+        }
+
+        .test {
+            background: #f4f4f4 url('something') no-repeat center/center cover;
+        }
+    </style>
+
+</head>
+
+<body>
+    <!-- 
+    background  
+    میتواند هم رنگ داشته باشد و هم تصویر و اگر که تصویر لود نشد کمک رنگ را استفاده میکند
+    background-attachment:
+    افکت پارالکس ایجاد میکند  وهر چه صفحه اسکرول بخورد عکس صابت است.
+    background-clip: border-box;
+    پیشفرض است
+    background-clip: padding-box; 
+    محدوده ی بوردر را جزو پس زمینه حساب نمیکند
+    پدینگ بوردر نسبت به محتوای داخلی باکس
+    background-clip: content-box;
+    پس زمینه فقط به محتوا اعمال میشود و شامل پدینگ و حاشیه نمیشود
+    
+    short hand for background:
+    background: color imgageUrl backgroundRepeat  backgroundPisition 
+-->
+    <header>
+
+    </header>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/05_cssList.html b/css1/05_cssList.html
new file mode 100644
index 0000000..b90c1ed
--- /dev/null
+++ b/css1/05_cssList.html
@@ -0,0 +1,96 @@
+<!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>Lists</title>
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        /* css reset */
+        ul,
+        ol,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        ul li {
+            list-style: none;
+            list-style-type: circle;
+            list-style-position: inside;
+            list-style-image: url('imageFile');
+            /* short hand */
+            list-style: square inside url('some address');
+        }
+
+        nav {
+            background: #efefef;
+            padding: 10px;
+            font-size: 14px;
+        }
+
+        .menu li {
+            display: inline;
+            margin: 0 5px;
+        }
+
+        .menu {
+            /* برای تراز کردن منو از این استفاده میشود */
+            text-align: center;
+        }
+    </style>
+
+</head>
+
+<body>
+    <!-- 
+        display:
+        نخوه ی نمایش المان ها را برای ما کنترل میکند.
+        display: inline
+        میشود عرض مختوای درون آن
+        display: inline-block
+
+        the major difference is that display: inline-block allows to set
+        a width and height on the element. Also, with display: inline-block , 
+        the top and bottom margins/paddings are respected, but with display: inline they are not.
+
+        برای نشان دادن یا ندادن یک عنصر 
+        display: none;
+        visiblility: hidden;
+
+        تفاوت این دو در این است که زمانی که 
+        display: none
+        است جایی برای عنصر در نظر گرفته نمیشود.
+        اما در 
+        visiblity: hidden;
+        جایی برای عنصر در نظر گرفته میشود اما چیزی نشان داده نمیشود
+
+        visiblity: visible;
+        برای نشان دادن عنصری که حذف شده 
+        display: block or inline;
+
+
+     -->
+    <nav>
+        <ul class="menu">
+            <li><a href="#">خانه</a></li>
+            <li><a href="#">دوره های آموزشی</a></li>
+            <li><a href="#">تماس با ما</a></li>
+            <li><a href="#">درباره ما</a></li>
+            <li><a href="#">پشتیبانی</a></li>
+        </ul>
+    </nav>
+    <hr>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/06_seudoClasses.html b/css1/06_seudoClasses.html
new file mode 100644
index 0000000..6fedb4e
--- /dev/null
+++ b/css1/06_seudoClasses.html
@@ -0,0 +1,188 @@
+<!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>Seudo Classes in css</title>
+
+    <style>
+        .test li:hover {
+            color: red;
+        }
+
+        .test li a:active {
+            background-color: green;
+        }
+
+        .test li a:visited {
+            /* background-color آن را نمی توان عوض کرد */
+            color: #fff;
+        }
+
+        .box-shadow {
+            box-shadow: 0 0 4px 0 #c3c3c3;
+        }
+
+        .wrapper p:first-of-type {
+            color: red;
+        }
+
+        .wrapper :nth-child(5) {
+            color: red
+        }
+
+        .wrapper p:nth-child(5) {
+            color: green;
+        }
+
+
+        table tbody tr:nth-child(odd) {
+            background-color: #efefef;
+            /* فاصله عناصر حدول از border */
+            border-spacing: 10px;
+            border-collapse: collapse;
+        }
+    </style>
+
+</head>
+<!-- 
+    seudo classes :
+    یک ساختار هستند که باعث فیلتر کردن یک سری از المان ها با استفاده از 
+    یک سری از قواعد میشوند
+    که این قواعد را ما برای آن تعیین میکنیم
+    این قواعد همان نام ها هستند
+
+    outline: 
+    حاشیه ی خارجی 
+    border
+    است
+    محدوده ی اطراف بوردر عنصر قسمت بیرونی آن
+
+    :visited
+    یعنی دیده شده به طور مثال این لینک قبلا دیده شده است.
+
+    :first-child
+
+    :first-of-type
+    از یک نوع را انتخاب میکند.
+    در مواقعی استفاده میشود که المان والد جندین نوع تگ در داخل آن داشته باشد و ما فقز بخواهیم که 
+    به طور مثال فقط پراگراف ها را انتخاب نماییم
+    میتوانیم از نام گلاس نیز استفاده کنیم
+    به طور مثال
+    .x:first-of-type {
+
+    }
+    :last-child
+    :last-of=type
+    :not(p){
+
+    }
+    تمامی المان ها به جز پراگراف را انتخال میکند.
+    دلیل استفاده از این ها این است که تا انجایی که میشود از کلاس و آیدی در کد هایمان استفاده نکنیم
+
+    :nth-child(6)
+
+    :nth-last-child();
+
+    :nth-last-of-type(n){
+
+    }
+    :only-of-type{
+
+    }
+    صرفا فرزندی را انتخاب میکند که در آن خانواده مذکور تک فرزند است.
+
+    :only-child{}
+    فقط یک فرزند باشد
+
+    even and odd:
+
+    p:nth-child(odd){
+        color: red; 
+    }
+
+    input:disabled{
+
+    }
+    input:required{
+
+    }
+    input:disabled{
+        
+    }
+
+    Positions: very Important
+    postition: static
+    عناصر به طور پیشفرض  ماهیت استاتیک دارند
+    یعنی در هر جایی که ایجاد میشوند در همان جا ثابت هستند
+
+    postition: relative
+    یعنی جای آن ثابت است اما می توانیم جای آن را با انیمیشن یا این چیز ها جای آن را عوض کنیم
+    برای آن از این مورد استفاده می کنیم
+    عناصر درون آن میتوانند به خود آن وابسته باشند
+
+    position: absolute
+    اگر زمانی بخواهیم که عنصر فرزند را جابه جا کنیم نسبت به عنصر والد از این مورد استفاده میکنیم
+    و اکر بخواهیم این جا به جایی نسبت به عنصر والد باشد نه نسبت به سند
+    باید به والد 
+    position: relative
+    بدهیم و به فرزند آن میبایست
+    position: absolute
+    بدهیم
+    باعث میشود که نسبت به عنصر والد خودش قابلیت شناوری پیدا کند و توسط موارد زیر جهت بگیرد
+    top
+    left
+    right
+    bottom
+    
+    position: fixed;
+    ثابت است
+    top,left,right,bottom 
+    هم میگیرد
+
+    pisiton: sticky;
+    
+    box-shadow properties: 
+    box-shadow: x y blur spread color;
+
+ -->
+
+<body>
+
+    <table>
+        <thead>
+            <tr>
+                <th>نام</th>
+                <th>نام خانوادگی</th>
+                <th>ایمیل</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>علی</td>
+                <td>احمدی</td>
+                <td>aliAhmadi#gmail.com</td>
+            </tr>
+            <tr>
+                <td>عباس</td>
+                <td>قلی پور</td>
+                <td>aliAhmadi#gmail.com</td>
+            </tr>
+            <tr>
+                <td>سحر</td>
+                <td>عباسی</td>
+                <td>aliAhmadi#gmail.com</td>
+            </tr>
+            <tr>
+                <td>سارا</td>
+                <td>اسدی</td>
+                <td>aliAhmadi#gmail.com</td>
+            </tr>
+        </tbody>
+    </table>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/07_seudoElement.html b/css1/07_seudoElement.html
new file mode 100644
index 0000000..2ea17be
--- /dev/null
+++ b/css1/07_seudoElement.html
@@ -0,0 +1,75 @@
+<!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>Seudo Elements</title>
+    <style>
+        body {
+            font-size: 24px;
+        }
+
+        .select::selection {
+            color: orange;
+            background-color: lightblue;
+        }
+
+        ::first-line {
+            color: red;
+        }
+
+        ::first-letter {
+            color: blue;
+            font-size: 60px;
+        }
+
+        [valign="top"] {
+            text-align: right !important;
+        }
+        #mailtpl_body{
+            text-align: right !important;
+        }
+    </style>
+</head>
+
+<!-- 
+    ::first-line
+    بر روی تگ های 
+    inline
+    کار نمیکنه
+
+    property های مجاز
+        font properties
+        color properties
+        background properties 
+        letter-spacing
+        word-spacing
+        text-decoration
+        vertical-align
+        text-transform
+        line-height
+        clear
+
+    ::first-lette
+    اولین کاراکتر را انتخاب میکند
+
+    ::before
+    ::after
+    برای وقتی است که نمیخواهیم یک عنصر جدید در صفحه داشته باشیم 
+    اما میخواهیم که با سی اس اس یک محتوایی را به آن المان اضافه کنیم
+
+    opacity: مربوط به وضوح تصاویر است
+    
+
+ -->
+
+<body>
+    <p class="select">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, magni.</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, magni.</p>
+    <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet, ex.</span>
+    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aut.</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/08_gradient.html b/css1/08_gradient.html
new file mode 100644
index 0000000..ac58ed1
--- /dev/null
+++ b/css1/08_gradient.html
@@ -0,0 +1,77 @@
+<!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>Document</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        .gradient {
+            width: 100%;
+            height: 300px;
+            background-image: linear-gradient(to right, red, blue);
+        }
+
+        .second-gradient {
+            width: 100%;
+            height: 300px;
+            background-image: linear-gradient(55deg, red, blue, green);
+        }
+
+        .repeating-gradient {
+            width: 100%;
+            height: 300px;
+            background-image: repeating-linear-gradient(red, green, blue 20%);
+        }
+
+        .second-repeating-gradient {
+            width: 100%;
+            height: 300px;
+            background-image: repeating-linear-gradient(red, green 40%, blue 20%);
+        }
+
+        .radial-gradient {
+            width: 100%;
+            height: 300px;
+            background-image: radial-gradient(circle, blue, red, green);
+        }
+
+        .repeating-radial-gradient {
+            width: 100%;
+            height: 300px;
+            background-image: repeating-radial-gradient(blue, red, green 10%);
+            /* مقدار آخر درصد تکرار را مشخص میکند */
+        }
+
+        .border-image {
+            width: 600px;
+            height: 200px;
+            border: 15px solid transparent;
+            border-image-source: url('something');
+            border-image-repeat: round;
+            border-image-slice: 25;
+            border-image-width: 20px;
+
+            border-image: url('something') 25 round;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="gradient"></div>
+    <div class="second-gradient"></div>
+    <div class="repeating-gradient"></div>
+    <div class="second-repeating-gradient"></div>
+    <div class="radial-gradient"></div>
+    <div class="repeating-radial-gradient"></div>
+    <div class="border-image"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/09_filter.html b/css1/09_filter.html
new file mode 100644
index 0000000..8c3b2d0
--- /dev/null
+++ b/css1/09_filter.html
@@ -0,0 +1,60 @@
+<!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>Filter</title>
+    <style>
+        @charset "UTF-8";
+
+        :root {
+            --darkColor: #000;
+        }
+
+        .container img {
+            filter: blur(4px);
+            filter: brightness(10);
+            filter: brightness(0.5);
+            filter: contrast(150%);
+            filter: grayscale(10%);
+            filter: hue-rotate(150deg);
+            filter: invert(100%);
+            filter: opacity(60%);
+            filter: saturate(7);
+            filter: sepia(50%);
+            filter: drop-shadow(8px 4px 5px #000);
+            filter: contrast(190%) brightness(2);
+        }
+
+        .container img:hover {
+            filter: grayscale(100%);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 
+        یک سری افکت روی تصاویر ایجاد میکند
+        brightness
+        مقدار پیشفرض یک است
+        filter: grayscale();
+        برای سیاه و سفید کردن به کار میرود
+        hue-rotate(150deg)
+        چرخش رنک
+        filter: invert(100%);
+        فیلتر نگاتیوی است
+        filter: opacity(60%);
+        با فیلتر هم میتوان اعمال کرد
+        filter: saturate(7);
+        اشباع کردن رنگ ها
+        filter: drop-shadow(8px 4px 5px #000);
+        مانند box-shadow 
+
+        :root
+
+     -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/10_float.html b/css1/10_float.html
new file mode 100644
index 0000000..eef5b98
--- /dev/null
+++ b/css1/10_float.html
@@ -0,0 +1,44 @@
+<!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>Float</title>
+    <style>
+        .wrapper {
+            overflow: auto;
+        }
+
+        .wrapper img {
+            float: right;
+            width: 100%;
+            height: 200px;
+            background: red;
+        }
+
+        .clear-fix {
+            clear: both;
+        }
+
+        /* روش دیگر برای استفاده */
+
+        .clear-fix::after {
+            content: "";
+            clear: both;
+            display: table;
+        }
+        
+    </style>
+</head>
+
+<body>
+    <div class="wrapper">
+        <img src="something" alt="">
+        <div class="clear-fix"></div>
+        <div class="containet"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/11_Selectors.html b/css1/11_Selectors.html
new file mode 100644
index 0000000..eb0560f
--- /dev/null
+++ b/css1/11_Selectors.html
@@ -0,0 +1,93 @@
+<!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>Selecoters</title>
+    <style>
+        .login input[value] {
+            background: red;
+        }
+
+        .login input[type="email"] {
+            background: green;
+        }
+
+        .login input[type="password"] {
+            background: blue;
+        }
+
+        .login input[value="ali705539"] {
+            background: gray;
+            color: #fff;
+        }
+
+        img[alt~="nature"] {
+            width: 200px;
+        }
+
+        [class|=text] {
+            color: red;
+        }
+
+        [class^=text] {
+            color: red;
+        }
+
+        [class $="text"] {
+            color: #fff;
+        }
+        [class *="text"]{
+            color: aqua;
+        }
+    </style>
+</head>
+<!-- 
+    decentdant selector (space)
+    div p{}
+    child selector (>)
+    div > p
+    adjacent sibling selector(+)
+    بلافاصله بعد از آن را انتخاب کن
+    div + p
+    general sibling selector (~)
+    بعدش هر چی بود
+    div.x ~ p
+
+    attribute selectors: 
+
+    input[value]
+    اینپوت هایی که  ولیو دارند را انتخاب کن
+
+    img[alt ~= "nature"] 
+    مقدار آن شامل این کلمه باشد.
+
+    [class|=text]{}
+    به دنبال المانی باش که کلاس آن شامل این عبارت باشد
+
+    [class^=text]
+    اگر با - جدا نشده بود باید از این مورد استفاده شود و اگر قرار است ترکیبی باشد باید از این مورد استفاده شود
+
+    [class $="text"] 
+    در ابتدای نام کلاس بیاید یا اگر ترکیبی است در آخر باشد نام کلاس
+    nametext
+    name-text
+
+    [class *="text"]
+    فقط در نام کلاس این مقدار باشد
+
+ -->
+
+<body>
+
+    <form class="login" action="">
+        <input type="text" value="">
+        <input type="text" value="ali705539">
+        <input type="password">
+        <input type="email">
+    </form>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css1/fonts/Vazirmatn-Bold.woff2 b/css1/fonts/Vazirmatn-Bold.woff2
new file mode 100644
index 0000000..65b427f
Binary files /dev/null and b/css1/fonts/Vazirmatn-Bold.woff2 differ
diff --git a/css1/fonts/Vazirmatn-Medium.woff2 b/css1/fonts/Vazirmatn-Medium.woff2
new file mode 100644
index 0000000..495af75
Binary files /dev/null and b/css1/fonts/Vazirmatn-Medium.woff2 differ
diff --git a/css1/images/flipCard/@Wallpaper_4K3D (12614).jpg b/css1/images/flipCard/@Wallpaper_4K3D (12614).jpg
new file mode 100644
index 0000000..d3f4e04
Binary files /dev/null and b/css1/images/flipCard/@Wallpaper_4K3D (12614).jpg differ
diff --git a/css1/styles/03_css.css b/css1/styles/03_css.css
new file mode 100644
index 0000000..c024462
--- /dev/null
+++ b/css1/styles/03_css.css
@@ -0,0 +1,22 @@
+@font-face {
+    font-family: 'Vasir';
+    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Vasir';
+    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+*,
+html,
+body {
+    font-family: 'Vasir';
+}
+.text-bold{
+    font-weight: bold;
+}
\ No newline at end of file

نام	نام خانوادگی	ایمیل
علی	احمدی	aliAhmadi#gmail.com
عباس	قلی پور	aliAhmadi#gmail.com
سحر	عباسی	aliAhmadi#gmail.com
سارا	اسدی	aliAhmadi#gmail.com