├── HTML-CSS-JavaScript ├── 10_Landing screen │ ├── 1.js │ ├── 110.jpg │ ├── 111.jpg │ ├── landing.css │ ├── landing.html │ ├── large.jpg │ └── small.jpg ├── 11_margin_vs_padding │ ├── m.css │ ├── m.html │ └── path.jpg ├── 12_specificity │ ├── sp.css │ ├── sp.html │ └── sp.js ├── 13_flexbox │ ├── f.css │ └── f.html ├── 14_flexbox_landingpage │ ├── fl.css │ ├── fl.html │ ├── logo.jpg │ ├── pic.jpg │ └── pic2.jpg ├── 1_form-list-table │ ├── form.css │ ├── form.html │ ├── list.html │ ├── styles.css │ └── table.html ├── 2_css-excersies-CSS BATTLE │ ├── 10_CloakedSpirit.txt │ ├── 1_simplySquare.txt │ ├── 2_Carrom.txt │ ├── 3_PushButton.txt │ ├── 4_UpsnDown.txt │ ├── 5_AcidRain.txt │ ├── 6_MissingSlice.txt │ ├── 7_LeafyTrail.txt │ ├── 8_ForkingCrazy.txt │ ├── 9_Tesseract.txt │ └── img │ │ ├── 1_simplysquare.jpg │ │ ├── 2_carrom(1).jpg │ │ ├── 2_carrom(2).jpg │ │ ├── 3_pushbutton(1).jpg │ │ ├── 3_pushbutton(2).jpg │ │ ├── 4_upsndowns.jpg │ │ ├── 5_acidrain(1).jpg │ │ └── 5_acidrain(2).jpg ├── 3_Flexbox-navbar │ ├── Flexbox.pdf │ ├── Navbar Task.png │ ├── navbar.html │ └── styles.css ├── 4_UI-exercise │ ├── linkedin_ui.css │ └── linkedin_ui.html ├── 5_Activities │ ├── If Else 5qns (1).pdf │ ├── Large_of_3 │ │ ├── 3.html │ │ └── 3.js │ ├── Leapyear_or_not │ │ ├── 4.html │ │ └── 4.js │ ├── Odd_or_even │ │ └── 1.js │ ├── Student_grade │ │ ├── 5.html │ │ └── 5.js │ └── positive_or_negative │ │ ├── 2.html │ │ └── 2.js ├── 6_Patterns │ ├── 1_star_pyramid │ │ ├── 1.html │ │ └── 1.js │ ├── 2_inverted_hollow_starp │ │ ├── 2.html │ │ └── 2.js │ ├── 3_alpha_pattern │ │ ├── 3.html │ │ ├── 3.js │ │ └── DAY_4 │ │ │ ├── linkedin_ui.css │ │ │ └── linkedin_ui.html │ ├── 4_number_pattern │ │ ├── 4.html │ │ └── 4.js │ ├── 5_odnumber_pyramid │ │ ├── 5.html │ │ └── 5.js │ └── Pattern 5qns.pdf ├── 7_Array-String │ ├── 1 │ │ ├── 1.html │ │ └── 1.js │ ├── 2 │ │ ├── 2.html │ │ └── 2.js │ ├── 3 │ │ ├── 3.html │ │ └── 3.js │ ├── 4 │ │ ├── 4.html │ │ └── 4.js │ ├── 5 │ │ ├── 5.html │ │ └── 5.js │ └── Array & String 5qns.pdf ├── 8_bank_balance │ ├── bank.css │ ├── bank.html │ └── bank.js └── 9_Block_inline_elements │ └── b.html ├── Js-excersices ├── 1 │ ├── 1.css │ ├── 1.html │ ├── 1.js │ ├── 10.js │ ├── 2.html │ ├── 2.js │ ├── 3.js │ ├── 4.html │ ├── 4.js │ ├── 5.js │ ├── 6.js │ ├── 7.html │ ├── 8.html │ └── 9.js └── 10 JS.pdf ├── README.md └── bootstrap course ├── border.css ├── border.html ├── color.html ├── css ├── bootstrap-grid.css ├── bootstrap-grid.css.map ├── bootstrap-grid.min.css ├── bootstrap-grid.min.css.map ├── bootstrap-grid.rtl.css ├── bootstrap-grid.rtl.css.map ├── bootstrap-grid.rtl.min.css ├── bootstrap-grid.rtl.min.css.map ├── bootstrap-reboot.css ├── bootstrap-reboot.css.map ├── bootstrap-reboot.min.css ├── bootstrap-reboot.min.css.map ├── bootstrap-reboot.rtl.css ├── bootstrap-reboot.rtl.css.map ├── bootstrap-reboot.rtl.min.css ├── bootstrap-reboot.rtl.min.css.map ├── bootstrap-utilities.css ├── bootstrap-utilities.css.map ├── bootstrap-utilities.min.css ├── bootstrap-utilities.min.css.map ├── bootstrap-utilities.rtl.css ├── bootstrap-utilities.rtl.css.map ├── bootstrap-utilities.rtl.min.css ├── bootstrap-utilities.rtl.min.css.map ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap.min.css.map ├── bootstrap.rtl.css ├── bootstrap.rtl.css.map ├── bootstrap.rtl.min.css └── bootstrap.rtl.min.css.map ├── js ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map ├── layout.css ├── layout.html └── tryout for bootsrap p1 ├── css ├── bootstrap-grid.css ├── bootstrap-grid.css.map ├── bootstrap-grid.min.css ├── bootstrap-grid.min.css.map ├── bootstrap-grid.rtl.css ├── bootstrap-grid.rtl.css.map ├── bootstrap-grid.rtl.min.css ├── bootstrap-grid.rtl.min.css.map ├── bootstrap-reboot.css ├── bootstrap-reboot.css.map ├── bootstrap-reboot.min.css ├── bootstrap-reboot.min.css.map ├── bootstrap-reboot.rtl.css ├── bootstrap-reboot.rtl.css.map ├── bootstrap-reboot.rtl.min.css ├── bootstrap-reboot.rtl.min.css.map ├── bootstrap-utilities.css ├── bootstrap-utilities.css.map ├── bootstrap-utilities.min.css ├── bootstrap-utilities.min.css.map ├── bootstrap-utilities.rtl.css ├── bootstrap-utilities.rtl.css.map ├── bootstrap-utilities.rtl.min.css ├── bootstrap-utilities.rtl.min.css.map ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap.min.css.map ├── bootstrap.rtl.css ├── bootstrap.rtl.css.map ├── bootstrap.rtl.min.css └── bootstrap.rtl.min.css.map ├── js ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map ├── p1.css ├── p1.html ├── pic1.jpg ├── pic2.jpg ├── pic3.jpg └── pic4.jpg /HTML-CSS-JavaScript/10_Landing screen/1.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/10_Landing screen/1.js -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/10_Landing screen/110.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/10_Landing screen/110.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/10_Landing screen/111.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/10_Landing screen/111.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/10_Landing screen/landing.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | font-family: 'Times New Roman', Times, serif; 5 | 6 | } 7 | header{ 8 | position:absolute; 9 | top:15px; 10 | width:100%; 11 | text-align:right ; 12 | } 13 | header a{ 14 | color:white; 15 | background-color: black; 16 | text-decoration: none; 17 | margin-right: 50px; 18 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 19 | font-size:medium; 20 | transition:0.5s ease-in-out; 21 | } 22 | 23 | header a:hover{ 24 | color:red; 25 | } 26 | 27 | main{ 28 | height:100vh; 29 | width: 100%; 30 | background-image: url("111.jpg"); 31 | background-size:cover; 32 | background-repeat: no-repeat; 33 | background-position:center; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | background-attachment: fixed; 38 | 39 | } 40 | main h1{ 41 | 42 | 43 | /* position:absolute; //incase flex unable to use and need to make in center of the page 44 | top:50%; 45 | left:50%; 46 | transform: translate(-50%,-50%); 47 | */ 48 | font-size: 60px; 49 | mix-blend-mode:overlay ; 50 | 51 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/10_Landing screen/landing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Landing Screen 7 | 8 | 9 | 10 |
11 | Home 12 | About 13 | Contact 14 | For More 15 | 16 |
17 |
18 |

Explore the world

19 |
20 |
21 |

Explore the Universe

22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/10_Landing screen/large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/10_Landing screen/large.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/10_Landing screen/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/10_Landing screen/small.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/11_margin_vs_padding/m.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | .container{ 7 | background-color: aqua; 8 | 9 | } 10 | .img{ 11 | width:100%; 12 | height:100%; 13 | } 14 | 15 | .wrapper{ 16 | width: 500px; 17 | margin: auto; 18 | padding: 50px 0; 19 | } 20 | 21 | .wrapper h4{ 22 | margin: 8px 0 15px; 23 | } 24 | .wrapper p{ 25 | font-size: 18px; 26 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 27 | line-height: 26px; 28 | } 29 | .contentbox{ 30 | background-color: beige; 31 | padding: 30px; 32 | } 33 | .wrapper h2{ 34 | margin: 0; 35 | font-family: Arial, Helvetica, sans-serif; 36 | } 37 | img{display: block;} 38 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/11_margin_vs_padding/m.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Margin Vs Padding 7 | 8 | 9 | 10 |
11 |
12 |
13 | forest path 14 |
15 |
16 |

This is a heading

17 |

Sub Heading

18 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum praesentium expedita possimus? Rem repellendus provident maxime voluptatem, animi laudantium. Corrupti inventore iste incidunt quia qui illo nesciunt accusamus eaque, placeat consequuntur quis animi consectetur eius dolore. Deleniti magni perspiciatis et commodi assumenda quisquam, doloremque rerum nisi modi repellat, eum sit?

19 |
20 |
21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/11_margin_vs_padding/path.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/11_margin_vs_padding/path.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/12_specificity/sp.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | 4 | } 5 | h1{ 6 | margin:0; 7 | } 8 | .container{ 9 | background-color: blanchedalmond; 10 | display: flex; 11 | flex-direction:row; 12 | 13 | } 14 | .one,.two,.three{ 15 | flex:1; 16 | height:200px; 17 | background-color: blueviolet; 18 | border:1px solid white; 19 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/12_specificity/sp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |

Section-1

13 |
14 |
15 |

Section-2

16 |
17 |
18 |

Secton-3

19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/12_specificity/sp.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/12_specificity/sp.js -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/13_flexbox/f.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .parent{ 7 | height: 100vh; 8 | border: 20px solid gray; 9 | display: flex;/* Add this */ 10 | /* flex-direction: column;*/ 11 | justify-content: center;/* Add this */ 12 | align-items: center; /* Add this */ 13 | } 14 | .child1{ 15 | width:200px; 16 | height: 200px; 17 | background-color: aqua; 18 | display: flex; /* Add this */ 19 | justify-content: center; 20 | align-items: center; 21 | 22 | } 23 | 24 | .child2{ 25 | width:200px; 26 | height: 200px; 27 | background-color:palevioletred; 28 | display: flex; /* Add this */ 29 | justify-content: center; 30 | align-items: center; 31 | 32 | } 33 | 34 | .child3{ 35 | width:200px; 36 | height: 200px; 37 | background-color:green; 38 | display: flex; /* Add this */ 39 | justify-content: center; 40 | align-items: center; 41 | 42 | } 43 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/13_flexbox/f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 7 | 8 | 9 | 10 |
11 |
child1
12 |
child2
13 |
child3
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/14_flexbox_landingpage/fl.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | img{ 7 | display: block; 8 | width:25%; 9 | 10 | 11 | } 12 | .container{ 13 | max-width: 1100px; 14 | padding-left: 15px; 15 | padding-right: 15px; 16 | margin-right: auto; 17 | margin-left: auto; 18 | } 19 | header nav{ 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | } 24 | header .navbar{ 25 | margin: 0; 26 | padding: 0; 27 | list-style: none; 28 | display: flex; 29 | } 30 | header .navbar a{ 31 | display: block; 32 | text-decoration: none; 33 | color: black; 34 | margin: 0 10px; 35 | font-size: 22px; 36 | } 37 | .hero-section img{ 38 | width: 100%; 39 | height: auto; 40 | 41 | } 42 | .hero-section{ 43 | position: relative; 44 | height: 80vh; 45 | overflow: hidden; 46 | 47 | } 48 | .hero-section .hero-section-content{ 49 | position: absolute; 50 | top:0; 51 | bottom: 0; 52 | max-width: 500px; 53 | background-color: aliceblue; 54 | padding: 30px 60px; 55 | outline: 1px solid red; 56 | display: flex; 57 | flex-direction: column; 58 | justify-content: center; 59 | } 60 | ul{ 61 | margin: 0; 62 | padding: 0; 63 | list-style: none; 64 | } 65 | .gallery-section .gallery-list{ 66 | display: flex; 67 | gap: 30px; 68 | flex-wrap: wrap; 69 | 70 | } 71 | .gallery-section .gallery-list li{ 72 | flex: 1 1 200px; 73 | margin: 20px; 74 | } 75 | .gallery-section .gallery-list li img{ 76 | width: 100%; 77 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/14_flexbox_landingpage/fl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FlexBox_Landingpage 7 | 8 | 9 | 10 |
11 |
12 | 23 |
24 |
25 |
26 |
27 | an image 28 |
29 |

Welcome To The Landing Page

30 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum veritatis aliquid repudiandae quam? Aut quis, debitis incidunt, minus deleniti quisquam architecto vel cupiditate natus voluptas odio? Sapiente, ducimus accusantium.

31 |
32 |
33 |
34 |
35 |

Gallery

36 |
    37 |
  • pic2
    • 38 |
  • pic2
    • 39 |
  • pic2
    • 40 |
  • pic2
    • 41 |
  • pic2
    • 42 |
  • pic2
    • 43 |
  • pic2
    • 44 |
  • pic2
    • 45 |
  • pic2
    • 46 |
  • pic2
    • 47 |
  • pic2
    • 48 |
49 |
50 |
51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/14_flexbox_landingpage/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/14_flexbox_landingpage/logo.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/14_flexbox_landingpage/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/14_flexbox_landingpage/pic.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/14_flexbox_landingpage/pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/14_flexbox_landingpage/pic2.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/1_form-list-table/form.css: -------------------------------------------------------------------------------- 1 | h3{ 2 | text-align: center; 3 | } 4 | form{ 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/1_form-list-table/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Personal Details

8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |

Educational Qualifications

35 |
36 | 37 | 43 | 44 | 45 | 46 | 47 |

48 | 49 | 50 | 56 | 57 |

58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 |
66 | 67 | 68 |

Address

69 | 70 | 71 |
72 |
73 |
74 | 75 | 76 | 77 |

78 | 79 | 80 | 81 | 82 |
83 | 84 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/1_form-list-table/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/1_form-list-table/styles.css: -------------------------------------------------------------------------------- 1 | 2 | th,td{ 3 | text-align: center; 4 | padding: 10px; 5 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/1_form-list-table/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
TIME TABLE
HOURS Mon Tue Wed Thu Fri
Science Maths Science Maths Arts
Social History English Social Sports
Lunch
Science Maths Science Maths Project
Social History English Social
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/10_CloakedSpirit.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/1_simplySquare.txt: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/2_Carrom.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/3_PushButton.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/4_UpsnDown.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 31 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/5_AcidRain.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/6_MissingSlice.txt: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/7_LeafyTrail.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/8_ForkingCrazy.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/9_Tesseract.txt: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/1_simplysquare.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/1_simplysquare.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/2_carrom(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/2_carrom(1).jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/2_carrom(2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/2_carrom(2).jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/3_pushbutton(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/3_pushbutton(1).jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/3_pushbutton(2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/3_pushbutton(2).jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/4_upsndowns.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/4_upsndowns.jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/5_acidrain(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/5_acidrain(1).jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/5_acidrain(2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/2_css-excersies-CSS BATTLE/img/5_acidrain(2).jpg -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/3_Flexbox-navbar/Flexbox.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/3_Flexbox-navbar/Flexbox.pdf -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/3_Flexbox-navbar/Navbar Task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/3_Flexbox-navbar/Navbar Task.png -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/3_Flexbox-navbar/navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | W3Schools Online Web Tutorials 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 23 | 24 | Tutorials 25 | 26 | 27 | 28 | References 29 | 30 | 31 | 32 | Exercises 33 | 34 | 35 | 36 | Bootcamp 37 | 38 | 39 |
40 | 41 | 42 |
43 | 44 | 45 | Pro 46 | 47 | 48 | Get Certified 49 | 50 | 51 | Create Website 52 | 53 | 54 | Sign Up 55 | 56 | 57 | Log in 58 | 59 | 60 | 61 | 62 | 63 |
64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 | HTML 72 | 73 | 74 | CSS 75 | 76 | 77 | JAVASCRIPT 78 | 79 | 80 | SQL 81 | 82 | 83 | PYTHON 84 | 85 | 86 | JAVA 87 | 88 | 89 | BOOTSTRAP 90 | 91 | 92 | HOW TO 93 | 94 | 95 | W3.CSS 96 | 97 | 98 | C 99 | 100 | 101 | C++ 102 | 103 | 104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
115 |
116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/3_Flexbox-navbar/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Poppins', sans-serif; 5 | width: 100%; 6 | 7 | } 8 | 9 | header{ 10 | height: 75px; 11 | background-color:white; 12 | 13 | padding: 0px 20px; 14 | display: flex; 15 | align-items: center; 16 | 17 | 18 | } 19 | 20 | /******************UTILITY CLASS******************/ 21 | .btn{ 22 | padding: 10px; 23 | cursor: pointer; 24 | text-decoration: none; 25 | } 26 | .bg-black{ 27 | background-color: black; 28 | color: white; 29 | border-radius: 50px 50px; 30 | text-align: center; 31 | } 32 | .bg-pink{ 33 | background-color: rgb(214, 167, 175); 34 | color: black; 35 | border-radius: 50px 50px; 36 | text-align: center; 37 | } 38 | .bg-yellow{ 39 | background-color: rgb(228, 228, 163); 40 | color: black; 41 | border-radius:50px 50px ; 42 | text-align: center; 43 | } 44 | .bg-green{ 45 | background-color: rgb(60, 199, 60); 46 | color:white; 47 | border-radius: 50px 50px; 48 | text-align: center; 49 | position: relative; 50 | z-index: 2; 51 | 52 | } 53 | .bg-lgreen{ 54 | background-color: rgb(131, 168, 131); 55 | color:white; 56 | border-radius: 50px 50px; 57 | text-align: center; 58 | margin-left: -50px; 59 | 60 | 61 | } 62 | /***********************logo************************/ 63 | .w3schoollogo{ 64 | width: 45px; 65 | padding:2px 8px; 66 | } 67 | .w3schoollogo img{ 68 | width: 100%; 69 | } 70 | 71 | /*********head left***********************************/ 72 | .header-left{ 73 | display: flex; 74 | align-items: center; 75 | height: 100%; 76 | 77 | ; 78 | } 79 | .header-left a{ 80 | height: 100%; 81 | display: flex; 82 | align-items: center; 83 | padding: 0px 20px; 84 | font-size:18px ; 85 | font-weight:800px; 86 | color: black; 87 | text-decoration: none; 88 | 89 | 90 | } 91 | .header-left a:hover{ 92 | background-color:green; 93 | 94 | 95 | } 96 | .header-left a:first-child{ 97 | padding: 0; 98 | } 99 | .header-left a:first-child:hover{ 100 | background-color: transparent; 101 | 102 | } 103 | .fa-solid{ 104 | padding: 0px 3px; 105 | } 106 | .header-right{ 107 | display: flex; 108 | align-items: center; 109 | justify-content: flex-end; 110 | width: 80%; 111 | gap:18px; 112 | position: relative; 113 | } 114 | .header-right a{ 115 | font-size: 14px; 116 | font-weight: 600; 117 | text-decoration: none; 118 | border-radius: 60px; 119 | padding: 10px 20px; 120 | 121 | } 122 | .header-right a:last-child{ 123 | padding: 10px 45px ; 124 | } 125 | /***************BOTTEM LEFT *********************/ 126 | .bottom-left{ 127 | background-color: rgb(42, 41, 41); 128 | height: 40px; 129 | } 130 | .bl{ 131 | color: white; 132 | font-weight: 600; 133 | text-decoration: none; 134 | font-size:medium; 135 | padding: 1px 22px; 136 | } 137 | .bottom-right{ 138 | display: flex; 139 | align-items: center; 140 | justify-content: flex-end; 141 | width: 80%; 142 | gap:18px; 143 | 144 | } 145 | .bottom-left{ 146 | display: flex; 147 | align-items: center; 148 | justify-content: flex-end; 149 | } 150 | 151 | 152 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/4_UI-exercise/linkedin_ui.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .container{ 6 | width: 100%; 7 | height: 100%; 8 | .topbar{ 9 | /*background-color: red;*/ 10 | width:100%; 11 | height: 70px; 12 | display: flex; 13 | align-items: center; 14 | .left{ 15 | width: 50%; 16 | .logo{ 17 | margin-left: 200px; 18 | /* background-color: green;*/ 19 | display: flex; 20 | align-items: center; 21 | font-weight: 700; 22 | font-size: 20px; 23 | } 24 | } 25 | } 26 | } 27 | 28 | a{ text-decoration: none;} 29 | 30 | .logo h2{color: rgb(10,102,194);} 31 | 32 | .logo span{ 33 | margin-left: 5px; 34 | border-radius: 3px; 35 | color: white; 36 | width: 25px; 37 | height: 20px; 38 | background-color:rgb(10,102,194); 39 | padding: 0px 3px; 40 | } 41 | 42 | .right{ 43 | width: 50%; 44 | display: flex; 45 | align-items: center; 46 | justify-content: flex-start; 47 | .items{ 48 | color: grey; 49 | width: 45%; 50 | display: flex; 51 | /* background-color: green;*/ 52 | align-items: center; 53 | justify-content: center; 54 | .box{ 55 | cursor:pointer; 56 | display: flex; 57 | width: 70px; 58 | height: 60px; 59 | flex-direction: column; 60 | align-items: center; 61 | justify-content: center; 62 | /* background-color: yellow;*/ 63 | padding: 10px; 64 | margin-left: 6px; 65 | 66 | } 67 | } 68 | .vertical{ 69 | height: 40px; 70 | width: 1px; 71 | background-color: rgb(125, 123, 123); 72 | } 73 | } 74 | .text { 75 | font-size: 15px; 76 | /* width: 100%; */ 77 | /* background-color: red;*/ 78 | &:hover{ 79 | color: black; 80 | } 81 | } 82 | .icon{ 83 | color: rgb(74, 72, 72); 84 | &:hover{ 85 | color: black; 86 | } 87 | } 88 | .join{ 89 | display: flex; 90 | align-items: center; 91 | justify-content: center; 92 | } 93 | .joinnow{ 94 | margin:0px 5px; 95 | /* background-color: red; */ 96 | border-radius: 30px; 97 | display: flex; 98 | align-items: center; 99 | justify-content: center; 100 | font-size: 15px; 101 | padding: 15px 25px; 102 | cursor: pointer; 103 | &:hover{ 104 | background-color: grey; 105 | } 106 | } 107 | .signin{ 108 | margin-left: 5px; 109 | border: 1px solid blue; 110 | /* background-color: red; */ 111 | border-radius: 30px; 112 | display: flex; 113 | align-items: center; 114 | justify-content: center; 115 | font-size: 15px; 116 | padding: 15px 25px; 117 | cursor: pointer; 118 | &:hover{ 119 | background-color: rgb(156, 162, 228); 120 | } 121 | } 122 | .main{ 123 | width: 100%; 124 | /* padding-left: 200px; */ 125 | height: 100%; 126 | /* background-color: red; */ 127 | display: flex; 128 | align-items: center ; 129 | justify-content: space-between; 130 | .form{ 131 | width: 50%; 132 | height: 100%; 133 | /* background-color: green; */ 134 | display: flex; 135 | align-items: end; 136 | justify-content: flex-end; 137 | } 138 | .image{ 139 | width: 50%; 140 | margin-right:50px ; 141 | /*background-color: yellow;*/ 142 | height: 100%; 143 | display: flex; 144 | align-items: center; 145 | justify-content: center; 146 | } 147 | .image img{ 148 | object-fit: cover; 149 | width: 100%; 150 | } 151 | } 152 | .fillups{ 153 | margin-top: 40px; 154 | width: 75%; 155 | height: 93%; 156 | /* background-color:cyan; */ 157 | } 158 | .fillups h1{ 159 | width: 100%; 160 | color: rgb(147,93,79); 161 | /* background-color: red; */ 162 | font-weight: 100; 163 | font-size: 52px; 164 | line-height: 1.5; 165 | 166 | } 167 | .fillups form{ 168 | margin-top: 30px; 169 | } 170 | label{ 171 | font-size: 15px; 172 | font-weight: 500; 173 | color: rgb(64,64,64); 174 | 175 | } 176 | form input{ 177 | margin-top: 5px; 178 | width: 400px; 179 | height: 50px; 180 | border-radius: 5px; 181 | border: 1px solid gray; 182 | margin-bottom: 25px; 183 | font-size: 17px; 184 | } 185 | form a{ 186 | text-decoration: none; 187 | font-weight: 500; 188 | color: rgb(10,102,194); 189 | font-size: 15px; 190 | cursor: pointer; 191 | } 192 | .sign{ 193 | margin: 20px 0px; 194 | width: 400px; 195 | height: 50px; 196 | color: white; 197 | background-color: rgb(10,102,194); 198 | display: flex; 199 | align-items: center; 200 | justify-content: center 201 | ; 202 | border-radius: 50px; 203 | } 204 | .horizontal{ 205 | display: flex; 206 | align-items: center; 207 | justify-content: space-between; 208 | /* background-color: red; */ 209 | width: 400px; 210 | .line{ 211 | height: 1px; 212 | width:45% ; 213 | background-color: gray; 214 | } 215 | } 216 | .google{ 217 | margin: 15px 0px; 218 | width: 400px; 219 | height: 50px; 220 | border: 1px solid black; 221 | display: flex; 222 | align-items: center; 223 | justify-content: center 224 | ; 225 | border-radius: 50px; 226 | 227 | } 228 | .linkedin{ 229 | width: 400px; 230 | height: 50px; 231 | border: 1px solid black; 232 | display: flex; 233 | align-items: center; 234 | justify-content: center 235 | ; 236 | border-radius: 50px; 237 | margin-bottom: 20px; 238 | 239 | } 240 | .google span{ 241 | font-size: 15px; 242 | font-weight: 500; 243 | color: rgb(64,64,64); 244 | } 245 | .google img{ 246 | width: 20px; 247 | margin-right: 15px; 248 | } 249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/4_UI-exercise/linkedin_ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Linkedin.com 7 | 8 | 12 | 16 | 17 | 18 | 19 |
20 |
21 |
22 | 25 |
26 |
27 |
28 |
29 |
explore
30 |
Discover
31 |
32 |
33 |
group
34 |
People
35 |
36 |
37 |
cast_for_education
38 |
Learning
39 |
40 |
41 |
work
42 |
Jobs
43 |
44 |
45 |
46 | 47 |
48 |
Join now
49 | 50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 |
58 |

Welcome to your
professional community

59 | 60 |
61 |
62 |
63 |
64 |
65 | Forgot password?
66 | 67 |
sign in
68 |
69 |
70 | or 71 |
72 |
73 |
74 | 75 | Continue with Google 76 |
77 |
78 | New to linkedIn?Join now 79 |
80 |
81 |
82 |
83 | 84 |
85 | image of 100million club 86 |
87 |
88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/If Else 5qns (1).pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/5_Activities/If Else 5qns (1).pdf -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Large_of_3/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Find the largest of three numbers

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Large_of_3/3.js: -------------------------------------------------------------------------------- 1 | 2 | function check(a,b,c){ 3 | if (a>=b && a >=c ) { 4 | return a; 5 | }else if(b>=a && b>=c){ 6 | return b;} 7 | else{ return c} 8 | } 9 | var a =prompt("Enter a:"); 10 | var b =prompt("Enter b:"); 11 | var c =prompt("Enter c:"); 12 | var x =check(a,b,c); 13 | 14 | document.write(`The largest number is ${x}`) ; 15 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Leapyear_or_not/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Check the year Leap year or not

10 |
11 | Enter the year to Check 12 |
13 | 14 |
15 |
16 | 17 |

18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Leapyear_or_not/4.js: -------------------------------------------------------------------------------- 1 | function checkleap(){ 2 | var x = document.getElementById("year").value; //x= leapyear tp check imput value 3 | if(( x%4==0) && (x%100 != 0) || ( x % 400 == 0)){ 4 | alert(x +" is a leap year") 5 | } 6 | else{ 7 | alert(x + " is not a Leap Year"); 8 | } 9 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Odd_or_even/1.js: -------------------------------------------------------------------------------- 1 | var x = 45647; 2 | if (x % 2 == 0 ){ 3 | console.log(`${x} is Even number` ); 4 | } 5 | else { 6 | console.log(`${x} is Odd number`); 7 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Student_grade/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Grading for marks obtained by students

10 |
11 | Enter the Mark obtained for the subject: 12 | 13 |

14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/Student_grade/5.js: -------------------------------------------------------------------------------- 1 | function checkmark(){ 2 | var x = document.getElementById("mark").value; 3 | if ((x >=90) && ( x<=100)){ 4 | alert(' S Grade with '+ x + '%.'); 5 | }else if ((x >=80) && ( x<90)){ 6 | alert( ' A grade with'+ x+'%'); 7 | }else if ((x >=70) && ( x<80)){ 8 | alert (' B grade with' + x+ '% '); 9 | }else if ((x >=60) && ( x<70)){ 10 | alert (' C grade with'+ x+' % '); 11 | }else if ((x >=50) && ( x<60)){ 12 | alert (' D grade with'+ x+' % '); 13 | }else if ((x >=40) && ( x<50)){ 14 | alert (' E grade with'+ x+' % '); 15 | }else if( x<40){ 16 | alert (' Student Failed with'+ x+' % '); 17 | } 18 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/positive_or_negative/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ODD_OR_EVEN 7 | 8 | 9 |

check if a number is positive,negative or zero

10 | 11 |

12 | 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/5_Activities/positive_or_negative/2.js: -------------------------------------------------------------------------------- 1 | function check() { 2 | var value = document.getElementById("data").value; 3 | if (value >0) { 4 | res =`${value} is a Positive Number` 5 | } 6 | else if(value < 0) { 7 | res=`${value} is a Negative Number` 8 | 9 | } 10 | else if(value == 0){ 11 | res=`It is Zero` 12 | }else 13 | { res ="It is not a number..Please type number to check"} 14 | document.getElementById("res").innerText =res ; 15 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/1_star_pyramid/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

(1)Complete pyramid Star pattern

10 | 11 | 12 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/1_star_pyramid/1.js: -------------------------------------------------------------------------------- 1 | var i,j,k; 2 | for(i=1; i<=5; i++) // for number of level to print ,here 5 ie,i<=5 3 | { 4 | for(j=5; j>i; j--) //for the spaces in each level 5 | { document.write("  "); } 6 | 7 | for(k=1; k<=((2*i)-1); k++) //for the round of no.of stars to be printed 8 | { document.write("*");} 9 | 10 | document.write("
"); 11 | } 12 | 13 | /*let n = 5; 14 | let string = ""; 15 | 16 | for (let i=1; i<=n; i++) //external loop 17 | { 18 | for (let j = 1; j <= n - i; j++) // print spaces 19 | { string += " ";} 20 | 21 | for (let k = 0; k < 2 * i - 1; k++) //print star 22 | { string += "*"; } 23 | 24 | string += "\n"; 25 | } 26 | console.log(string); 27 | */ 28 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/2_inverted_hollow_starp/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | hollow pyramid 7 | 8 | 9 |

(2)Inverted hollow pyramid

10 | 11 | 12 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/2_inverted_hollow_starp/2.js: -------------------------------------------------------------------------------- 1 | /*var i,j,k; 2 | for(i=0; i<=5; i++) 3 | { 4 | for(j=5; j>i; j--) 5 | { document.write("  ");} 6 | 7 | for(k=1; k<=((i*2)-1); k++) 8 | { 9 | if(i==1 ||i==5 ||k==1 ||k==((i*2)-1)) 10 | { 11 | document.write("*"); 12 | }else 13 | document.write("  "); 14 | } 15 | document.write("
") 16 | 17 | } 18 | // for straight hollow pyramid 19 | */ 20 | var i,j,k; 21 | for(i=5; i>=1; i--) 22 | { 23 | for(j=5; j>i; j--) 24 | { document.write("  ");} 25 | 26 | for(k=1; k<=((i*2)-1); k++) 27 | { 28 | if(i==1 ||i==5 ||k==1 ||k==((i*2)-1)) 29 | { 30 | document.write("*"); 31 | }else 32 | document.write("  "); 33 | } 34 | document.write("
") 35 | 36 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/3_alpha_pattern/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

(3) Alphabet Pattern

10 | 11 | 12 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/3_alpha_pattern/3.js: -------------------------------------------------------------------------------- 1 | /* // 65 onwards A // 97 onwards a (A +32 = a) 2 | UTF-16 :2^16=65536 ie, 0 to 65535 3 | for(i=0; i<=65535;i++) 4 | { 5 | document.write(i+")"+String.fromCharCode(i)+"
"); 6 | } 7 | 8 | */ 9 | var i,j; 10 | var x;// alphabet 11 | for(i=1; i<=5; i++) 12 | { 13 | x=65; 14 | for(j=1;j<=i;j++) 15 | { document.write(String.fromCharCode(x)); 16 | x++; 17 | } 18 | 19 | document.write("
"); 20 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/3_alpha_pattern/DAY_4/linkedin_ui.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .container{ 6 | width: 100%; 7 | height: 100%; 8 | .topbar{ 9 | /*background-color: red;*/ 10 | width:100%; 11 | height: 70px; 12 | display: flex; 13 | align-items: center; 14 | .left{ 15 | width: 50%; 16 | .logo{ 17 | margin-left: 200px; 18 | /* background-color: green;*/ 19 | display: flex; 20 | align-items: center; 21 | font-weight: 700; 22 | font-size: 20px; 23 | } 24 | } 25 | } 26 | } 27 | 28 | a{ text-decoration: none;} 29 | 30 | .logo h2{color: rgb(10,102,194);} 31 | 32 | .logo span{ 33 | margin-left: 5px; 34 | border-radius: 3px; 35 | color: white; 36 | width: 25px; 37 | height: 20px; 38 | background-color:rgb(10,102,194); 39 | padding: 0px 3px; 40 | } 41 | 42 | .right{ 43 | width: 50%; 44 | display: flex; 45 | align-items: center; 46 | justify-content: flex-start; 47 | .items{ 48 | color: grey; 49 | width: 45%; 50 | display: flex; 51 | /* background-color: green;*/ 52 | align-items: center; 53 | justify-content: center; 54 | .box{ 55 | cursor:pointer; 56 | display: flex; 57 | width: 70px; 58 | height: 60px; 59 | flex-direction: column; 60 | align-items: center; 61 | justify-content: center; 62 | /* background-color: yellow;*/ 63 | padding: 10px; 64 | margin-left: 6px; 65 | 66 | } 67 | } 68 | .vertical{ 69 | height: 40px; 70 | width: 1px; 71 | background-color: rgb(125, 123, 123); 72 | } 73 | } 74 | .text { 75 | font-size: 15px; 76 | /* width: 100%; */ 77 | /* background-color: red;*/ 78 | &:hover{ 79 | color: black; 80 | } 81 | } 82 | .icon{ 83 | color: rgb(74, 72, 72); 84 | &:hover{ 85 | color: black; 86 | } 87 | } 88 | .join{ 89 | display: flex; 90 | align-items: center; 91 | justify-content: center; 92 | } 93 | .joinnow{ 94 | margin:0px 5px; 95 | /* background-color: red; */ 96 | border-radius: 30px; 97 | display: flex; 98 | align-items: center; 99 | justify-content: center; 100 | font-size: 15px; 101 | padding: 15px 25px; 102 | cursor: pointer; 103 | &:hover{ 104 | background-color: grey; 105 | } 106 | } 107 | .signin{ 108 | margin-left: 5px; 109 | border: 1px solid blue; 110 | /* background-color: red; */ 111 | border-radius: 30px; 112 | display: flex; 113 | align-items: center; 114 | justify-content: center; 115 | font-size: 15px; 116 | padding: 15px 25px; 117 | cursor: pointer; 118 | &:hover{ 119 | background-color: rgb(156, 162, 228); 120 | } 121 | } 122 | .main{ 123 | width: 100%; 124 | /* padding-left: 200px; */ 125 | height: 100%; 126 | /* background-color: red; */ 127 | display: flex; 128 | align-items: center ; 129 | justify-content: space-between; 130 | .form{ 131 | width: 50%; 132 | height: 100%; 133 | /* background-color: green; */ 134 | display: flex; 135 | align-items: end; 136 | justify-content: flex-end; 137 | } 138 | .image{ 139 | width: 50%; 140 | margin-right:50px ; 141 | /*background-color: yellow;*/ 142 | height: 100%; 143 | display: flex; 144 | align-items: center; 145 | justify-content: center; 146 | } 147 | .image img{ 148 | object-fit: cover; 149 | width: 100%; 150 | } 151 | } 152 | .fillups{ 153 | margin-top: 40px; 154 | width: 75%; 155 | height: 93%; 156 | /* background-color:cyan; */ 157 | } 158 | .fillups h1{ 159 | width: 100%; 160 | color: rgb(147,93,79); 161 | /* background-color: red; */ 162 | font-weight: 100; 163 | font-size: 52px; 164 | line-height: 1.5; 165 | 166 | } 167 | .fillups form{ 168 | margin-top: 30px; 169 | } 170 | label{ 171 | font-size: 15px; 172 | font-weight: 500; 173 | color: rgb(64,64,64); 174 | 175 | } 176 | form input{ 177 | margin-top: 5px; 178 | width: 400px; 179 | height: 50px; 180 | border-radius: 5px; 181 | border: 1px solid gray; 182 | margin-bottom: 25px; 183 | font-size: 17px; 184 | } 185 | form a{ 186 | text-decoration: none; 187 | font-weight: 500; 188 | color: rgb(10,102,194); 189 | font-size: 15px; 190 | cursor: pointer; 191 | } 192 | .sign{ 193 | margin: 20px 0px; 194 | width: 400px; 195 | height: 50px; 196 | color: white; 197 | background-color: rgb(10,102,194); 198 | display: flex; 199 | align-items: center; 200 | justify-content: center 201 | ; 202 | border-radius: 50px; 203 | } 204 | .horizontal{ 205 | display: flex; 206 | align-items: center; 207 | justify-content: space-between; 208 | /* background-color: red; */ 209 | width: 400px; 210 | .line{ 211 | height: 1px; 212 | width:45% ; 213 | background-color: gray; 214 | } 215 | } 216 | .google{ 217 | margin: 15px 0px; 218 | width: 400px; 219 | height: 50px; 220 | border: 1px solid black; 221 | display: flex; 222 | align-items: center; 223 | justify-content: center 224 | ; 225 | border-radius: 50px; 226 | 227 | } 228 | .linkedin{ 229 | width: 400px; 230 | height: 50px; 231 | border: 1px solid black; 232 | display: flex; 233 | align-items: center; 234 | justify-content: center 235 | ; 236 | border-radius: 50px; 237 | margin-bottom: 20px; 238 | 239 | } 240 | .google span{ 241 | font-size: 15px; 242 | font-weight: 500; 243 | color: rgb(64,64,64); 244 | } 245 | .google img{ 246 | width: 20px; 247 | margin-right: 15px; 248 | } 249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/4_number_pattern/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

(4) Number Pattern [1 23 456 78910]

10 | 11 | 12 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/4_number_pattern/4.js: -------------------------------------------------------------------------------- 1 | var i,j; 2 | let count=1; 3 | for(i=1;i<=4;i++) 4 | { 5 | for(j=1; j<=i; j++) 6 | { document.write(count+""); 7 | count++; 8 | } 9 | 10 | document.write("
"); 11 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/5_odnumber_pyramid/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pattern 7 | 8 | 9 |

(5) Number Pyramid Pattern

10 | 11 | 12 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/5_odnumber_pyramid/5.js: -------------------------------------------------------------------------------- 1 | var i,j,k; 2 | 3 | for(i=1;i<=5;i++) 4 | { 5 | for(j=5;j>i;j--) 6 | { 7 | document.write("  "); 8 | } 9 | for(k=1; k<=((2*i)-1); k++) 10 | { 11 | document.write(k); 12 | 13 | 14 | } 15 | document.write("
"); 16 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/6_Patterns/Pattern 5qns.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/6_Patterns/Pattern 5qns.pdf -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/1/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Remove all occurrences of an element in an array.

10 |

Input:- const arr = [1, 2, 1, 3, 1]

11 |

Output:- 2, 3

12 |

13 |

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/1/1.js: -------------------------------------------------------------------------------- 1 | const arr=[1,2,1,3,1]; 2 | arr.sort(); 3 | document.getElementById("p1").innerHTML= "First by sorting: " +arr; 4 | const arr1=arr.slice(3); 5 | document.getElementById("p2").innerHTML="Output: "+arr1; -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/2/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Find the largest element of an array.

10 |

Input:- const arr = [1, 4, 7, 3, 6]

11 |

Output:- 7

12 |

13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/2/2.js: -------------------------------------------------------------------------------- 1 | const arr=[1,4,7,3,6]; 2 | let largest=arr.reduce(function(a,b) { return (a>b)?a:b;}); 3 | document.getElementById("p1").innerHTML="Largest element = "+largest; -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/3/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Write a program to sort elements of an array in descending order. 10 | 11 |

12 |

Input:- const arr = [1, 8, 4, 3, 5]

13 |

Output:- 8, 5, 4, 3, 1

14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/3/3.js: -------------------------------------------------------------------------------- 1 | const arr=[1,8,4,3,5]; 2 | arr.sort(); 3 | arr.reverse(); 4 | document.getElementById("p1").innerHTML="Descending Order: "+arr; -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/4/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Write a program to reverse a string with Loop.

10 |

Input:- let str = “hello”

11 |

Output:- olleh

12 |

13 |

14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/4/4.js: -------------------------------------------------------------------------------- 1 | let str="hello"; 2 | let out=str.split("").reduce((acc,char)=> char+acc,""); 3 | document.getElementById("p1").innerHTML= " by using split&reduce method::- " + out; 4 | 5 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/5/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Write a program to check whether a string is Palindrome or Not. 10 |

11 |

Input:- let palindrome = “madam” 12 |

13 |

Output:- It is a Palindrome

14 |
15 | 16 | Enter String: 17 |

18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/5/5.js: -------------------------------------------------------------------------------- 1 | function check(){ 2 | var a =document.getElementById("a").value; 3 | var arrayvalue = a.split(''); 4 | var reversearrayvalue = arrayvalue.reverse(); 5 | var reversestring = reversearrayvalue.join(''); 6 | if(a == reversestring){ 7 | document.getElementById("show").innerHTML="it is a palindrome"; 8 | } 9 | else{ 10 | document.getElementById("show").innerHTML =" it is not a Palindrome" 11 | } 12 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/7_Array-String/Array & String 5qns.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/HTML-CSS-JavaScript/7_Array-String/Array & String 5qns.pdf -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/8_bank_balance/bank.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | box-sizing: border-box; 4 | padding: 0; 5 | } 6 | .div{ 7 | background-color: aquamarine; 8 | text-align: center; 9 | margin: 50px ; 10 | font-size: large; 11 | border: 2px solid black; 12 | } 13 | .div2{ 14 | background-color:darkslategray; 15 | margin:50px; 16 | border: 2px solid white; 17 | } 18 | button{ 19 | background-color:rgb(196, 189, 189); 20 | font-family:'Times New Roman', Times, serif; 21 | font-size: medium; 22 | border: 3px solid white; 23 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/8_bank_balance/bank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bank Balance 7 | 8 | 9 | 10 |
11 |
12 |

To check Bank Balance

13 |
14 | 15 |
16 | 17 | 18 |

19 | 20 | 21 |

22 | 23 | 24 |

25 |

The Final Balance Amount would be :

26 |

27 |
28 | 29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/8_bank_balance/bank.js: -------------------------------------------------------------------------------- 1 | let deposit=document.getElementById("n1"); 2 | let withdraw=document.getElementById("n2"); 3 | let balance=document.getElementById("balance"); 4 | 5 | function curbal(){ 6 | balance.value=deposit.value; 7 | } 8 | 9 | function aftrwith(){ 10 | balance.value=balance.value-withdraw.value; 11 | } 12 | function famount(){ 13 | document.getElementById("p").innerHTML=balance.value; 14 | } -------------------------------------------------------------------------------- /HTML-CSS-JavaScript/9_Block_inline_elements/b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | block &inline element 7 | 8 | 9 | 10 |
This is a div (block)
11 |

This is a h1 heading (block)

12 | This is a span (inline element).. 13 | //this is a anchor tag (inline) 14 | [ inline tag ] 15 | 16 | -------------------------------------------------------------------------------- /Js-excersices/1/1.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | h3{ 7 | margin:20px 20px 10px 20px; 8 | text-align:center; 9 | background-color: lightskyblue; 10 | } 11 | h4{ 12 | margin:20px 20px 10px 20px; 13 | text-align:center; 14 | background-color: lightgreen; 15 | } 16 | label,input{ 17 | margin:20px 20px 10px 20px; 18 | text-align: center; 19 | font-weight:900; 20 | } 21 | 22 | .container{ 23 | margin:20px 20px 10px 20px; 24 | display:flex ; 25 | flex-direction :column; 26 | justify-content: center; 27 | } 28 | button{ 29 | margin:20px 20px 10px 20px; 30 | background-color: aquamarine; 31 | } -------------------------------------------------------------------------------- /Js-excersices/1/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |

Create a function that takes a string and returns a string in which each character is 12 | repeated once :

13 |

doubleChar("String") ➞ "SSttrriinngg" 14 | doubleChar("Hello World!") ➞ "HHeelllloo WWoorrlldd!!" 15 | doubleChar("1234!_ ") ➞ "11223344!!__ " 16 |

17 | 18 |
19 | 20 |
21 | 22 |

Repeated string would appear here

23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /Js-excersices/1/1.js: -------------------------------------------------------------------------------- 1 | 2 | // function repeat(a){ 3 | // let a=document.getElementById("text"); 4 | // let b = return [...str].map(s => s.repeat(2).join('')); 5 | 6 | // document.getElementById("answer").innerHTML=b; 7 | // } 8 | function repeat(){ 9 | let a=document.getElementById("text").value 10 | let arr = Array.from(a) 11 | let newArr = [] 12 | for( var i=0;i 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Write a JavaScript program to get the following output.

10 |

Input: "!trams era uoY"

11 |

Output: “You are smart

12 | 13 |
14 |

Output will display here

15 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Js-excersices/1/2.js: -------------------------------------------------------------------------------- 1 | function reverse(str){ 2 | var arr = str.split("").reverse().join(""); 3 | console.log( arr); 4 | } 5 | reverse("hello"); -------------------------------------------------------------------------------- /Js-excersices/1/3.js: -------------------------------------------------------------------------------- 1 | function Check(arr) { 2 | let element = true; 3 | 4 | return arr.map(item => { 5 | if (item === "bridgeon") { 6 | element = !element; 7 | } 8 | return element || false; 9 | }); 10 | } 11 | 12 | const inputArray = ["ef","gfd", "bridgeon","sgdf","sfgb","bridgeon"]; 13 | const result = Check(inputArray); 14 | console.log(result); 15 | -------------------------------------------------------------------------------- /Js-excersices/1/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Print the following Reverse Triangle pattern.

10 | 
11 |         54321
12 |         5432
13 |         543
14 |         54
15 |         5
16 |
17 | 18 | 34 | 35 | -------------------------------------------------------------------------------- /Js-excersices/1/4.js: -------------------------------------------------------------------------------- 1 | let n=5; 2 | let string=""; 3 | for(i=0;i 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Print the following Reverse Triangle pattern

10 | 
11 | 54321
12 | 4321
13 | 321
14 | 21
15 | 1
16 |
17 | 18 | 28 | 29 | -------------------------------------------------------------------------------- /Js-excersices/1/8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

hollow triangle star patttern

10 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Js-excersices/1/9.js: -------------------------------------------------------------------------------- 1 | function diff(family){ 2 | let minage=Infinity; 3 | let maxage=-Infinity; 4 | 5 | for(const member of family){ 6 | if(member.agemaxage){maxage=member.age;} 8 | } 9 | const agediff =maxage-minage; 10 | return[minage,maxage,agediff]; 11 | } 12 | console.log(diff([ 13 | { name: "Rachel", age: 20 }, 14 | { name: "Jennifer", age: 45 }, 15 | { name: "Jack", age: 43 }, 16 | { name: "Maria", age: 3 } 17 | ])) -------------------------------------------------------------------------------- /Js-excersices/10 JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/Js-excersices/10 JS.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Beginner-Friendly Frontend Web Development Exercises and Problem Solving Repository 2 | 3 | Welcome to the **Beginner-Friendly Frontend Web Development Exercises and Problem Solving Repository!** 🚀 4 | 5 | ## Introduction 6 | 7 | Are you just starting your journey in web development, particularly in HTML, CSS, JavaScript, and Bootstrap? Congratulations! You've found the perfect repository to kickstart your frontend development adventure. This repository is tailor-made for beginners, offering a supportive environment to learn and practice these foundational technologies. 8 | 9 | Frontend web development is the art of creating the visual and interactive aspects of websites and web applications. It's an excellent place to begin your coding journey, and practice is key to mastering it. This repository is your gateway to hands-on experience and problem-solving in web development. 10 | 11 | ## What You'll Find Here 12 | 13 | ### 1. HTML Exercises 14 | 15 | Dive into the world of HTML with beginner-friendly exercises that introduce you to the basics of markup. You'll gradually build your skills, learning to create structured web content. 16 | 17 | ### 2. CSS Challenges 18 | 19 | Master the art of styling and layout with CSS exercises designed with beginners in mind. These challenges will help you make your web projects look polished and appealing. 20 | 21 | ### 3. JavaScript Problem Solving 22 | 23 | JavaScript is the language of interactivity on the web. Our JavaScript exercises start with the fundamentals and gradually progress, ensuring you grasp each concept as you go along. 24 | 25 | ### 4. Bootstrap Projects 26 | 27 | Bootstrap is a beginner-friendly framework for building responsive and visually appealing web interfaces. In this repository, you'll find projects and exercises that use Bootstrap, guiding you towards creating stunning web designs while adhering to best practices. 28 | 29 | ## How to Use This Repository 30 | 31 | 1. **Fork this repository**: Click the "Fork" button at the top right to create your copy of this repository in your GitHub account. 32 | 33 | 2. **Clone your fork**: Use `git clone` to create a local copy of your fork on your development machine. 34 | 35 | 3. **Select an exercise or project**: Explore the folders to find exercises or projects that match your skill level and interest. 36 | 37 | 4. **Work on the challenges**: Follow the instructions in each exercise or project's README file. Feel free to modify and experiment with the code as you learn. 38 | 39 | 5. **Submit your solutions**: After completing an exercise or project, submit your work as a pull request. This way, you can receive feedback and engage with other learners. 40 | 41 | 6. **Explore and collaborate**: Don't hesitate to explore solutions from fellow beginners and collaborate with the community. Learning together is a fantastic way to grow as a frontend developer. 42 | 43 | ## Contributing 44 | 45 | We welcome contributions from beginners like you! If you have exercises, projects, or improvements to share, please fork this repository, make your changes, and submit a pull request. Together, we can create a valuable resource for beginners starting their frontend web development journey. 46 | 47 | ## Let's Get Started 48 | 49 | Frontend web development is an exciting and beginner-friendly path, and this repository is your trusted companion. Whether you're taking your first steps or looking to solidify your foundational knowledge, you'll find valuable challenges here. 50 | 51 | So, what are you waiting for? Fork this repository, dive into the beginner-friendly exercises, and embark on your frontend web development journey with confidence! 💡🌐💻 52 | 53 | Happy coding, beginner developers! 👩‍💻👨‍💻 54 | 55 | [Get started now](#) 56 | -------------------------------------------------------------------------------- /bootstrap course/border.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .box1{ 4 | height: 200px; 5 | width: 200px; 6 | background-color: lightskyblue; 7 | } -------------------------------------------------------------------------------- /bootstrap course/border.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Border Classes 7 | 8 | 9 | 10 | 11 |

Bootstrap: Border Classes

12 |
13 |
14 |
15 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 16 |

17 |
18 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 19 |
20 |
21 |
22 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 23 |
24 |
25 |
26 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 27 |
28 |
29 |
30 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 31 |
32 |
33 |
34 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 35 |
36 |
37 |
38 | Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit! 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /bootstrap course/color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | color 7 | 8 | 9 | 10 |

learn bootstrap color

11 | 12 |
13 |

look the color change

14 |

look the color change

15 |

look the color change

16 |

look the color change

17 |

look the color change

18 |

look the color change

19 |

look the color change

20 |

look the color change

21 |

look the color change

22 |

look the color change

23 |

look the color change

24 |

look the color change

25 |

look the color change

26 |

look the color change

27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /bootstrap course/css/bootstrap-reboot.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */ 6 | :root, 7 | [data-bs-theme=light] { 8 | --bs-blue: #0d6efd; 9 | --bs-indigo: #6610f2; 10 | --bs-purple: #6f42c1; 11 | --bs-pink: #d63384; 12 | --bs-red: #dc3545; 13 | --bs-orange: #fd7e14; 14 | --bs-yellow: #ffc107; 15 | --bs-green: #198754; 16 | --bs-teal: #20c997; 17 | --bs-cyan: #0dcaf0; 18 | --bs-black: #000; 19 | --bs-white: #fff; 20 | --bs-gray: #6c757d; 21 | --bs-gray-dark: #343a40; 22 | --bs-gray-100: #f8f9fa; 23 | --bs-gray-200: #e9ecef; 24 | --bs-gray-300: #dee2e6; 25 | --bs-gray-400: #ced4da; 26 | --bs-gray-500: #adb5bd; 27 | --bs-gray-600: #6c757d; 28 | --bs-gray-700: #495057; 29 | --bs-gray-800: #343a40; 30 | --bs-gray-900: #212529; 31 | --bs-primary: #0d6efd; 32 | --bs-secondary: #6c757d; 33 | --bs-success: #198754; 34 | --bs-info: #0dcaf0; 35 | --bs-warning: #ffc107; 36 | --bs-danger: #dc3545; 37 | --bs-light: #f8f9fa; 38 | --bs-dark: #212529; 39 | --bs-primary-rgb: 13, 110, 253; 40 | --bs-secondary-rgb: 108, 117, 125; 41 | --bs-success-rgb: 25, 135, 84; 42 | --bs-info-rgb: 13, 202, 240; 43 | --bs-warning-rgb: 255, 193, 7; 44 | --bs-danger-rgb: 220, 53, 69; 45 | --bs-light-rgb: 248, 249, 250; 46 | --bs-dark-rgb: 33, 37, 41; 47 | --bs-primary-text-emphasis: #052c65; 48 | --bs-secondary-text-emphasis: #2b2f32; 49 | --bs-success-text-emphasis: #0a3622; 50 | --bs-info-text-emphasis: #055160; 51 | --bs-warning-text-emphasis: #664d03; 52 | --bs-danger-text-emphasis: #58151c; 53 | --bs-light-text-emphasis: #495057; 54 | --bs-dark-text-emphasis: #495057; 55 | --bs-primary-bg-subtle: #cfe2ff; 56 | --bs-secondary-bg-subtle: #e2e3e5; 57 | --bs-success-bg-subtle: #d1e7dd; 58 | --bs-info-bg-subtle: #cff4fc; 59 | --bs-warning-bg-subtle: #fff3cd; 60 | --bs-danger-bg-subtle: #f8d7da; 61 | --bs-light-bg-subtle: #fcfcfd; 62 | --bs-dark-bg-subtle: #ced4da; 63 | --bs-primary-border-subtle: #9ec5fe; 64 | --bs-secondary-border-subtle: #c4c8cb; 65 | --bs-success-border-subtle: #a3cfbb; 66 | --bs-info-border-subtle: #9eeaf9; 67 | --bs-warning-border-subtle: #ffe69c; 68 | --bs-danger-border-subtle: #f1aeb5; 69 | --bs-light-border-subtle: #e9ecef; 70 | --bs-dark-border-subtle: #adb5bd; 71 | --bs-white-rgb: 255, 255, 255; 72 | --bs-black-rgb: 0, 0, 0; 73 | --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 74 | --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 75 | --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 76 | --bs-body-font-family: var(--bs-font-sans-serif); 77 | --bs-body-font-size: 1rem; 78 | --bs-body-font-weight: 400; 79 | --bs-body-line-height: 1.5; 80 | --bs-body-color: #212529; 81 | --bs-body-color-rgb: 33, 37, 41; 82 | --bs-body-bg: #fff; 83 | --bs-body-bg-rgb: 255, 255, 255; 84 | --bs-emphasis-color: #000; 85 | --bs-emphasis-color-rgb: 0, 0, 0; 86 | --bs-secondary-color: rgba(33, 37, 41, 0.75); 87 | --bs-secondary-color-rgb: 33, 37, 41; 88 | --bs-secondary-bg: #e9ecef; 89 | --bs-secondary-bg-rgb: 233, 236, 239; 90 | --bs-tertiary-color: rgba(33, 37, 41, 0.5); 91 | --bs-tertiary-color-rgb: 33, 37, 41; 92 | --bs-tertiary-bg: #f8f9fa; 93 | --bs-tertiary-bg-rgb: 248, 249, 250; 94 | --bs-heading-color: inherit; 95 | --bs-link-color: #0d6efd; 96 | --bs-link-color-rgb: 13, 110, 253; 97 | --bs-link-decoration: underline; 98 | --bs-link-hover-color: #0a58ca; 99 | --bs-link-hover-color-rgb: 10, 88, 202; 100 | --bs-code-color: #d63384; 101 | --bs-highlight-bg: #fff3cd; 102 | --bs-border-width: 1px; 103 | --bs-border-style: solid; 104 | --bs-border-color: #dee2e6; 105 | --bs-border-color-translucent: rgba(0, 0, 0, 0.175); 106 | --bs-border-radius: 0.375rem; 107 | --bs-border-radius-sm: 0.25rem; 108 | --bs-border-radius-lg: 0.5rem; 109 | --bs-border-radius-xl: 1rem; 110 | --bs-border-radius-xxl: 2rem; 111 | --bs-border-radius-2xl: var(--bs-border-radius-xxl); 112 | --bs-border-radius-pill: 50rem; 113 | --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 114 | --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 115 | --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); 116 | --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); 117 | --bs-focus-ring-width: 0.25rem; 118 | --bs-focus-ring-opacity: 0.25; 119 | --bs-focus-ring-color: rgba(13, 110, 253, 0.25); 120 | --bs-form-valid-color: #198754; 121 | --bs-form-valid-border-color: #198754; 122 | --bs-form-invalid-color: #dc3545; 123 | --bs-form-invalid-border-color: #dc3545; 124 | } 125 | 126 | [data-bs-theme=dark] { 127 | color-scheme: dark; 128 | --bs-body-color: #dee2e6; 129 | --bs-body-color-rgb: 222, 226, 230; 130 | --bs-body-bg: #212529; 131 | --bs-body-bg-rgb: 33, 37, 41; 132 | --bs-emphasis-color: #fff; 133 | --bs-emphasis-color-rgb: 255, 255, 255; 134 | --bs-secondary-color: rgba(222, 226, 230, 0.75); 135 | --bs-secondary-color-rgb: 222, 226, 230; 136 | --bs-secondary-bg: #343a40; 137 | --bs-secondary-bg-rgb: 52, 58, 64; 138 | --bs-tertiary-color: rgba(222, 226, 230, 0.5); 139 | --bs-tertiary-color-rgb: 222, 226, 230; 140 | --bs-tertiary-bg: #2b3035; 141 | --bs-tertiary-bg-rgb: 43, 48, 53; 142 | --bs-primary-text-emphasis: #6ea8fe; 143 | --bs-secondary-text-emphasis: #a7acb1; 144 | --bs-success-text-emphasis: #75b798; 145 | --bs-info-text-emphasis: #6edff6; 146 | --bs-warning-text-emphasis: #ffda6a; 147 | --bs-danger-text-emphasis: #ea868f; 148 | --bs-light-text-emphasis: #f8f9fa; 149 | --bs-dark-text-emphasis: #dee2e6; 150 | --bs-primary-bg-subtle: #031633; 151 | --bs-secondary-bg-subtle: #161719; 152 | --bs-success-bg-subtle: #051b11; 153 | --bs-info-bg-subtle: #032830; 154 | --bs-warning-bg-subtle: #332701; 155 | --bs-danger-bg-subtle: #2c0b0e; 156 | --bs-light-bg-subtle: #343a40; 157 | --bs-dark-bg-subtle: #1a1d20; 158 | --bs-primary-border-subtle: #084298; 159 | --bs-secondary-border-subtle: #41464b; 160 | --bs-success-border-subtle: #0f5132; 161 | --bs-info-border-subtle: #087990; 162 | --bs-warning-border-subtle: #997404; 163 | --bs-danger-border-subtle: #842029; 164 | --bs-light-border-subtle: #495057; 165 | --bs-dark-border-subtle: #343a40; 166 | --bs-heading-color: inherit; 167 | --bs-link-color: #6ea8fe; 168 | --bs-link-hover-color: #8bb9fe; 169 | --bs-link-color-rgb: 110, 168, 254; 170 | --bs-link-hover-color-rgb: 139, 185, 254; 171 | --bs-code-color: #e685b5; 172 | --bs-border-color: #495057; 173 | --bs-border-color-translucent: rgba(255, 255, 255, 0.15); 174 | --bs-form-valid-color: #75b798; 175 | --bs-form-valid-border-color: #75b798; 176 | --bs-form-invalid-color: #ea868f; 177 | --bs-form-invalid-border-color: #ea868f; 178 | } 179 | 180 | *, 181 | *::before, 182 | *::after { 183 | box-sizing: border-box; 184 | } 185 | 186 | @media (prefers-reduced-motion: no-preference) { 187 | :root { 188 | scroll-behavior: smooth; 189 | } 190 | } 191 | 192 | body { 193 | margin: 0; 194 | font-family: var(--bs-body-font-family); 195 | font-size: var(--bs-body-font-size); 196 | font-weight: var(--bs-body-font-weight); 197 | line-height: var(--bs-body-line-height); 198 | color: var(--bs-body-color); 199 | text-align: var(--bs-body-text-align); 200 | background-color: var(--bs-body-bg); 201 | -webkit-text-size-adjust: 100%; 202 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 203 | } 204 | 205 | hr { 206 | margin: 1rem 0; 207 | color: inherit; 208 | border: 0; 209 | border-top: var(--bs-border-width) solid; 210 | opacity: 0.25; 211 | } 212 | 213 | h6, h5, h4, h3, h2, h1 { 214 | margin-top: 0; 215 | margin-bottom: 0.5rem; 216 | font-weight: 500; 217 | line-height: 1.2; 218 | color: var(--bs-heading-color); 219 | } 220 | 221 | h1 { 222 | font-size: calc(1.375rem + 1.5vw); 223 | } 224 | @media (min-width: 1200px) { 225 | h1 { 226 | font-size: 2.5rem; 227 | } 228 | } 229 | 230 | h2 { 231 | font-size: calc(1.325rem + 0.9vw); 232 | } 233 | @media (min-width: 1200px) { 234 | h2 { 235 | font-size: 2rem; 236 | } 237 | } 238 | 239 | h3 { 240 | font-size: calc(1.3rem + 0.6vw); 241 | } 242 | @media (min-width: 1200px) { 243 | h3 { 244 | font-size: 1.75rem; 245 | } 246 | } 247 | 248 | h4 { 249 | font-size: calc(1.275rem + 0.3vw); 250 | } 251 | @media (min-width: 1200px) { 252 | h4 { 253 | font-size: 1.5rem; 254 | } 255 | } 256 | 257 | h5 { 258 | font-size: 1.25rem; 259 | } 260 | 261 | h6 { 262 | font-size: 1rem; 263 | } 264 | 265 | p { 266 | margin-top: 0; 267 | margin-bottom: 1rem; 268 | } 269 | 270 | abbr[title] { 271 | -webkit-text-decoration: underline dotted; 272 | text-decoration: underline dotted; 273 | cursor: help; 274 | -webkit-text-decoration-skip-ink: none; 275 | text-decoration-skip-ink: none; 276 | } 277 | 278 | address { 279 | margin-bottom: 1rem; 280 | font-style: normal; 281 | line-height: inherit; 282 | } 283 | 284 | ol, 285 | ul { 286 | padding-left: 2rem; 287 | } 288 | 289 | ol, 290 | ul, 291 | dl { 292 | margin-top: 0; 293 | margin-bottom: 1rem; 294 | } 295 | 296 | ol ol, 297 | ul ul, 298 | ol ul, 299 | ul ol { 300 | margin-bottom: 0; 301 | } 302 | 303 | dt { 304 | font-weight: 700; 305 | } 306 | 307 | dd { 308 | margin-bottom: 0.5rem; 309 | margin-left: 0; 310 | } 311 | 312 | blockquote { 313 | margin: 0 0 1rem; 314 | } 315 | 316 | b, 317 | strong { 318 | font-weight: bolder; 319 | } 320 | 321 | small { 322 | font-size: 0.875em; 323 | } 324 | 325 | mark { 326 | padding: 0.1875em; 327 | background-color: var(--bs-highlight-bg); 328 | } 329 | 330 | sub, 331 | sup { 332 | position: relative; 333 | font-size: 0.75em; 334 | line-height: 0; 335 | vertical-align: baseline; 336 | } 337 | 338 | sub { 339 | bottom: -0.25em; 340 | } 341 | 342 | sup { 343 | top: -0.5em; 344 | } 345 | 346 | a { 347 | color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); 348 | text-decoration: underline; 349 | } 350 | a:hover { 351 | --bs-link-color-rgb: var(--bs-link-hover-color-rgb); 352 | } 353 | 354 | a:not([href]):not([class]), a:not([href]):not([class]):hover { 355 | color: inherit; 356 | text-decoration: none; 357 | } 358 | 359 | pre, 360 | code, 361 | kbd, 362 | samp { 363 | font-family: var(--bs-font-monospace); 364 | font-size: 1em; 365 | } 366 | 367 | pre { 368 | display: block; 369 | margin-top: 0; 370 | margin-bottom: 1rem; 371 | overflow: auto; 372 | font-size: 0.875em; 373 | } 374 | pre code { 375 | font-size: inherit; 376 | color: inherit; 377 | word-break: normal; 378 | } 379 | 380 | code { 381 | font-size: 0.875em; 382 | color: var(--bs-code-color); 383 | word-wrap: break-word; 384 | } 385 | a > code { 386 | color: inherit; 387 | } 388 | 389 | kbd { 390 | padding: 0.1875rem 0.375rem; 391 | font-size: 0.875em; 392 | color: var(--bs-body-bg); 393 | background-color: var(--bs-body-color); 394 | border-radius: 0.25rem; 395 | } 396 | kbd kbd { 397 | padding: 0; 398 | font-size: 1em; 399 | } 400 | 401 | figure { 402 | margin: 0 0 1rem; 403 | } 404 | 405 | img, 406 | svg { 407 | vertical-align: middle; 408 | } 409 | 410 | table { 411 | caption-side: bottom; 412 | border-collapse: collapse; 413 | } 414 | 415 | caption { 416 | padding-top: 0.5rem; 417 | padding-bottom: 0.5rem; 418 | color: var(--bs-secondary-color); 419 | text-align: left; 420 | } 421 | 422 | th { 423 | text-align: inherit; 424 | text-align: -webkit-match-parent; 425 | } 426 | 427 | thead, 428 | tbody, 429 | tfoot, 430 | tr, 431 | td, 432 | th { 433 | border-color: inherit; 434 | border-style: solid; 435 | border-width: 0; 436 | } 437 | 438 | label { 439 | display: inline-block; 440 | } 441 | 442 | button { 443 | border-radius: 0; 444 | } 445 | 446 | button:focus:not(:focus-visible) { 447 | outline: 0; 448 | } 449 | 450 | input, 451 | button, 452 | select, 453 | optgroup, 454 | textarea { 455 | margin: 0; 456 | font-family: inherit; 457 | font-size: inherit; 458 | line-height: inherit; 459 | } 460 | 461 | button, 462 | select { 463 | text-transform: none; 464 | } 465 | 466 | [role=button] { 467 | cursor: pointer; 468 | } 469 | 470 | select { 471 | word-wrap: normal; 472 | } 473 | select:disabled { 474 | opacity: 1; 475 | } 476 | 477 | [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { 478 | display: none !important; 479 | } 480 | 481 | button, 482 | [type=button], 483 | [type=reset], 484 | [type=submit] { 485 | -webkit-appearance: button; 486 | } 487 | button:not(:disabled), 488 | [type=button]:not(:disabled), 489 | [type=reset]:not(:disabled), 490 | [type=submit]:not(:disabled) { 491 | cursor: pointer; 492 | } 493 | 494 | ::-moz-focus-inner { 495 | padding: 0; 496 | border-style: none; 497 | } 498 | 499 | textarea { 500 | resize: vertical; 501 | } 502 | 503 | fieldset { 504 | min-width: 0; 505 | padding: 0; 506 | margin: 0; 507 | border: 0; 508 | } 509 | 510 | legend { 511 | float: left; 512 | width: 100%; 513 | padding: 0; 514 | margin-bottom: 0.5rem; 515 | font-size: calc(1.275rem + 0.3vw); 516 | line-height: inherit; 517 | } 518 | @media (min-width: 1200px) { 519 | legend { 520 | font-size: 1.5rem; 521 | } 522 | } 523 | legend + * { 524 | clear: left; 525 | } 526 | 527 | ::-webkit-datetime-edit-fields-wrapper, 528 | ::-webkit-datetime-edit-text, 529 | ::-webkit-datetime-edit-minute, 530 | ::-webkit-datetime-edit-hour-field, 531 | ::-webkit-datetime-edit-day-field, 532 | ::-webkit-datetime-edit-month-field, 533 | ::-webkit-datetime-edit-year-field { 534 | padding: 0; 535 | } 536 | 537 | ::-webkit-inner-spin-button { 538 | height: auto; 539 | } 540 | 541 | [type=search] { 542 | -webkit-appearance: textfield; 543 | outline-offset: -2px; 544 | } 545 | 546 | /* rtl:raw: 547 | [type="tel"], 548 | [type="url"], 549 | [type="email"], 550 | [type="number"] { 551 | direction: ltr; 552 | } 553 | */ 554 | ::-webkit-search-decoration { 555 | -webkit-appearance: none; 556 | } 557 | 558 | ::-webkit-color-swatch-wrapper { 559 | padding: 0; 560 | } 561 | 562 | ::-webkit-file-upload-button { 563 | font: inherit; 564 | -webkit-appearance: button; 565 | } 566 | 567 | ::file-selector-button { 568 | font: inherit; 569 | -webkit-appearance: button; 570 | } 571 | 572 | output { 573 | display: inline-block; 574 | } 575 | 576 | iframe { 577 | border: 0; 578 | } 579 | 580 | summary { 581 | display: list-item; 582 | cursor: pointer; 583 | } 584 | 585 | progress { 586 | vertical-align: baseline; 587 | } 588 | 589 | [hidden] { 590 | display: none !important; 591 | } 592 | 593 | /*# sourceMappingURL=bootstrap-reboot.css.map */ -------------------------------------------------------------------------------- /bootstrap course/css/bootstrap-reboot.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important} 6 | /*# sourceMappingURL=bootstrap-reboot.min.css.map */ -------------------------------------------------------------------------------- /bootstrap course/css/bootstrap-reboot.rtl.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */ 6 | :root, 7 | [data-bs-theme=light] { 8 | --bs-blue: #0d6efd; 9 | --bs-indigo: #6610f2; 10 | --bs-purple: #6f42c1; 11 | --bs-pink: #d63384; 12 | --bs-red: #dc3545; 13 | --bs-orange: #fd7e14; 14 | --bs-yellow: #ffc107; 15 | --bs-green: #198754; 16 | --bs-teal: #20c997; 17 | --bs-cyan: #0dcaf0; 18 | --bs-black: #000; 19 | --bs-white: #fff; 20 | --bs-gray: #6c757d; 21 | --bs-gray-dark: #343a40; 22 | --bs-gray-100: #f8f9fa; 23 | --bs-gray-200: #e9ecef; 24 | --bs-gray-300: #dee2e6; 25 | --bs-gray-400: #ced4da; 26 | --bs-gray-500: #adb5bd; 27 | --bs-gray-600: #6c757d; 28 | --bs-gray-700: #495057; 29 | --bs-gray-800: #343a40; 30 | --bs-gray-900: #212529; 31 | --bs-primary: #0d6efd; 32 | --bs-secondary: #6c757d; 33 | --bs-success: #198754; 34 | --bs-info: #0dcaf0; 35 | --bs-warning: #ffc107; 36 | --bs-danger: #dc3545; 37 | --bs-light: #f8f9fa; 38 | --bs-dark: #212529; 39 | --bs-primary-rgb: 13, 110, 253; 40 | --bs-secondary-rgb: 108, 117, 125; 41 | --bs-success-rgb: 25, 135, 84; 42 | --bs-info-rgb: 13, 202, 240; 43 | --bs-warning-rgb: 255, 193, 7; 44 | --bs-danger-rgb: 220, 53, 69; 45 | --bs-light-rgb: 248, 249, 250; 46 | --bs-dark-rgb: 33, 37, 41; 47 | --bs-primary-text-emphasis: #052c65; 48 | --bs-secondary-text-emphasis: #2b2f32; 49 | --bs-success-text-emphasis: #0a3622; 50 | --bs-info-text-emphasis: #055160; 51 | --bs-warning-text-emphasis: #664d03; 52 | --bs-danger-text-emphasis: #58151c; 53 | --bs-light-text-emphasis: #495057; 54 | --bs-dark-text-emphasis: #495057; 55 | --bs-primary-bg-subtle: #cfe2ff; 56 | --bs-secondary-bg-subtle: #e2e3e5; 57 | --bs-success-bg-subtle: #d1e7dd; 58 | --bs-info-bg-subtle: #cff4fc; 59 | --bs-warning-bg-subtle: #fff3cd; 60 | --bs-danger-bg-subtle: #f8d7da; 61 | --bs-light-bg-subtle: #fcfcfd; 62 | --bs-dark-bg-subtle: #ced4da; 63 | --bs-primary-border-subtle: #9ec5fe; 64 | --bs-secondary-border-subtle: #c4c8cb; 65 | --bs-success-border-subtle: #a3cfbb; 66 | --bs-info-border-subtle: #9eeaf9; 67 | --bs-warning-border-subtle: #ffe69c; 68 | --bs-danger-border-subtle: #f1aeb5; 69 | --bs-light-border-subtle: #e9ecef; 70 | --bs-dark-border-subtle: #adb5bd; 71 | --bs-white-rgb: 255, 255, 255; 72 | --bs-black-rgb: 0, 0, 0; 73 | --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 74 | --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 75 | --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 76 | --bs-body-font-family: var(--bs-font-sans-serif); 77 | --bs-body-font-size: 1rem; 78 | --bs-body-font-weight: 400; 79 | --bs-body-line-height: 1.5; 80 | --bs-body-color: #212529; 81 | --bs-body-color-rgb: 33, 37, 41; 82 | --bs-body-bg: #fff; 83 | --bs-body-bg-rgb: 255, 255, 255; 84 | --bs-emphasis-color: #000; 85 | --bs-emphasis-color-rgb: 0, 0, 0; 86 | --bs-secondary-color: rgba(33, 37, 41, 0.75); 87 | --bs-secondary-color-rgb: 33, 37, 41; 88 | --bs-secondary-bg: #e9ecef; 89 | --bs-secondary-bg-rgb: 233, 236, 239; 90 | --bs-tertiary-color: rgba(33, 37, 41, 0.5); 91 | --bs-tertiary-color-rgb: 33, 37, 41; 92 | --bs-tertiary-bg: #f8f9fa; 93 | --bs-tertiary-bg-rgb: 248, 249, 250; 94 | --bs-heading-color: inherit; 95 | --bs-link-color: #0d6efd; 96 | --bs-link-color-rgb: 13, 110, 253; 97 | --bs-link-decoration: underline; 98 | --bs-link-hover-color: #0a58ca; 99 | --bs-link-hover-color-rgb: 10, 88, 202; 100 | --bs-code-color: #d63384; 101 | --bs-highlight-bg: #fff3cd; 102 | --bs-border-width: 1px; 103 | --bs-border-style: solid; 104 | --bs-border-color: #dee2e6; 105 | --bs-border-color-translucent: rgba(0, 0, 0, 0.175); 106 | --bs-border-radius: 0.375rem; 107 | --bs-border-radius-sm: 0.25rem; 108 | --bs-border-radius-lg: 0.5rem; 109 | --bs-border-radius-xl: 1rem; 110 | --bs-border-radius-xxl: 2rem; 111 | --bs-border-radius-2xl: var(--bs-border-radius-xxl); 112 | --bs-border-radius-pill: 50rem; 113 | --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 114 | --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 115 | --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); 116 | --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); 117 | --bs-focus-ring-width: 0.25rem; 118 | --bs-focus-ring-opacity: 0.25; 119 | --bs-focus-ring-color: rgba(13, 110, 253, 0.25); 120 | --bs-form-valid-color: #198754; 121 | --bs-form-valid-border-color: #198754; 122 | --bs-form-invalid-color: #dc3545; 123 | --bs-form-invalid-border-color: #dc3545; 124 | } 125 | 126 | [data-bs-theme=dark] { 127 | color-scheme: dark; 128 | --bs-body-color: #dee2e6; 129 | --bs-body-color-rgb: 222, 226, 230; 130 | --bs-body-bg: #212529; 131 | --bs-body-bg-rgb: 33, 37, 41; 132 | --bs-emphasis-color: #fff; 133 | --bs-emphasis-color-rgb: 255, 255, 255; 134 | --bs-secondary-color: rgba(222, 226, 230, 0.75); 135 | --bs-secondary-color-rgb: 222, 226, 230; 136 | --bs-secondary-bg: #343a40; 137 | --bs-secondary-bg-rgb: 52, 58, 64; 138 | --bs-tertiary-color: rgba(222, 226, 230, 0.5); 139 | --bs-tertiary-color-rgb: 222, 226, 230; 140 | --bs-tertiary-bg: #2b3035; 141 | --bs-tertiary-bg-rgb: 43, 48, 53; 142 | --bs-primary-text-emphasis: #6ea8fe; 143 | --bs-secondary-text-emphasis: #a7acb1; 144 | --bs-success-text-emphasis: #75b798; 145 | --bs-info-text-emphasis: #6edff6; 146 | --bs-warning-text-emphasis: #ffda6a; 147 | --bs-danger-text-emphasis: #ea868f; 148 | --bs-light-text-emphasis: #f8f9fa; 149 | --bs-dark-text-emphasis: #dee2e6; 150 | --bs-primary-bg-subtle: #031633; 151 | --bs-secondary-bg-subtle: #161719; 152 | --bs-success-bg-subtle: #051b11; 153 | --bs-info-bg-subtle: #032830; 154 | --bs-warning-bg-subtle: #332701; 155 | --bs-danger-bg-subtle: #2c0b0e; 156 | --bs-light-bg-subtle: #343a40; 157 | --bs-dark-bg-subtle: #1a1d20; 158 | --bs-primary-border-subtle: #084298; 159 | --bs-secondary-border-subtle: #41464b; 160 | --bs-success-border-subtle: #0f5132; 161 | --bs-info-border-subtle: #087990; 162 | --bs-warning-border-subtle: #997404; 163 | --bs-danger-border-subtle: #842029; 164 | --bs-light-border-subtle: #495057; 165 | --bs-dark-border-subtle: #343a40; 166 | --bs-heading-color: inherit; 167 | --bs-link-color: #6ea8fe; 168 | --bs-link-hover-color: #8bb9fe; 169 | --bs-link-color-rgb: 110, 168, 254; 170 | --bs-link-hover-color-rgb: 139, 185, 254; 171 | --bs-code-color: #e685b5; 172 | --bs-border-color: #495057; 173 | --bs-border-color-translucent: rgba(255, 255, 255, 0.15); 174 | --bs-form-valid-color: #75b798; 175 | --bs-form-valid-border-color: #75b798; 176 | --bs-form-invalid-color: #ea868f; 177 | --bs-form-invalid-border-color: #ea868f; 178 | } 179 | 180 | *, 181 | *::before, 182 | *::after { 183 | box-sizing: border-box; 184 | } 185 | 186 | @media (prefers-reduced-motion: no-preference) { 187 | :root { 188 | scroll-behavior: smooth; 189 | } 190 | } 191 | 192 | body { 193 | margin: 0; 194 | font-family: var(--bs-body-font-family); 195 | font-size: var(--bs-body-font-size); 196 | font-weight: var(--bs-body-font-weight); 197 | line-height: var(--bs-body-line-height); 198 | color: var(--bs-body-color); 199 | text-align: var(--bs-body-text-align); 200 | background-color: var(--bs-body-bg); 201 | -webkit-text-size-adjust: 100%; 202 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 203 | } 204 | 205 | hr { 206 | margin: 1rem 0; 207 | color: inherit; 208 | border: 0; 209 | border-top: var(--bs-border-width) solid; 210 | opacity: 0.25; 211 | } 212 | 213 | h6, h5, h4, h3, h2, h1 { 214 | margin-top: 0; 215 | margin-bottom: 0.5rem; 216 | font-weight: 500; 217 | line-height: 1.2; 218 | color: var(--bs-heading-color); 219 | } 220 | 221 | h1 { 222 | font-size: calc(1.375rem + 1.5vw); 223 | } 224 | @media (min-width: 1200px) { 225 | h1 { 226 | font-size: 2.5rem; 227 | } 228 | } 229 | 230 | h2 { 231 | font-size: calc(1.325rem + 0.9vw); 232 | } 233 | @media (min-width: 1200px) { 234 | h2 { 235 | font-size: 2rem; 236 | } 237 | } 238 | 239 | h3 { 240 | font-size: calc(1.3rem + 0.6vw); 241 | } 242 | @media (min-width: 1200px) { 243 | h3 { 244 | font-size: 1.75rem; 245 | } 246 | } 247 | 248 | h4 { 249 | font-size: calc(1.275rem + 0.3vw); 250 | } 251 | @media (min-width: 1200px) { 252 | h4 { 253 | font-size: 1.5rem; 254 | } 255 | } 256 | 257 | h5 { 258 | font-size: 1.25rem; 259 | } 260 | 261 | h6 { 262 | font-size: 1rem; 263 | } 264 | 265 | p { 266 | margin-top: 0; 267 | margin-bottom: 1rem; 268 | } 269 | 270 | abbr[title] { 271 | -webkit-text-decoration: underline dotted; 272 | text-decoration: underline dotted; 273 | cursor: help; 274 | -webkit-text-decoration-skip-ink: none; 275 | text-decoration-skip-ink: none; 276 | } 277 | 278 | address { 279 | margin-bottom: 1rem; 280 | font-style: normal; 281 | line-height: inherit; 282 | } 283 | 284 | ol, 285 | ul { 286 | padding-right: 2rem; 287 | } 288 | 289 | ol, 290 | ul, 291 | dl { 292 | margin-top: 0; 293 | margin-bottom: 1rem; 294 | } 295 | 296 | ol ol, 297 | ul ul, 298 | ol ul, 299 | ul ol { 300 | margin-bottom: 0; 301 | } 302 | 303 | dt { 304 | font-weight: 700; 305 | } 306 | 307 | dd { 308 | margin-bottom: 0.5rem; 309 | margin-right: 0; 310 | } 311 | 312 | blockquote { 313 | margin: 0 0 1rem; 314 | } 315 | 316 | b, 317 | strong { 318 | font-weight: bolder; 319 | } 320 | 321 | small { 322 | font-size: 0.875em; 323 | } 324 | 325 | mark { 326 | padding: 0.1875em; 327 | background-color: var(--bs-highlight-bg); 328 | } 329 | 330 | sub, 331 | sup { 332 | position: relative; 333 | font-size: 0.75em; 334 | line-height: 0; 335 | vertical-align: baseline; 336 | } 337 | 338 | sub { 339 | bottom: -0.25em; 340 | } 341 | 342 | sup { 343 | top: -0.5em; 344 | } 345 | 346 | a { 347 | color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); 348 | text-decoration: underline; 349 | } 350 | a:hover { 351 | --bs-link-color-rgb: var(--bs-link-hover-color-rgb); 352 | } 353 | 354 | a:not([href]):not([class]), a:not([href]):not([class]):hover { 355 | color: inherit; 356 | text-decoration: none; 357 | } 358 | 359 | pre, 360 | code, 361 | kbd, 362 | samp { 363 | font-family: var(--bs-font-monospace); 364 | font-size: 1em; 365 | } 366 | 367 | pre { 368 | display: block; 369 | margin-top: 0; 370 | margin-bottom: 1rem; 371 | overflow: auto; 372 | font-size: 0.875em; 373 | } 374 | pre code { 375 | font-size: inherit; 376 | color: inherit; 377 | word-break: normal; 378 | } 379 | 380 | code { 381 | font-size: 0.875em; 382 | color: var(--bs-code-color); 383 | word-wrap: break-word; 384 | } 385 | a > code { 386 | color: inherit; 387 | } 388 | 389 | kbd { 390 | padding: 0.1875rem 0.375rem; 391 | font-size: 0.875em; 392 | color: var(--bs-body-bg); 393 | background-color: var(--bs-body-color); 394 | border-radius: 0.25rem; 395 | } 396 | kbd kbd { 397 | padding: 0; 398 | font-size: 1em; 399 | } 400 | 401 | figure { 402 | margin: 0 0 1rem; 403 | } 404 | 405 | img, 406 | svg { 407 | vertical-align: middle; 408 | } 409 | 410 | table { 411 | caption-side: bottom; 412 | border-collapse: collapse; 413 | } 414 | 415 | caption { 416 | padding-top: 0.5rem; 417 | padding-bottom: 0.5rem; 418 | color: var(--bs-secondary-color); 419 | text-align: right; 420 | } 421 | 422 | th { 423 | text-align: inherit; 424 | text-align: -webkit-match-parent; 425 | } 426 | 427 | thead, 428 | tbody, 429 | tfoot, 430 | tr, 431 | td, 432 | th { 433 | border-color: inherit; 434 | border-style: solid; 435 | border-width: 0; 436 | } 437 | 438 | label { 439 | display: inline-block; 440 | } 441 | 442 | button { 443 | border-radius: 0; 444 | } 445 | 446 | button:focus:not(:focus-visible) { 447 | outline: 0; 448 | } 449 | 450 | input, 451 | button, 452 | select, 453 | optgroup, 454 | textarea { 455 | margin: 0; 456 | font-family: inherit; 457 | font-size: inherit; 458 | line-height: inherit; 459 | } 460 | 461 | button, 462 | select { 463 | text-transform: none; 464 | } 465 | 466 | [role=button] { 467 | cursor: pointer; 468 | } 469 | 470 | select { 471 | word-wrap: normal; 472 | } 473 | select:disabled { 474 | opacity: 1; 475 | } 476 | 477 | [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { 478 | display: none !important; 479 | } 480 | 481 | button, 482 | [type=button], 483 | [type=reset], 484 | [type=submit] { 485 | -webkit-appearance: button; 486 | } 487 | button:not(:disabled), 488 | [type=button]:not(:disabled), 489 | [type=reset]:not(:disabled), 490 | [type=submit]:not(:disabled) { 491 | cursor: pointer; 492 | } 493 | 494 | ::-moz-focus-inner { 495 | padding: 0; 496 | border-style: none; 497 | } 498 | 499 | textarea { 500 | resize: vertical; 501 | } 502 | 503 | fieldset { 504 | min-width: 0; 505 | padding: 0; 506 | margin: 0; 507 | border: 0; 508 | } 509 | 510 | legend { 511 | float: right; 512 | width: 100%; 513 | padding: 0; 514 | margin-bottom: 0.5rem; 515 | font-size: calc(1.275rem + 0.3vw); 516 | line-height: inherit; 517 | } 518 | @media (min-width: 1200px) { 519 | legend { 520 | font-size: 1.5rem; 521 | } 522 | } 523 | legend + * { 524 | clear: right; 525 | } 526 | 527 | ::-webkit-datetime-edit-fields-wrapper, 528 | ::-webkit-datetime-edit-text, 529 | ::-webkit-datetime-edit-minute, 530 | ::-webkit-datetime-edit-hour-field, 531 | ::-webkit-datetime-edit-day-field, 532 | ::-webkit-datetime-edit-month-field, 533 | ::-webkit-datetime-edit-year-field { 534 | padding: 0; 535 | } 536 | 537 | ::-webkit-inner-spin-button { 538 | height: auto; 539 | } 540 | 541 | [type=search] { 542 | -webkit-appearance: textfield; 543 | outline-offset: -2px; 544 | } 545 | 546 | [type="tel"], 547 | [type="url"], 548 | [type="email"], 549 | [type="number"] { 550 | direction: ltr; 551 | } 552 | ::-webkit-search-decoration { 553 | -webkit-appearance: none; 554 | } 555 | 556 | ::-webkit-color-swatch-wrapper { 557 | padding: 0; 558 | } 559 | 560 | ::-webkit-file-upload-button { 561 | font: inherit; 562 | -webkit-appearance: button; 563 | } 564 | 565 | ::file-selector-button { 566 | font: inherit; 567 | -webkit-appearance: button; 568 | } 569 | 570 | output { 571 | display: inline-block; 572 | } 573 | 574 | iframe { 575 | border: 0; 576 | } 577 | 578 | summary { 579 | display: list-item; 580 | cursor: pointer; 581 | } 582 | 583 | progress { 584 | vertical-align: baseline; 585 | } 586 | 587 | [hidden] { 588 | display: none !important; 589 | } 590 | /*# sourceMappingURL=bootstrap-reboot.rtl.css.map */ -------------------------------------------------------------------------------- /bootstrap course/css/bootstrap-reboot.rtl.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-right:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-right:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:right}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:right;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:right}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=email],[type=number],[type=tel],[type=url]{direction:ltr}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important} 6 | /*# sourceMappingURL=bootstrap-reboot.rtl.min.css.map */ -------------------------------------------------------------------------------- /bootstrap course/layout.css: -------------------------------------------------------------------------------- 1 | 2 | /* For bootstrap container and breakpoints */ 3 | /* .container{ 4 | background-color: chartreuse; 5 | height: 50px; 6 | } 7 | .container-fluid{ 8 | background-color: blue; 9 | height: 50px; 10 | } */ 11 | /* --------------------------------------------------- */ 12 | .container{ 13 | border: 2px solid blue; 14 | 15 | } 16 | .row{ 17 | border: 2px solid red; 18 | } 19 | .col-1,.col,.col-3,.col-9,.col-6{ 20 | border: 1px solid black; 21 | background-color: lightblue; 22 | } -------------------------------------------------------------------------------- /bootstrap course/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap Course 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 |
20 |
21 |
1
22 |
2
23 |
3
24 |
4
25 |
5
26 |
6
27 |
7
28 |
8
29 |
9
30 |
10
31 |
11
32 |
12
33 |
34 |
35 |
36 |
37 |
38 |
39 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quis officia unde praesentium dolorum nulla perferendis necessitatibus amet cumque temporibus dolor illo delectus doloremque excepturi quisquam sint, adipisci ipsam. Hic?

40 |
41 |
42 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quis officia unde praesentium dolorum nulla perferendis necessitatibus amet cumque temporibus dolor illo delectus doloremque excepturi quisquam sint, adipisci ipsam. Hic?

43 | 44 |
45 |
46 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quis officia unde praesentium dolorum nulla perferendis necessitatibus amet cumque temporibus dolor illo delectus doloremque excepturi quisquam sint, adipisci ipsam. Hic?

47 | 48 |
49 |
50 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quis officia unde praesentium dolorum nulla perferendis necessitatibus amet cumque temporibus dolor illo delectus doloremque excepturi quisquam sint, adipisci ipsam. Hic?

51 | 52 |
53 |
54 |
55 |
56 |
57 |
58 |
[col -3]
59 |
[col-9]
60 |
61 |
62 |
63 |
64 |
65 |
[col-6]
66 |
[col-6]
67 |
68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/css/bootstrap-reboot.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */ 6 | :root, 7 | [data-bs-theme=light] { 8 | --bs-blue: #0d6efd; 9 | --bs-indigo: #6610f2; 10 | --bs-purple: #6f42c1; 11 | --bs-pink: #d63384; 12 | --bs-red: #dc3545; 13 | --bs-orange: #fd7e14; 14 | --bs-yellow: #ffc107; 15 | --bs-green: #198754; 16 | --bs-teal: #20c997; 17 | --bs-cyan: #0dcaf0; 18 | --bs-black: #000; 19 | --bs-white: #fff; 20 | --bs-gray: #6c757d; 21 | --bs-gray-dark: #343a40; 22 | --bs-gray-100: #f8f9fa; 23 | --bs-gray-200: #e9ecef; 24 | --bs-gray-300: #dee2e6; 25 | --bs-gray-400: #ced4da; 26 | --bs-gray-500: #adb5bd; 27 | --bs-gray-600: #6c757d; 28 | --bs-gray-700: #495057; 29 | --bs-gray-800: #343a40; 30 | --bs-gray-900: #212529; 31 | --bs-primary: #0d6efd; 32 | --bs-secondary: #6c757d; 33 | --bs-success: #198754; 34 | --bs-info: #0dcaf0; 35 | --bs-warning: #ffc107; 36 | --bs-danger: #dc3545; 37 | --bs-light: #f8f9fa; 38 | --bs-dark: #212529; 39 | --bs-primary-rgb: 13, 110, 253; 40 | --bs-secondary-rgb: 108, 117, 125; 41 | --bs-success-rgb: 25, 135, 84; 42 | --bs-info-rgb: 13, 202, 240; 43 | --bs-warning-rgb: 255, 193, 7; 44 | --bs-danger-rgb: 220, 53, 69; 45 | --bs-light-rgb: 248, 249, 250; 46 | --bs-dark-rgb: 33, 37, 41; 47 | --bs-primary-text-emphasis: #052c65; 48 | --bs-secondary-text-emphasis: #2b2f32; 49 | --bs-success-text-emphasis: #0a3622; 50 | --bs-info-text-emphasis: #055160; 51 | --bs-warning-text-emphasis: #664d03; 52 | --bs-danger-text-emphasis: #58151c; 53 | --bs-light-text-emphasis: #495057; 54 | --bs-dark-text-emphasis: #495057; 55 | --bs-primary-bg-subtle: #cfe2ff; 56 | --bs-secondary-bg-subtle: #e2e3e5; 57 | --bs-success-bg-subtle: #d1e7dd; 58 | --bs-info-bg-subtle: #cff4fc; 59 | --bs-warning-bg-subtle: #fff3cd; 60 | --bs-danger-bg-subtle: #f8d7da; 61 | --bs-light-bg-subtle: #fcfcfd; 62 | --bs-dark-bg-subtle: #ced4da; 63 | --bs-primary-border-subtle: #9ec5fe; 64 | --bs-secondary-border-subtle: #c4c8cb; 65 | --bs-success-border-subtle: #a3cfbb; 66 | --bs-info-border-subtle: #9eeaf9; 67 | --bs-warning-border-subtle: #ffe69c; 68 | --bs-danger-border-subtle: #f1aeb5; 69 | --bs-light-border-subtle: #e9ecef; 70 | --bs-dark-border-subtle: #adb5bd; 71 | --bs-white-rgb: 255, 255, 255; 72 | --bs-black-rgb: 0, 0, 0; 73 | --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 74 | --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 75 | --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 76 | --bs-body-font-family: var(--bs-font-sans-serif); 77 | --bs-body-font-size: 1rem; 78 | --bs-body-font-weight: 400; 79 | --bs-body-line-height: 1.5; 80 | --bs-body-color: #212529; 81 | --bs-body-color-rgb: 33, 37, 41; 82 | --bs-body-bg: #fff; 83 | --bs-body-bg-rgb: 255, 255, 255; 84 | --bs-emphasis-color: #000; 85 | --bs-emphasis-color-rgb: 0, 0, 0; 86 | --bs-secondary-color: rgba(33, 37, 41, 0.75); 87 | --bs-secondary-color-rgb: 33, 37, 41; 88 | --bs-secondary-bg: #e9ecef; 89 | --bs-secondary-bg-rgb: 233, 236, 239; 90 | --bs-tertiary-color: rgba(33, 37, 41, 0.5); 91 | --bs-tertiary-color-rgb: 33, 37, 41; 92 | --bs-tertiary-bg: #f8f9fa; 93 | --bs-tertiary-bg-rgb: 248, 249, 250; 94 | --bs-heading-color: inherit; 95 | --bs-link-color: #0d6efd; 96 | --bs-link-color-rgb: 13, 110, 253; 97 | --bs-link-decoration: underline; 98 | --bs-link-hover-color: #0a58ca; 99 | --bs-link-hover-color-rgb: 10, 88, 202; 100 | --bs-code-color: #d63384; 101 | --bs-highlight-bg: #fff3cd; 102 | --bs-border-width: 1px; 103 | --bs-border-style: solid; 104 | --bs-border-color: #dee2e6; 105 | --bs-border-color-translucent: rgba(0, 0, 0, 0.175); 106 | --bs-border-radius: 0.375rem; 107 | --bs-border-radius-sm: 0.25rem; 108 | --bs-border-radius-lg: 0.5rem; 109 | --bs-border-radius-xl: 1rem; 110 | --bs-border-radius-xxl: 2rem; 111 | --bs-border-radius-2xl: var(--bs-border-radius-xxl); 112 | --bs-border-radius-pill: 50rem; 113 | --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 114 | --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 115 | --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); 116 | --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); 117 | --bs-focus-ring-width: 0.25rem; 118 | --bs-focus-ring-opacity: 0.25; 119 | --bs-focus-ring-color: rgba(13, 110, 253, 0.25); 120 | --bs-form-valid-color: #198754; 121 | --bs-form-valid-border-color: #198754; 122 | --bs-form-invalid-color: #dc3545; 123 | --bs-form-invalid-border-color: #dc3545; 124 | } 125 | 126 | [data-bs-theme=dark] { 127 | color-scheme: dark; 128 | --bs-body-color: #dee2e6; 129 | --bs-body-color-rgb: 222, 226, 230; 130 | --bs-body-bg: #212529; 131 | --bs-body-bg-rgb: 33, 37, 41; 132 | --bs-emphasis-color: #fff; 133 | --bs-emphasis-color-rgb: 255, 255, 255; 134 | --bs-secondary-color: rgba(222, 226, 230, 0.75); 135 | --bs-secondary-color-rgb: 222, 226, 230; 136 | --bs-secondary-bg: #343a40; 137 | --bs-secondary-bg-rgb: 52, 58, 64; 138 | --bs-tertiary-color: rgba(222, 226, 230, 0.5); 139 | --bs-tertiary-color-rgb: 222, 226, 230; 140 | --bs-tertiary-bg: #2b3035; 141 | --bs-tertiary-bg-rgb: 43, 48, 53; 142 | --bs-primary-text-emphasis: #6ea8fe; 143 | --bs-secondary-text-emphasis: #a7acb1; 144 | --bs-success-text-emphasis: #75b798; 145 | --bs-info-text-emphasis: #6edff6; 146 | --bs-warning-text-emphasis: #ffda6a; 147 | --bs-danger-text-emphasis: #ea868f; 148 | --bs-light-text-emphasis: #f8f9fa; 149 | --bs-dark-text-emphasis: #dee2e6; 150 | --bs-primary-bg-subtle: #031633; 151 | --bs-secondary-bg-subtle: #161719; 152 | --bs-success-bg-subtle: #051b11; 153 | --bs-info-bg-subtle: #032830; 154 | --bs-warning-bg-subtle: #332701; 155 | --bs-danger-bg-subtle: #2c0b0e; 156 | --bs-light-bg-subtle: #343a40; 157 | --bs-dark-bg-subtle: #1a1d20; 158 | --bs-primary-border-subtle: #084298; 159 | --bs-secondary-border-subtle: #41464b; 160 | --bs-success-border-subtle: #0f5132; 161 | --bs-info-border-subtle: #087990; 162 | --bs-warning-border-subtle: #997404; 163 | --bs-danger-border-subtle: #842029; 164 | --bs-light-border-subtle: #495057; 165 | --bs-dark-border-subtle: #343a40; 166 | --bs-heading-color: inherit; 167 | --bs-link-color: #6ea8fe; 168 | --bs-link-hover-color: #8bb9fe; 169 | --bs-link-color-rgb: 110, 168, 254; 170 | --bs-link-hover-color-rgb: 139, 185, 254; 171 | --bs-code-color: #e685b5; 172 | --bs-border-color: #495057; 173 | --bs-border-color-translucent: rgba(255, 255, 255, 0.15); 174 | --bs-form-valid-color: #75b798; 175 | --bs-form-valid-border-color: #75b798; 176 | --bs-form-invalid-color: #ea868f; 177 | --bs-form-invalid-border-color: #ea868f; 178 | } 179 | 180 | *, 181 | *::before, 182 | *::after { 183 | box-sizing: border-box; 184 | } 185 | 186 | @media (prefers-reduced-motion: no-preference) { 187 | :root { 188 | scroll-behavior: smooth; 189 | } 190 | } 191 | 192 | body { 193 | margin: 0; 194 | font-family: var(--bs-body-font-family); 195 | font-size: var(--bs-body-font-size); 196 | font-weight: var(--bs-body-font-weight); 197 | line-height: var(--bs-body-line-height); 198 | color: var(--bs-body-color); 199 | text-align: var(--bs-body-text-align); 200 | background-color: var(--bs-body-bg); 201 | -webkit-text-size-adjust: 100%; 202 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 203 | } 204 | 205 | hr { 206 | margin: 1rem 0; 207 | color: inherit; 208 | border: 0; 209 | border-top: var(--bs-border-width) solid; 210 | opacity: 0.25; 211 | } 212 | 213 | h6, h5, h4, h3, h2, h1 { 214 | margin-top: 0; 215 | margin-bottom: 0.5rem; 216 | font-weight: 500; 217 | line-height: 1.2; 218 | color: var(--bs-heading-color); 219 | } 220 | 221 | h1 { 222 | font-size: calc(1.375rem + 1.5vw); 223 | } 224 | @media (min-width: 1200px) { 225 | h1 { 226 | font-size: 2.5rem; 227 | } 228 | } 229 | 230 | h2 { 231 | font-size: calc(1.325rem + 0.9vw); 232 | } 233 | @media (min-width: 1200px) { 234 | h2 { 235 | font-size: 2rem; 236 | } 237 | } 238 | 239 | h3 { 240 | font-size: calc(1.3rem + 0.6vw); 241 | } 242 | @media (min-width: 1200px) { 243 | h3 { 244 | font-size: 1.75rem; 245 | } 246 | } 247 | 248 | h4 { 249 | font-size: calc(1.275rem + 0.3vw); 250 | } 251 | @media (min-width: 1200px) { 252 | h4 { 253 | font-size: 1.5rem; 254 | } 255 | } 256 | 257 | h5 { 258 | font-size: 1.25rem; 259 | } 260 | 261 | h6 { 262 | font-size: 1rem; 263 | } 264 | 265 | p { 266 | margin-top: 0; 267 | margin-bottom: 1rem; 268 | } 269 | 270 | abbr[title] { 271 | -webkit-text-decoration: underline dotted; 272 | text-decoration: underline dotted; 273 | cursor: help; 274 | -webkit-text-decoration-skip-ink: none; 275 | text-decoration-skip-ink: none; 276 | } 277 | 278 | address { 279 | margin-bottom: 1rem; 280 | font-style: normal; 281 | line-height: inherit; 282 | } 283 | 284 | ol, 285 | ul { 286 | padding-left: 2rem; 287 | } 288 | 289 | ol, 290 | ul, 291 | dl { 292 | margin-top: 0; 293 | margin-bottom: 1rem; 294 | } 295 | 296 | ol ol, 297 | ul ul, 298 | ol ul, 299 | ul ol { 300 | margin-bottom: 0; 301 | } 302 | 303 | dt { 304 | font-weight: 700; 305 | } 306 | 307 | dd { 308 | margin-bottom: 0.5rem; 309 | margin-left: 0; 310 | } 311 | 312 | blockquote { 313 | margin: 0 0 1rem; 314 | } 315 | 316 | b, 317 | strong { 318 | font-weight: bolder; 319 | } 320 | 321 | small { 322 | font-size: 0.875em; 323 | } 324 | 325 | mark { 326 | padding: 0.1875em; 327 | background-color: var(--bs-highlight-bg); 328 | } 329 | 330 | sub, 331 | sup { 332 | position: relative; 333 | font-size: 0.75em; 334 | line-height: 0; 335 | vertical-align: baseline; 336 | } 337 | 338 | sub { 339 | bottom: -0.25em; 340 | } 341 | 342 | sup { 343 | top: -0.5em; 344 | } 345 | 346 | a { 347 | color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); 348 | text-decoration: underline; 349 | } 350 | a:hover { 351 | --bs-link-color-rgb: var(--bs-link-hover-color-rgb); 352 | } 353 | 354 | a:not([href]):not([class]), a:not([href]):not([class]):hover { 355 | color: inherit; 356 | text-decoration: none; 357 | } 358 | 359 | pre, 360 | code, 361 | kbd, 362 | samp { 363 | font-family: var(--bs-font-monospace); 364 | font-size: 1em; 365 | } 366 | 367 | pre { 368 | display: block; 369 | margin-top: 0; 370 | margin-bottom: 1rem; 371 | overflow: auto; 372 | font-size: 0.875em; 373 | } 374 | pre code { 375 | font-size: inherit; 376 | color: inherit; 377 | word-break: normal; 378 | } 379 | 380 | code { 381 | font-size: 0.875em; 382 | color: var(--bs-code-color); 383 | word-wrap: break-word; 384 | } 385 | a > code { 386 | color: inherit; 387 | } 388 | 389 | kbd { 390 | padding: 0.1875rem 0.375rem; 391 | font-size: 0.875em; 392 | color: var(--bs-body-bg); 393 | background-color: var(--bs-body-color); 394 | border-radius: 0.25rem; 395 | } 396 | kbd kbd { 397 | padding: 0; 398 | font-size: 1em; 399 | } 400 | 401 | figure { 402 | margin: 0 0 1rem; 403 | } 404 | 405 | img, 406 | svg { 407 | vertical-align: middle; 408 | } 409 | 410 | table { 411 | caption-side: bottom; 412 | border-collapse: collapse; 413 | } 414 | 415 | caption { 416 | padding-top: 0.5rem; 417 | padding-bottom: 0.5rem; 418 | color: var(--bs-secondary-color); 419 | text-align: left; 420 | } 421 | 422 | th { 423 | text-align: inherit; 424 | text-align: -webkit-match-parent; 425 | } 426 | 427 | thead, 428 | tbody, 429 | tfoot, 430 | tr, 431 | td, 432 | th { 433 | border-color: inherit; 434 | border-style: solid; 435 | border-width: 0; 436 | } 437 | 438 | label { 439 | display: inline-block; 440 | } 441 | 442 | button { 443 | border-radius: 0; 444 | } 445 | 446 | button:focus:not(:focus-visible) { 447 | outline: 0; 448 | } 449 | 450 | input, 451 | button, 452 | select, 453 | optgroup, 454 | textarea { 455 | margin: 0; 456 | font-family: inherit; 457 | font-size: inherit; 458 | line-height: inherit; 459 | } 460 | 461 | button, 462 | select { 463 | text-transform: none; 464 | } 465 | 466 | [role=button] { 467 | cursor: pointer; 468 | } 469 | 470 | select { 471 | word-wrap: normal; 472 | } 473 | select:disabled { 474 | opacity: 1; 475 | } 476 | 477 | [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { 478 | display: none !important; 479 | } 480 | 481 | button, 482 | [type=button], 483 | [type=reset], 484 | [type=submit] { 485 | -webkit-appearance: button; 486 | } 487 | button:not(:disabled), 488 | [type=button]:not(:disabled), 489 | [type=reset]:not(:disabled), 490 | [type=submit]:not(:disabled) { 491 | cursor: pointer; 492 | } 493 | 494 | ::-moz-focus-inner { 495 | padding: 0; 496 | border-style: none; 497 | } 498 | 499 | textarea { 500 | resize: vertical; 501 | } 502 | 503 | fieldset { 504 | min-width: 0; 505 | padding: 0; 506 | margin: 0; 507 | border: 0; 508 | } 509 | 510 | legend { 511 | float: left; 512 | width: 100%; 513 | padding: 0; 514 | margin-bottom: 0.5rem; 515 | font-size: calc(1.275rem + 0.3vw); 516 | line-height: inherit; 517 | } 518 | @media (min-width: 1200px) { 519 | legend { 520 | font-size: 1.5rem; 521 | } 522 | } 523 | legend + * { 524 | clear: left; 525 | } 526 | 527 | ::-webkit-datetime-edit-fields-wrapper, 528 | ::-webkit-datetime-edit-text, 529 | ::-webkit-datetime-edit-minute, 530 | ::-webkit-datetime-edit-hour-field, 531 | ::-webkit-datetime-edit-day-field, 532 | ::-webkit-datetime-edit-month-field, 533 | ::-webkit-datetime-edit-year-field { 534 | padding: 0; 535 | } 536 | 537 | ::-webkit-inner-spin-button { 538 | height: auto; 539 | } 540 | 541 | [type=search] { 542 | -webkit-appearance: textfield; 543 | outline-offset: -2px; 544 | } 545 | 546 | /* rtl:raw: 547 | [type="tel"], 548 | [type="url"], 549 | [type="email"], 550 | [type="number"] { 551 | direction: ltr; 552 | } 553 | */ 554 | ::-webkit-search-decoration { 555 | -webkit-appearance: none; 556 | } 557 | 558 | ::-webkit-color-swatch-wrapper { 559 | padding: 0; 560 | } 561 | 562 | ::-webkit-file-upload-button { 563 | font: inherit; 564 | -webkit-appearance: button; 565 | } 566 | 567 | ::file-selector-button { 568 | font: inherit; 569 | -webkit-appearance: button; 570 | } 571 | 572 | output { 573 | display: inline-block; 574 | } 575 | 576 | iframe { 577 | border: 0; 578 | } 579 | 580 | summary { 581 | display: list-item; 582 | cursor: pointer; 583 | } 584 | 585 | progress { 586 | vertical-align: baseline; 587 | } 588 | 589 | [hidden] { 590 | display: none !important; 591 | } 592 | 593 | /*# sourceMappingURL=bootstrap-reboot.css.map */ -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/css/bootstrap-reboot.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important} 6 | /*# sourceMappingURL=bootstrap-reboot.min.css.map */ -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/css/bootstrap-reboot.rtl.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */ 6 | :root, 7 | [data-bs-theme=light] { 8 | --bs-blue: #0d6efd; 9 | --bs-indigo: #6610f2; 10 | --bs-purple: #6f42c1; 11 | --bs-pink: #d63384; 12 | --bs-red: #dc3545; 13 | --bs-orange: #fd7e14; 14 | --bs-yellow: #ffc107; 15 | --bs-green: #198754; 16 | --bs-teal: #20c997; 17 | --bs-cyan: #0dcaf0; 18 | --bs-black: #000; 19 | --bs-white: #fff; 20 | --bs-gray: #6c757d; 21 | --bs-gray-dark: #343a40; 22 | --bs-gray-100: #f8f9fa; 23 | --bs-gray-200: #e9ecef; 24 | --bs-gray-300: #dee2e6; 25 | --bs-gray-400: #ced4da; 26 | --bs-gray-500: #adb5bd; 27 | --bs-gray-600: #6c757d; 28 | --bs-gray-700: #495057; 29 | --bs-gray-800: #343a40; 30 | --bs-gray-900: #212529; 31 | --bs-primary: #0d6efd; 32 | --bs-secondary: #6c757d; 33 | --bs-success: #198754; 34 | --bs-info: #0dcaf0; 35 | --bs-warning: #ffc107; 36 | --bs-danger: #dc3545; 37 | --bs-light: #f8f9fa; 38 | --bs-dark: #212529; 39 | --bs-primary-rgb: 13, 110, 253; 40 | --bs-secondary-rgb: 108, 117, 125; 41 | --bs-success-rgb: 25, 135, 84; 42 | --bs-info-rgb: 13, 202, 240; 43 | --bs-warning-rgb: 255, 193, 7; 44 | --bs-danger-rgb: 220, 53, 69; 45 | --bs-light-rgb: 248, 249, 250; 46 | --bs-dark-rgb: 33, 37, 41; 47 | --bs-primary-text-emphasis: #052c65; 48 | --bs-secondary-text-emphasis: #2b2f32; 49 | --bs-success-text-emphasis: #0a3622; 50 | --bs-info-text-emphasis: #055160; 51 | --bs-warning-text-emphasis: #664d03; 52 | --bs-danger-text-emphasis: #58151c; 53 | --bs-light-text-emphasis: #495057; 54 | --bs-dark-text-emphasis: #495057; 55 | --bs-primary-bg-subtle: #cfe2ff; 56 | --bs-secondary-bg-subtle: #e2e3e5; 57 | --bs-success-bg-subtle: #d1e7dd; 58 | --bs-info-bg-subtle: #cff4fc; 59 | --bs-warning-bg-subtle: #fff3cd; 60 | --bs-danger-bg-subtle: #f8d7da; 61 | --bs-light-bg-subtle: #fcfcfd; 62 | --bs-dark-bg-subtle: #ced4da; 63 | --bs-primary-border-subtle: #9ec5fe; 64 | --bs-secondary-border-subtle: #c4c8cb; 65 | --bs-success-border-subtle: #a3cfbb; 66 | --bs-info-border-subtle: #9eeaf9; 67 | --bs-warning-border-subtle: #ffe69c; 68 | --bs-danger-border-subtle: #f1aeb5; 69 | --bs-light-border-subtle: #e9ecef; 70 | --bs-dark-border-subtle: #adb5bd; 71 | --bs-white-rgb: 255, 255, 255; 72 | --bs-black-rgb: 0, 0, 0; 73 | --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 74 | --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 75 | --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 76 | --bs-body-font-family: var(--bs-font-sans-serif); 77 | --bs-body-font-size: 1rem; 78 | --bs-body-font-weight: 400; 79 | --bs-body-line-height: 1.5; 80 | --bs-body-color: #212529; 81 | --bs-body-color-rgb: 33, 37, 41; 82 | --bs-body-bg: #fff; 83 | --bs-body-bg-rgb: 255, 255, 255; 84 | --bs-emphasis-color: #000; 85 | --bs-emphasis-color-rgb: 0, 0, 0; 86 | --bs-secondary-color: rgba(33, 37, 41, 0.75); 87 | --bs-secondary-color-rgb: 33, 37, 41; 88 | --bs-secondary-bg: #e9ecef; 89 | --bs-secondary-bg-rgb: 233, 236, 239; 90 | --bs-tertiary-color: rgba(33, 37, 41, 0.5); 91 | --bs-tertiary-color-rgb: 33, 37, 41; 92 | --bs-tertiary-bg: #f8f9fa; 93 | --bs-tertiary-bg-rgb: 248, 249, 250; 94 | --bs-heading-color: inherit; 95 | --bs-link-color: #0d6efd; 96 | --bs-link-color-rgb: 13, 110, 253; 97 | --bs-link-decoration: underline; 98 | --bs-link-hover-color: #0a58ca; 99 | --bs-link-hover-color-rgb: 10, 88, 202; 100 | --bs-code-color: #d63384; 101 | --bs-highlight-bg: #fff3cd; 102 | --bs-border-width: 1px; 103 | --bs-border-style: solid; 104 | --bs-border-color: #dee2e6; 105 | --bs-border-color-translucent: rgba(0, 0, 0, 0.175); 106 | --bs-border-radius: 0.375rem; 107 | --bs-border-radius-sm: 0.25rem; 108 | --bs-border-radius-lg: 0.5rem; 109 | --bs-border-radius-xl: 1rem; 110 | --bs-border-radius-xxl: 2rem; 111 | --bs-border-radius-2xl: var(--bs-border-radius-xxl); 112 | --bs-border-radius-pill: 50rem; 113 | --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 114 | --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 115 | --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); 116 | --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); 117 | --bs-focus-ring-width: 0.25rem; 118 | --bs-focus-ring-opacity: 0.25; 119 | --bs-focus-ring-color: rgba(13, 110, 253, 0.25); 120 | --bs-form-valid-color: #198754; 121 | --bs-form-valid-border-color: #198754; 122 | --bs-form-invalid-color: #dc3545; 123 | --bs-form-invalid-border-color: #dc3545; 124 | } 125 | 126 | [data-bs-theme=dark] { 127 | color-scheme: dark; 128 | --bs-body-color: #dee2e6; 129 | --bs-body-color-rgb: 222, 226, 230; 130 | --bs-body-bg: #212529; 131 | --bs-body-bg-rgb: 33, 37, 41; 132 | --bs-emphasis-color: #fff; 133 | --bs-emphasis-color-rgb: 255, 255, 255; 134 | --bs-secondary-color: rgba(222, 226, 230, 0.75); 135 | --bs-secondary-color-rgb: 222, 226, 230; 136 | --bs-secondary-bg: #343a40; 137 | --bs-secondary-bg-rgb: 52, 58, 64; 138 | --bs-tertiary-color: rgba(222, 226, 230, 0.5); 139 | --bs-tertiary-color-rgb: 222, 226, 230; 140 | --bs-tertiary-bg: #2b3035; 141 | --bs-tertiary-bg-rgb: 43, 48, 53; 142 | --bs-primary-text-emphasis: #6ea8fe; 143 | --bs-secondary-text-emphasis: #a7acb1; 144 | --bs-success-text-emphasis: #75b798; 145 | --bs-info-text-emphasis: #6edff6; 146 | --bs-warning-text-emphasis: #ffda6a; 147 | --bs-danger-text-emphasis: #ea868f; 148 | --bs-light-text-emphasis: #f8f9fa; 149 | --bs-dark-text-emphasis: #dee2e6; 150 | --bs-primary-bg-subtle: #031633; 151 | --bs-secondary-bg-subtle: #161719; 152 | --bs-success-bg-subtle: #051b11; 153 | --bs-info-bg-subtle: #032830; 154 | --bs-warning-bg-subtle: #332701; 155 | --bs-danger-bg-subtle: #2c0b0e; 156 | --bs-light-bg-subtle: #343a40; 157 | --bs-dark-bg-subtle: #1a1d20; 158 | --bs-primary-border-subtle: #084298; 159 | --bs-secondary-border-subtle: #41464b; 160 | --bs-success-border-subtle: #0f5132; 161 | --bs-info-border-subtle: #087990; 162 | --bs-warning-border-subtle: #997404; 163 | --bs-danger-border-subtle: #842029; 164 | --bs-light-border-subtle: #495057; 165 | --bs-dark-border-subtle: #343a40; 166 | --bs-heading-color: inherit; 167 | --bs-link-color: #6ea8fe; 168 | --bs-link-hover-color: #8bb9fe; 169 | --bs-link-color-rgb: 110, 168, 254; 170 | --bs-link-hover-color-rgb: 139, 185, 254; 171 | --bs-code-color: #e685b5; 172 | --bs-border-color: #495057; 173 | --bs-border-color-translucent: rgba(255, 255, 255, 0.15); 174 | --bs-form-valid-color: #75b798; 175 | --bs-form-valid-border-color: #75b798; 176 | --bs-form-invalid-color: #ea868f; 177 | --bs-form-invalid-border-color: #ea868f; 178 | } 179 | 180 | *, 181 | *::before, 182 | *::after { 183 | box-sizing: border-box; 184 | } 185 | 186 | @media (prefers-reduced-motion: no-preference) { 187 | :root { 188 | scroll-behavior: smooth; 189 | } 190 | } 191 | 192 | body { 193 | margin: 0; 194 | font-family: var(--bs-body-font-family); 195 | font-size: var(--bs-body-font-size); 196 | font-weight: var(--bs-body-font-weight); 197 | line-height: var(--bs-body-line-height); 198 | color: var(--bs-body-color); 199 | text-align: var(--bs-body-text-align); 200 | background-color: var(--bs-body-bg); 201 | -webkit-text-size-adjust: 100%; 202 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 203 | } 204 | 205 | hr { 206 | margin: 1rem 0; 207 | color: inherit; 208 | border: 0; 209 | border-top: var(--bs-border-width) solid; 210 | opacity: 0.25; 211 | } 212 | 213 | h6, h5, h4, h3, h2, h1 { 214 | margin-top: 0; 215 | margin-bottom: 0.5rem; 216 | font-weight: 500; 217 | line-height: 1.2; 218 | color: var(--bs-heading-color); 219 | } 220 | 221 | h1 { 222 | font-size: calc(1.375rem + 1.5vw); 223 | } 224 | @media (min-width: 1200px) { 225 | h1 { 226 | font-size: 2.5rem; 227 | } 228 | } 229 | 230 | h2 { 231 | font-size: calc(1.325rem + 0.9vw); 232 | } 233 | @media (min-width: 1200px) { 234 | h2 { 235 | font-size: 2rem; 236 | } 237 | } 238 | 239 | h3 { 240 | font-size: calc(1.3rem + 0.6vw); 241 | } 242 | @media (min-width: 1200px) { 243 | h3 { 244 | font-size: 1.75rem; 245 | } 246 | } 247 | 248 | h4 { 249 | font-size: calc(1.275rem + 0.3vw); 250 | } 251 | @media (min-width: 1200px) { 252 | h4 { 253 | font-size: 1.5rem; 254 | } 255 | } 256 | 257 | h5 { 258 | font-size: 1.25rem; 259 | } 260 | 261 | h6 { 262 | font-size: 1rem; 263 | } 264 | 265 | p { 266 | margin-top: 0; 267 | margin-bottom: 1rem; 268 | } 269 | 270 | abbr[title] { 271 | -webkit-text-decoration: underline dotted; 272 | text-decoration: underline dotted; 273 | cursor: help; 274 | -webkit-text-decoration-skip-ink: none; 275 | text-decoration-skip-ink: none; 276 | } 277 | 278 | address { 279 | margin-bottom: 1rem; 280 | font-style: normal; 281 | line-height: inherit; 282 | } 283 | 284 | ol, 285 | ul { 286 | padding-right: 2rem; 287 | } 288 | 289 | ol, 290 | ul, 291 | dl { 292 | margin-top: 0; 293 | margin-bottom: 1rem; 294 | } 295 | 296 | ol ol, 297 | ul ul, 298 | ol ul, 299 | ul ol { 300 | margin-bottom: 0; 301 | } 302 | 303 | dt { 304 | font-weight: 700; 305 | } 306 | 307 | dd { 308 | margin-bottom: 0.5rem; 309 | margin-right: 0; 310 | } 311 | 312 | blockquote { 313 | margin: 0 0 1rem; 314 | } 315 | 316 | b, 317 | strong { 318 | font-weight: bolder; 319 | } 320 | 321 | small { 322 | font-size: 0.875em; 323 | } 324 | 325 | mark { 326 | padding: 0.1875em; 327 | background-color: var(--bs-highlight-bg); 328 | } 329 | 330 | sub, 331 | sup { 332 | position: relative; 333 | font-size: 0.75em; 334 | line-height: 0; 335 | vertical-align: baseline; 336 | } 337 | 338 | sub { 339 | bottom: -0.25em; 340 | } 341 | 342 | sup { 343 | top: -0.5em; 344 | } 345 | 346 | a { 347 | color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); 348 | text-decoration: underline; 349 | } 350 | a:hover { 351 | --bs-link-color-rgb: var(--bs-link-hover-color-rgb); 352 | } 353 | 354 | a:not([href]):not([class]), a:not([href]):not([class]):hover { 355 | color: inherit; 356 | text-decoration: none; 357 | } 358 | 359 | pre, 360 | code, 361 | kbd, 362 | samp { 363 | font-family: var(--bs-font-monospace); 364 | font-size: 1em; 365 | } 366 | 367 | pre { 368 | display: block; 369 | margin-top: 0; 370 | margin-bottom: 1rem; 371 | overflow: auto; 372 | font-size: 0.875em; 373 | } 374 | pre code { 375 | font-size: inherit; 376 | color: inherit; 377 | word-break: normal; 378 | } 379 | 380 | code { 381 | font-size: 0.875em; 382 | color: var(--bs-code-color); 383 | word-wrap: break-word; 384 | } 385 | a > code { 386 | color: inherit; 387 | } 388 | 389 | kbd { 390 | padding: 0.1875rem 0.375rem; 391 | font-size: 0.875em; 392 | color: var(--bs-body-bg); 393 | background-color: var(--bs-body-color); 394 | border-radius: 0.25rem; 395 | } 396 | kbd kbd { 397 | padding: 0; 398 | font-size: 1em; 399 | } 400 | 401 | figure { 402 | margin: 0 0 1rem; 403 | } 404 | 405 | img, 406 | svg { 407 | vertical-align: middle; 408 | } 409 | 410 | table { 411 | caption-side: bottom; 412 | border-collapse: collapse; 413 | } 414 | 415 | caption { 416 | padding-top: 0.5rem; 417 | padding-bottom: 0.5rem; 418 | color: var(--bs-secondary-color); 419 | text-align: right; 420 | } 421 | 422 | th { 423 | text-align: inherit; 424 | text-align: -webkit-match-parent; 425 | } 426 | 427 | thead, 428 | tbody, 429 | tfoot, 430 | tr, 431 | td, 432 | th { 433 | border-color: inherit; 434 | border-style: solid; 435 | border-width: 0; 436 | } 437 | 438 | label { 439 | display: inline-block; 440 | } 441 | 442 | button { 443 | border-radius: 0; 444 | } 445 | 446 | button:focus:not(:focus-visible) { 447 | outline: 0; 448 | } 449 | 450 | input, 451 | button, 452 | select, 453 | optgroup, 454 | textarea { 455 | margin: 0; 456 | font-family: inherit; 457 | font-size: inherit; 458 | line-height: inherit; 459 | } 460 | 461 | button, 462 | select { 463 | text-transform: none; 464 | } 465 | 466 | [role=button] { 467 | cursor: pointer; 468 | } 469 | 470 | select { 471 | word-wrap: normal; 472 | } 473 | select:disabled { 474 | opacity: 1; 475 | } 476 | 477 | [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { 478 | display: none !important; 479 | } 480 | 481 | button, 482 | [type=button], 483 | [type=reset], 484 | [type=submit] { 485 | -webkit-appearance: button; 486 | } 487 | button:not(:disabled), 488 | [type=button]:not(:disabled), 489 | [type=reset]:not(:disabled), 490 | [type=submit]:not(:disabled) { 491 | cursor: pointer; 492 | } 493 | 494 | ::-moz-focus-inner { 495 | padding: 0; 496 | border-style: none; 497 | } 498 | 499 | textarea { 500 | resize: vertical; 501 | } 502 | 503 | fieldset { 504 | min-width: 0; 505 | padding: 0; 506 | margin: 0; 507 | border: 0; 508 | } 509 | 510 | legend { 511 | float: right; 512 | width: 100%; 513 | padding: 0; 514 | margin-bottom: 0.5rem; 515 | font-size: calc(1.275rem + 0.3vw); 516 | line-height: inherit; 517 | } 518 | @media (min-width: 1200px) { 519 | legend { 520 | font-size: 1.5rem; 521 | } 522 | } 523 | legend + * { 524 | clear: right; 525 | } 526 | 527 | ::-webkit-datetime-edit-fields-wrapper, 528 | ::-webkit-datetime-edit-text, 529 | ::-webkit-datetime-edit-minute, 530 | ::-webkit-datetime-edit-hour-field, 531 | ::-webkit-datetime-edit-day-field, 532 | ::-webkit-datetime-edit-month-field, 533 | ::-webkit-datetime-edit-year-field { 534 | padding: 0; 535 | } 536 | 537 | ::-webkit-inner-spin-button { 538 | height: auto; 539 | } 540 | 541 | [type=search] { 542 | -webkit-appearance: textfield; 543 | outline-offset: -2px; 544 | } 545 | 546 | [type="tel"], 547 | [type="url"], 548 | [type="email"], 549 | [type="number"] { 550 | direction: ltr; 551 | } 552 | ::-webkit-search-decoration { 553 | -webkit-appearance: none; 554 | } 555 | 556 | ::-webkit-color-swatch-wrapper { 557 | padding: 0; 558 | } 559 | 560 | ::-webkit-file-upload-button { 561 | font: inherit; 562 | -webkit-appearance: button; 563 | } 564 | 565 | ::file-selector-button { 566 | font: inherit; 567 | -webkit-appearance: button; 568 | } 569 | 570 | output { 571 | display: inline-block; 572 | } 573 | 574 | iframe { 575 | border: 0; 576 | } 577 | 578 | summary { 579 | display: list-item; 580 | cursor: pointer; 581 | } 582 | 583 | progress { 584 | vertical-align: baseline; 585 | } 586 | 587 | [hidden] { 588 | display: none !important; 589 | } 590 | /*# sourceMappingURL=bootstrap-reboot.rtl.css.map */ -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/css/bootstrap-reboot.rtl.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2023 The Bootstrap Authors 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 5 | */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-right:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-right:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:right}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:right;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:right}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=email],[type=number],[type=tel],[type=url]{direction:ltr}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important} 6 | /*# sourceMappingURL=bootstrap-reboot.rtl.min.css.map */ -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/p1.css: -------------------------------------------------------------------------------- 1 | .navbar-brand{ 2 | font-family: 'Times New Roman', Times, serif; 3 | } 4 | img ,.slide{ 5 | width:100%; 6 | height:450px; 7 | } 8 | .ww{ 9 | font-family: 'Times New Roman', Times, serif; 10 | } 11 | -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/p1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 50 | 51 | 90 | 91 |
92 |

Order Your Food Now !!

93 | 94 |
95 |
96 | ... 97 |
98 |
Card title
99 |

Some quick example text to build on the card title and make up the bulk of the card's content.

100 | Go somewhere 101 |
102 |
103 |
104 | ... 105 |
106 |
Card title
107 |

Some quick example text to build on the card title and make up the bulk of the card's content.

108 | Go somewhere 109 |
110 |
111 |
112 |
113 | ... 114 |
115 |
Card title
116 |

Some quick example text to build on the card title and make up the bulk of the card's content.

117 | Go somewhere 118 |
119 |
120 |
121 | 122 |
123 |
124 |
125 | ... 126 |
127 |
Card title
128 |

Some quick example text to build on the card title and make up the bulk of the card's content.

129 | Go somewhere 130 |
131 |
132 |
133 | ... 134 |
135 |
Card title
136 |

Some quick example text to build on the card title and make up the bulk of the card's content.

137 | Go somewhere 138 |
139 |
140 |
141 | ... 142 |
143 |
Card title
144 |

Some quick example text to build on the card title and make up the bulk of the card's content.

145 | Go somewhere 146 |
147 |
148 | 149 |
150 | 151 |
152 | 153 | 154 | 155 | 156 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/bootstrap course/tryout for bootsrap p1/pic1.jpg -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/bootstrap course/tryout for bootsrap p1/pic2.jpg -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/pic3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/bootstrap course/tryout for bootsrap p1/pic3.jpg -------------------------------------------------------------------------------- /bootstrap course/tryout for bootsrap p1/pic4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SID41214/Web_development_exercises/dcd7a57f04ed1e0d250871027a75672328f3eebf/bootstrap course/tryout for bootsrap p1/pic4.jpg --------------------------------------------------------------------------------