├── Lesson 1 - الدرس
    ├── Course.txt
    └── Learn CSS in arabic.pdf
├── Lesson 10 - الدرس
    ├── img
    │   ├── img1.png
    │   └── logo.jpg
    └── index.html
├── Lesson 11 - الدرس
    ├── img1.png
    └── index.html
├── Lesson 12 - الدرس
    ├── img1.png
    ├── img2.png
    └── index.html
├── Lesson 13 - الدرس
    ├── img1.png
    ├── img2.png
    ├── img3.webp
    └── index.html
├── Lesson 14 - الدرس
    ├── index.html
    └── style.css
├── Lesson 15 - الدرس
    └── index.html
├── Lesson 17 - الدرس
    └── index.html
├── Lesson 18 - الدرس
    └── index.html
├── Lesson 19 - الدرس
    └── index.html
├── Lesson 2 - الدرس
    └── index.html
├── Lesson 20 - الدرس
    └── index.html
├── Lesson 21 - الدرس
    ├── icon.png
    ├── index.html
    ├── project.html
    └── video.mp4
├── Lesson 22 - الدرس
    └── index.html
├── Lesson 23 - الدرس
    └── index.html
├── Lesson 24 - الدرس
    └── index.html
├── Lesson 25 - الدرس
    └── index.html
├── Lesson 26 - الدرس
    └── index.html
├── Lesson 28 - الدرس
    └── index.html
├── Lesson 29 - الدرس
    └── index.html
├── Lesson 3 - الدرس
    ├── index.html
    └── style.css
├── Lesson 30 - الدرس
    ├── Capture.PNG
    ├── css.jpg
    ├── index.html
    └── programmer.jpg
├── Lesson 31 - الدرس
    ├── css.jpg
    └── index.html
├── Lesson 32 - الدرس
    ├── css.jpg
    ├── cursor.html
    └── index.html
├── Lesson 33 - الدرس
    ├── Pagination.html
    └── index.html
├── Lesson 34 - الدرس
    ├── Text-shadow.png
    ├── css-box-shadow-property-examples.png
    ├── icon-book.png
    └── index.html
├── Lesson 35 - الدرس
    ├── css buttons styling (Time 0_08_32;05).png
    └── index.html
├── Lesson 36 - الدرس
    └── index.html
├── Lesson 37 - الدرس
    └── index.html
├── Lesson 38 - الدرس
    ├── index.html
    ├── list-item-markers.html
    └── listmarker.png
├── Lesson 39 - الدرس
    ├── index copy.html
    └── index.html
├── Lesson 4 - الدرس
    └── index.html
├── Lesson 41 - الدرس
    ├── img2.jpg
    └── index.html
├── Lesson 42 - الدرس
    ├── CSS FLEX BOX.pdf
    ├── background.jpg
    ├── img1.png
    ├── img2.jpg
    └── index.html
├── Lesson 43 - الدرس
    ├── app.html
    ├── index.html
    └── logo.png
├── Lesson 44 - الدرس
    ├── index.html
    └── logo.png
├── Lesson 45 - الدرس
    └── app.html
├── Lesson 46 - الدرس
    ├── autofit.png
    ├── css grid layout.pdf
    ├── img2.jpg
    └── index.html
├── Lesson 47 - الدرس
    ├── img2.jpg
    └── index.html
├── Lesson 48 - الدرس
    ├── background.jpg
    ├── css overflow property example.png
    ├── html-block-elements.PNG
    ├── html-inline-elements.PNG
    ├── index.html
    └── text-overflow-example-1.png
├── Lesson 49 - الدرس
    ├── filters.html
    ├── img1.jpg
    ├── img2.jpg
    ├── index.html
    └── logo.jpg
├── Lesson 5 - الدرس
    └── index.html
├── Lesson 50 - الدرس
    └── index.html
├── Lesson 51 - الدرس
    ├── correct-mark.png
    ├── incorrect-mark.png
    ├── index.html
    ├── programmer.avif
    └── valid-vs-invalid.jpg
├── Lesson 52 - الدرس
    ├── img.jpg
    ├── index.html
    └── programmer.avif
├── Lesson 53 - الدرس
    ├── Capture.PNG
    ├── Capture2.PNG
    ├── Capture3.PNG
    ├── correct-mark.png
    ├── incorrect-mark.png
    ├── index.html
    └── programmer.avif
├── Lesson 54 - الدرس
    ├── correct-mark.png
    ├── incorrect-mark.png
    ├── index.html
    ├── learn how to create a register page (Time 0_05_05;23).png
    ├── programmer.avif
    ├── register.html
    └── style.css
├── Lesson 55 - الدرس
    ├── img.jpg
    └── index.html
├── Lesson 56 - الدرس
    └── index.html
├── Lesson 57 - الدرس
    ├── css.jpg
    ├── img.jpg
    ├── img2.jpg
    ├── index.html
    └── maxresdefault.webp
├── Lesson 58 - الدرس
    ├── img.png
    └── index.html
├── Lesson 6 - الدرس
    └── index.html
├── Lesson 7 - الدرس
    └── index.html
├── Lesson 8 - الدرس
    └── index.html
├── Lesson 9 - الدرس
    └── index.html
└── Old Lessons - القديم
    ├── Lesson 47 48
        ├── img
        │   ├── facebook.png
        │   ├── logo.jpg
        │   ├── map.png
        │   ├── shiyar.jpg
        │   ├── twitter.png
        │   └── youtube.png
        ├── index.html
        └── style.css
    ├── Lesson 49 50 51 52 53 - الدرس
        ├── img
        │   ├── facebook.png
        │   ├── logo.jpg
        │   ├── map.png
        │   ├── shiyar.jpg
        │   ├── twitter.png
        │   └── youtube.png
        ├── index.html
        └── style.css
    ├── Lesson 63 - الدرس
        ├── img.jpg
        └── index.html
    ├── Lesson 64 - الدرس
        └── index.html
    ├── Lesson 65 - الدرس
        └── index.html
    ├── Lesson 66 - الدرس
        └── index.html
    ├── Lesson 67 - الدرس
        └── index.html
    ├── Lesson 68 - الدرس
        ├── img.png
        └── index.html
    ├── Lesson 69 - الدرس
        └── index.html
    ├── Lesson 70 - الدرس
        └── index.html
    ├── Lesson 71 - الدرس
        ├── index.html
        └── logo.png
    └── Lesson 72 - الدرس
        ├── app.html
        ├── index.html
        └── logo.png


/Lesson 1 - الدرس/Course.txt:
--------------------------------------------------------------------------------
1 | https://codershiyar.com/course-to-learn-css-in-arabic
2 | https://www.youtube.com/playlist?list=PLMTdZ61eBnyoxjc9Prw0uhwgp6YZ2-_sg


--------------------------------------------------------------------------------
/Lesson 1 - الدرس/Learn CSS in arabic.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 1 - الدرس/Learn CSS in arabic.pdf


--------------------------------------------------------------------------------
/Lesson 10 - الدرس/img/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 10 - الدرس/img/img1.png


--------------------------------------------------------------------------------
/Lesson 10 - الدرس/img/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 10 - الدرس/img/logo.jpg


--------------------------------------------------------------------------------
/Lesson 10 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Coder Shiyar CSS</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 | <style>
 8 | /* 
 9 |      background-image: url();                        يستخدم لتزويد عناصر بصورة خلفية 
10 |      background-repeat: no-repeat, repeat;يستخدم لتحكم بالحالة تكرار الصورة الخلفية
11 |      background-size: ;                           يستخدم لتحكم بالحجم الصورة الخلفية
12 | */
13 |      body{
14 |          /* background: url(https://avatars.githubusercontent.com/u/60817204?v=4) , rgb(255, 88, 88); */
15 |          background: url('img/img1.png') , rgb(104, 118, 248) ;
16 |          /* background-size: 300px; */
17 |          background-repeat: no-repeat;
18 |       
19 |     }
20 | </style>
21 |     </head>
22 |     <body>
23 | 
24 |     </body>
25 | </html>


--------------------------------------------------------------------------------
/Lesson 11 - الدرس/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 11 - الدرس/img1.png


--------------------------------------------------------------------------------
/Lesson 11 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 | /* 
 9 | background-position: x% y%; القيمة الأولى هي الوضع الأفقي والقيمة الثانية هي القيمة الوضع عامودي
10 | left :            لجعل تموضع في الجهة اليسار
11 | right :           لجعل تموضع في الجهة اليمين
12 | center :        لجعل تموضع في المنتصف العنصر
13 | top :       لجعل تموضع العنصر في الجهة الأعلى
14 | bottom :         لجعل تموضع في الجهة المنتصف
15 | The first value is the horizontal position and the second value is the vertical.
16 | min-height: 100vh; حد الأدنى للارتفاع العنصر
17 | calc() لعمل عمليات حسابية في سي اس اس
18 | */
19 | body{
20 |     height: 1px;
21 |     min-height: calc(100vh - 20px) ;
22 | }
23 | header{
24 |     background-color: rgb(255, 109, 109);
25 |     height: 10%;
26 | }
27 | 
28 | main{
29 |     background-image: url(img1.png);
30 |     background-repeat: no-repeat;
31 |     background-size: 200px;
32 |     background-position: center center;
33 |     background-color: rgb(61, 61, 61);
34 |     height: 80%;
35 | }
36 | footer{
37 |     background-color: rgb(255, 255, 255);
38 |     height: 10%;
39 | }
40 |     </style>
41 | </head>
42 | <body>
43 | 
44 |   <header>
45 | 
46 |   </header>
47 | 
48 |   <main>
49 | 
50 |   </main>
51 | 
52 |   <footer>
53 | 
54 |   </footer>
55 | 
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/Lesson 12 - الدرس/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 12 - الدرس/img1.png


--------------------------------------------------------------------------------
/Lesson 12 - الدرس/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 12 - الدرس/img2.png


--------------------------------------------------------------------------------
/Lesson 12 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 | /* 
 9 | background-attachment: fixed, scroll , local , initial , inherit; 
10 | scroll :                 سيتم تمرير صورة الخلفية مع الصفحة. هذا هو الافتراضي
11 | fixed  :                         لجعل صورة خلفية ثابتة بمكانه عند عمل سكرول
12 | local  :                          سيتم تمرير صورة الخلفية مع محتويات العنصر
13 | initial :                                    لحذف تلك خاصية من العنصر المحدد
14 | inherit : لجعل العنصر المحدد يرث ذلك خاصية من العنصر الاب إن كان الأب يملكها
15 | --------------------------------------------------------------------------------
16 | 
17 | */
18 | 
19 | /* div{
20 |     height: 80px;
21 | } */
22 | 
23 | /* header , main{
24 |     background: url(img1.png) ;
25 |     background-repeat: no-repeat;
26 |     background-size: 200px;
27 |     background-position: top ;
28 |     max-height: 300px;
29 |     overflow: scroll;
30 | }
31 | main{
32 |     background-attachment: local;
33 | }
34 | 
35 | main{
36 |     background-attachment: initial;
37 | } */
38 | header{
39 |     background: url(img1.png) ;
40 |     background-repeat: no-repeat;
41 |     background-size: 200px;
42 |     background-position: top  ;
43 |     height: 200px;
44 |     background-color: rgb(109, 109, 109);
45 |     background-attachment: fixed;
46 | }
47 | main{
48 |     background-color: rgb(226, 225, 225);
49 |     height: 800px;
50 | }
51 |     </style>
52 | </head>
53 | <body>
54 | 
55 |     <header>
56 | 
57 |     </header>
58 | 
59 |     <main>
60 | 
61 |     </main>
62 |     <!-- <header>
63 |         <div>I like CSS - انا احب سي اس اس</div>
64 |         <div>I like CSS - انا احب سي اس اس</div>
65 |         <div>I like CSS - انا احب سي اس اس</div>
66 |         <div>I like CSS - انا احب سي اس اس</div>
67 |         <div>I like CSS - انا احب سي اس اس</div>
68 |         <div>I like CSS - انا احب سي اس اس</div>
69 |         <div>I like CSS - انا احب سي اس اس</div>
70 |         <div>I like CSS - انا احب سي اس اس</div>
71 |         <div>I like CSS - انا احب سي اس اس</div>
72 |     </header>
73 | 
74 |     <main>
75 |         <div>I like CSS - انا احب سي اس اس</div>
76 |         <div>I like CSS - انا احب سي اس اس</div>
77 |         <div>I like CSS - انا احب سي اس اس</div>
78 |         <div>I like CSS - انا احب سي اس اس</div>
79 |         <div>I like CSS - انا احب سي اس اس</div>
80 |         <div>I like CSS - انا احب سي اس اس</div>
81 |         <div>I like CSS - انا احب سي اس اس</div>
82 |         <div>I like CSS - انا احب سي اس اس</div>
83 |         <div>I like CSS - انا احب سي اس اس</div>
84 |     </main> -->
85 | 
86 | 
87 | </body>
88 | </html>


--------------------------------------------------------------------------------
/Lesson 13 - الدرس/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 13 - الدرس/img1.png


--------------------------------------------------------------------------------
/Lesson 13 - الدرس/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 13 - الدرس/img2.png


--------------------------------------------------------------------------------
/Lesson 13 - الدرس/img3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 13 - الدرس/img3.webp


--------------------------------------------------------------------------------
/Lesson 13 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>background-blend-mode</title>
 8 |     <style>
 9 | 
10 | /*            يستخدم لمزج صور خلفية مع لون خلفية عنصر الذي تحدده مع وضع الذي تحدده
11 | background-blend-mode:normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;           
12 | ------------------------------------------------------------------------------------------------------------
13 | normal        Sets the blending mode to normal	     يضبط وضع المزج على الوضع العادي
14 | multiply      Sets the blending mode to multiply	        يضبط وضع المزج على الضرب
15 | screen        Sets the blending mode to screen	           يضبط وضع المزج على الشاشة
16 | overlay       Sets the blending mode to overlay	          يضبط وضع المزج على التراكب
17 | darken        Sets the blending mode to darken	          يضبط وضع المزج على التعتيم
18 | lighten       Sets the blending mode to lighten	               يضبط وضع المزج لتفتيح
19 | color-dodge   Sets the blending mode to color-dodge	 يضبط وضع المزج على تفادي الألوان
20 | saturation    Sets the blending mode to saturation       يضبط وضع المزج على نقع/صفاء
21 | color 	      Sets the blending mode to color               يضبط وضع المزج على اللون
22 | luminosity    Sets the blending mode to luminosity	      يضبط وضع المزج على اللمعان 
23 | hard-light                                                  مزج بوضع  اضاءة قوية جدا
24 | soft-light                                                      مزج بوضع إضاءة ناعمة
25 | difference                                                                  مزج اختلاف
26 | ------------------------------------------------------------------------------------------------------------
27 | */
28 | 
29 | body{
30 |     background-image: url(img1.png);
31 |     background-color: rgb(149 149 149);
32 |     background-repeat: no-repeat;
33 |     background-size: 250px;
34 |     background-blend-mode: hard-light;
35 | }
36 | 
37 |     </style>
38 | </head>
39 | <body>
40 |     
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Lesson 14 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Coder Shiyar CSS</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <link rel="stylesheet" href="style.css">
 8 |     </head>
 9 |     <body>
10 |     
11 | <nav>
12 |  <a href="">1</a>
13 | <a href="">2</a>
14 | <a href="">3</a>
15 | </nav>
16 | 
17 | 
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/Lesson 14 - الدرس/style.css:
--------------------------------------------------------------------------------
 1 | nav{
 2 |    background-color: rgb(255, 112, 112);
 3 |    height: 100px;
 4 | }
 5 | a{
 6 |    display: inline-block;
 7 |    color: white;
 8 |    height: 40px;
 9 |    width: 50px;
10 | }
11 | /* List of block elements - قائمة لعناصر الذي يبداون دائما بوضع افتراضي بسطر جديد
12 |    ---------------------------------------------------------------------------------------------
13 | <address>         <article>       <aside>          <blockquote>    <canvas>
14 | <dd>              <div>           <dl>             <dt>            <fieldset>
15 | <figcaption>      <figure>        <footer>         <form>          <h1>-<h6>
16 | <header>          <hr>            <li>             <main>          <nav>
17 | <noscript>        <ol>            <p>              <pre>           <section>
18 | <table>           <tfoot>         <ul>             <video>
19 | ---------------------------------------------------------------------------------------------    
20 | List of inline elements    -   قائمة لعناصر الذي لا يبداون بسطر جديد بوضع افتراضي
21 | ---------------------------------------------------------------------------------------------    
22 | <a>               <abbr>          <acronym>       <b>              <bdo>
23 | <big>             <br>            <button>        <cite>           <code>
24 | <dfn>             <em>            <i>             <img>            <input>
25 | <kbd>             <label>         <map>           <object>         <output>
26 | <q>               <samp>          <script>        <select>         <small>
27 | <span>            <strong>        <sub>           <sup>            <textarea>
28 | <time>            <tt>            <var>    
29 | 
30 | /*--------------------------------------------------------------------------------------------
31 | display: inline; 
32 | لجعل عنصر من النوع الذي لايترك سطر جديد بعدها فهذا يعني لايبدا بسطر جديد بنفسه ولكن يصعب 
33 |    عليك تحكم بحجمها مثل تحديد عرض  او ارتفاع او مسافة بينها وبين عناصر اخرى ..إلى اخره
34 | /*--------------------------------------------------------------------------------------------
35 | display: inline-block;
36 |                                   لجعل عنصر من النوع الذي لا يترك سطر جديد بعدها فهذا يعني
37 |                               لا يبدا  بسطر جديد بنفسه ولكنها يجعل تحكم بالحجم عناصر اسهل 
38 | ----------------------------------------------------------------------------------------------
39 | display: block;
40 |    لجعل عنصر يصبح من نوع بلوك الذي ياخذ سطر كامل وعناصر بعدها او قبلها يبداون بسطر جديد
41 |                                               يمكنك تحكم بحجمها وتصميمها بكامل حريتك بسهول           
42 | ----------------------------------------------------------------------------------------------
43 | Compared to display: inline, the major difference is that 
44 | display: inline-block allows to set a width and height on the element.
45 | -----------------------------------------------------------------------------
46 | Also, with display: inline-block, the top and bottom margins/paddings are 
47 | respected, but with display: inline they are not.
48 | -----------------------------------------------------------------------------
49 | Compared to display: block, the major difference is that display: inline-block 
50 | does not add a line-break after the element, so the element can sit next to 
51 | other elements.
52 | */
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/Lesson 15 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS | !important</title>
 7 |     <style>
 8 | /* 
 9 | 
10 | ---------------------------------------------------------------------
11 | !important  (مهم)          | Learn CSS with Coder Shiyar
12 | ---------------------------------------------------------------------
13 | In fact, if you use the !important rule, it will override ALL
14 |  previous styling rules for that specific property on that element!
15 | ---------------------------------------------------------------------
16 |         في الواقع ، إذا استخدمت! الأمر مهمة ، فستتجاوز جميع قواعد 
17 | التصميم السابقة لتلك الخاصيةالمحددة على العنصراو العناصر المحددة
18 | ---------------------------------------------------------------------
19 | 
20 | */
21 | #div1{
22 |     background-color: rgb(255, 112, 112) ;
23 |     height: 50px;
24 | }
25 | #div2{
26 |     background-color: rgb(243, 243, 243) ;
27 |     height: 50px;
28 | }
29 | 
30 | div{
31 |    background-color: rgb(75, 75, 75) !important; 
32 |    height: 60px ;
33 | }
34 |     </style>
35 | </head>
36 | <body>
37 |     
38 | 
39 | <div id="div1" >
40 | 
41 | </div>
42 | 
43 | <div id="div2">
44 |     
45 | </div>
46 | 
47 | <div>
48 |     
49 | </div>
50 | 
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/Lesson 17 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar - Course CSS</title>
 7 |     <style>
 8 | /* 
 9 | width                   لتحديد حجم العرض العنصر المحدد
10 | max-width لتحديد الحد الأقصى للحجم العرض العنصر المحدد 
11 | min-width لتحديد الحد الادنى للحجم العرض العنصر المحدد
12 | ---------------------------------------------------------
13 | width: auto|value|initial|inherit;
14 | max-width: auto|value|initial|inherit;
15 | min-width: auto|value|initial|inherit;
16 | --------------------------------------------------------
17 | 
18 | 
19 | */
20 | header{
21 |     background-color: rgb(255, 107, 107);
22 |     height: 40px;
23 |     width: 600px;
24 |     /* max-width: 500px;
25 |     min-width: 300px; */
26 |     max-width: 100% !important;
27 | }
28 | header h3{
29 |     background-color: rgb(59, 59, 59);
30 |     color: white;
31 |     width: 50%;
32 | }
33 | a{
34 |     background-color: rgb(88, 88, 88);
35 |     color: white;
36 |     width: calc(50% - 2px) ;
37 |     display: inline-block;
38 | }
39 |     </style>
40 | </head>
41 | <body>
42 | 
43 |     
44 |     <header>
45 |         <h3>Learn CSS</h3>
46 |     </header>
47 | 
48 |     <a href="">Link to css course</a>
49 |     <a href="">Link to html course</a>
50 |     <a href="">Link to html course</a>
51 | </body>
52 | </html>
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | <!-- /* List of block elements - قائمة لعناصر الذي يبداون دائما بوضع افتراضي بسطر جديد
60 |    ---------------------------------------------------------------------------------------------
61 | <address>         <article>       <aside>          <blockquote>    <canvas>
62 | <dd>              <div>           <dl>             <dt>            <fieldset>
63 | <figcaption>      <figure>        <footer>         <form>          <h1>-<h6>
64 | <header>          <hr>            <li>             <main>          <nav>
65 | <noscript>        <ol>            <p>              <pre>           <section>
66 | <table>           <tfoot>         <ul>             <video>
67 | ---------------------------------------------------------------------------------------------    
68 | List of inline elements    -   قائمة لعناصر الذي لا يبداون بسطر جديد بوضع افتراضي
69 | ---------------------------------------------------------------------------------------------    
70 | <a>               <abbr>          <acronym>       <b>              <bdo>
71 | <big>             <br>            <button>        <cite>           <code>
72 | <dfn>             <em>            <i>             <img>            <input>
73 | <kbd>             <label>         <map>           <object>         <output>
74 | <q>               <samp>          <script>        <select>         <small>
75 | <span>            <strong>        <sub>           <sup>            <textarea>
76 | <time>            <tt>            <var>     -->
77 | 


--------------------------------------------------------------------------------
/Lesson 18 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar - Course CSS</title>
 7 |     <style>
 8 | 
 9 | /* 
10 | height                   لتحديد حجم الارتفاع العنصر المحدد
11 | max-height لتحديد الحد الأقصى للحجم الارتفاع العنصر المحدد 
12 | min-height لتحديد الحد الادنى للحجم الارتفاع العنصر المحدد
13 | إذا كان الارتفاع: تلقائي ؛ سيقوم العنصر تلقائيًا بضبط ارتفاعه للسماح بعرض محتواه بشكل صحيح.
14 | ---------------------------------------------------------
15 | height: auto|value|initial|inherit;
16 | max-height: auto|value|initial|inherit;
17 | min-height: auto|value|initial|inherit;
18 | 
19 | If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
20 | --------------------------------------------------------
21 | */
22 | body{
23 |     height: 600px;
24 | }
25 | header{
26 |     /* height: inherit;
27 |     max-height: 300px; */
28 |     min-height: 100px;
29 |     background-color: rgb(238, 86, 86);
30 | }
31 | a{
32 |     display: inline-block;
33 |     height: 100px;
34 |     background-color: rgb(82, 81, 81);
35 |     color: white;
36 | }
37 | main{
38 |     height: 100px;
39 |     background-color: rgb(53, 121, 248);
40 | }
41 |     </style>
42 | </head>
43 | <body>
44 |     
45 | <header>
46 | 
47 | </header>
48 | 
49 | 
50 | <main>
51 | <article>1</article>
52 | <article>2</article>
53 | <article>3</article>
54 | </main>
55 | 
56 | <a href="">learn css</a>
57 | 
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/Lesson 19 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar - Course CSS</title>
 7 |     <style>
 8 | /* 
 9 | padding-top:                     لإضافة مساحة إضافية  في الجهة الاعلى العنصر المحدد
10 | padding-right:                  لإضافة مساحة إضافية  في الجهة اليمين العنصر المحدد      
11 | padding-bottom:                  لإضافة مساحة إضافية  في الجهة الاسفل العنصر المحدد  
12 | padding-left:                   لإضافة مساحة إضافية  في الجهة اليسار العنصر المحدد
13 | ---------------------------------------------------------------------------------
14 | padding: top right bottom left;     لإضافة مساحة اضافية لجميع جهات بشكل مختصر
15 | ---------------------------------------------------------------------------------
16 | value : القيمة 
17 | length - specifies a padding in px, pt, cm, etc.
18 | % - specifies a padding in % of the width of the containing element
19 | inherit - specifies that the padding should be inherited from the parent element
20 | ---------------------------------------------------------------------------------
21 | 1 يمكن تحديد مساحة عبر احد واحدت قياس ثابتة مثل بيكسل
22 | 2 او يمكنك عبر نسبة مئوية % وسوف يتم اضافة مساحة حسب 
23 | النسبة الذي تحدده و  القياس سيكون حسب حجم عرض العنصر اب
24 | 3 او يمكنك جعل يرث القيمة من العنصر الاب عبر انهيرت 
25 | --------------------------------------------------------*/
26 | *{
27 |     padding: 0px;
28 | }
29 | header section{
30 |     background-color: rgb(241, 90, 90);
31 |     
32 |     /* padding-top: 20px;
33 |     padding-right: 20px;
34 |     padding-bottom: 20px;
35 |     padding-left: 20px;  */
36 |    padding: 20px 20px ;
37 | }
38 | 
39 | header{
40 |     width: 95%;
41 |     padding-right: 5%;
42 |     background-color: rgb(46, 46, 46);
43 | }
44 | 
45 |     </style>
46 | </head>
47 | <body>
48 | 
49 | <header>
50 |  <section>
51 |      section
52 |  </section>
53 | </header>
54 | 
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/Lesson 2 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <title></title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <style>
 8 |         body{
 9 |             background: rgb(255, 72, 72);
10 |         }
11 |         </style>
12 |     </head>
13 |     <body>
14 |     Coder Shiyar  1 2
15 |     </body>
16 | </html>


--------------------------------------------------------------------------------
/Lesson 20 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar - Course CSS</title>
 7 |     <style>
 8 |         
 9 | /* 
10 | margin-top:                     لإضافة مساحة  في الجهة الاعلى حول العنصر المحدد
11 | margin-right:                  لإضافة مساحة  في الجهة اليمين حول العنصر المحدد      
12 | margin-bottom:                  لإضافة مساحة  في الجهة الاسفل حول العنصر المحدد  
13 | margin-left:                   لإضافة مساحة في الجهة اليسار حول العنصر المحدد
14 | ---------------------------------------------------------------------------------
15 | margin: top right bottom left; لإضافة مساحة حول العنصر محدد في جميع جهات بشكل مختصر
16 | ---------------------------------------------------------------------------------
17 | value : القيمة 
18 | length - specifies a margin in px, pt, cm, etc.
19 | % - specifies a margin in % of the width of the containing element
20 | inherit - specifies that the margin should be inherited from the parent element
21 | ---------------------------------------------------------------------------------
22 | 1 يمكن تحديد مساحة عبر احد وحدت قياس ثابتة مثل بيكسل
23 | 2 او يمكنك عبر نسبة مئوية % وسوف يتم اضافة مساحة حسب 
24 | النسبة الذي تحدده و  القياس سيكون حسب حجم عرض العنصر اب
25 | 3 او يمكنك جعل يرث القيمة من العنصر الاب عبر انهيرت 
26 | --------------------------------------------------------*/
27 | *{
28 |     margin: 0px;
29 | }
30 | header{
31 |     background-color: rgb(255, 131, 131);
32 |     /* margin-top: 20px;
33 |     margin-right: 20px;
34 |     margin-bottom: 20px;
35 |     margin-left: 20px; */
36 |     /* margin: 20px 10px 20px 10px; */
37 |     margin: auto;
38 |     width: 320px;
39 | }
40 | 
41 | main{
42 |     width: 96%;
43 |     margin-left: 2%;
44 |     margin-right: 2%;
45 |     background-color: rgb(43, 43, 43);
46 | }
47 | 
48 |     </style>
49 | </head>
50 | <body>
51 | 
52 |     <header>
53 |         header
54 |     </header>
55 | 
56 |     <main>
57 |         main
58 |     </main>
59 |     
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/Lesson 21 - الدرس/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 21 - الدرس/icon.png


--------------------------------------------------------------------------------
/Lesson 21 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Coder Shiyar</title>
 8 |     <style>
 9 |         *{
10 |             margin: 0px;
11 |         }
12 |         header h2{
13 |             background-color: #288a9a;
14 |             color: white;
15 |             padding: 15px 0px 15px 15px;
16 |         }
17 |         body{
18 |             background: url(icon.png);
19 |             background-size: 20%;
20 |             background-repeat: no-repeat;
21 |             background-position-x: 95%;
22 |             background-position-y: 10% ;
23 |             background-attachment: fixed;
24 |         }
25 | 
26 |         article{
27 |             width: 70%;
28 |             margin: 2%;
29 |         }
30 |         article h3{
31 |             background: #ff815c;
32 |             color: white;
33 |             padding: 12px;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 |  <header>
39 |      <h2>Coder Shiyar</h2>
40 |  </header>
41 | 
42 | <article>
43 |     <h3>Video 1</h3>
44 |     <video src="video.mp4" width="100%"  controls> </video>
45 | </article>
46 | 
47 | <article>
48 |     <h3>Video 2</h3>
49 |     <video src="video.mp4" width="100%"  controls> </video>
50 | </article>
51 | 
52 | <article>
53 |     <h3>Video 3</h3>
54 |     <video src="video.mp4" width="100%" controls> </video>
55 | </article>
56 | 
57 | <article>
58 |     <h3>Video 4</h3>
59 |     <video src="video.mp4" width="100%"  controls> </video>
60 | </article>
61 | 
62 | <article>
63 |     <h3>Video 5</h3>
64 |     <video src="video.mp4" width="100%" controls> </video>
65 | </article>
66 | 
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/Lesson 21 - الدرس/project.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 | 
 9 | *{
10 |   margin: 0px;
11 | }
12 | body{
13 |   background-image: url(icon.png);
14 |   background-repeat: no-repeat;
15 |   background-attachment: fixed;
16 |   background-size: 20%;
17 |   background-position-y: 12%;
18 |   background-position-x: 93%;
19 | }
20 | 
21 | header h2{
22 |   background: rgb(40 138 154);
23 |   color: white;
24 |   padding: 15px 0px 15px 15px;
25 | }
26 | main{
27 |   margin: 2%;
28 | }
29 | main article { 
30 |   width: 70%; 
31 |   margin-top: 10px;
32 | }
33 | main video{
34 |   width: 100%;
35 | }
36 | main h3{
37 |     background-color: #ff815c;
38 |     color: white;
39 |     padding: 12px;
40 | }
41 | 
42 | 
43 | </style>
44 | </head>
45 | <body>
46 |   <header>
47 |     <h2>Coder Shiyar</h2>
48 |  
49 |   </header>
50 | 
51 |   <main>
52 |     <article>
53 |       <h3>Video 1 </h3>
54 |       <video src="video.mp4" controls ></video>
55 |     </article>
56 |  
57 |     <article>
58 |       <h3>Video 2</h3>
59 |       <video src="video.mp4" controls></video>
60 |       
61 |     </article>
62 |     
63 |     <article>
64 |       <h3>Video 3 </h3>
65 |       <video src="video.mp4" controls></video>
66 |       
67 |     </article>
68 | 
69 |     <article>
70 |       <h3>Video 4 </h3>
71 |       <video src="video.mp4" controls></video>
72 |     
73 |     </article>
74 | 
75 |   </main>
76 | 
77 | 
78 | </body>
79 | </html>


--------------------------------------------------------------------------------
/Lesson 21 - الدرس/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 21 - الدرس/video.mp4


--------------------------------------------------------------------------------
/Lesson 22 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar - Course CSS</title>
 7 |     <style>
 8 | 
 9 | /* 
10 | CSS text-align Property
11 | ------------------------------------------------------------------------------------
12 | text-align: left|right|center|justify|initial|inherit;
13 | ------------------------------------------------------------------------------------
14 | Value	    Description	
15 | ------------------------------------------------------------------------------------
16 | left	    Aligns the text to the left	   يجعل تمركز نص او محتوى في الجهة اليسار
17 | right	    Aligns the text to the right   يجعل تمركز نص او محتوى في الجهة اليمين
18 | center	    Centers the text	         يجعل تمركز نص او محتوى في المنتصف العنصر     
19 | ------------------------------------------------------------------------------------
20 |                                  يستخدم لجعل نصوص يمتد بحيث يكون لكل خط عرض متساوٍ 
21 | justify	    Stretches the lines so that each line has equal width
22 | ------------------------------------------------------------------------------------
23 | initial	    Sets this property to its default value.	قيمة افتراضية
24 | inherit	    Inherits this property from its parent element. وراثة قيمة من العنصر الاب
25 | */
26 | header{
27 |     text-align: center;
28 |     background: rgb(255, 113, 113);
29 |     padding: 10px;
30 | }
31 | p{
32 |     text-align: justify;
33 | }
34 | header h3{
35 |     text-align: initial;
36 | }
37 | </style>
38 | </head>
39 | <body>
40 |    
41 |     <header>
42 |         <h3>Coder Shiyar</h3>
43 |         <button>button 1</button>
44 |         <button>button 2</button>
45 |         <button>button 3</button>
46 |     </header>
47 | 
48 |     <p>
49 |         text text text text 
50 |         text text text text 
51 |         text text text text 
52 |         text text text text 
53 |         text text text text 
54 |         text text text text 
55 |         text text text text 
56 |         text text text text 
57 |         text text text text 
58 |         text text text text 
59 |         text text text text 
60 |         text text text text 
61 |         text text text text 
62 |         text text text text 
63 |         text text text text 
64 |         text text text text 
65 |         text text text text 
66 |         text text text text 
67 |     </p>
68 | 
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/Lesson 23 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="auto">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Learn CSS with Coder Shiyar</title>
 8 |     <style>
 9 | /* 
10 | Border - يستخدم لتحديد حدود العنصر المحدد الذي ترغب بتصميمه
11 | ---------------------------------------------------------------------------------
12 | border-width: يستخدم لتحديد العمق الحدود
13 | border-color: يستخدم لتحديد اللون الحدود
14 | border-style: يستخدم لتحديد النوع الحدود
15 | border: يستخدم لإختصار كتابة كود عبر تمكين كتابة تلك خصائص بسطر واحد 
16 | ------------------------------------------
17 | border-top          للتحكم بالحدود الاعلى
18 | border-bottom       للتحكم بالحدود الاسفل
19 | border-right        للتحكم بالحدود الأيمن
20 | border-left         للتحكم بالحدود الأيسر
21 | --------------------------------------------------------------------------------
22 | dotted - Defines a dotted border |                يحدد حدود بشكل منقطًا
23 | dashed - Defines a dashed border |               يحدد حدود بشكل متقطعًا
24 | solid  - Defines a solid border  |              يحدد حدود بشكل خط متصل
25 | double - Defines a double border |               يحدد حدود بشكل مزدوجًا   
26 | --------------------------------------------------------------------------------
27 | groove - Defines a 3D grooved border  يحدد حدًا مجوفًا ثلاثي الأبعاد حسب لون حدود
28 | ridge - Defines a 3D ridged border    يحدد حدًا مموجًا ثلاثي الأبعاد حسب لون حدود
29 | inset - Defines a 3D inset border      يحدد حد داخلي ثلاثي الأبعاد حسب لون حدود
30 | outset - Defines a 3D outset border    يحدد حد خارجي ثلاثي الأبعاد حسب لون حدود
31 | --------------------------------------------------------------------------------
32 | none - Defines no border                                             يزيل حدود
33 | hidden - Defines a hidden border                                     يخفي حدود
34 | */
35 |      header{
36 |          border-bottom: 7px solid rgb(255, 74, 74);
37 |      }
38 |      .topBorder{
39 |          border: none;
40 |          border-top: 4px solid rgb(41, 41, 41);
41 |      }
42 |     </style>
43 | </head>
44 | <body>
45 |   <header>
46 |       <h2> Coder Shiyar </h2>
47 |   </header>  
48 | 
49 | <article >
50 |     <h3>Article 1</h3>
51 |     <p>Content 1</p>
52 | </article>
53 | 
54 | 
55 | <article  class="topBorder">
56 |     <h3>Article 1</h3>
57 |     <p>Content 1</p>
58 | </article>
59 | 
60 | 
61 | <article  class="topBorder">
62 |     <h3>Article 1</h3>
63 |     <p>Content 1</p>
64 | </article>
65 | 
66 | 
67 | <article  class="topBorder">
68 |     <h3>Article 1</h3>
69 |     <p>Content 1</p>
70 | </article>
71 | 
72 | 
73 | <article  class="topBorder">
74 |     <h3>Article 1</h3>
75 |     <p>Content 1</p>
76 | </article>
77 | 
78 | 
79 | <article  class="topBorder">
80 |     <h3>Article 1</h3>
81 |     <p>Content 1</p>
82 | </article>
83 | 
84 | </body>
85 | </html>


--------------------------------------------------------------------------------
/Lesson 24 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Learn CSS with Coder Shiyar</title>
 8 |     <style>
 9 | /* 
10 | CSS Outline : An outline is a line drawn outside the element's border.
11 | -----------------------------------------------------------------------
12 | outline-style :  يستخدم لتحديد نوع الخط الذي يتم اضافته خارج الحدود
13 | outline-color :                              يستخدم لتحديد اللون الخط 
14 | outline-width :                              يستخدم لتحديد العمق الخط 
15 | outline-offset:                  يستخدم لإضافة مساحة بين الخط والحدود  
16 | -----------------------------------------------------------------------
17 | CSS Outline - Shorthand property خاصية لاختصار تلك خصائص
18 | outline: value;
19 | ----------------------------------------------------------------------
20 | */
21 | section{
22 |     border: 2px solid rgb(255, 120, 120);
23 |     height: 200px;
24 |     /* outline-style: solid;
25 |     outline-color: rgb(56, 56, 56);
26 |     outline-width: 10px; */
27 |     outline: 10px  solid  rgb(56, 56, 56);
28 |     outline-offset: 1px;
29 | }
30 |     </style>
31 | </head>
32 | <body>
33 |   
34 |     <section>
35 | 
36 |     </section>
37 | 
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/Lesson 25 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Learn CSS with Coder Shiyar</title>
 8 |     <style>
 9 | 
10 | /* 
11 | CSS border-radius Property : 
12 | ----------------------------------------------------------------------------
13 | This property allows you to add rounded corners to elements! 
14 |                 يستخدم لقطع زوايا العنصر على شكل زوايا مستديرة او منحنية
15 | ----------------------------------------------------------------------------
16 | border-radius: 1-4 length| % | initial | inherit; 
17 | */
18 | header{
19 |     background: rgb(255, 82, 82);
20 |     height: 200px;
21 |     border-radius: 10px 40px;
22 | }
23 | section{
24 |     width: 200px;
25 |     height: 200px;
26 |     background-color: rgb(49, 49, 49);
27 |     border-radius: 50%;
28 |     margin-top: 10px;
29 | }
30 |     </style>
31 | </head>
32 | <body>
33 | <header>
34 | </header>
35 | 
36 | <section>
37 | 
38 | </section>
39 | 
40 | <section>
41 | 
42 | </section>
43 | 
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/Lesson 26 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar - CSS Course </title>
 7 |     <style>
 8 | /*-------------------------------------------------------------------------------------
 9 |     font-style: normal|italic|oblique;                         يستخدم لتحديد نمط الخط        
10 | ---------------------------------------------------------------------------------------
11 |     font-weight: normal|bold|bolder|lighter|number;            يستخدم لتحديد غمق الخط
12 | ---------------------------------------------------------------------------------------
13 |     font-size:length|medium|small|smaller|large||larger      يستخدم لتحديد الحجم الخط
14 | ---------------------------------------------------------------------------------------
15 |     font-family:name;                                          يستخدم لتحديد نوع الخط 
16 | ---------------------------------------------------------------------------------------
17 |     font: values;                                      يستخدم لأختصار كتابة تلك خصائص 
18 | -------------------------------------------------------------------------------------*/
19 | .text{
20 | /* font-style: normal;
21 | font-weight: bolder;
22 | font-size: 20px;
23 | font-family:system-ui; */
24 | /* font: bolder 20px system-ui; */
25 | }
26 | section{
27 |     font-family:system-ui;
28 |     border-bottom: 3px solid rgb(255, 58, 58);
29 | }
30 | section h2{
31 |     font-weight: bolder;
32 |     font-size: 20px;
33 | }
34 | section p{
35 |     font-size: 15px;
36 | }
37 | 
38 | </style>
39 | </head> 
40 | <body>
41 |    
42 |     <section>
43 |         <h2> Learn css in Arabic </h2>
44 |         <p> You can learn css with coder shiyar on YouTube for free  </p>
45 |     </section>
46 | 
47 |     
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/Lesson 28 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar CSS</title>
 7 | <style>
 8 | /* (CSS text-spacing)
 9 | letter-spacing:                تُستخدم لتعديل المسافات بين الحروف في النص
10 | This property is used to specify the space between the characters in a text.
11 | ------------------------------------------------------------------------------
12 | word-spacing:                   تُستخدم لتعديل المسافات بين الكلمات في النص
13 | This property is used to specify the space between the words in a text.
14 | ------------------------------------------------------------------------------
15 | text-indent:    تُستخدم لتعيين المسافة الأفقية بين بداية السطر وبداية النص
16 | This property is used to specify the indentation of the first line of a text
17 | ------------------------------------------------------------------------------
18 | line-height:                            تستخدم لتعيين ارتفاع السطر في النص
19 | This property is used to specify the space between lines
20 | ------------------------------------------------------------------------------
21 | white-space:         تُستخدم للتحكم في كيفية تعامل النص مع المسافات البيضاء
22 |                                       (مثل الفراغات والتباعد والأسطر الجديدة)
23 | This property specifies how white-space inside an element is handled.
24 | white-space: normal|nowrap|pre|pre-line|pre-wrap;
25 | ------------------------------------------------------------------------------
26 | normal: تعامل عادي مع المسافات البيضاء والأسطر الجديدة
27 | nowrap: تمنع النص من الانتقال إلى سطر جديد تلقائيًا
28 | pre: يتم عرض النص كما هو داخل العنصر ، بما في ذلك المسافات والأسطر الجديدة
29 | pre-line:يحافظ على المسافات ويجعل الأسطر الجديدة ظاهرة،ولكن يتم ضغط المسافات الفارغة
30 | pre-wrap: يحافظ على المسافات والأسطر الجديدة ويسمح بالانتقال إلى سطر جديد  
31 | ------------------------------------------------------------------------------
32 | word-wrap: تحدد سلوك تلقائياً كسر الكلمات في النص. عند تعيينها إلى 
33 | ، يتم كسر الكلمة عند الحاجة لتناسب حجم العنصر المحتوي على النص.
34 | 
35 | In CSS, the "word-wrap" property is used to set the automatic behavior of 
36 | word wrapping in text. When set to "break-word", words are divided at 
37 | the boundaries of parent elements to fit the available width.
38 | */ 
39 | 
40 | p{
41 |        background: rgb(255, 123, 123);
42 |        color: rgb(10, 10, 10);
43 |        letter-spacing: 1px;
44 |        word-spacing: 3px;
45 |        text-indent:  5%;
46 |        line-height: 30px;
47 |        white-space: pre-wrap;
48 |        word-wrap: break-word;
49 | }
50 | </style>
51 | </head>
52 | <body>
53 | 
54 | <p>
55 |     This course stands out for providing 
56 |     comprehensive and detailed explanations 
57 |     of all CSS concepts,from basic propertiespropertiespropertiespropertiespropertiespropertiespropertiespropertiesproperties to advanced ideas and the 
58 |     latest techniques   used in designing modern web pages.
59 | </p>
60 | 
61 | </body>
62 | </html>
63 | 
64 | 
65 | 
66 | 
67 | <!-- 
68 | white-space: normal|nowrap|pre|pre-line|pre-wrap;
69 | normal: (default) Regular handling of white spaces and line breaks.
70 | nowrap: Prevents the text from automatically wrapping to a new line.
71 | pre: Displays the text as-is inside the element, including white spaces and line breaks.
72 | pre-line: Preserves white spaces and makes line breaks visible, but compresses multiple consecutive white spaces.
73 | pre-wrap: Preserves white spaces and line breaks, allowing text to wrap to a new line when necessary. -->


--------------------------------------------------------------------------------
/Lesson 29 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar CSS</title>
 7 | <style>
 8 | /*
 9 | text-transform:     تُستخدم لتحويل الأحرف إلى الأحرف الكبيرة اوالصغيرة في النص
10 | text-transform: none|capitalize|uppercase|lowercase;
11 | ================================================================================
12 | direction: rtl(right to left)|ltr(left to right) لتحديد إتجاه المحتوى
13 | 
14 | text-decoration: line color style thickness; لتحديد الزينة النص
15 | 1:text-decoration-line:	the kind of text decoration to use      لضبط زينة النص
16 | (like underline, overline, line-through) مثل وضع خط حول نص او اسفل او على نص 
17 | 2:text-decoration-color: color of the text decoration        لتحديد لون الزينة          
18 | 3:text-decoration-style: style of the text decoration      لتحديد نمط/شكل زينة
19 |     (like solid|double|dotted|dashed|wavy)مثل نوع خط مستقيم,منقوط,متقطع,مزدوج
20 | 4:text-decoration-thickness: Sets the thickness of the decoration لتحديد سمك خط الزخرفة
21 |  
22 | */ 
23 | p{
24 |    text-transform: capitalize ;
25 |    background-color: rgb(217 242 254);
26 | }
27 | a{
28 |     /* text-decoration-line: overline underline ;
29 |     text-decoration-color: rgb(255, 147, 147);
30 |     text-decoration-style:dashed ;
31 |     text-decoration-thickness: 5px; */
32 |     text-decoration: overline rgb(255, 147, 147) solid  1px ;
33 |     color: black;
34 | }
35 | *{
36 |  direction: rtl; 
37 | }
38 | </style>
39 | </head>
40 | <body>
41 |     <p>  تعلم اللغة CSS مع كودر شيار  </p>
42 |     <a href="https://codershiyar.com/css">رابط الكورس</a>
43 | </body>
44 | </html>
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | <!-- ---------------------------------------1-----------------------------------
55 | text-transform:     تُستخدم لتحويل الأحرف إلى الأحرف الكبيرة اوالصغيرة في النص
56 | This property is used to specify uppercase and lowercase letters in a text.
57 | text-transform: none|capitalize|uppercase|lowercase;
58 | "none": هذه القيمة الافتراضية ولا تطبق أي تحويل على النص.
59 | "capitalize": تجعل الحرف الأول من كل كلمة يتم كتابتها بالحروف الكبيرة، وتحول الأحرف
60 | الأخرى في الكلمة إلى الحروف الصغيرة.
61 | "uppercase":                                 تحويل كل الحروف إلى الأحرف الكبيرة
62 | "lowercase":                                 تحويل كل الحروف إلى الأحرف الصغيرة
63 | --------------------------------------------2----------------------------------
64 | direction: rtl(right to left)|ltr(left to right) لتحديد إتجاه المحتوى
65 | --------------------------------------------3----------------------------------
66 | text-decoration:   تستخدم لتطبيق التزيين على النص بإضافة خط أو تأثيرات أخرى
67 | 1:text-decoration-line:	the kind of text decoration to use      لضبط زينة النص
68 | (like underline, overline, line-through) مثل وضع خط حول نص او اسفل او على نص 
69 | 2:text-decoration-color: color of the text decoration        لتحديد لون الزينة          
70 | 3:text-decoration-style: style of the text decoration      لتحديد نمط/شكل زينة
71 |     (like solid|double|dotted|dashed|wavy)مثل نوع خط مستقيم,منقوط,متقطع,مزدوج
72 | 4:text-decoration-thickness: Sets the thickness of the decoration لتحديد سمك خط الزخرفة
73 |  
74 | 
75 |     <p>  تعلم اللغة CSS مع كودر شيار  </p>
76 |     
77 | 
78 | -->


--------------------------------------------------------------------------------
/Lesson 3 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 |     <head>
 4 |         <title></title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <!-- <style>
 8 |             body{
 9 |                 background: red;
10 |             }
11 |         </style> -->
12 |         <link rel="stylesheet" href="style.css"/>
13 |     </head>
14 |     <body style=" background: red;">
15 |         
16 |         <h1 style="color:white;"> Coder Shiyar </h1>
17 |         <h2>تعلم سي اس اس مع شيار</h2>
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/Lesson 3 - الدرس/style.css:
--------------------------------------------------------------------------------
1 | h2{
2 |     background: orange;
3 | }


--------------------------------------------------------------------------------
/Lesson 30 - الدرس/Capture.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 30 - الدرس/Capture.PNG


--------------------------------------------------------------------------------
/Lesson 30 - الدرس/css.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 30 - الدرس/css.jpg


--------------------------------------------------------------------------------
/Lesson 30 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Learn CSS</title>
 7 | <style>
 8 | 
 9 | /*       يُستخدم فلوت لتنظيم وترتيب عناصر الواجهة في صفحة الويب عبر سماح
10 |                         للعنصر بالانتقال إلى اليسار أو اليمين داخل حاويته
11 | float: left | right | none;
12 | ----------------------------------------------------------------------------
13 | Float is used to organize and arrange interface elements on a web page 
14 | by allowing the element to move to the left or right within its container
15 | ----------------------------------------------------------------------------
16 | clear: both;                                  لتنظيف العنصر محدد من فلوت
17 | */ 
18 | main{
19 |     width: 100%;
20 | }
21 | main article{
22 |     width: calc(100% / 2 - (1% * 2));
23 |     float: left;
24 |     min-height: 180px;
25 |     background-color: rgb(142, 159, 255);
26 |     margin: 1%;
27 |     border-radius: 15px;
28 |     text-align: center;
29 |     color: white;
30 | }
31 | .clear{
32 |     clear: both;
33 | }
34 | main article img{
35 |     max-width: 100%;
36 |     max-height: 400px;
37 | }
38 | 
39 | </style>
40 | </head>
41 | <body>
42 |   
43 | <main>
44 |     <article>
45 |         <img src="programmer.jpg" />
46 |         <p>Card Title 1</p>
47 |         <a href="#">Link 1</a>
48 |     </article>
49 |     <article>
50 |         <img src="css.jpg" />
51 |         <p>Card Title 2</p>
52 |         <a href="#">Link 2</a>
53 |     </article>
54 |     <article>
55 |         <img src="programmer.jpg" />
56 |         <p>Card Title 3</p>
57 |         <a href="#">Link 3</a>
58 |     </article>
59 |     <article>
60 |         <img src="css.jpg" />
61 |         <p>Card Title 4</p>
62 |         <a href="#">Link 4</a>
63 |     </article>
64 |     <article>
65 |         <img src="programmer.jpg" />
66 |         <p>Card Title 5</p>
67 |         <a href="#">Link 5</a>
68 |     </article>
69 |     <article>
70 |         <img src="css.jpg" />
71 |         <p>Card Title 6</p>
72 |         <a href="#">Link 6</a>
73 |     </article>
74 |     <!-- <article>article 6</article> -->
75 |     <!-- <p class="clear">test 1</p>
76 |     <p>test 2</p> -->
77 | </main>
78 | 
79 | </body>
80 | </html>
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 
87 | 


--------------------------------------------------------------------------------
/Lesson 30 - الدرس/programmer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 30 - الدرس/programmer.jpg


--------------------------------------------------------------------------------
/Lesson 31 - الدرس/css.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 31 - الدرس/css.jpg


--------------------------------------------------------------------------------
/Lesson 31 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | /* 
 9 | Hides the element and completely removes it from the layout of the page.
10 | display: none|unset;  إخفاء العنصر وإزالته من تخطيط الصفحة بشكل كامل
11 |                                   (inline-block|inline|block|flex|grid)
12 | -----------------------------------------------------------------------
13 | Determines the transparency level of the element
14 | opacity:                     يحدد مدى شفافية العنصر بين القيمة 0 و 1
15 | -----------------------------------------------------------------------
16 | visibility: hidden|visible                  لجعل العنصر مرئيًا او مخفي
17 | ---------------------------------------------------------------------*/
18 | img{
19 |     width: 100%;
20 |     /* display: none; */
21 |     /* visibility: hidden; */
22 |     opacity: 0.4;
23 | }
24 | </style>
25 | </head>
26 | <body>
27 | 
28 |     <img src="css.jpg" />
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Lesson 32 - الدرس/css.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 32 - الدرس/css.jpg


--------------------------------------------------------------------------------
/Lesson 32 - الدرس/cursor.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>CSS Cursor - Coder Shiyar</title>
 8 |     <style>
 9 |         .alias {cursor: alias;}
10 |         .all-scroll {cursor: all-scroll;}
11 |         .auto {cursor: auto;}
12 |         .cell {cursor: cell;}
13 |         .col-resize {cursor: col-resize;}
14 |         .context-menu {cursor: context-menu;}
15 |         .copy {cursor: copy;}
16 |         .crosshair {cursor: crosshair;}
17 |         .default {cursor: default;}
18 |         .e-resize {cursor: e-resize;}
19 |         .ew-resize {cursor: ew-resize;}
20 |         .grab {cursor: -webkit-grab; cursor: grab;}
21 |         .grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
22 |         .help {cursor: help;}
23 |         .move {cursor: move;}
24 |         .n-resize {cursor: n-resize;}
25 |         .ne-resize {cursor: ne-resize;}
26 |         .nesw-resize {cursor: nesw-resize;}
27 |         .ns-resize {cursor: ns-resize;}
28 |         .nw-resize {cursor: nw-resize;}
29 |         .nwse-resize {cursor: nwse-resize;}
30 |         .no-drop {cursor: no-drop;}
31 |         .none {cursor: none;}
32 |         .not-allowed {cursor: not-allowed;}
33 |         .pointer {cursor: pointer;}
34 |         .progress {cursor: progress;}
35 |         .row-resize {cursor: row-resize;}
36 |         .s-resize {cursor: s-resize;}
37 |         .se-resize {cursor: se-resize;}
38 |         .sw-resize {cursor: sw-resize;}
39 |         .text {cursor: text;}
40 |         .url {cursor: url(myBall.cur),auto;}
41 |         .w-resize {cursor: w-resize;}
42 |         .wait {cursor: wait;}
43 |         .zoom-in {cursor: zoom-in;}
44 |         .zoom-out {cursor: zoom-out;}
45 |         p{
46 |             float: left;
47 |             width: calc(100%/1 - (2% * 1));
48 |             background-color: rgb(136, 120, 255);
49 |             color: white;
50 |             padding: 1%;
51 |             margin: 1%;
52 |             font-size: 22px;
53 |         }
54 |         </style>
55 | </head>
56 | <body>
57 |     <p class="none">none (لا شيء)</p>
58 |     <p class="not-allowed">not-allowed (غير مسموح)</p>
59 |     <p class="pointer">pointer (مؤشر)</p>
60 |     <p class="progress">progress (تقدم)</p>
61 |     
62 |     <p class="wait">wait (انتظر)</p>
63 |     <p class="zoom-in">zoom-in (تكبير)</p>
64 |     <p class="zoom-out">zoom-out (تصغير)</p>
65 |     <p class="copy">copy (نسخ)</p>
66 |     <p class="crosshair">crosshair (شبكة)</p>
67 |     <p class="alias">alias (استدعاء)</p>
68 |     <p class="all-scroll">all-scroll (تمرير كلي)</p>
69 |     <p class="cell">cell (خلية)</p>
70 |     <p class="col-resize">col-resize (تغيير العمود)</p>
71 |     <p class="default">default (افتراضي)</p>
72 |     <p class="e-resize">e-resize (تغيير الشرق)</p>
73 |     <p class="ew-resize">ew-resize (تغيير الشرق والغرب)</p>
74 |     <p class="grab">grab (التقاط)</p>
75 |     <p class="grabbing">grabbing (التقاط النشط)</p>
76 |     <p class="help">help (مساعدة)</p>
77 |     <p class="move">move (تحريك)</p>
78 |     <p class="n-resize">n-resize (تغيير الشمال)</p>
79 |     <p class="ne-resize">ne-resize (تغيير الشمال الشرقي)</p>
80 |     <p class="nesw-resize">nesw-resize (تغيير الشمال الشرقي والجنوب الغربي)</p>
81 |     <p class="ns-resize">ns-resize (تغيير الشمال والجنوب)</p>
82 |     <p class="nw-resize">nw-resize (تغيير الشمال الغربي)</p>
83 |     <p class="nwse-resize">nwse-resize (تغيير الشمال الغربي والجنوب الشرقي)</p>
84 |     <p class="no-drop">no-drop (ممنوع السقوط)</p>
85 | 
86 |     <p class="row-resize">row-resize (تغيير الصف)</p>
87 |     <p class="s-resize">s-resize (تغيير الجنوب)</p>
88 |     <p class="se-resize">se-resize (تغيير الجنوب الشرقي)</p>
89 |     <p class="sw-resize">sw-resize (تغيير الجنوب الغربي)</p>
90 |     <p class="text">text (نص)</p>
91 |     <p class="url">url (عنوان موقع)</p>
92 |     <p class="w-resize">w-resize (تغيير الغرب)</p>
93 | 
94 |     <a href="http://codershiyar.com"></a>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/Lesson 32 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | /* 
 9 | :hover                          تُطبق على العنصر عندما يتم تمرير المؤشر فوقه
10 | Is applied to an element when the pointer is moved over it.
11 | ------------------------------------------------------------------------------
12 | :focus تُطبق عندما يتم تحديد العنصر بواسطة المستخدم،مثل تحديد حقل إدخال نص
13 | Is applied when the element is selected by the user,such as a text input field
14 | ------------------------------------------------------------------------------
15 | :active                                           عندما يتم النقر على العنصر  
16 | Is applied when the element is clicked on.
17 | ------------------------------------------------------------------------------
18 | cursor:                يُستخدم لتعيين شكل المؤشر عند ذهاب به إلى فوق العنصر
19 | Is used to set the shape of the pointer when it is moved over the element.
20 | ------------------------------------------------------------------------------*/
21 | img:hover{
22 |     opacity: 0.5;
23 |     cursor:pointer;
24 | }
25 | input:focus{
26 |     width: 100%;
27 | }
28 | img:active{
29 |     width: 120%; 
30 | }
31 | </style>
32 | </head>
33 | <body>
34 |     <img src="css.jpg" width="100%" />
35 |     <input type="text">
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Lesson 33 - الدرس/Pagination.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | 
 9 | /* 1:   :not   يسمح لك بتحديد العناصر التي لا تتطابق مع نمط محدد      
10 |    2:    How To Make a Pagination      كيفية إنشاء ترقيم الصفحات */
11 |     .pagination {
12 |         text-align: center;
13 |     }
14 |     
15 |     .pagination a {
16 |       display: inline-block;
17 |       color: black;
18 |       padding: 8px 16px;
19 |       text-decoration: none;
20 |       border-radius: 5px;
21 |     }
22 |     
23 |     .pagination a.active {
24 |       background-color: #ff776e;
25 |       color: white;
26 |       font-weight: bold;
27 |     }
28 |     
29 |     .pagination a:hover:not(.active) {
30 |       background-color: #ddd; 
31 |     }
32 |     </style>
33 | </head>
34 | <body>
35 |     <div class="pagination">
36 |         <a href="#">&laquo;</a>
37 |         <a href="#">1</a>
38 |         <a href="#" class="active">2</a>
39 |         <a href="#">3</a>
40 |         <a href="#">4</a>
41 |         <a href="#">5</a>
42 |         <a href="#">&raquo;</a>
43 |       </div>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Lesson 33 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | 
 9 | /* 1:   :not   يسمح لك بتحديد العناصر التي لا تتطابق مع نمط محدد      
10 |    2:    How To Make a Pagination      كيفية إنشاء ترقيم الصفحات */
11 |    .pagination{
12 |     text-align: center;
13 |    } 
14 |    .pagination a{
15 |         display: inline-block;
16 |       color: black;
17 |       padding: 8px 16px;
18 |       text-decoration: none;
19 |       border-radius: 5px;
20 |     }
21 |     .pagination a.active{
22 |       background-color: #ff776e;
23 |       color: white;
24 |       font-weight: bold;
25 |     }
26 |     .pagination a:hover:not(.active){
27 |         background-color: rgb(236, 236, 236)
28 |     }
29 | 
30 |     </style>
31 | </head>
32 | <body>
33 | 
34 |     <div class="pagination">
35 |         <a href="#">&laquo;</a>
36 |         <a href="#">1</a>
37 |         <a href="#" class="active">2</a>
38 |         <a href="#">3</a>
39 |         <a href="#">4</a>
40 |         <a href="#">5</a>
41 |         <a href="#">&raquo;</a>
42 |     </div>
43 |     
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Lesson 34 - الدرس/Text-shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 34 - الدرس/Text-shadow.png


--------------------------------------------------------------------------------
/Lesson 34 - الدرس/css-box-shadow-property-examples.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 34 - الدرس/css-box-shadow-property-examples.png


--------------------------------------------------------------------------------
/Lesson 34 - الدرس/icon-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 34 - الدرس/icon-book.png


--------------------------------------------------------------------------------
/Lesson 34 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | 
 9 | /* =============================================================================
10 | 1:box-shadow: offset-x offset-y blur-radius spread-radius color; 
11 | to add shadow to the element's box           تستخدم لإضافة ظل لصندوق العنصر   */
12 | .box-shadow{
13 |  box-shadow: 10px 10px 5px 2px rgb(242, 218, 218); 
14 | }
15 | 
16 | /*==============================================================================
17 | 2:text-shadow: offset-x offset-y blur-radius color;
18 | to add shadow to the text inside the element  تستخدم لإضافة ظل لنص داخل العنصر */
19 | header{
20 |   text-shadow: 4px 3px 4px rgb(255, 67, 67);
21 |   margin-bottom: 10px;
22 | }
23 | /*==============================================================================
24 | 3:box-shadow: inset offset-x offset-y blur-radius spread-radius color;
25 | shadow inside element  لتحديد أن الظل يجب أن يظهر داخل العنصر بدلاً من الخارج*/
26 | .box-shadow-inset{
27 |   box-shadow: inset 5px 5px 0px 2px rgb(255, 65, 65); 
28 | }
29 | /*==============================================================================
30 | 4:filter: drop-shadow(offset-x offset-y blur-radius color);
31 |            تمنحك إمكانية إضافة ظل مظهرًا ثلاثي الأبعاد للعنصر، بما في ذلك النص    
32 | to add a three-dimensional appearance drop shadow to the element, including text*/
33 | .box-shadow-img{
34 |   box-shadow: 5px 5px rgb(255, 65, 65);
35 | }
36 | .drop-shadow-img{
37 |   filter: drop-shadow(1px 1px 1px rgb(255, 65, 65));
38 | }
39 |     </style>
40 | </head>
41 | <body>
42 | 
43 |   <header class="box-shadow">
44 |     header element
45 |   </header>
46 | 
47 |   <div class="box-shadow-inset">
48 |     div element
49 |   </div>
50 | 
51 |   <img class="box-shadow-img" src="icon-book.png" width="45%"/>
52 |   <img class="drop-shadow-img" src="icon-book.png" width="45%"/>
53 | </body>
54 | </html>
55 | 
56 | 
57 | <!-- 
58 | offset-x (الإزاحة الأفقية):    ينقل الظل إلى اليمين عندما تكون القيمة إيجابية
59 |                                                   وإلى اليسار عندما تكون سلبية
60 | Horizontal shadow position (positive moves right, negative moves left).
61 | ---------------------------------------------------------------------------------
62 | offset-y (الإزاحة العمودية):   ينقل الظل إلى الأسفل عندما تكون القيمة إيجابية
63 |                                                  ، وإلى الأعلى عندما تكون سلبية
64 | Vertical shadow position (positive moves downwards, negative moves upwards).
65 | ---------------------------------------------------------------------------------
66 | blur-radius (شدة التمويه):يحدد مقدار التمويه الضبابي للظل. كلما زادت القيمة 
67 |                                   زاد تمويه الظل، وكلما قلت القيمة، قل تمويهه
68 | Shadow blur intensity (higher values increase blur).                                  
69 | ---------------------------------------------------------------------------------
70 | spread-radius (التمدد):             تُستخدم لتعديل حجم الظل المُضاف إلى العنصر
71 | Shadow size adjustment (positive expands, negative contracts).
72 | ---------------------------------------------------------------------------------
73 | color(اللون):                                            تُستخدم تحديد لون الظل   
74 | ---------------------------------------------------------------------------------
75 | -->


--------------------------------------------------------------------------------
/Lesson 35 - الدرس/css buttons styling (Time 0_08_32;05).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 35 - الدرس/css buttons styling (Time 0_08_32;05).png


--------------------------------------------------------------------------------
/Lesson 35 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | /* 
 9 | CSS buttons: Basic Button Styling تعلم تصميم أزرار وروابط ب سي اس اس
10 | ------------------------------------------------------------------------
11 | background-color                        لتحديد خلفية العنصر بلون محدد
12 | border                                            لتحكم بالحدود العنصر
13 | color                                      لتحديد لون النص داخل العنصر
14 | padding/margin                    لتحكم بالهامش/مساحةاضافية حول محتوى
15 | text-align                                      لتحكم بالتمركز المحتوى
16 | text-decoration                 لتحكم بالتزيينات عن النص، مثل التسطير
17 | font-size                                         لتحديد حجم الخط للنص   
18 | display: inline-block;           a لتمكين التحكم في عرض وارتفاع عناصر 
19 | border-radius                                       لإضافة زوايا مستديرة 
20 | :hover                          لإضافة خصائص عندما يكون ماوس على العنصر
21 | float:value;     لجعل ازرار يكونون بجانب بعضهم ان كان هناك مسافة لذلك
22 | cursor: pointer;  لجعل مؤشر الماوس يشبه كا اصبع عندما يكون على العنصر
23 | ------------------------------------------------------------------------
24 | Colors(الوان قد تعجبك)Black #555555 Gray #e7e7e7 Red #f44336 Blue #008CBA*/
25 | .btn{
26 |   width: calc(100%/3 - 1px * 3 );
27 |   border: none;
28 |   padding: 14px 0px;
29 |   font-size: 18px;
30 |   border-radius: 5px;
31 |   display: inline-block;
32 |   text-decoration:none;
33 |   margin: 4px 0px;
34 |   text-align: center;
35 | }
36 | .btn:hover{cursor: pointer;}
37 | .btn-red{ background-color: #f44336;color: white;}
38 | .btn-red:hover{background-color:white;color:#f44336;border:2px solid#f44336;}
39 | .btn-blue{background-color: #008CBA;color: white;}
40 | .btn-black{background-color: rgb(36, 36, 36);color: white;}
41 | .btn-gray{background-color: #e7e7e7;color: black;}
42 | .btn-block-group  .btn{
43 |   width: 100%;
44 | }
45 | </style>
46 | </head>
47 | <body>
48 | <div>
49 |       <button class="btn btn-red">option1</button>
50 |       <button class="btn btn-gray">option2</button>
51 |       <a class="btn btn-black" href="#">Link</a>
52 | </div>
53 | 
54 | <div class="btn-block-group">
55 |   <a class="btn btn-gray" href="#">Link</a>
56 |   <a class="btn btn-gray" href="#">Link</a>
57 |   <a class="btn btn-gray" href="#">Link</a>
58 |   <a class="btn btn-gray" href="#">Link</a>
59 |   <a class="btn btn-gray" href="#">Link</a>
60 |   <a class="btn btn-gray" href="#">Link</a>
61 |   <a class="btn btn-gray" href="#">Link</a>
62 | </div>
63 |  </body>
64 | </html>
65 | 
66 | 


--------------------------------------------------------------------------------
/Lesson 36 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | /* 
 9 | ::before (content:value;)  يستخدم لإضافة محتوى إضافي قبل محتوى العنصر المستهدف
10 | ::after  (content:value;)  يستخدم لإضافة محتوى إضافي بعد محتوى العنصر المستهدف
11 | ::first-line                  تستخدم لتحديد التنسيقات للسطر الأول في عنصر معين
12 | ::first-letter                   تستخدم لتحديد التنسيقات لأول حرف في عنصر معين
13 | ::selectionتستخدم لتحديد التنسيقات لنص محدد بواسطة المستخدم (عند تحديد النص)
14 | ::placeholder                    input يستخدم لتنسيق نص في ميزة تلميح في عناصر*/  
15 | /* p::before{
16 |   content: ">>";
17 | } */
18 | p::after{
19 |   content: "🔥";
20 | }
21 | p::first-line{
22 |   font-size: 20px;
23 |   color: red;
24 |   font-weight: bolder;
25 | }
26 | p::first-letter{
27 |   font-size: 40px;
28 | }
29 | p::selection{
30 |   background-color: rgb(69, 69, 69);
31 |   color: white;
32 | }
33 | input::placeholder{
34 |   color: rgb(255, 103, 103);
35 | }
36 | </style>
37 | </head>
38 | <body>
39 |   <p>
40 |     Learn CSS in Arabic with Coder Shiyar <br>
41 |     Learn JavaScript in Arabic with Coder Shiyar <br>
42 |     Learn PHP in Arabic with Coder Shiyar<br>
43 |     Learn SQL in Arabic with Coder Shiyar<br>
44 |     Learn Python in Arabic with Coder Shiyar<br>
45 |   </p>
46 | 
47 |   <input type="text" placeholder="ضع اسمك">
48 |  </body>
49 | </html>
50 | 
51 | 
52 | 
53 | 
54 | 
55 | <!-- p::after{
56 |   content: "🔥";
57 | 
58 |     <p>
59 |     Learn CSS in Arabic with Coder Shiyar <br>
60 |     Learn JavaScript in Arabic with Coder Shiyar <br>
61 |     Learn PHP in Arabic with Coder Shiyar<br>
62 |     Learn SQL in Arabic with Coder Shiyar<br>
63 |     Learn Python in Arabic with Coder Shiyar<br>
64 |   </p>
65 | 
66 | } -->


--------------------------------------------------------------------------------
/Lesson 37 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | <title>Coder Shiyar (CSS)</title>
 7 | <style>
 8 | /* 
 9 | CSS Variable(used to store and reuse values)يستخدم لتخزين قيم وإعادة استخدامها 
10 | ---------------------------------------------------------------------------------
11 | How to create a variabel in CSS   طريقة إنشاء اسماء/متغيرات لتخزين بيانات بها
12 | --variable-name:value; 
13 | var(--variable-name)                How to use it                 طريقة استخدام   
14 | ----------------------------------------------------------------------------------
15 | counter()                   لإنشاء عدادت وإطاحة تعقب وعرض عدد الظهور لعنصر معين
16 | counter-increment                                             لزيادة قيمة العداد
17 | counter-reset                                                      لتصفير العداد
18 | */
19 | :root{
20 |   --blue: rgb(44, 115, 255);
21 |   --white: rgb(255, 252, 252);
22 | }
23 | body{
24 |   background: var(--blue);
25 | }
26 | p{
27 |   background: var(--white);
28 |   color: var(--blue);
29 |   font-size: 20px;
30 |   padding: 10px;
31 | }
32 | ol{
33 |   counter-reset: my-counter -1;
34 | }
35 | ol li{
36 |   counter-increment: my-counter;
37 |   list-style: none;
38 |   font-size: 17px;
39 | }
40 | ol li::before{
41 |   content: counter(my-counter) ": ";
42 |   color: var(--white);
43 | }
44 | 
45 | </style>
46 | </head>
47 | <body>
48 |   <ol>
49 |     <li>Learn CSS in Arabic with Coder Shiyar</li>
50 |     <li>Learn JavaScript in Arabic with Coder Shiyar</li>
51 |     <li>Learn PHP in Arabic with Coder Shiyar</li>
52 |     <li> Learn SQL in Arabic with Coder Shiyar</li>
53 |     <li>Learn Python in Arabic with Coder Shiyar</li>
54 |   </ol>
55 | 
56 |   <p> </p>
57 | 
58 |  </body>
59 | </html>
60 | 
61 | 


--------------------------------------------------------------------------------
/Lesson 38 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Learn CSS with Coder Shiyar</title>
 7 | 
 8 | <style>
 9 | /*
10 | CSS Styling Lists                                تعلم تصميم قوائم ب سي اس اس
11 | ==============================================================================
12 | */
13 | *{
14 |   margin: 0;
15 |   padding: 0;
16 | }
17 | :root{
18 |   --color1: rgb(152, 159, 255);
19 |   --color2: white;
20 | }
21 | ol{
22 |   list-style: none;
23 |   color: var(--color2);
24 |   background-color: var(--color1);
25 | }
26 | ol li, h1{
27 |   padding: 10px;
28 |   font-size: 20px;
29 |   border-bottom: 1px solid var(--color2);
30 | }
31 | ol li{
32 |   counter-increment: listCounter;
33 | }
34 | ol li::before{
35 |   content: counter(listCounter) ": ";
36 | }
37 | h1{
38 |   direction: rtl;
39 | }
40 | ol li:hover{
41 |   background-color: var(--color2);
42 |   color: var(--color1);
43 | }
44 | </style>
45 | 
46 | </head>
47 | <body>
48 |   <h1>قائمة لغات البرمجة</h1>
49 |   <ol>
50 |     <li>JavaScript</li>
51 |     <li>PHP</li>
52 |     <li>SQL</li>
53 |     <li>Python</li>
54 |     <li>Java</li>
55 |   </ol>
56 | </body>
57 | </html>
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | <!-- 
66 | list-style-type            (list item marker  لتحديد نوع علامة عنصر القائمة)
67 | list-style-position: outside|inside; لتحديد تموضع علامةفي داخل او خارج عنصر  
68 | -->


--------------------------------------------------------------------------------
/Lesson 38 - الدرس/list-item-markers.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <style>
  5 | ul.a {list-style-type: circle;}
  6 | ul.b {list-style-type: disc;}
  7 | ul.c {list-style-type: square;}
  8 | 
  9 | ol.d {list-style-type: armenian;}
 10 | ol.e {list-style-type: cjk-ideographic;}
 11 | ol.f {list-style-type: decimal;}
 12 | ol.g {list-style-type: decimal-leading-zero;}
 13 | ol.h {list-style-type: georgian;}
 14 | ol.i {list-style-type: hebrew;}
 15 | ol.j {list-style-type: hiragana;}
 16 | ol.k {list-style-type: hiragana-iroha;}
 17 | ol.l {list-style-type: katakana;}
 18 | ol.m {list-style-type: katakana-iroha;}
 19 | ol.n {list-style-type: lower-alpha;}
 20 | ol.o {list-style-type: lower-greek;}
 21 | ol.p {list-style-type: lower-latin;}
 22 | ol.q {list-style-type: lower-roman;}
 23 | ol.r {list-style-type: upper-alpha;}
 24 | ol.s {list-style-type: upper-latin;}
 25 | ol.t {list-style-type: upper-roman;}
 26 | ol.u {list-style-type: none;}
 27 | ol.v {list-style-type: inherit;}
 28 | </style>
 29 | </head>
 30 | <body>
 31 | 
 32 | <h2>All List Style Types</h2>
 33 | 
 34 | <ul class="a">
 35 |   <li>Circle type</li>
 36 |   <li>Tea</li>
 37 |   <li>Coca Cola</li>
 38 | </ul>
 39 | 
 40 | <ul class="b">
 41 |   <li>Disc type</li>
 42 |   <li>Tea</li>
 43 |   <li>Coca Cola</li>
 44 | </ul>
 45 | 
 46 | <ul class="c">
 47 |   <li>Square type</li>
 48 |   <li>Tea</li>
 49 |   <li>Coca Cola</li>
 50 | </ul>
 51 | 
 52 | <ol class="d">
 53 |   <li>Armenian type</li>
 54 |   <li>Tea</li>
 55 |   <li>Coca Cola</li>
 56 | </ol>
 57 | 
 58 | <ol class="e">
 59 |   <li>Cjk-ideographic type</li>
 60 |   <li>Tea</li>
 61 |   <li>Coca Cola</li>
 62 | </ol>
 63 | 
 64 | <ol class="f">
 65 |   <li>Decimal type</li>
 66 |   <li>Tea</li>
 67 |   <li>Coca Cola</li>
 68 | </ol>
 69 | 
 70 | <ol class="g">
 71 |   <li>Decimal-leading-zero type</li>
 72 |   <li>Tea</li>
 73 |   <li>Coca Cola</li>
 74 | </ol>
 75 | 
 76 | <ol class="h">
 77 |   <li>Georgian type</li>
 78 |   <li>Tea</li>
 79 |   <li>Coca Cola</li>
 80 | </ol>
 81 | 
 82 | <ol class="i">
 83 |   <li>Hebrew type</li>
 84 |   <li>Tea</li>
 85 |   <li>Coca Cola</li>
 86 | </ol>
 87 | 
 88 | <ol class="j">
 89 |   <li>Hiragana type</li>
 90 |   <li>Tea</li>
 91 |   <li>Coca Cola</li>
 92 | </ol>
 93 | 
 94 | <ol class="k">
 95 |   <li>Hiragana-iroha type</li>
 96 |   <li>Tea</li>
 97 |   <li>Coca Cola</li>
 98 | </ol>
 99 | 
100 | <ol class="l">
101 |   <li>Katakana type</li>
102 |   <li>Tea</li>
103 |   <li>Coca Cola</li>
104 | </ol>
105 | 
106 | <ol class="m">
107 |   <li>Katakana-iroha type</li>
108 |   <li>Tea</li>
109 |   <li>Coca Cola</li>
110 | </ol>
111 | 
112 | <ol class="n">
113 |   <li>Lower-alpha type</li>
114 |   <li>Tea</li>
115 |   <li>Coca Cola</li>
116 | </ol>
117 | 
118 | <ol class="o">
119 |   <li>Lower-greek type</li>
120 |   <li>Tea</li>
121 |   <li>Coca Cola</li>
122 | </ol>
123 | 
124 | <ol class="p">
125 |   <li>Lower-latin type</li>
126 |   <li>Tea</li>
127 |   <li>Coca Cola</li>
128 | </ol>
129 | 
130 | <ol class="q">
131 |   <li>Lower-roman type</li>
132 |   <li>Tea</li>
133 |   <li>Coca Cola</li>
134 | </ol>
135 | 
136 | <ol class="r">
137 |   <li>Upper-alpha type</li>
138 |   <li>Tea</li>
139 |   <li>Coca Cola</li>
140 | </ol>
141 | 
142 | <ol class="s">
143 |   <li>Upper-latin type</li>
144 |   <li>Tea</li>
145 |   <li>Coca Cola</li>
146 | </ol>
147 | 
148 | <ol class="t">
149 |   <li>Upper-roman type</li>
150 |   <li>Tea</li>
151 |   <li>Coca Cola</li>
152 | </ol>
153 | 
154 | <ol class="u">
155 |   <li>None type</li>
156 |   <li>Tea</li>
157 |   <li>Coca Cola</li>
158 | </ol>
159 | 
160 | <ol class="v">
161 |   <li>inherit type</li>
162 |   <li>Tea</li>
163 |   <li>Coca Cola</li>
164 | </ol>
165 | 
166 | </body>
167 | </html>
168 | 
169 | 
170 | 


--------------------------------------------------------------------------------
/Lesson 38 - الدرس/listmarker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 38 - الدرس/listmarker.png


--------------------------------------------------------------------------------
/Lesson 39 - الدرس/index copy.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>تصميم جدول بشكل جذاب</title>
 5 |   <style>
 6 |     table { border-collapse: collapse;  width: 100%; direction: rtl;}
 7 | 
 8 | th, td {
 9 |   text-align: left;
10 |   padding: 12px;
11 | }
12 | 
13 | tr:nth-child(even){background-color: #f2f2f2}
14 | 
15 | th {
16 |   background-color: #ff9f9f;
17 |   color: white;
18 | }
19 | thead tr th{
20 |     text-align: center !important;
21 |     border-bottom: 1px solid white;
22 | }
23 | 
24 |   </style>
25 | </head>
26 | <body>
27 | 
28 | <table>
29 |     <thead>
30 |         <tr><th colspan="3">العنوان الجدول</th></tr>
31 |         <th>العنوان العامود 1</th>
32 |         <th>العنوان العامود 2</th>
33 |         <th>العنوان العامود 3</th>
34 |     </thead>
35 | 
36 |   <tr>
37 |     <td>محتوى الخلية 1-1</td>
38 |     <td>محتوى الخلية 1-2</td>
39 |     <td>محتوى الخلية 1-3</td>
40 |   </tr>
41 |   <tr>
42 |     <td>محتوى الخلية 2-1</td>
43 |     <td>محتوى الخلية 2-2</td>
44 |     <td>محتوى الخلية 2-3</td>
45 |   </tr>
46 |   <tr>
47 |     <td>محتوى الخلية 3-1</td>
48 |     <td>محتوى الخلية 3-2</td>
49 |     <td>محتوى الخلية 3-3</td>
50 |   </tr>
51 | </table>
52 | 
53 | </body>
54 | </html>
55 | 
56 | <!-- 
57 | :nth-child(even)     لاستهداف العناصر التي تحمل ترتيبًا زوجيًا داخل عنصر والده
58 | :nth-child(odd)     لاستهداف العناصر التي تحمل ترتيبًا الفردي داخل عنصر والده 
59 | :last-child                    لاستهداف آخر عنصر من فئة محددة داخل عنصر والده 
60 | :first-child                   لاستهداف اول عنصر من فئة محددة داخل عنصر والده 
61 | border-collapse: collapse;                                  لدمج حدود بين خلايا
62 | 
63 | #fa585b; 
64 | -->


--------------------------------------------------------------------------------
/Lesson 39 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>تصميم جدول بشكل جذاب</title>
 5 |   <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | <style>
 8 | /* 
 9 | CSS Table Styling                تعلم تصميم جدول إحترافي بسهولة ب سي إس إس   
10 | ------------------------------------------------------------------------------ 
11 | */
12 | table{
13 |     width: 100%;
14 |     border-collapse: collapse;
15 |     direction: rtl;
16 | }
17 | table tbody tr:nth-child(even){background-color: #f2f2f2}
18 | table td, table th{
19 |     padding: 14px;
20 | }
21 | thead{
22 |     background-color: #9fa1ff;
23 |     color: white;
24 | }
25 | table thead th{
26 |     border-bottom: 3px solid white;
27 | }
28 | </style>
29 | </head>
30 | <body>
31 |     <table>
32 |         <thead>
33 |             <tr><th colspan="3">العنوان الجدول</th></tr>
34 |             <th>العنوان العامود 1</th>
35 |             <th>العنوان العامود 2</th>
36 |             <th>العنوان العامود 3</th>
37 |         </thead>
38 |     
39 |       <tr>
40 |         <td>محتوى الخلية 1-1</td>
41 |         <td>محتوى الخلية 1-2</td>
42 |         <td>محتوى الخلية 1-3</td>
43 |       </tr>
44 |       <tr>
45 |         <td>محتوى الخلية 2-1</td>
46 |         <td>محتوى الخلية 2-2</td>
47 |         <td>محتوى الخلية 2-3</td>
48 |       </tr>
49 |       <tr>
50 |         <td>محتوى الخلية 3-1</td>
51 |         <td>محتوى الخلية 3-2</td>
52 |         <td>محتوى الخلية 3-3</td>
53 |       </tr>
54 |     </table>
55 | </body>
56 | </html>
57 | 
58 | 
59 | 
60 | <!--
61 | /*   
62 | :nth-child(even)    لاستهداف العناصر التي تحمل ترتيبًا زوجيًا داخل عنصر والده
63 | :nth-child(odd)    لاستهداف العناصر التي تحمل ترتيبًا الفردي داخل عنصر والده 
64 | :last-child                   لاستهداف آخر عنصر من فئة محددة داخل عنصر والده 
65 | :first-child                  لاستهداف اول عنصر من فئة محددة داخل عنصر والده 
66 | border-collapse: collapse;                                 لدمج حدود بين خلايا */
67 | table{
68 |     border-collapse: collapse;
69 | }
70 | table tr:nth-child(even){
71 |     background-color: rgb(255, 197, 197);
72 | }table tr:nth-child(odd){
73 |     background-color: rgb(196, 196, 196);
74 | }
75 | table tr th:last-child{
76 |     background-color: aliceblue;
77 | }
78 | table tr th:first-child{
79 |     background-color: aliceblue;
80 | } -->
81 | 


--------------------------------------------------------------------------------
/Lesson 4 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 |     <head>
 4 |         <title>Coder Shiyar</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <!-- selector { property: value } -->
 8 |        <style>
 9 |           header{
10 |                
11 |           }
12 |         </style>
13 |     </head>
14 |     <body>
15 |        
16 |         <header style=" Background-color:red;
17 |         color: white;"> Header </header>
18 |     </body> 
19 | </html>
20 | 
21 | 
22 | 
23 | 
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | <!-- function error_message(input){         
38 |     if (input.value == '') 
39 | 
40 | // ضع هنا رسالة الذي ترغب بأن يتم عرضها
41 | // للمستخدم عند عدم وضع قيمة في حقل اجباري
42 | { input.setCustomValidity('رجاء قم بتعبئة البيانات');}
43 | 
44 | // ضع هنا رسالة الذي ترغب بأن يتم عرضها للمستخدم عند 
45 | // وضع قيمة غير صالحة في حقل النصي
46 | else if (input.validity.typeMismatch){
47 |     input.setCustomValidity('رجاء تعبئة بيانات صالحة');
48 |     }
49 | 
50 | // ضع هنا رسالة الذي ترغب بأن يتم عرضها للمستخدم عند 
51 | // الوضع قيمة صالحة في الحقل الاجباري
52 | else{ input.setCustomValidity('');}
53 |         
54 |   return true;      
55 | } -->


--------------------------------------------------------------------------------
/Lesson 41 - الدرس/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 41 - الدرس/img2.jpg


--------------------------------------------------------------------------------
/Lesson 41 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS Position Property</title>
 7 |     <style>
 8 |         main{
 9 |             /* bottom: -50px; */
10 |             position: relative;
11 |             background-color:  #ffe2f2;
12 |             height: 600px;
13 | 
14 |         }
15 |         header{
16 |             position: fixed;
17 |             background-color:  #e7e6fd;
18 |             bottom: 10px;
19 |             z-index: 1;
20 |         }
21 |         img{
22 |             position: absolute;
23 |             z-index: 2;
24 |             top: 20px;
25 |             left: 0;
26 |             height: 300px;
27 |         }
28 |         menu{
29 |             position: -webkit-sticky; /* Safari */
30 |             position: sticky;
31 |             top:0px;
32 |             z-index: 3;
33 |         }
34 |     </style>      
35 | </head>
36 | <body>
37 | 
38 |     <header>header - قسم العلوي</header>
39 |     <menu>Menu - ضع الشريط التنقل هنا</menu>
40 |     <main>main - ضع محتوى هنا  
41 |         <img src="img2.jpg"/>
42 |     </main>
43 | 
44 |     <footer>footer - قسم السفلي</footer>
45 | </body>
46 | </html>
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | <!-- #e7e6fd  #ffe2f2 -->
61 | 
62 | 
63 | 
64 | 


--------------------------------------------------------------------------------
/Lesson 42 - الدرس/CSS FLEX BOX.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 42 - الدرس/CSS FLEX BOX.pdf


--------------------------------------------------------------------------------
/Lesson 42 - الدرس/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 42 - الدرس/background.jpg


--------------------------------------------------------------------------------
/Lesson 42 - الدرس/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 42 - الدرس/img1.png


--------------------------------------------------------------------------------
/Lesson 42 - الدرس/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 42 - الدرس/img2.jpg


--------------------------------------------------------------------------------
/Lesson 42 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>CSS Flex Box</title>
 5 |   <meta charset="UTF-8">
 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | <style>
 8 | /* 
 9 | ========================= CSS Flex Container Properties ========================
10 | 1: display:flex | inline-flex;  flexible */ 
11 | .flex-container{
12 |     display: flex;
13 |     background-color:DodgerBlue ;
14 |     /* flex-direction: column-reverse; */
15 |     flex-wrap: wrap;
16 |     justify-content: center;
17 |     /* min-height: 400px;
18 |     align-items: stretch; */
19 |     /* align-content: space-between; */
20 | } .flex-container img{
21 |     background-color: rgb(255, 255, 255);
22 |     margin: 10px 10px;
23 |     padding: 10px;
24 |     /* flex-basis: calc(20% - 40px); */
25 |     width:calc(25% - 40px) ;
26 | }
27 | </style>
28 | </head>
29 | <body>
30 | 
31 | <section class="flex-container">
32 |     <img src="img1.png"/>
33 |     <img src="img1.png"/>
34 |     <img src="img1.png"/>
35 |     <img src="img1.png"/>
36 |     <img src="img1.png"/>
37 |     <img src="img1.png"/>
38 |     <img src="img1.png"/>
39 |     <img src="img1.png"/>
40 |      <!-- <div  style="order:4; align-self: flex-end;">item1</div>
41 |      <div style="order:2">item2</div>
42 |      <div  style="order:3">item3</div>
43 |      <div  style="order:1">item4</div>
44 |      <div  style="order:5">item5</div>
45 |      <div  style="order:6">item6</div>
46 |      <div  style="order:7">item7</div>
47 |      <div  style="order:8">item8</div> -->
48 | </section>
49 | 
50 | </body>
51 | </html>
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | <!-- #F45B69  #fefefe   DodgerBlue-->
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | <!-- 
70 | ========================= CSS Flex Container Properties ========================
71 | 1: display:flex | inline-flex;
72 | -------------------------------------------------------------------------------
73 | 2: flex-direction: row | row-reverse | column | column-reverse;
74 | -------------------------------------------------------------------------------
75 | 3: flex-wrap: nowrap | wrap | wrap-reverse;
76 | -------------------------------------------------------------------------------
77 | 4: justify-content: flex-start | flex-end | center | space-between |
78 |                     space-around | space-evenly ...;
79 | -------------------------------------------------------------------------------                    
80 | 5: align-items: stretch | flex-start | flex-end | center | baseline  ...;
81 | -------------------------------------------------------------------------------
82 | 6: align-content: flex-start|center|flex-end|space-between|space-around|stretch;
83 | 
84 | ========================== CSS Flex Items Properties ===========================
85 | 1: order: position(1,2,3...)
86 | 2: flex-basis: value (px | % ....);  -->
87 | 


--------------------------------------------------------------------------------
/Lesson 43 - الدرس/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         @media  (orientation: portrait){
 9 |             body{
10 |                 background: linear-gradient(45deg,rgb(255, 52, 52) 50%,rgb(82, 82, 82) 50%);
11 |             }
12 |             h1{
13 |                 color:white;
14 |             }
15 |         }
16 | 
17 |         @media (orientation: landscape){
18 |             body{
19 |                 background: linear-gradient(45deg,rgb(255, 218, 52) 50%,rgb(82, 82, 82) 50%);
20 |             }
21 |             h1{
22 |                 color:white;
23 |             }
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 |     
29 | <h1>
30 |     Coder Shiyar CSS
31 | </h1>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Lesson 43 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         nav{
 9 |             display: flex;
10 |             justify-content: center;
11 |         }
12 |         nav a{
13 |                text-decoration: none;
14 |     width: 20%;
15 |     display: inline-block;
16 |     padding: 10px;
17 |     background: rgb(255 190 199);
18 |     color: black;
19 |     margin: 2px;
20 |     text-align: center;
21 |     font-weight: bolder;
22 |     font-size: 20px;
23 |         }
24 |         @media  (max-width: 620px) {
25 |             nav{
26 |                 display:block;
27 |                 text-align: center;
28 |             }
29 |             nav a{
30 |                 width: 100%;
31 |             display:block;
32 |             padding:  10px 0px;
33 |             margin:  4px 0px;
34 |             }
35 |             #link4{
36 |                 
37 |             }
38 |         }
39 |         
40 |     </style>
41 | </head>
42 | <body>
43 |     
44 |   <nav>
45 |       <img src="logo.png" alt="" height="50">
46 |       <a href="">Link 1</a>
47 |       <a href=""> Link 2</a>
48 |       <a href="">Link 3</a>
49 |       <a href="" id="link4">Link 4</a>
50 |   </nav>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/Lesson 43 - الدرس/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 43 - الدرس/logo.png


--------------------------------------------------------------------------------
/Lesson 44 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         nav{
 9 |             display: flex;
10 |             justify-content: center;
11 |         }
12 |         nav a{
13 |                text-decoration: none;
14 |     width: 20%;
15 |     display: inline-block;
16 |     padding: 10px;
17 |     background: rgb(255 190 199);
18 |     color: black;
19 |     margin: 2px;
20 |     text-align: center;
21 |     font-weight: bolder;
22 |     font-size: 20px;
23 |         }
24 |         @media  (max-width: 620px) {
25 |             nav{
26 |                 display:block;
27 |                 text-align: center;
28 |             }
29 |             nav a{
30 |                 width: 100%;
31 |             display:block;
32 |             padding:  10px 0px;
33 |             margin:  4px 0px;
34 |             }
35 |             #link4{
36 |                 
37 |             }
38 |         }
39 |         
40 |     </style>
41 | </head>
42 | <body>
43 |     
44 |   <nav>
45 |       <img src="logo.png" alt="" height="50">
46 |       <a href="">Link 1</a>
47 |       <a href=""> Link 2</a>
48 |       <a href="">Link 3</a>
49 |       <a href="" id="link4">Link 4</a>
50 |   </nav>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/Lesson 44 - الدرس/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 44 - الدرس/logo.png


--------------------------------------------------------------------------------
/Lesson 45 - الدرس/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         @media  (orientation: portrait){
 9 |             body{
10 |                 background: linear-gradient(45deg,rgb(255, 52, 52) 50%,rgb(82, 82, 82) 50%);
11 |             }
12 |             h1{
13 |                 color:white;
14 |             }
15 |         }
16 | 
17 |         @media (orientation: landscape){
18 |             body{
19 |                 background: linear-gradient(45deg,rgb(255, 218, 52) 50%,rgb(82, 82, 82) 50%);
20 |             }
21 |             h1{
22 |                 color:white;
23 |             }
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 |     
29 | <h1>
30 |     Coder Shiyar CSS
31 | </h1>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Lesson 46 - الدرس/autofit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 46 - الدرس/autofit.png


--------------------------------------------------------------------------------
/Lesson 46 - الدرس/css grid layout.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 46 - الدرس/css grid layout.pdf


--------------------------------------------------------------------------------
/Lesson 46 - الدرس/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 46 - الدرس/img2.jpg


--------------------------------------------------------------------------------
/Lesson 46 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>CSS Grid Layout</title>
 7 | <style>
 8 |     .grid-container{
 9 |         display: grid;
10 |         grid-template-columns: repeat(3,1fr);
11 |         grid-template-rows: 90px minmax(400px, auto) ;
12 |         gap: 20px 20px;
13 |     }
14 |     header{
15 |         grid-column: 1 / span 3;
16 |         background-color: #ffe2f2;
17 |     }
18 |     aside, main, footer{
19 |         background: #e7e6fd;
20 |     }
21 |     @media screen and (max-width: 900px) {
22 |         .grid-container{
23 |             grid-template-columns: repeat(2,1fr);
24 |             grid-template-rows: 90px minmax(400px, auto) minmax(200px, auto) ;
25 | 
26 |         }    
27 |         header,footer{ grid-column: 1 / span 2;}
28 | }  @media screen and (max-width: 600px) {
29 |     .grid-container{
30 |             grid-template-columns: repeat(1,1fr);
31 |             grid-template-rows: 90px minmax(400px, auto) minmax(200px, auto) minmax(100px, auto) ;
32 | 
33 |         } 
34 |         main{
35 |             grid-row: 2;
36 |         }
37 |         header,footer{ grid-column: 1;}   
38 |         /* footer{
39 |             min-height: 100px;
40 |         } */
41 | }
42 | 
43 | </style>
44 | </head>
45 | <body>
46 | 
47 | <div class="grid-container">
48 |     <header></header>
49 |     <aside>aside</aside>
50 |     <main>main</main>
51 |     <footer>footer</footer>
52 | </div>
53 | </body>
54 | </html>
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | <!-- /* minmax(minValue,maxValue)تستخدم لتحديد الحد الأدنى والحد الاقصى لحجم ما
67 |    repeat()          تستخدم لتكرار قيمة معينة عددًا محددًا من المرات     */ -->


--------------------------------------------------------------------------------
/Lesson 47 - الدرس/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 47 - الدرس/img2.jpg


--------------------------------------------------------------------------------
/Lesson 47 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS Transition Property</title>
 7 |     <style>
 8 | /* 
 9 | CSS Transition                         تسمح لك بجعل تغييرات في مظهر عنصر ويب
10 | تحدث على مدى فترة زمنية محددة بدلاً من شكل فوري
11 | CSS transitions allows you to change property values smoothly over given duration
12 | ---------------------------------------------------------------------------------
13 | transition-property:لتحديد الخصائص التي ترغب بتطبيق عليها(مثل اللون أوالحجم)
14 | transition-duration:                 لتحديد كم سيستغرق من البداية إلى النهاية
15 | transition-timing-function:         لتحديد كيف ستحدث سرعة التغيير خلال الانتقال
16 | transition-delay:                     لإضافة التأخير قبل بدء عملية اضافة خصائص
17 | ---------------------------------------------------------------------------------
18 | transition:                                         لإختصار كتابة جميع تلك خصائص 
19 | */
20 | *{font-size: 18px;}
21 | header{
22 |     background: rgb(255, 67, 67); 
23 |     color: white;    padding: 40px;
24 |     /* transition-property: background;
25 |     transition-duration: 0.5s; */
26 |     /* transition-delay: 2s; */
27 |     /* transition-timing-function:ease; */
28 |     height: 30px;
29 |     transition: background 0.5s, height 1s;
30 | }
31 | header:hover{background: rgb(115, 115, 115);height: 200px;}
32 | img{width: 110px;transition: width 1s;}
33 | img:hover{ width: 100%;}
34 | div {
35 |   width: 100px; padding: 30px;
36 |   margin-bottom: 20px;
37 |   background: rgb(44, 44, 44); color: white;
38 |   transition: width 1s;
39 | }
40 | /* 
41 | ease (الافتراضي): تبدأ بسرعة بطيئة، ثم تسرع أكثر أثناء التقدم في الانتقال، وتبطئ قبل الانتهاء.
42 | linear: تغيير مستمر بنفس السرعة طوال مدة الانتقال.
43 | ease-in: تبدأ ببطء وتتسارع أكثر عند الاقتراب من نهاية الانتقال.
44 | ease-out: تبدأ بسرعة وتتباطأ تدريجياً نحو نهاية الانتقال.
45 | ease-in-out: تبدأ وتنتهي ببطء، وفي منتصف الانتقال تتسارع. */
46 | 
47 | #div1 {transition-timing-function: linear;}
48 | #div2 {transition-timing-function: ease;}
49 | #div3 {transition-timing-function: ease-in;}
50 | #div4 {transition-timing-function: ease-out;}
51 | #div5 {transition-timing-function: ease-in-out;}
52 | div:hover {
53 |   width: 300px;
54 | }
55 | </style>      
56 | </head>
57 | <body>
58 | <header>header</header>
59 | 
60 | <main>
61 | <img src="img2.jpg"/>
62 | <div id="div1">linear</div>
63 | <div id="div2">ease</div>
64 | <div id="div3">ease-in</div>
65 | <div id="div4">ease-out</div>
66 | <div id="div5">ease-in-out</div>
67 | </main>
68 | </body>
69 | </html>
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 
83 | <!-- #e7e6fd  #ffe2f2 -->
84 | 
85 | 
86 | 
87 | 


--------------------------------------------------------------------------------
/Lesson 48 - الدرس/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 48 - الدرس/background.jpg


--------------------------------------------------------------------------------
/Lesson 48 - الدرس/css overflow property example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 48 - الدرس/css overflow property example.png


--------------------------------------------------------------------------------
/Lesson 48 - الدرس/html-block-elements.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 48 - الدرس/html-block-elements.PNG


--------------------------------------------------------------------------------
/Lesson 48 - الدرس/html-inline-elements.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 48 - الدرس/html-inline-elements.PNG


--------------------------------------------------------------------------------
/Lesson 48 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS OverFlow and Resize Properties</title>
 7 |     <style>
 8 | /* 
 9 | overflow (أوفرفلو):  يُستخدم للتحديد ماذا يحدث عندما يكون محتوى عنصر ما 
10 |                         أكبر بكثير من المساحة المخصصة له ضمن العنصر الأم 
11 | visible(Default - افتراضي):               يُظهر المحتوى خارج حدود العنصر
12 | hidden:                                              يُخفي المحتوى الزائد
13 | clip:                     يقوم بقص الجزء الزائد المتجاوز للحدود العنصر
14 | scroll:                                         يُعرض شريط التمرير للتنقل
15 | auto:                                   يُظهر شريط التمرير فقط عند الحاجة
16 | ===========================================================================
17 | text-overflow(تكست أوفرفلو): يُستخدم للتعامل مع النص الزائد الذي يتجاوز 
18 |                                                               حدود العنصر                
19 | clip:                                           يقص الجزء الزائد من النص
20 | ellipsis:               يُعرض نقطتين (العلامة التالية: ...) في نهاية النص
21 | ==========================================================================
22 | resize: none|both|horizontal|vertical;     
23 |                         تحدد ما إذا كان يمكن للمستخدم تغيير حجم العنصر 
24 | overflow:visible;       لا تنطبق على العناصر من نوع إينلاين او الذي يملك              
25 | inline
26 | */
27 | .overflow-example{
28 |     height: 50px;
29 |     background-color:#ffc261 ;
30 |     overflow: auto;
31 |     /* overflow-x: scroll;
32 |     overflow-y: hidden; */
33 | }
34 | .text-overflow-example{
35 |     white-space: nowrap;
36 |     text-overflow: ellipsis;
37 |     overflow: hidden;
38 | }
39 | .resize-example{
40 |   resize: horizontal;
41 |   overflow: auto;
42 | }
43 | </style>      
44 | </head>
45 | <body>
46 |     <p class="resize-example">
47 |         <b>Resize Example</b> <br>
48 |         CSS, or Cascading Style Sheets,  is a web design language for
49 |         enhancing page appearance through fonts, colors, layout, and more. 
50 |     </p>
51 | 
52 |     <p class="overflow-example">
53 |         CSS, or Cascading Style Sheets,  is a web design language for
54 |         enhancing page appearance through fonts, colors, layout, and more. 
55 |         It complements HTML and enables precise control over visual elements.
56 |     </p>
57 | 
58 |     <p class="text-overflow-example">
59 |         <b>Text Overflow Example</b> <br>
60 |         CSS, or Cascading Style Sheets,  is a web design language for
61 |         enhancing page appearance through fonts, colors, layout, and more. 
62 |     </p>
63 | 
64 | 
65 | 
66 | </body>
67 | </html>
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | <!-- #e7e6fd  #ffe2f2 -->
82 | 
83 | 
84 | 
85 | 


--------------------------------------------------------------------------------
/Lesson 48 - الدرس/text-overflow-example-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 48 - الدرس/text-overflow-example-1.png


--------------------------------------------------------------------------------
/Lesson 49 - الدرس/filters.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body {
 6 |   background-color:white;
 7 | }
 8 | img {
 9 |   width: 33%;
10 |   height: auto;
11 |   float: left; 
12 |   max-width: 235px;
13 | }
14 | /* 
15 | none: لا تطبق تعديلات.
16 | blur(): يضبّب العنصر.
17 | brightness(): يجعل العنصر أكثر إشراقًا أو أقل.
18 | contrast(): يجعل العنصر أكثر تباينًا أو أقل.
19 | drop-shadow(): يضيف ظل للعنصر.
20 | grayscale(): يحوّل العنصر إلى أبيض وأسود.
21 | hue-rotate(): يدور لون العنصر.
22 | invert(): يعكس الألوان.
23 | opacity(): يعدّل شفافية العنصر.
24 | saturate(): يجعل الألوان أكثر تشبعًا أو أقل.
25 | sepia(): يعطي تأثير السيبيا (ألوان بنية). 
26 | */
27 | 
28 | .blur {filter: blur(4px);}
29 | .brightness {filter: brightness(250%);}
30 | .contrast {filter: contrast(180%);}
31 | .grayscale {filter: grayscale(100%);}
32 | .huerotate {filter: hue-rotate(180deg);}
33 | .invert {filter: invert(100%);}
34 | .opacity {filter: opacity(50%);}
35 | .saturate {filter: saturate(7);}
36 | .sepia {filter: sepia(100%);}
37 | .shadow {filter: drop-shadow(8px 8px 10px green);}
38 | 
39 | </style>
40 | </head>
41 | <body>
42 | 
43 | <h2>Image Filters</h2>
44 | 
45 | <p><strong>Note:</strong> The filter property is not supported in Internet Explorer or Edge 12.</p>
46 | 
47 | <img src="logo.jpg" alt="Pineapple" width="300" height="300">
48 | <img class="blur" src="logo.jpg" alt="Pineapple" width="300" height="300">
49 | <img class="brightness" src="logo.jpg" alt="Pineapple" width="300" height="300">
50 | <img class="contrast" src="logo.jpg" alt="Pineapple" width="300" height="300">
51 | <img class="grayscale" src="logo.jpg" alt="Pineapple" width="300" height="300">
52 | <img class="huerotate" src="logo.jpg" alt="Pineapple" width="300" height="300">
53 | <img class="invert" src="logo.jpg" alt="Pineapple" width="300" height="300">
54 | <img class="opacity" src="logo.jpg" alt="Pineapple" width="300" height="300">
55 | <img class="saturate" src="logo.jpg" alt="Pineapple" width="300" height="300">
56 | <img class="sepia" src="logo.jpg" alt="Pineapple" width="300" height="300">
57 | <img class="shadow" src="logo.jpg" alt="Pineapple" width="300" height="300">
58 | 
59 | </body>
60 | </html>
61 | 
62 | 
63 | 


--------------------------------------------------------------------------------
/Lesson 49 - الدرس/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 49 - الدرس/img1.jpg


--------------------------------------------------------------------------------
/Lesson 49 - الدرس/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 49 - الدرس/img2.jpg


--------------------------------------------------------------------------------
/Lesson 49 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS Filter & Object Fit And Position Properties</title>
 7 | <style>
 8 | /* 
 9 | object-fit:  تحديد كيفية تغيير حجم صور أو فيديو ليناسب المساحة المحددة له   
10 | used to specify how an <img> or <video> should be resized to fit its container
11 | -----------------------------------value-قيم------------------------------------
12 | fill:       تمتلأ الصورة بالكامل في المكان حتى لو تغيرت نسبة طول وعرض الصورة
13 | contain:               تكبر الصورة أو المحتوى حتى يكون كله مرئيًا دون أن يُشوه
14 | cover:                  تُظهر جزءًا مهمًا من الصورة بحيث تملأ المكان دون أن تُشوه
15 | none:                                               تعرض الصورة بالحجم الطبيعي
16 | scale-down: 
17 | تظهر الصورة بحجمها الطبيعي إذا كان أصغر من المكان، وإلا فستُقلص لتناسب المكان
18 | ---------------------------------------------------------------------------------
19 | object-position:    
20 | Used to specify how an <img> or <video> should be positioned within its container
21 | object-position: (horizontal position) vertical position | default 50% 50%
22 | ---------------------------------------------------------------------------------
23 | filter (فلتر):       هذه الخاصية تمكّنك من تغيير مظهر الصور أو العناصر الأخرى
24 |                                    مثل التغييرات في اللون والتباين والضبابية
25 | CSS filter property adds visual effects (like blur and saturation) to an element
26 | blur(): يضبّب العنصر.
27 | brightness(): يجعل العنصر أكثر إشراقًا أو أقل.
28 | contrast(): يجعل العنصر أكثر تباينًا أو أقل.
29 | drop-shadow(): يضيف ظل للعنصر.
30 | grayscale(): يحوّل العنصر إلى أبيض وأسود.
31 | hue-rotate(): يدور لون العنصر.
32 | invert(): يعكس الألوان.
33 | opacity(): يعدّل شفافية العنصر.
34 | saturate(): يجعل الألوان أكثر تشبعًا أو أقل.
35 | sepia(): يعطي تأثير السيبيا (ألوان بنية). 
36 | */
37 | img{
38 |     height: 100px;
39 |     width: 100%;
40 |     object-fit: cover;
41 |     object-position: 60% 40% ;
42 |     filter: brightness(110%);
43 | }
44 | 
45 | </style>      
46 | </head>
47 | <body>
48 |     <img src="img2.jpg" />
49 | </body>
50 | </html>
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | <!-- #e7e6fd  #ffe2f2 -->
65 | 
66 | 
67 | 
68 | 


--------------------------------------------------------------------------------
/Lesson 49 - الدرس/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 49 - الدرس/logo.jpg


--------------------------------------------------------------------------------
/Lesson 5 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title></title>
 7 |     <style>
 8 |     body{
 9 |      /*    background-color: red;
10 |        Coder Shiyar */
11 | 
12 |     }
13 |     </style>
14 | </head>
15 | <body>
16 |     
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Lesson 50 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS Box-Sizing and clip-path</title>
 7 | <style>
 8 | /* 
 9 | box-sizing:                   تستخدم لتحديد كيف يتم حساب الطول والعرض العنصر
10 |                  بشكل افتراضي، يتم حساب عرض وارتفاع العنصر بالطريقة التالية
11 | width + padding + border = actual width of an element                    
12 |                                العرض + الهامش + الحدود = العرض الفعلي للعنصر
13 | height + padding + border = actual height of an element
14 |                            الارتفاع + الهامش + الحدود = الارتفاع الفعلي للعنصر
15 | -------------------------------------------------------------------------------
16 | The box-sizing property allows us to include the padding and border in an 
17 | element's total width and height.
18 | border-box: تسمح لنا بدمج الهامش الحدود في العرض والارتفاع الإجمالي لعنصر ما
19 | content-box (هي القيمة الافتراضية)
20 | -------------------------------------------------------------------------------
21 | clip-path:                              تُستخدم لقص أو قطع جزء معين من العنصر
22 |           وبالتالي تمكنك من عرض محتوى محدد فقط من العنصر وإخفاء بقية الجزء    
23 | -------------------------------------------------------------------------------
24 | polygon()                           تقوم بتحديد مضلع بناءً على النقاط المحددة
25 | circle()                                                    تقوم بتحديد دائرة
26 | clip-path: circle(50% at 50% 50%);                           دائرة في المنتصف 
27 | */
28 | 
29 | div{
30 |     height: 300px;
31 |     width: 300px;
32 |     padding: 20px;
33 |     box-sizing: border-box;
34 |     margin-bottom: 20px;
35 | }
36 | #div1{
37 |     background-color: rgb(255, 87, 87);
38 |     clip-path: circle(53% at 100% 0%);
39 | }
40 | #div2{
41 |     background-color: rgb(50, 50, 50);
42 |     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
43 | }
44 | #div3{
45 |     background-color: rgb(236, 236, 236);
46 |     clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);}
47 | 
48 | </style>      
49 | </head>
50 | <body>
51 |     <div id="div1">1</div>
52 |     <div id="div2">2</div>
53 |     <div id="div3">3</div>
54 | </body>
55 | </html>
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 


--------------------------------------------------------------------------------
/Lesson 51 - الدرس/correct-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 51 - الدرس/correct-mark.png


--------------------------------------------------------------------------------
/Lesson 51 - الدرس/incorrect-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 51 - الدرس/incorrect-mark.png


--------------------------------------------------------------------------------
/Lesson 51 - الدرس/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Learn CSS in Arabic With Coder Shiyar</title>
  7 | <style>
  8 | 
  9 | 
 10 | /*   
 11 | :valid                         صالح: لتحديد عناصر تم ملئ بياناته بشكل صحيح
 12 | :invalid               غير صالح: لتحديد عناصر تم ملئ بياناته بشكل غير صحيح
 13 | :required                إجباري: تستخدم لتحديد عناصر ملىء بياناتها إجبارية
 14 |     (Form elements: <input>,<textarea>,<select>) 
 15 | ------------------------------------------------------------------------------
 16 | :checked                              (محددة)تم تحديده: لتحديد عناصر مختارة
 17 |     (input: checkbox, radio )
 18 | ------------------------------------------------------------------------------
 19 | :disabled معطل:يُستخدم لتحديد العناصر التي تم تعطيلها ولا يمكن التفاعل معها
 20 | :enabled                مفعل: يُستخدم لتحديد العناصر التي يُمكن التفاعل معها 
 21 |  (<input>,<textarea>,<select>,<button>,<option>) 
 22 | ------------------------------------------------------------------------------    
 23 | :focus           تركيز: لتحديد العنصر الذي تم التركيز عليه من قبل المستخدم
 24 |     (<input>,<button>,<textarea>,<select>) 
 25 | */
 26 | 
 27 | /* input:enabled{
 28 |     background: rgb(45, 45, 45);
 29 | } */
 30 | 
 31 | /* input:required{
 32 |     background: rgb(255, 138, 138);
 33 | }
 34 | input:checked{
 35 |     width: 50px;
 36 |     height: 50px;
 37 | }
 38 | input:focus{
 39 |     transform: scale(1.1);
 40 | } */
 41 | 
 42 | 
 43 | input{
 44 |     box-sizing: border-box;
 45 |     padding: 10px;
 46 |     width: 100%;
 47 |     border-radius: 5px;
 48 |     font-size: 20px;
 49 |     outline: none; margin-top: 15px;
 50 |     border: 0px;
 51 |     border-bottom: 3px solid #5578d8;
 52 | }
 53 | input:valid{
 54 |     border-bottom: 3px solid green;
 55 |     background: url(correct-mark.png) 97% no-repeat;
 56 |     background-size: 30px;
 57 | }
 58 | /* input:invalid {
 59 |     border-bottom: 3px solid red;
 60 |     background: url(incorrect-mark.png) 97% no-repeat;
 61 |     background-size: 30px;
 62 | } */
 63 | input[type=submit]{
 64 |     background: #224194;
 65 |     color: white;
 66 | }input[type=submit]:hover{
 67 |     background: #5578d8;
 68 | }
 69 | 
 70 | @media screen and (min-width:720px){
 71 |    body{
 72 |         display: flex;
 73 |         justify-content: center;
 74 |         align-items: center; /* Verticaal centreren */
 75 |         min-height: 100vh;
 76 |    }
 77 |    header{
 78 |     border-right: 8px solid #5578d8; 
 79 |     margin-right: 10px;
 80 |    }
 81 | }
 82 | </style>      
 83 | </head>
 84 | <body>
 85 |     <header>
 86 |         <img src="programmer.avif" width="100%">
 87 |     </header>
 88 |     <form>
 89 |             <input type="email" required name="email"  placeholder="Type in your email..."/>
 90 |             <input type="password" required name="password"  placeholder="Type in your password..."/>
 91 |             <input type="submit" value="Login">
 92 |     </form>
 93 | </body>
 94 | </html>
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | 
103 | 
104 | 
105 | 
106 | 


--------------------------------------------------------------------------------
/Lesson 51 - الدرس/programmer.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 51 - الدرس/programmer.avif


--------------------------------------------------------------------------------
/Lesson 51 - الدرس/valid-vs-invalid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 51 - الدرس/valid-vs-invalid.jpg


--------------------------------------------------------------------------------
/Lesson 52 - الدرس/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 52 - الدرس/img.jpg


--------------------------------------------------------------------------------
/Lesson 52 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Style HTML Elements With Specific Attributes</title>
 7 | 
 8 | <style>
 9 | /*  
10 | HTML attributes               خصائص التي يمكنك وضعها للعناصر اتش تي ام ال 
11 | Attributes                                              صفات | خصائص | سمات 
12 | ---------------------------------------------------------------------------- 
13 | [attribute]:                                  يختار العناصر بخاصية المحددة
14 |  Selects elements with a specified attribute.
15 |  ---------------------------------------------------------------------------
16 | [attribute="value"]:                   يختار العناصر بخاصية وقيمة معينتين
17 |  Selects elements with a specified attribute and value.
18 | ----------------------------------------------------------------------------
19 |  */
20 | img[width]{
21 |     border-bottom: 4px solid  rgb(255, 91, 91);
22 | }
23 | img[width="100%"]{
24 |     height: 250px;
25 |     object-fit: cover;
26 | }
27 | /*[attribute^="value"]:   يختار العناصر التي تبدأ قيمتها بقيمة معينة    
28 | Selects elements whose attribute value starts with a specific value.
29 | ----------------------------------------------------------------------------
30 | [attribute$="value"]:        يختار العناصر التي تنتهي قيمتها بقيمة معينة   
31 | Selects elements whose attribute value ends with a specific value.
32 | ----------------------------------------------------------------------------
33 | [attribute*="value"]: يختار العناصر التي تحتوي قيمة السمة على قيمة معينة
34 | Selects elements whose attribute value contains a specific value. 
35 | ----------------------------------------------------------------------------
36 | [attribute|="value"]:         (-) يختار العناصر بقيمة معينة أو تليها علامة 
37 | Selects elements whose attribute value is either the specified value 
38 |                 or starts with the specified value followed by a hyphen.
39 | -----------------------------------------------------------------------------
40 | [attribute~="value"]:يختار العناصر التي تحتوي قيمة الخاصية على كلمة معينة
41 | Selects elements whose attribute value contains a specific word.
42 |  */
43 |  /* a:not([href^="http"]){
44 |     color: rgb(255, 83, 83); font-size: 25px;
45 | } */
46 | a[href^="http"]{
47 |     color: rgb(255, 83, 83); font-size: 25px;
48 | }
49 | a[href*="index"]{
50 |     color: rgb(55, 55, 55); font-size: 25px;
51 | }
52 | [class~="Link"]{
53 |     padding: 15px;
54 | }
55 | /* :not([class~="Link"]){
56 |     padding: 15px;
57 | } */
58 | 
59 | </style>      
60 | </head>
61 | <body>
62 |     <img src="programmer.avif" width="100%">
63 |     <img src="img.jpg" width="100%">
64 |     <!-- <video src="" width="100%"></video> -->
65 |     <a class="Link Online" href="http://codershiyar.com">رابط خارجي</a>
66 |     <a class="Link Offline" href="index.html">رابط داخلي</a>
67 |     
68 | </body>
69 | </html>
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/Lesson 52 - الدرس/programmer.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 52 - الدرس/programmer.avif


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/Capture.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 53 - الدرس/Capture.PNG


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/Capture2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 53 - الدرس/Capture2.PNG


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/Capture3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 53 - الدرس/Capture3.PNG


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/correct-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 53 - الدرس/correct-mark.png


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/incorrect-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 53 - الدرس/incorrect-mark.png


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Login Page Using CSS </title>
 7 | <style>
 8 | 
 9 | input{
10 |     box-sizing: border-box;
11 |     padding: 10px; width: 100%;
12 |     border-radius: 5px;
13 |     font-size: 20px;
14 |     outline: none; margin-top: 15px;
15 |     border: 0px;
16 |     border-bottom: 3px solid #5578d8;
17 | }
18 | input:valid{
19 |     border-bottom: 3px solid green;
20 |     background: url(correct-mark.png) 97% no-repeat;
21 |     background-size: 30px;
22 | }
23 | 
24 | input:invalid {
25 |     border-bottom: 3px solid red;
26 |     background: url(incorrect-mark.png) 97% no-repeat;
27 |     background-size: 30px;
28 | }
29 | 
30 | input[type=submit]{
31 |     background: #224194;
32 |     color: white;
33 | }
34 | input[type=submit]:hover{
35 |     background: #5578d8;
36 | }
37 | 
38 | @media screen and (min-width:720px){
39 |    body{
40 |         display: flex;
41 |         justify-content: center;
42 |         align-items: center; /* Verticaal centreren */
43 |         min-height: 100vh;
44 |    }
45 |    header{
46 |     border-right: 8px solid #5578d8; 
47 |     margin-right: 10px;
48 |    }
49 | }
50 | 
51 | 
52 | </style>      
53 | </head>
54 | <body>
55 |     <header>
56 |         <img src="programmer.avif" width="100%">
57 |     </header>
58 |     <form>
59 |         <input type="email" required name="email"  placeholder="Type in your email..."/>
60 |         <input type="password" required name="password"  placeholder="Type in your password..."/>
61 |         <input type="submit" value="Login">
62 |     </form>
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | <!-- <form dir="rtl">
70 |    <input type="email" required name="email"  placeholder="ضع البريد الكتروني الخاص بك..."/>
71 |   <input type="password" required name="password"  placeholder="ضع الكلمة المرور الخاص بك..."/>
72 |   <input type="submit" value="تسجيل دخول">
73 | </form> -->
74 | 
75 | </body>
76 | </html>
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 


--------------------------------------------------------------------------------
/Lesson 53 - الدرس/programmer.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 53 - الدرس/programmer.avif


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/correct-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 54 - الدرس/correct-mark.png


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/incorrect-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 54 - الدرس/incorrect-mark.png


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Login Page Using CSS and HTML </title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <img src="programmer.avif" width="100%">
12 |     </header>
13 |     <!-- <form>
14 |         <input type="email" required name="email"  
15 |                                         placeholder="Type in your email..."/>
16 |         <input type="password" required name="password"  
17 |                                         placeholder="Type in your password..."/>
18 |         <a href="register.html">Create an account</a>                      
19 |         <input type="submit" value="Login">
20 |     </form> -->
21 | 
22 | <form dir="rtl">
23 |         <input type="email" required name="email"  placeholder="ضع البريد الكتروني الخاص بك..."/>
24 |         <input type="password" required name="password"  placeholder="ضع الكلمة المرور الخاص بك..."/>
25 |         <a href="register.html">تسجيل في الموقع</a>
26 |     <input type="submit" value="تسجيل دخول">
27 | </form>
28 | 
29 | </body>
30 | </html>
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/learn how to create a register page (Time 0_05_05;23).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 54 - الدرس/learn how to create a register page (Time 0_05_05;23).png


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/programmer.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 54 - الدرس/programmer.avif


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/register.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Register Page Using CSS and HTML</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <img src="programmer.avif" width="100%">
12 |     </header>
13 |     <form dir="rtl">
14 |         <input type="text" required name="name" placeholder="ضع اسمك  ..."/>
15 |         <input type="email" required name="email"  placeholder="ضع البريد الكتروني الخاص بك..."/>
16 |         <input type="password" required name="password"  placeholder="ضع الكلمة المرور الخاص بك..."/>
17 | 
18 |         <input type="radio" name="gender" value="male">  
19 |         <label>ذكر</label>
20 |         <input type="radio" name="gender" value="female"> 
21 |         <label>أنثى</label>
22 | 
23 |         <a href="index.html">تسجيل دخول</a>                      
24 |         <input type="submit" value="إنشاء الحساب">
25 |     </form>
26 |     <!-- <form>
27 |         <input type="text" required name="name" placeholder="Type in your name..."/>
28 |         <input type="email" required name="email" placeholder="Type in your email..."/>
29 |         <input type="password" required name="password" placeholder="Type in your password..."/>
30 |        
31 |         <input type="radio" name="gender" value="male">  
32 |         <label>Male</label>
33 |         <input type="radio" name="gender" value="female"> 
34 |         <label>Female</label>
35 | 
36 |         <a href="index.html">Login</a>                      
37 |         <input type="submit" value="Register">
38 |     </form> -->
39 |    
40 | </body>
41 | </html>
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 


--------------------------------------------------------------------------------
/Lesson 54 - الدرس/style.css:
--------------------------------------------------------------------------------
 1 | input{
 2 |     box-sizing: border-box;
 3 |     padding: 10px; width: 100%;
 4 |     border-radius: 5px;
 5 |     font-size: 20px;
 6 |     outline: none; margin-top: 15px;
 7 |     border: 0px;
 8 |     border-bottom: 3px solid #5578d8;
 9 | }
10 | input:valid{
11 |     border-bottom: 3px solid green;
12 |     background: url(correct-mark.png) 3% no-repeat;
13 |     background-size: 30px;
14 | }
15 | 
16 | input[type=submit]{
17 |     background: #224194;
18 |     color: white;
19 | }
20 | input[type=submit]:hover{
21 |     background: #5578d8;
22 | }
23 | a,label{
24 |     padding: 15px;
25 |     font-size: 20px;
26 |     color: #434343;
27 |     font-weight: bolder;
28 | }
29 | a{
30 |     display: block;
31 | }
32 | input[type="radio"] {
33 |     appearance: none;
34 |     outline: none;
35 |     width: 20px;
36 |     height: 20px;
37 |     border-radius: 50%;
38 |     border: 1px solid #5578d8;
39 |     background: white;
40 | }
41 | input[type="radio"]:checked{
42 |     background: #224194;
43 | }
44 | 
45 | @media screen and (min-width:720px){
46 |    body{
47 |         display: flex;
48 |         justify-content: center;
49 |         align-items: center; /* Verticaal centreren */
50 |         min-height: 100vh;
51 |    }
52 |    header{
53 |     border-right: 8px solid #5578d8; 
54 |     margin-right: 10px;
55 |    }
56 | }


--------------------------------------------------------------------------------
/Lesson 55 - الدرس/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 55 - الدرس/img.jpg


--------------------------------------------------------------------------------
/Lesson 55 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 |     <head>
 4 |         <title>Coder Shiyar</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |        <style>
 8 |            .img-text{
 9 |               color:transparent; 
10 |               background: url(img.jpg);
11 |               -webkit-background-clip:text;
12 |               background-size: 100% 40px;
13 |               font-family: monospace;
14 |               font-size: 30px;
15 |            }
16 |        </style>
17 |    
18 |     </head>
19 |     <body>
20 |      
21 |        <h1 class="img-text">CODER SHIYAR </h1>
22 |         
23 |     <p class="img-text"> تعلم اللغة اتش تي ام ال</p>
24 |        
25 |     </body> 
26 | </html>
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/Lesson 56 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 |     <head>
 4 |         <title>Coder Shiyar</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |        <style>
 8 |            #title{
 9 |               
10 |             /*  هذه الخاصية لاجل تحديد لون الخط الذي ترغب بإضافته حول النص
11 |                 -webkit-text-stroke-color: rgb(252, 55, 55) ;
12 | 
13 |                 هذه الخاصية لتحديد العمق الخط الذي ترغب بوضعها حول النص
14 |                 -webkit-text-stroke-width: 2px;  
15 | 
16 |                 يمكنك استخدام احد القيم الثانية لتحديد نوع عمق الخط 
17 |                 thin medium thick 3px
18 |                 بالنسبة قيمة بيكسل يمكنك تحديد بنفسك عمق الخط عبر تحديد العدد بيكسل
19 |                  
20 |                  Coder Shiyar - افضل دورة لتعلم سي اس اس باللغة العربية  */
21 |                                                      
22 |             /* هذه الخاصية يمكنك استخدامها ل اختصار الخاصية الاول والثاني  */
23 |             -webkit-text-stroke: thin rgb(252, 55, 55);
24 |             color: transparent;
25 |            }
26 |        </style>
27 |    
28 |     </head>
29 |     <body>
30 |      
31 |         <h1 id="title"> CODER SHIYAR </h1>
32 |        
33 |     </body> 
34 | </html>
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/Lesson 57 - الدرس/css.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 57 - الدرس/css.jpg


--------------------------------------------------------------------------------
/Lesson 57 - الدرس/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 57 - الدرس/img.jpg


--------------------------------------------------------------------------------
/Lesson 57 - الدرس/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 57 - الدرس/img2.jpg


--------------------------------------------------------------------------------
/Lesson 57 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learn CSS 2D Transform</title>
 7 | <style>
 8 | /* 
 9 | translate(valueX,valueY): تقوم بتحريك العنصر في اتجاهات محددة 
10 | translateX(Number):         يقوم بتحريك العنصر على محور الأفقي
11 | translateY(Number):        يقوم بتحريك العنصر على محور الرأسي 
12 | ----------------------------------------------------------------
13 | rotate(1turn):                            يستخدم لدوران العنصر 
14 | ----------------------------------------------------------------
15 | scaleX(Number):         يقوم بتغيير حجم العنصر على محور الأفقي
16 | scaleY(Number):        يقوم بتغيير حجم العنصر على محور الرأسي
17 | scale(Number):                تغيير حجم العنصر على كلا المحاور
18 | ----------------------------------------------------------------
19 | skewX(angle):        يميل العنصر على محور الأفقي  بزاوية محددة
20 | skewY(angle):        يميل العنصر على محور الرأسي بزاوية محددة
21 | skew(x-angle,y-angle):              يميل العنصر على كلا المحاور
22 | ----------------------------------------------------------------
23 | angle = زاوية     turn = استدار/دور    transform =  تغير|تحويل
24 | */
25 | 
26 | header{
27 |     background-color: rgb(255, 165, 165);
28 |     text-align: center;
29 |     height: 90px;
30 | } header img{
31 |     width: 170px;
32 |     transform: translateY(40px) skew(-1deg);
33 |     border-radius: 10px;
34 | }
35 | .rotate-img{
36 |     width: 90px;
37 |     transform: rotate(0.5turn) scale(95%);
38 | }
39 | 
40 | 
41 | </style>      
42 | </head>
43 | <body>
44 |     <header>
45 |         <img src="img.jpg" />
46 |     </header>
47 |     <img class="rotate-img" src="css.jpg" />
48 | 
49 | </body>
50 | </html>
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/Lesson 57 - الدرس/maxresdefault.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 57 - الدرس/maxresdefault.webp


--------------------------------------------------------------------------------
/Lesson 58 - الدرس/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Lesson 58 - الدرس/img.png


--------------------------------------------------------------------------------
/Lesson 58 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 | </head>
 8 | <body>
 9 | 
10 |     <img src="img.png" width="300" style="transform: scale(-1);"/>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Lesson 6 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title></title>
 7 |     <style>
 8 |      /*    
 9 |                 .class                  يتم استخدام نقطة لتحديد عنصر عبر اسم كلاس  
10 |                 #id                 يتم استخدام علامة # لتحديد عنصر عبر اسم اي دي
11 |                 *                           يتم أستخدام علامة * لتحديد جميع عناصر 
12 |                 element                          تحديد عناصر عبر تحديد اسم العنصر 
13 | 
14 |      */  
15 |      *{
16 |          color:white;
17 |      }
18 | 
19 |      .header{
20 |          background-color: green;
21 |          color: black;
22 |      }
23 |      #content{
24 |          background-color: red;
25 |      }
26 | 
27 | 
28 | 
29 |      main{
30 | 
31 |      }
32 |     </style>
33 | </head>
34 | <body>
35 |     
36 |     <header class="header">
37 |         Coder Shiyar
38 |     </header>
39 | 
40 |     <main id="content" >
41 |         text
42 |     </main>
43 | 
44 |     <main id="content" >
45 |         text
46 |     </main>
47 | 
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/Lesson 7 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title></title>
 7 |     <style>
 8 |      /*    
 9 |         element.class           لتحديد عنصر الذي يملك نفس نوع عنصر واسم كلاس الذي تحدده
10 |         element,element       لتحديد أكثر من عنصر بنفس الوقت  تقوم بإستخدام علامة فاصلة
11 |         element element                       لتحديد عناصر يتواجدون ضمن عنصر الذي تحدده 
12 |      */  
13 |         /* article.title, #text{
14 |             background-color: red;
15 |         } */
16 |         .title p{
17 |         background-color: green;    
18 |         }
19 |     </style>
20 | </head>
21 | <body>
22 |     
23 |     <article class="title">
24 |         <p> Learn Css </p>
25 |         <p>Test </p>
26 |        </article>
27 |     <div class="title"> text</div>
28 |     <p id="text">Coder Shiyar</p>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Lesson 8 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title></title>
 7 |     <style>
 8 |       /* 
 9 |       
10 |       https://www.w3schools.com/colors/colors_names.asp       موقع لحصول على اسماء الوان 
11 |       https://www.w3schools.com/css/css_colors_hsl.asp  HSLموقع لحصول على قيمة لون بصيغة 
12 |       https://www.w3schools.com/css/css_colors_rgb.asp    RGB موقع لحصول على الوان بصيغة 
13 |       https://www.w3schools.com/css/css_colors_hex.asp    HEX موقع لحصول على الوان بصيغة
14 |       
15 |       */
16 | 
17 |      /*    
18 |     [attribute]                                لتحديد عناصر الذي يملكون ميزة الذي تحدده 
19 |     [attribute=value]
20 | لتحديد عناصر الذي يملكون ميزة الذي تحدده وقيمة الميزة يكون متساوية مع قيمةالذي تحدده
21 |     [attribute~=value]
22 |      لتحديد عناصر الذي يملكون ميزة الذي تحدده وقيمة الميزة يحتوي على كلمة الذي تحدده
23 |     
24 |     [attribute*=value]
25 |       لتحديد عناصر الذي يملكون ميزة الذي تحدده وقيمة الميزة يحتوي على قيمة الذي تحدده
26 |     [attribute$=value]
27 |         لتحديد عناصر الذي يملكون ميزة الذي تحدده وقيمة الميزة ينتهي ب قيمة الذي تحدده
28 |      */  
29 | 
30 | 
31 | 
32 |       body{
33 |         background-color:#23e91ce8;
34 |       }
35 |     
36 |     </style>
37 | </head>
38 | <body>
39 |     
40 | <h1>Coder Shiyar</h1>
41 | 
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Lesson 9 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title></title>
 7 |     <style>
 8 |       header{
 9 |        background: #ff9e3a;
10 |        color: white;
11 |       }
12 |       #title{
13 |         
14 |       }
15 |     </style>
16 | </head>
17 | <body>
18 |    
19 | <header> 
20 |   <h1>Coder Shiyar </h1>
21 |   <h1 id="title">Coder Shiyar </h1>
22 |   <h1>Coder Shiyar </h1>
23 | </header>
24 | 
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/img/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 47 48/img/facebook.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/img/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 47 48/img/logo.jpg


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/img/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 47 48/img/map.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/img/shiyar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 47 48/img/shiyar.jpg


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 47 48/img/twitter.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 47 48/img/youtube.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <!--البداية الكود  الذي يجعل اكواد متجاوب مع اجهزة الموبايل -->
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <!-- نهاية الكود  الذي يجعل اكواد متجاوب مع اجهزة الموبايل -->
 8 |     
 9 |   <link rel="stylesheet" href="style.css">
10 |   <link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
11 | 
12 | 
13 | </head>
14 | 
15 | <body>
16 | 
17 | <header>
18 | 
19 | <nav id="nav-computer">
20 | 
21 |   <span id="box-logo">
22 |     <a target="_blank" href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ/playlists"><img src="img/logo.jpg" id="logo"/></a>
23 |     <a href="#"><h1 id="website-name">Coder Shiyar</h1></a>
24 |   </span>
25 | 
26 |   <div id="nav-links"> 
27 |     <ul>
28 |       <li><a href="https://bit.ly/2MgXFza">الصفحة الرئيسية</a></li>
29 |       <li><a href="https://bit.ly/3dvv456">الفيديوهات</a></li>
30 |       <li><a href="https://bit.ly/2XZNKDV">القوائم التشغيل</a></li>
31 |       </ul>
32 |   </div>
33 | 
34 | </nav>
35 | 
36 | </header>
37 | 
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 47 48/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     padding: 0;
 3 |     margin: 0;
 4 | }
 5 | #nav-computer{
 6 |     height: 100px;
 7 |     width: 100%;
 8 |     background-image: linear-gradient(to right, red,rgb(247, 86, 86))
 9 | }
10 | #box-logo{
11 |     min-width: 30%;
12 |     height: 100%;
13 |     float: right;
14 |     background-color: #fafafa;
15 | }
16 | #website-name{
17 |     float: left;
18 |     line-height: 100px;
19 |     padding: 0 15px;
20 | }
21 | #logo{
22 |     height: 100%;
23 |     border-radius: 50%;
24 |     float: right;
25 | }
26 | #nav-computer a{
27 |     color:black;
28 | }
29 | #nav-computer #nav-links{
30 |     width: 70%;
31 |     text-align: center;
32 | }
33 | 
34 | #nav-computer #nav-links a{
35 |    text-decoration: none;
36 |    color:white;
37 |    font-weight: bold;
38 |    display: inline-block;
39 | }
40 | #nav-computer #nav-links li{
41 |     display: inline-block;
42 |     line-height: 100px;
43 |     min-width: 106px;
44 |     text-align: center;
45 | }
46 | #nav-computer #nav-links a:hover{
47 |     background-color: white;
48 |     color:black;
49 |     height: 100%;
50 |     width: 100%;
51 |     
52 |     border-bottom: 2px solid rgb(27, 27, 27);
53 | }
54 | 
55 | 
56 | /* 
57 | قم بإلغاء تعليق على  الاكواد ميديا سكرين 
58 | إن كنت ترغب بجعل شريط علوي متجاوب مع جميع انواع اجهزة 
59 | قمت بكتابة اكواد لاجلكم
60 | */
61 | 
62 | /* 
63 | @media only screen and (max-width: 720px) {
64 | 
65 |     #box-logo{ display: block; width: 100%; }
66 |     #nav-computer #nav-links li{
67 |         border-bottom: 2px solid white;
68 |         display: block; width: 100%;
69 |         background-image: linear-gradient(to right, red,rgb(247, 86, 86))
70 |     }
71 | 
72 |     #nav-computer #nav-links{ width: 100%; }
73 | } 
74 | */


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/facebook.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/logo.jpg


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/map.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/shiyar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/shiyar.jpg


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/twitter.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/img/youtube.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <!--البداية الكود  الذي يجعل اكواد متجاوب مع اجهزة الموبايل -->
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <!-- نهاية الكود  الذي يجعل اكواد متجاوب مع اجهزة الموبايل -->
 8 |     
 9 |   <link rel="stylesheet" href="style.css">
10 | <link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
11 | 
12 | 
13 | </head>
14 | 
15 | <body>
16 | <header>
17 |   <span id="logoBox">
18 |     <a target="_blank" href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ/playlists"><img src="img/logo.jpg" id="logo"/></a>
19 |     <a href="#"><h1 id="h1Header">Coder Shiyar</h1></a>
20 | 
21 |   </span>
22 | 
23 | <nav>
24 | <ul>
25 | <li><a href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ/featured">الصفحة الرئيسية</a></li>
26 | <li><a href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ/videos">الفيديوهات</a></li>
27 | <li><a href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ/playlists">القوائم التشغيل</a></li>
28 | </ul>
29 | 
30 | </nav>
31 | </header>
32 | <main>
33 |   <aside>
34 |     <a href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ"><img src="img/shiyar.jpg" alt=""></a>
35 |     <h1 id="h1Aside">Shiyar Jamo</h1>
36 |     <div id="contact-box">
37 |       <a href=""> <img src="img/facebook.png" alt=""></a>
38 |       <a href=""> <img src="img/map.png" alt=""></a>
39 |       <a href=""> <img src="img/twitter.png" alt=""></a>
40 |       <a target="_blank" href="https://www.youtube.com/channel/UCBNZ0VoN2u_4NT8kbmGgUzQ?view_as=subscriber"> <img src="img/youtube.png" alt=""></a>
41 | 
42 |     </div>
43 |   </aside>
44 | 
45 |   <article id="article">
46 |     <div id="box">
47 |       <h1>مهندس للبرمجيات</h1>
48 |       <p>انا اعيش في هولندا لدي خبرة في لغات البرمجة التصميم المواقع , واساعد الأخرين 
49 | في تعلم البرمجة عبر الدروس اونلاين
50 |       </p>
51 |       <h1 id="print">Print</h1>
52 |     </div>
53 |   </article>
54 | </main>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 49 50 51 52 53 - الدرس/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     padding: 0;
  3 |     margin: 0;
  4 | }
  5 | header{
  6 |     height: 100px;
  7 |     width: 100%;
  8 |     background-image: linear-gradient(to right, red,rgb(247, 86, 86))
  9 | }
 10 | #logoBox{
 11 |     width: 30%;
 12 |     height: 100%;
 13 |     float: right;
 14 |     background-color: #fafafa;
 15 | }
 16 | #h1Header{
 17 |     float: left;
 18 |     line-height: 100px;
 19 |     padding: 0 15px;
 20 | }
 21 | #logo{
 22 |     height: 100%;
 23 |     border-radius: 50%;
 24 |     float: right;
 25 | }
 26 | header a{
 27 |     color:black;
 28 | }
 29 | nav{
 30 |     width: 70%;
 31 |     text-align: center;
 32 | }
 33 | 
 34 | nav a{
 35 |    text-decoration: none;
 36 |    color:white;
 37 |    font-weight: bold;
 38 |    display: inline-block;
 39 | }
 40 | nav li{
 41 |     display: inline-block;
 42 |     line-height: 100px;
 43 |     width: 100px;
 44 |     text-align: center;
 45 | }
 46 | nav a:hover{
 47 |     background-color: white;
 48 |     color:black;
 49 |     height: 100%;
 50 |     width: 100%;
 51 | }
 52 | main{
 53 |     width: 100%;
 54 |     height: 450px;
 55 |     background-color: rgb(255, 55, 55);
 56 |     border-top: 3px solid white;
 57 |     animation-name: changeBackground;
 58 |     animation-duration: 15s;
 59 |     animation-iteration-count: infinite;
 60 | 
 61 | }
 62 | aside{
 63 |     width: 30%;
 64 |     height: 100%;
 65 |     background-color: #fafafa;
 66 |     text-align: center;
 67 |     float: left;
 68 | }
 69 | aside img{
 70 |     width: 90%;
 71 | }
 72 | #h1Aside{
 73 |    padding: 20px 0;
 74 |    border-bottom: 2px solid red;
 75 | }
 76 | #article{
 77 |     float: right;
 78 |     width: 70%;
 79 |     height: 450px;
 80 |     position: relative;
 81 | }
 82 | #box{
 83 |     padding: 20px;
 84 |     text-align: center;
 85 |     position: absolute;
 86 |     width: 400px;
 87 |     height: 180px;
 88 |     background-color:#fafafa;
 89 |     top:50%;
 90 |     left:50%;
 91 |     transform: translate(-50%, -50%);
 92 | }
 93 | #box h1{
 94 |     border-bottom: 3px solid red;
 95 |     padding: 15px 0;
 96 | }
 97 | #box p{
 98 |     font-family: 'Cairo', sans-serif;
 99 |     text-align: justify;
100 | }
101 | #contact-box{
102 |     width: 100%;
103 |     display: flex;
104 |     justify-content: center;
105 |     margin-top: 15px;
106 | }
107 | #contact-box img{
108 |     width: 45px;
109 |     border-bottom: 2px double rgb(231, 62, 62);
110 |     padding-bottom: 10px;
111 | }
112 | #contact-box img:hover{
113 |     width: 55px;
114 |     border-bottom: 2px solid black;
115 | }
116 | @keyframes changeBackground{
117 |     0%{
118 |         background-color: white;
119 |     }
120 |  
121 |     50%{
122 |         background-color: rgb(255, 55, 55);;
123 |     }
124 |     100%{
125 |         background-color: red;
126 |     }
127 | }
128 | #print{
129 |     display: none;
130 | }
131 | 
132 | @media only screen and (min-width:940px) and (max-width:1070px){
133 |     #logoBox{
134 |         width: 35%;
135 |     }
136 |     #article{
137 |         width: 65%;
138 |     }
139 |     aside{
140 |         width: 35%;
141 |     }
142 | }
143 | @media only screen and (max-width:940px){
144 |     #logoBox{
145 |         width: 40%;
146 |     }  
147 | }
148 | @media only screen and (max-width:801px){
149 |     header, main{
150 |         height: auto;
151 |     }
152 |     #logoBox{
153 |         width: 100%;
154 |         text-align: center;
155 |     }
156 |     #h1Header,#logo{
157 |         float: none;
158 |     }
159 |     span a{
160 |         text-decoration: none;
161 |     }
162 |     nav{
163 |         width: 100%;
164 |     }
165 |     aside{
166 |         width: 100%;
167 |     }
168 |     #article{
169 |         height: 230px;
170 |         width:100%;
171 |         background-color: #fafafa;
172 |     }
173 | }
174 | @media only screen and (max-width:500px){
175 |     nav li{
176 |         display: block;
177 |         width:100%;
178 |     }
179 | }
180 | @media only screen and (orientation:landscape) and (max-width:500px){
181 |     #logoBox{
182 |         background-color: aqua;
183 |     }
184 | }
185 | @media print{
186 |     nav{
187 |         display: none;
188 |     }
189 |     #print{
190 |         display: block;
191 |     }
192 | }
193 | 
194 | 
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 
202 | 
203 | 
204 | 
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 
215 | 
216 | 
217 | 
218 | 
219 | /* 
220 | @media only screen and (max-width:1070px) and (min-width:916px){
221 |     #logoBox{
222 |         width:35%;
223 |     }
224 | }
225 | 
226 | @media only screen and (min-width:802px) and (max-width:917px){
227 |     #logoBox{
228 |         width:40%;
229 |     }
230 | }
231 | @media only screen and (max-width:802px){
232 |     header{
233 |         height: auto;
234 |     }
235 |     #logoBox{
236 |         width: 100%;
237 |         text-align: center;
238 |     }
239 |     #h1Header{
240 |         float: none;
241 |     }
242 |     span a{
243 |         text-decoration: none;
244 |     }
245 |     nav{
246 |         width: 100%;
247 |     }
248 |     aside{
249 |         width: 100%;
250 |     }
251 |     main{
252 |         height: auto;
253 |     }
254 |     #article{
255 |         height: 230px;
256 |         width: 100%;
257 |         background-color: #fafafa;
258 |         border-top:2px solid red;
259 |     }
260 |     #box{
261 |         background-color: #6a7272;
262 |     }
263 |     #logo{
264 |         float: none;
265 |     }
266 | 
267 | }
268 | 
269 | @media only screen and (max-width:500px) and (orientation: landscape){
270 |     nav li {
271 |         display: block;
272 |         width: 100%;
273 |     }
274 |     #logoBox{
275 |         background-color: aqua;
276 |     }
277 | }
278 | 
279 | @media print{
280 |     nav{
281 |         display: none;
282 |     }
283 |     #copyRight{
284 |         display: none;
285 |     }
286 | } */


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 63 - الدرس/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 63 - الدرس/img.jpg


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 63 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 |     <head>
 4 |         <title>Coder Shiyar</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |        <style>
 8 |            .img-text{
 9 |               color:transparent; 
10 |               background: url(img.jpg);
11 |               -webkit-background-clip:text;
12 |               background-size: 100% 40px;
13 |               font-family: monospace;
14 |               font-size: 30px;
15 |            }
16 |        </style>
17 |    
18 |     </head>
19 |     <body>
20 |      
21 |        <h1 class="img-text">CODER SHIYAR </h1>
22 |         
23 |     <p class="img-text"> تعلم اللغة اتش تي ام ال</p>
24 |        
25 |     </body> 
26 | </html>
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 64 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 |     <head>
 4 |         <title>Coder Shiyar</title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |        <style>
 8 |            #title{
 9 |               
10 |             /*  هذه الخاصية لاجل تحديد لون الخط الذي ترغب بإضافته حول النص
11 |                 -webkit-text-stroke-color: rgb(252, 55, 55) ;
12 | 
13 |                 هذه الخاصية لتحديد العمق الخط الذي ترغب بوضعها حول النص
14 |                 -webkit-text-stroke-width: 2px;  
15 | 
16 |                 يمكنك استخدام احد القيم الثانية لتحديد نوع عمق الخط 
17 |                 thin medium thick 3px
18 |                 بالنسبة قيمة بيكسل يمكنك تحديد بنفسك عمق الخط عبر تحديد العدد بيكسل
19 |                  
20 |                  Coder Shiyar - افضل دورة لتعلم سي اس اس باللغة العربية  */
21 |                                                      
22 |             /* هذه الخاصية يمكنك استخدامها ل اختصار الخاصية الاول والثاني  */
23 |             -webkit-text-stroke: thin rgb(252, 55, 55);
24 |             color: transparent;
25 |            }
26 |        </style>
27 |    
28 |     </head>
29 |     <body>
30 |      
31 |         <h1 id="title"> CODER SHIYAR </h1>
32 |        
33 |     </body> 
34 | </html>
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 65 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 | <style>
 8 | #btn{
 9 |    width: 49%; 
10 |    /* max-width: 640px;  */
11 |    padding: 10px 4px;
12 |    background: #ff2323;
13 |    color: white;
14 |    border: 0px;
15 |    font-weight: bold;
16 |    /* font-size: 17px; */
17 |    border-radius: 15px;
18 |    cursor: pointer;
19 |     outline: 0px;
20 |     margin: 3px 0px;
21 | }#btn:hover{
22 |     background: #26fa6d;
23 |     /* font-size: 20px; */
24 | }
25 | .btn2{
26 |   background: rgb(37, 37, 37) !important;  
27 | }
28 | .btn2:hover{
29 |     background: #f7f7f7 !important;
30 |     color: black !important;
31 | }
32 | 
33 | </style>
34 | </head>
35 | <body>
36 | <button id="btn">BUTTON 1</button>
37 | <button id="btn">BUTTON 2</button>
38 | 
39 | <button id="btn" class="btn2">BUTTON 3</button>
40 | <button id="btn" class="btn2">BUTTON 4</button>
41 | 
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 66 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 | <style>
 8 |   
 9 |     input{
10 |         width: 99%;
11 |         padding: 12px 0px;
12 |         border-radius: 15px;
13 |         font-size: 20px;
14 |         border: 2px solid rgb(170, 170, 170);
15 |    
16 |     }
17 | input:invalid{
18 |    border: 2px solid red;
19 |    outline: 0px;
20 | }
21 | /* input:valid{
22 |     border: 2px solid rgb(114, 207, 127); 
23 |     outline: 0px;
24 | } */
25 | </style>
26 | </head>
27 | <body>
28 | 
29 |     <input  type="email"/>
30 |     
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 67 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 | <style>
 8 | #table-content{
 9 |     width: 100%;
10 |     direction: rtl;
11 | }
12 | #table-content td{
13 |     padding: 0.75rem;
14 |     max-width:25% ;
15 | }
16 | #table-content thead{
17 |     background: rgb(255, 55, 55);
18 |     color: white;
19 |     font-weight: bold;
20 | }
21 | #table-content tbody{
22 |     color: white;
23 |     background: #4c4c4c;
24 | }
25 | 
26 | </style>
27 | </head>
28 | <body>
29 | 
30 |     <table id="table-content">
31 |         <thead> 
32 |             <tr> 
33 |                 <td>#</td>
34 |                 <td>الأسم</td>
35 |                 <td>الهاتف</td>
36 |                 <td>الجنسية</td>
37 |                 
38 |             </tr>
39 |         </thead>
40 |         <tbody>
41 |           <tr> 
42 |             <td>1</td>
43 |             <td>مبرمج شيار </td>
44 |             <td> 0132423254</td>
45 |             <td> غير معروفة </td>
46 |           </tr>
47 |           <tr> 
48 |             <td>2</td>
49 |             <td>مصمم حميد </td>
50 |             <td> 0132423254</td>
51 |             <td> سورية </td>
52 |           </tr>
53 |         </tbody>
54 |     </table>
55 |     
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 68 - الدرس/img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 68 - الدرس/img.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 68 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 | </head>
 8 | <body>
 9 | 
10 |     <img src="img.png" width="300" style="transform: scale(-1);"/>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 69 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         main{
 9 |             height: 600px;
10 |             background: linear-gradient(135deg, red 35%, white 35%);
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 | 
16 |     <main>
17 | 
18 |     </main>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 70 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         
 9 |         body{
10 |            background: rgb(245, 91, 71);
11 |        }  
12 |        #title{
13 |            display: none;
14 |        }
15 | 
16 |        @media only print{
17 |            
18 |         body{
19 |            background: rgb(255, 199, 96);
20 |        }
21 |        #title{
22 |            display: block;
23 |        }
24 |        }
25 |     </style>
26 | </head>
27 | <body>
28 |     
29 |     <h1 id="title">Coder Shiyar</h1>
30 | 
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 71 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         nav{
 9 |             display: flex;
10 |             justify-content: center;
11 |         }
12 |         nav a{
13 |                text-decoration: none;
14 |     width: 20%;
15 |     display: inline-block;
16 |     padding: 10px;
17 |     background: rgb(255 190 199);
18 |     color: black;
19 |     margin: 2px;
20 |     text-align: center;
21 |     font-weight: bolder;
22 |     font-size: 20px;
23 |         }
24 |         @media  (max-width: 620px) {
25 |             nav{
26 |                 display:block;
27 |                 text-align: center;
28 |             }
29 |             nav a{
30 |                 width: 100%;
31 |             display:block;
32 |             padding:  10px 0px;
33 |             margin:  4px 0px;
34 |             }
35 |             #link4{
36 |                 
37 |             }
38 |         }
39 |         
40 |     </style>
41 | </head>
42 | <body>
43 |     
44 |   <nav>
45 |       <img src="logo.png" alt="" height="50">
46 |       <a href="">Link 1</a>
47 |       <a href=""> Link 2</a>
48 |       <a href="">Link 3</a>
49 |       <a href="" id="link4">Link 4</a>
50 |   </nav>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 71 - الدرس/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 71 - الدرس/logo.png


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 72 - الدرس/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 |         @media  (orientation: portrait){
 9 |             body{
10 |                 background: linear-gradient(45deg,rgb(255, 52, 52) 50%,rgb(82, 82, 82) 50%);
11 |             }
12 |             h1{
13 |                 color:white;
14 |             }
15 |         }
16 | 
17 |         @media (orientation: landscape){
18 |             body{
19 |                 background: linear-gradient(45deg,rgb(255, 218, 52) 50%,rgb(82, 82, 82) 50%);
20 |             }
21 |             h1{
22 |                 color:white;
23 |             }
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 |     
29 | <h1>
30 |     Coder Shiyar CSS
31 | </h1>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 72 - الدرس/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Coder Shiyar</title>
 7 |     <style>
 8 | 
 9 | 
10 |         @media not screen {
11 |             body{
12 |                 background: linear-gradient(45deg,rgb(255, 52, 52) 50%,rgb(82, 82, 82) 50%);
13 |             }
14 |         }
15 | 
16 |         @media all{
17 |             nav{
18 |             display: flex;
19 |             justify-content: center;
20 |         }
21 | 
22 |         nav a{
23 |             text-decoration: none;
24 |             width: 20% ;
25 |             display: inline-block;
26 |             padding: 10px;
27 |             background: rgb(85, 85, 85);
28 |             color: black;
29 |             margin: 4px;
30 |            text-align: center;
31 |         }
32 |         }
33 |         
34 |         @media  (max-width: 620px) {
35 |             nav{
36 |                 display:block;
37 |                 text-align: center;
38 |             }
39 |             nav a{
40 |                 width: 100%;
41 |             display:block;
42 |             padding:  10px 0px;
43 |             margin:  4px 0px;
44 |             }
45 |          
46 |         }
47 |         
48 |     </style>
49 | </head>
50 | <body>
51 |     
52 |   <nav>
53 |       <img src="logo.png" alt="" height="50">
54 |       <a href="">Link 1</a>
55 |       <a href=""> Link 2</a>
56 |       <a href="">Link 3</a>
57 |       <a href="" >Link 4</a>
58 |   </nav>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/Old Lessons - القديم/Lesson 72 - الدرس/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codershiyar/css/d5265f72e878feb8decb71153f1ce13ca1aa22c2/Old Lessons - القديم/Lesson 72 - الدرس/logo.png


--------------------------------------------------------------------------------