├── 00_Question And Answers
    ├── Easy
    │   ├── Add up the Numbers from a Single Number.js
    │   ├── Area of a Triangle.js
    │   ├── Bitwise Operations.js
    │   ├── Buggy Code.js
    │   ├── Convert Age to Days.js
    │   ├── Convert Hours into Seconds.js
    │   ├── Convert Minutes into Seconds.js
    │   ├── Power Calculator.js
    │   ├── Return the First Element in an Array.js
    │   ├── Return the Next Number from the Integer Passed.js
    │   └── Return the Sum of Two Numbers.js
    ├── Medium
    │   ├── A Redundant Function.js
    │   ├── Burglary Series.js
    │   ├── Derivative of a Function.js
    │   ├── Find Number of Digits in Number.js
    │   ├── Perimeters with a Catch.js
    │   ├── Right Shift by Division.js
    │   ├── sample.html
    │   └── sample.js
    └── hard
    │   ├── Days Between Two Dates.js
    │   ├── Length of a Nested Array.js
    │   ├── Number of Boomerangs.js
    │   ├── OddishEvenish.js
    │   ├── Seven Boom.js
    │   └── Tower of Hanoi.js
├── Block_inline_elements
    └── b.html
├── Landing screen
    ├── 1.js
    ├── 110.jpg
    ├── 111.jpg
    ├── landing.css
    ├── landing.html
    ├── large.jpg
    └── small.jpg
├── README.md
├── bank_balance
    ├── bank.css
    ├── bank.html
    └── bank.js
├── 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
├── flexbox
    ├── f.css
    └── f.html
├── flexbox_landingpage
    ├── fl.css
    ├── fl.html
    ├── logo.jpg
    ├── pic.jpg
    └── pic2.jpg
├── js
├── js_tasks
    ├── 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
├── margin_vs_padding
    ├── m.css
    ├── m.html
    └── path.jpg
├── specificity
    ├── sp.css
    ├── sp.html
    └── sp.js
├── 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
├── verth.html
└── verth.js


/00_Question And Answers/Easy/Add up the Numbers from a Single Number.js:
--------------------------------------------------------------------------------
 1 | // Create a function that takes a number as an argument. Add up all the numbers from 1 to the number you passed to the function. For example, if the input is 4 then your function should return 10 because 1 + 2 + 3 + 4 = 10.
 2 | function addup(x){
 3 |     let sum=0;
 4 |     for(i=1;i<=x;i++){
 5 |         sum+=i;
 6 | 
 7 |     }
 8 |     console.log(sum);
 9 | }
10 | addup(4);
11 | addup(13);
12 | addup(600);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Area of a Triangle.js:
--------------------------------------------------------------------------------
1 | // Write a function that takes the base and height of a triangle and return its area.
2 | function triarea(base,height){
3 |     let area= (base*height)/2;
4 |     console.log(area);
5 | }
6 | triarea(3,2);
7 | triarea(7,4);
8 | triarea(10,10);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Bitwise Operations.js:
--------------------------------------------------------------------------------
 1 | function and(a,b){
 2 |     let newand=a&b;
 3 |     console.log(newand);
 4 | }
 5 | function or(a,b){
 6 |     let newor=a|b;
 7 |     console.log(newor);
 8 | }
 9 | function xor(a,b){
10 |     let newxor=a^b;
11 |     console.log(newxor);
12 | }
13 | and(7,12);
14 | or(7,12);
15 | xor(7,12);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Buggy Code.js:
--------------------------------------------------------------------------------
1 | function cube(x){
2 |     let cubes= x**3;
3 |     console.log(cubes);
4 | }
5 | cube(3);
6 | cube(5);
7 | cube(10);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Convert Age to Days.js:
--------------------------------------------------------------------------------
1 | // Create a function that takes the age in years and returns the age in days
2 | function calcage(x){
3 |     let days=(x*365);
4 |     console.log(days);
5 | }
6 | calcage(65);
7 | calcage(0);
8 | calcage(20);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Convert Hours into Seconds.js:
--------------------------------------------------------------------------------
1 | function intoseconds(x){
2 |     let seconds=x*3600;
3 |     console.log(seconds);
4 | }
5 | intoseconds(2);
6 | intoseconds(10);
7 | intoseconds(24);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Convert Minutes into Seconds.js:
--------------------------------------------------------------------------------
1 | // Write a function that takes an integer minutes and converts it to seconds.
2 | function convert(x){
3 |     let seconds= x*60;
4 |     console.log(x+" in seconds is : "+seconds);
5 | }
6 | convert(5)
7 | convert(3)
8 | convert(2)


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Power Calculator.js:
--------------------------------------------------------------------------------
1 | // Create a function that takes voltage and current and returns the calculated power.
2 | function circuitpower(voltage,current){
3 |     let power=voltage*current;
4 |     console.log(power);
5 | }
6 | circuitpower(230,10);
7 | circuitpower(110,3);
8 | circuitpower(480,20);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Return the First Element in an Array.js:
--------------------------------------------------------------------------------
1 | // Create a function that takes an array containing only numbers and return the first element.
2 | function getFirstElement(arr) {
3 |     let first=arr[0];
4 |     console.log(first);
5 | }
6 | getFirstElement([1,2,3]);
7 | getFirstElement([80,5,100]);
8 | getFirstElement([-500,0,500]);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Return the Next Number from the Integer Passed.js:
--------------------------------------------------------------------------------
1 | // Create a function that takes a number as an argument, increments the number by +1 and returns the result.
2 | function addition(x){
3 |     let increment= x+ 1;
4 |     console.log(increment);
5 | }
6 | addition(0);
7 | addition(9);
8 | addition(-3);


--------------------------------------------------------------------------------
/00_Question And Answers/Easy/Return the Sum of Two Numbers.js:
--------------------------------------------------------------------------------
1 | function addition(x,y){
2 |     let sum = x +y;
3 |     console.log(sum);
4 |    
5 | }
6 | addition(3,2);
7 | addition(-3,-6);
8 | addition(7,3);
9 | 


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/A Redundant Function.js:
--------------------------------------------------------------------------------
1 | // Write a function redundant that takes in a string str and returns a function that returns str.
2 | function redundant(str) {
3 |  return function(){
4 |     return `"`+ str+`"`;
5 | }
6 | }
7 | const f1=redundant("apple");
8 | console.log(f1());


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/Burglary Series.js:
--------------------------------------------------------------------------------
1 | function name(obj,petname,value){
2 |     const newobj={...obj,[petname]:value};
3 |     return newobj;
4 | }
5 | console.log(name({piano:500}, "Brutus", 300));
6 | 


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/Derivative of a Function.js:
--------------------------------------------------------------------------------
1 | function derivative(b,m){
2 |     let out=b* Math.pow(m,b-1);
3 |     return out;
4 | 
5 | }
6 | console.log(derivative(1,4));
7 | console.log(derivative(3,-2));
8 | console.log(derivative(4,-3));
9 | 


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/Find Number of Digits in Number.js:
--------------------------------------------------------------------------------
 1 | function numberr(x){
 2 |     if(x== 0){ return 1;}
 3 |    let count =0;
 4 |    while (x!=0){
 5 |     count ++;
 6 |     x=Math.floor(x/10);
 7 |    }
 8 |     return count;
 9 |    
10 | }
11 | console.log(numberr(1000));
12 | console.log(numberr(12));
13 | console.log(numberr(1305981031));
14 | console.log(numberr(0));
15 | console.log(numberr(1));
16 | console.log(numberr(1111));


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/Perimeters with a Catch.js:
--------------------------------------------------------------------------------
1 | function perimeter(shape,num){
2 |     return (shape =="s" && num*4)||(shape =="c" && num *6.28)
3 | 
4 | }
5 | console.log(perimeter("s",7));
6 | console.log(perimeter("c",4));
7 | console.log(perimeter("c",9));


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/Right Shift by Division.js:
--------------------------------------------------------------------------------
1 | function shift(a,b){
2 |     return Math.floor(a/Math.pow(2,b));
3 | }
4 | console.log(shift(80,3));
5 | console.log(shift(-24,2));
6 | console.log(shift(-5,2));
7 | console.log(shift(4666,6));
8 | console.log(shift(3777,6));


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/sample.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <script src="sample.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/00_Question And Answers/Medium/sample.js:
--------------------------------------------------------------------------------
 1 | // var i,j,k;
 2 | // for(i=5;i>=1;i--){
 3 | //     for(j=1;j<=5-i;j++){
 4 | //         document.write("&nbsp")
 5 | //     }
 6 | //     for(k=1;k<=2*i-1;k++){
 7 | //         document.write(k)
 8 | //     }
 9 | //     document.writeln("<br>");
10 | // }
11 | 
12 | // function string(str){
13 | //     let newst=str.split(" ");
14 | //     let out=newst.map(newst=>{ return ( newst[0].toUpperCase()+ newst.slice(1));})
15 | //     let finalout=out.join(" ");
16 | //     console.log(finalout);
17 | // }
18 | // string("how are you?");
19 | var i,j,k;
20 | for(i=1;i<=5;i++){
21 |     
22 |     
23 |     for(k=0;k<i;k++){
24 |         if(i==5||k==0||k==i-1){
25 |         document.write("*")}
26 |         else{ document.write("&nbsp;&nbsp")}
27 |     }
28 |     document.write("<br>")
29 | }


--------------------------------------------------------------------------------
/00_Question And Answers/hard/Days Between Two Dates.js:
--------------------------------------------------------------------------------
1 | function getdays(date1,date2){
2 |     let out= date2-date1;
3 |     let diff=out/(1000*60*60*24);
4 |     return Math.round(diff);
5 | }
6 | console.log(getdays(new Date("June 14, 2019"),
7 | new Date("June 20, 2019")));


--------------------------------------------------------------------------------
/00_Question And Answers/hard/Length of a Nested Array.js:
--------------------------------------------------------------------------------
 1 | function getlength(arr){
 2 |     let count=0;
 3 |     for(let i=0;i<arr.length;i++){
 4 |         if(Array.isArray(arr[i])){
 5 |             count+=getlength(arr[i]);
 6 |         }else{
 7 |             count++;
 8 |         }
 9 |     }
10 |     return count;
11 | 
12 | }
13 | console.log(getlength([1, [2, 3]]));
14 | console.log(getlength([1, [2, [3, 4]]]));
15 | console.log(getlength([1, [2, [3, [4, [5, 6]]]]]));
16 | console.log(getlength([1, [2], 1, [2], 1]));


--------------------------------------------------------------------------------
/00_Question And Answers/hard/Number of Boomerangs.js:
--------------------------------------------------------------------------------
 1 | function boom(arr){
 2 |     let count=0;
 3 |     for (i = 0 ;i< arr.length-2; i++) {
 4 |         if(arr[i] === arr[i+2] && arr[i] !== arr[i+1]){count++}}
 5 |         return count;
 6 | }
 7 | console.log(boom([9,5,9,5,1,1,1]));
 8 | console.log(boom([5,6,6,7,6,3,9]));
 9 | console.log(boom([4,4,4,9,9,9,9]));
10 | 


--------------------------------------------------------------------------------
/00_Question And Answers/hard/OddishEvenish.js:
--------------------------------------------------------------------------------
 1 | function ish(num){
 2 | let nums=num.toString();
 3 | let sum=0;
 4 | for(i=0;i<nums.length;i++){
 5 |     sum+=parseInt(nums[i]);}
 6 |     return sum%2 === 0 ? "EVENISH": "ODDISH";
 7 | }
 8 | console.log(ish(43));
 9 | console.log(ish(373));
10 | console.log(ish(4433));
11 | console.log(ish(0));


--------------------------------------------------------------------------------
/00_Question And Answers/hard/Seven Boom.js:
--------------------------------------------------------------------------------
1 | // Create a function that takes an array of numbers and return "Boom!" if the digit 7 appears in the array. Otherwise, return "there is no 7 in the array".
2 | function sevenboom(arr){
3 |     let newa=arr.some(num =>num.toString().includes('7'));
4 |     return newa ? "BOOM!":"There is no 7 in the array";
5 | }
6 | console.log(sevenboom([1, 2, 3, 4, 5, 6, 7]));
7 | console.log(sevenboom([8, 6, 33, 100]));
8 | console.log(sevenboom([2, 55, 60, 97, 86]));
9 | 


--------------------------------------------------------------------------------
/00_Question And Answers/hard/Tower of Hanoi.js:
--------------------------------------------------------------------------------
1 | function towerhanoi(x){
2 |     return  2**x -1;
3 | }
4 | console.log(towerhanoi(3));
5 | console.log(towerhanoi(5));
6 | console.log(towerhanoi(0));


--------------------------------------------------------------------------------
/Block_inline_elements/b.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>block &inline element</title>
 7 |     <link rel="stylesheet" href="b.css">
 8 | </head>
 9 | <body>
10 |     <div> This is a div (block)</div>
11 |     <h1>This is a h1 heading (block)</h1>
12 |     <span>This is a span (inline element)..</span>
13 |     <a href="#"> //this is a anchor tag (inline)</a>
14 |     <small> [ inline tag ] </small>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Landing screen/1.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/Landing screen/1.js


--------------------------------------------------------------------------------
/Landing screen/110.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/Landing screen/110.jpg


--------------------------------------------------------------------------------
/Landing screen/111.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/Landing screen/111.jpg


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Landing screen/landing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Landing Screen</title>
 7 |     <link rel="stylesheet" href="landing.css"/>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#">Home</a>
12 |         <a href="#">About</a>
13 |         <a href="#">Contact</a>
14 |         <a href="#"> For More</a>
15 | 
16 |     </header>
17 |     <main>
18 |         <h1>Explore the world</h1>
19 |     </main>
20 |     <main>
21 |         <h1>Explore the Universe</h1>
22 |     </main>
23 | 
24 | 
25 |     <script src="1.js"></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Landing screen/large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/Landing screen/large.jpg


--------------------------------------------------------------------------------
/Landing screen/small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/Landing screen/small.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript( Also includes html and css sample questions)
 2 | 
 3 | This repository contains resources and projects related to web development  problem solving by using HTML, CSS, and JavaScript.
 4 | 
 5 | ## Contents
 6 | 
 7 | - **Tutorials**: Step-by-step guides on web development topics.
 8 | - **Projects**: Sample web projects to practice your skills.
 9 | - **Code Examples**: Snippets demonstrating various techniques.
10 | 
11 | ## Getting Started
12 | 
13 | 1. Clone this repository
14 | 2. Explore tutorials, projects, and code examples.
15 | 3. Start coding and experimenting!
16 | 
17 | ## Contributing
18 | 
19 | Contributions are welcome! If you have tutorials or projects to share, open a pull request.
20 | 
21 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/bank_balance/bank.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Bank Balance</title>
 7 |     <link rel="stylesheet" href="bank.css">
 8 | </head>
 9 | <body>
10 |     <div class="div"> 
11 |         <br>
12 |         <h3>To check Bank Balance</h3>
13 |         <div class="div2">
14 |            
15 |                 <br>
16 |                 <input type="number" id="n1" name="deposit" value="deposit" placeholder="Enter Deposit Amount">
17 |                 <button id="dp" onclick="curbal()">Deposit</button>
18 |                 <br><br>
19 |                 <input type="number" id="n2" name="withdraw" value="withdraw" placeholder="Enter Withdraw Amount">
20 |                 <button id="wd" onclick="aftrwith()">Withdraw</button>
21 |                 <br><br>
22 |                 
23 |                 <button id="balance" onclick="famount()" >Click For Balance Amount</button>
24 |                 <br><br>
25 |                 <h4>The Final Balance Amount would be : </h4>
26 |                 <h3 id="p"></h3>
27 |                 <br> 
28 |         
29 |         </div>
30 |         <br>
31 |     </div>
32 |     
33 | <script src="bank.js"></script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/bootstrap course/border.css:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | .box1{
4 |     height: 200px;
5 |     width: 200px;
6 |     background-color: lightskyblue;
7 | }


--------------------------------------------------------------------------------
/bootstrap course/border.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Border Classes</title>
 7 |     <link rel="stylesheet" href="/bootstrap course/css/bootstrap.css">
 8 |     <link rel="stylesheet" href="border.css">
 9 | </head>
10 | <body>
11 | <h2>Bootstrap: Border Classes</h2>
12 | <br>
13 | <div class="container">
14 |     <div class="box1 border border-5 border-danger">
15 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
16 |     </div><br>
17 |     <div class="box1 border-start border-5 border-danger">
18 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
19 |     </div>
20 |     <br>
21 |     <div class="box1 border-top border-5 border-danger">
22 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
23 |     </div>
24 |     <br>
25 |     <div class="box1 border-bottom border-4 border-danger">
26 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
27 |     </div>
28 |     <br>
29 |     <div class="box1 border border-bottom-0 border-5 border-danger">
30 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
31 |     </div>
32 |     <br>
33 |     <div class="box1 border  border-5 border-danger  rounded">
34 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
35 |     </div>
36 |     <br>
37 |     <div class="box1 border border-5 border-danger rounded-circle ">
38 |         Lorem ipsum dolor sitprovident aliquam soluta suscipit possimus et ipsam, laudantium pariatur voluptas quisquam odit!
39 |     </div>
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | </div>
49 | 
50 | 
51 | 
52 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
53 |     <script src="/bootstrap course/js/bootstrap.js"></script>
54 | 
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/bootstrap course/color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>color</title>
 7 |     <link rel="stylesheet" href="/bootstrap course/css/bootstrap.css">
 8 | </head>
 9 | <body>
10 |     <h2>learn bootstrap color</h2>
11 | 
12 |     <div class="container">
13 |         <h1 class="text-primary"> look the color change</h1>
14 |         <h1 class="text-secondary"> look the color change</h1>
15 |         <h1 class="text-success"> look the color change</h1>
16 |         <h1 class="text-danger bg-transparent" > look the color change</h1>
17 |         <h1 class="text-warning"> look the color change</h1>
18 |         <h1 class="text-info"> look the color change</h1>
19 |         <h1 class="text-light bg-success"> look the color change</h1>
20 |         <h1 class="text-dark bg-warning"> look the color change</h1>
21 |         <h1 class="text-body bg-success"> look the color change</h1>
22 |         <h1 class="text-muted bg-warning"> look the color change</h1>
23 |         <h1 class="text-white bg-dark"> look the color change</h1>
24 |         <h1 class="text-primary bg-danger"> look the color change</h1>
25 |         <h1 class="text-black-50 bg-info"> look the color change</h1>
26 |         <h1 class="text-white-50 bg-primary"> look the color change</h1>
27 |     </div>
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
44 |     <script src="/bootstrap course/js/bootstrap.js"></script>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/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.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../../scss/mixins/_banner.scss","../../scss/_root.scss","dist/css/bootstrap-reboot.css","../../scss/vendor/_rfs.scss","../../scss/mixins/_color-mode.scss","../../scss/_reboot.scss","../../scss/mixins/_border-radius.scss"],"names":[],"mappings":"AACE;;;;ACDF,MCMA,sBDGI,UAAA,QAAA,YAAA,QAAA,YAAA,QAAA,UAAA,QAAA,SAAA,QAAA,YAAA,QAAA,YAAA,QAAA,WAAA,QAAA,UAAA,QAAA,UAAA,QAAA,WAAA,KAAA,WAAA,KAAA,UAAA,QAAA,eAAA,QAIA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAIA,aAAA,QAAA,eAAA,QAAA,aAAA,QAAA,UAAA,QAAA,aAAA,QAAA,YAAA,QAAA,WAAA,QAAA,UAAA,QAIA,iBAAA,EAAA,CAAA,GAAA,CAAA,IAAA,mBAAA,GAAA,CAAA,GAAA,CAAA,IAAA,iBAAA,EAAA,CAAA,GAAA,CAAA,GAAA,cAAA,EAAA,CAAA,GAAA,CAAA,IAAA,iBAAA,GAAA,CAAA,GAAA,CAAA,EAAA,gBAAA,GAAA,CAAA,EAAA,CAAA,GAAA,eAAA,GAAA,CAAA,GAAA,CAAA,IAAA,cAAA,EAAA,CAAA,EAAA,CAAA,GAIA,2BAAA,QAAA,6BAAA,QAAA,2BAAA,QAAA,wBAAA,QAAA,2BAAA,QAAA,0BAAA,QAAA,yBAAA,QAAA,wBAAA,QAIA,uBAAA,QAAA,yBAAA,QAAA,uBAAA,QAAA,oBAAA,QAAA,uBAAA,QAAA,sBAAA,QAAA,qBAAA,QAAA,oBAAA,QAIA,2BAAA,QAAA,6BAAA,QAAA,2BAAA,QAAA,wBAAA,QAAA,2BAAA,QAAA,0BAAA,QAAA,yBAAA,QAAA,wBAAA,QAGF,eAAA,GAAA,CAAA,GAAA,CAAA,IACA,eAAA,CAAA,CAAA,CAAA,CAAA,EAMA,qBAAA,SAAA,CAAA,aAAA,CAAA,UAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,KAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,mBACA,oBAAA,cAAA,CAAA,KAAA,CAAA,MAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,UACA,cAAA,2EAOA,sBAAA,0BE2OI,oBAAA,KFzOJ,sBAAA,IACA,sBAAA,IAKA,gBAAA,QACA,oBAAA,EAAA,CAAA,EAAA,CAAA,GACA,aAAA,KACA,iBAAA,GAAA,CAAA,GAAA,CAAA,IAEA,oBAAA,KACA,wBAAA,CAAA,CAAA,CAAA,CAAA,EAEA,qBAAA,uBACA,yBAAA,EAAA,CAAA,EAAA,CAAA,GACA,kBAAA,QACA,sBAAA,GAAA,CAAA,GAAA,CAAA,IAEA,oBAAA,sBACA,wBAAA,EAAA,CAAA,EAAA,CAAA,GACA,iBAAA,QACA,qBAAA,GAAA,CAAA,GAAA,CAAA,IAGA,mBAAA,QAEA,gBAAA,QACA,oBAAA,EAAA,CAAA,GAAA,CAAA,IACA,qBAAA,UAEA,sBAAA,QACA,0BAAA,EAAA,CAAA,EAAA,CAAA,IAMA,gBAAA,QACA,kBAAA,QAGA,kBAAA,IACA,kBAAA,MACA,kBAAA,QACA,8BAAA,qBAEA,mBAAA,SACA,sBAAA,QACA,sBAAA,OACA,sBAAA,KACA,uBAAA,KACA,uBAAA,4BACA,wBAAA,MAGA,gBAAA,EAAA,OAAA,KAAA,oBACA,mBAAA,EAAA,SAAA,QAAA,qBACA,mBAAA,EAAA,KAAA,KAAA,qBACA,sBAAA,MAAA,EAAA,IAAA,IAAA,qBAIA,sBAAA,QACA,wBAAA,KACA,sBAAA,yBAIA,sBAAA,QACA,6BAAA,QACA,wBAAA,QACA,+BAAA,QG/GE,qBHqHA,aAAA,KAGA,gBAAA,QACA,oBAAA,GAAA,CAAA,GAAA,CAAA,IACA,aAAA,QACA,iBAAA,EAAA,CAAA,EAAA,CAAA,GAEA,oBAAA,KACA,wBAAA,GAAA,CAAA,GAAA,CAAA,IAEA,qBAAA,0BACA,yBAAA,GAAA,CAAA,GAAA,CAAA,IACA,kBAAA,QACA,sBAAA,EAAA,CAAA,EAAA,CAAA,GAEA,oBAAA,yBACA,wBAAA,GAAA,CAAA,GAAA,CAAA,IACA,iBAAA,QACA,qBAAA,EAAA,CAAA,EAAA,CAAA,GAGE,2BAAA,QAAA,6BAAA,QAAA,2BAAA,QAAA,wBAAA,QAAA,2BAAA,QAAA,0BAAA,QAAA,yBAAA,QAAA,wBAAA,QAIA,uBAAA,QAAA,yBAAA,QAAA,uBAAA,QAAA,oBAAA,QAAA,uBAAA,QAAA,sBAAA,QAAA,qBAAA,QAAA,oBAAA,QAIA,2BAAA,QAAA,6BAAA,QAAA,2BAAA,QAAA,wBAAA,QAAA,2BAAA,QAAA,0BAAA,QAAA,yBAAA,QAAA,wBAAA,QAGF,mBAAA,QAEA,gBAAA,QACA,sBAAA,QACA,oBAAA,GAAA,CAAA,GAAA,CAAA,IACA,0BAAA,GAAA,CAAA,GAAA,CAAA,IAEA,gBAAA,QAEA,kBAAA,QACA,8BAAA,0BAEA,sBAAA,QACA,6BAAA,QACA,wBAAA,QACA,+BAAA,QIrKJ,EHsKA,QADA,SGlKE,WAAA,WAeE,8CANJ,MAOM,gBAAA,QAcN,KACE,OAAA,EACA,YAAA,2BF6OI,UAAA,yBE3OJ,YAAA,2BACA,YAAA,2BACA,MAAA,qBACA,WAAA,0BACA,iBAAA,kBACA,yBAAA,KACA,4BAAA,YASF,GACE,OAAA,KAAA,EACA,MAAA,QACA,OAAA,EACA,WAAA,uBAAA,MACA,QAAA,IAUF,GAAA,GAAA,GAAA,GAAA,GAAA,GACE,WAAA,EACA,cAAA,MAGA,YAAA,IACA,YAAA,IACA,MAAA,wBAGF,GFuMQ,UAAA,uBA5JJ,0BE3CJ,GF8MQ,UAAA,QEzMR,GFkMQ,UAAA,sBA5JJ,0BEtCJ,GFyMQ,UAAA,MEpMR,GF6LQ,UAAA,oBA5JJ,0BEjCJ,GFoMQ,UAAA,SE/LR,GFwLQ,UAAA,sBA5JJ,0BE5BJ,GF+LQ,UAAA,QE1LR,GF+KM,UAAA,QE1KN,GF0KM,UAAA,KE/JN,EACE,WAAA,EACA,cAAA,KAUF,YACE,wBAAA,UAAA,OAAA,gBAAA,UAAA,OACA,OAAA,KACA,iCAAA,KAAA,yBAAA,KAMF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QAMF,GH8HA,GG5HE,aAAA,KHkIF,GG/HA,GH8HA,GG3HE,WAAA,EACA,cAAA,KAGF,MH+HA,MACA,MAFA,MG1HE,cAAA,EAGF,GACE,YAAA,IAKF,GACE,cAAA,MACA,YAAA,EAMF,WACE,OAAA,EAAA,EAAA,KAQF,EHoHA,OGlHE,YAAA,OAQF,MF6EM,UAAA,OEtEN,KACE,QAAA,QACA,iBAAA,uBASF,IHsGA,IGpGE,SAAA,SFyDI,UAAA,MEvDJ,YAAA,EACA,eAAA,SAGF,IAAM,OAAA,OACN,IAAM,IAAA,MAKN,EACE,MAAA,wDACA,gBAAA,UAEA,QACE,oBAAA,+BAWF,2BAAA,iCAEE,MAAA,QACA,gBAAA,KHkGJ,KACA,IG5FA,IH6FA,KGzFE,YAAA,yBFeI,UAAA,IEPN,IACE,QAAA,MACA,WAAA,EACA,cAAA,KACA,SAAA,KFGI,UAAA,OEEJ,SFFI,UAAA,QEIF,MAAA,QACA,WAAA,OAIJ,KFTM,UAAA,OEWJ,MAAA,qBACA,UAAA,WAGA,OACE,MAAA,QAIJ,IACE,QAAA,SAAA,QFrBI,UAAA,OEuBJ,MAAA,kBACA,iBAAA,qBCpSE,cAAA,ODuSF,QACE,QAAA,EF5BE,UAAA,IEuCN,OACE,OAAA,EAAA,EAAA,KAMF,IHwEA,IGtEE,eAAA,OAQF,MACE,aAAA,OACA,gBAAA,SAGF,QACE,YAAA,MACA,eAAA,MACA,MAAA,0BACA,WAAA,KAOF,GAEE,WAAA,QACA,WAAA,qBHiEF,MAGA,GAFA,MAGA,GGlEA,MHgEA,GG1DE,aAAA,QACA,aAAA,MACA,aAAA,EAQF,MACE,QAAA,aAMF,OAEE,cAAA,EAQF,iCACE,QAAA,EHmDF,OG9CA,MHgDA,SADA,OAEA,SG5CE,OAAA,EACA,YAAA,QF3HI,UAAA,QE6HJ,YAAA,QAIF,OH6CA,OG3CE,eAAA,KAKF,cACE,OAAA,QAGF,OAGE,UAAA,OAGA,gBACE,QAAA,EAOJ,0IACE,QAAA,eHuCF,cACA,aACA,cGjCA,OAIE,mBAAA,OHiCF,6BACA,4BACA,6BGhCI,sBACE,OAAA,QAON,mBACE,QAAA,EACA,aAAA,KAKF,SACE,OAAA,SAUF,SACE,UAAA,EACA,QAAA,EACA,OAAA,EACA,OAAA,EAQF,OACE,MAAA,KACA,MAAA,KACA,QAAA,EACA,cAAA,MFhNM,UAAA,sBEmNN,YAAA,QF/WE,0BEwWJ,OFrMQ,UAAA,QE8MN,SACE,MAAA,KHyBJ,kCGlBA,uCHiBA,mCADA,+BAGA,oCAJA,6BAKA,mCGbE,QAAA,EAGF,4BACE,OAAA,KASF,cACE,mBAAA,UACA,eAAA,KAmBF,4BACE,mBAAA,KAKF,+BACE,QAAA,EAOF,6BACE,KAAA,QACA,mBAAA,OAFF,uBACE,KAAA,QACA,mBAAA,OAKF,OACE,QAAA,aAKF,OACE,OAAA,EAOF,QACE,QAAA,UACA,OAAA,QAQF,SACE,eAAA,SAQF,SACE,QAAA","sourcesContent":["@mixin bsBanner($file) {\n  /*!\n   * Bootstrap #{$file} v5.3.1 (https://getbootstrap.com/)\n   * Copyright 2011-2023 The Bootstrap Authors\n   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n   */\n}\n",":root,\n[data-bs-theme=\"light\"] {\n  // Note: Custom variable values only support SassScript inside `#{}`.\n\n  // Colors\n  //\n  // Generate palettes for full colors, grays, and theme colors.\n\n  @each $color, $value in $colors {\n    --#{$prefix}#{$color}: #{$value};\n  }\n\n  @each $color, $value in $grays {\n    --#{$prefix}gray-#{$color}: #{$value};\n  }\n\n  @each $color, $value in $theme-colors {\n    --#{$prefix}#{$color}: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-rgb {\n    --#{$prefix}#{$color}-rgb: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-text {\n    --#{$prefix}#{$color}-text-emphasis: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-bg-subtle {\n    --#{$prefix}#{$color}-bg-subtle: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-border-subtle {\n    --#{$prefix}#{$color}-border-subtle: #{$value};\n  }\n\n  --#{$prefix}white-rgb: #{to-rgb($white)};\n  --#{$prefix}black-rgb: #{to-rgb($black)};\n\n  // Fonts\n\n  // Note: Use `inspect` for lists so that quoted items keep the quotes.\n  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};\n  --#{$prefix}gradient: #{$gradient};\n\n  // Root and body\n  // scss-docs-start root-body-variables\n  @if $font-size-root != null {\n    --#{$prefix}root-font-size: #{$font-size-root};\n  }\n  --#{$prefix}body-font-family: #{inspect($font-family-base)};\n  @include rfs($font-size-base, --#{$prefix}body-font-size);\n  --#{$prefix}body-font-weight: #{$font-weight-base};\n  --#{$prefix}body-line-height: #{$line-height-base};\n  @if $body-text-align != null {\n    --#{$prefix}body-text-align: #{$body-text-align};\n  }\n\n  --#{$prefix}body-color: #{$body-color};\n  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};\n  --#{$prefix}body-bg: #{$body-bg};\n  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};\n\n  --#{$prefix}emphasis-color: #{$body-emphasis-color};\n  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};\n\n  --#{$prefix}secondary-color: #{$body-secondary-color};\n  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};\n  --#{$prefix}secondary-bg: #{$body-secondary-bg};\n  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};\n\n  --#{$prefix}tertiary-color: #{$body-tertiary-color};\n  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};\n  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};\n  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};\n  // scss-docs-end root-body-variables\n\n  --#{$prefix}heading-color: #{$headings-color};\n\n  --#{$prefix}link-color: #{$link-color};\n  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};\n  --#{$prefix}link-decoration: #{$link-decoration};\n\n  --#{$prefix}link-hover-color: #{$link-hover-color};\n  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};\n\n  @if $link-hover-decoration != null {\n    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};\n  }\n\n  --#{$prefix}code-color: #{$code-color};\n  --#{$prefix}highlight-bg: #{$mark-bg};\n\n  // scss-docs-start root-border-var\n  --#{$prefix}border-width: #{$border-width};\n  --#{$prefix}border-style: #{$border-style};\n  --#{$prefix}border-color: #{$border-color};\n  --#{$prefix}border-color-translucent: #{$border-color-translucent};\n\n  --#{$prefix}border-radius: #{$border-radius};\n  --#{$prefix}border-radius-sm: #{$border-radius-sm};\n  --#{$prefix}border-radius-lg: #{$border-radius-lg};\n  --#{$prefix}border-radius-xl: #{$border-radius-xl};\n  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};\n  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency\n  --#{$prefix}border-radius-pill: #{$border-radius-pill};\n  // scss-docs-end root-border-var\n\n  --#{$prefix}box-shadow: #{$box-shadow};\n  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};\n  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};\n  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};\n\n  // Focus styles\n  // scss-docs-start root-focus-variables\n  --#{$prefix}focus-ring-width: #{$focus-ring-width};\n  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};\n  --#{$prefix}focus-ring-color: #{$focus-ring-color};\n  // scss-docs-end root-focus-variables\n\n  // scss-docs-start root-form-validation-variables\n  --#{$prefix}form-valid-color: #{$form-valid-color};\n  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};\n  --#{$prefix}form-invalid-color: #{$form-invalid-color};\n  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};\n  // scss-docs-end root-form-validation-variables\n}\n\n@if $enable-dark-mode {\n  @include color-mode(dark, true) {\n    color-scheme: dark;\n\n    // scss-docs-start root-dark-mode-vars\n    --#{$prefix}body-color: #{$body-color-dark};\n    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};\n    --#{$prefix}body-bg: #{$body-bg-dark};\n    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};\n\n    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};\n    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};\n\n    --#{$prefix}secondary-color: #{$body-secondary-color-dark};\n    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};\n    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};\n    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};\n\n    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};\n    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};\n    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};\n    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};\n\n    @each $color, $value in $theme-colors-text-dark {\n      --#{$prefix}#{$color}-text-emphasis: #{$value};\n    }\n\n    @each $color, $value in $theme-colors-bg-subtle-dark {\n      --#{$prefix}#{$color}-bg-subtle: #{$value};\n    }\n\n    @each $color, $value in $theme-colors-border-subtle-dark {\n      --#{$prefix}#{$color}-border-subtle: #{$value};\n    }\n\n    --#{$prefix}heading-color: #{$headings-color-dark};\n\n    --#{$prefix}link-color: #{$link-color-dark};\n    --#{$prefix}link-hover-color: #{$link-hover-color-dark};\n    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};\n    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};\n\n    --#{$prefix}code-color: #{$code-color-dark};\n\n    --#{$prefix}border-color: #{$border-color-dark};\n    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};\n\n    --#{$prefix}form-valid-color: #{$form-valid-color-dark};\n    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};\n    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};\n    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};\n    // scss-docs-end root-dark-mode-vars\n  }\n}\n","/*!\n * Bootstrap Reboot v5.3.1 (https://getbootstrap.com/)\n * Copyright 2011-2023 The Bootstrap Authors\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n:root,\n[data-bs-theme=light] {\n  --bs-blue: #0d6efd;\n  --bs-indigo: #6610f2;\n  --bs-purple: #6f42c1;\n  --bs-pink: #d63384;\n  --bs-red: #dc3545;\n  --bs-orange: #fd7e14;\n  --bs-yellow: #ffc107;\n  --bs-green: #198754;\n  --bs-teal: #20c997;\n  --bs-cyan: #0dcaf0;\n  --bs-black: #000;\n  --bs-white: #fff;\n  --bs-gray: #6c757d;\n  --bs-gray-dark: #343a40;\n  --bs-gray-100: #f8f9fa;\n  --bs-gray-200: #e9ecef;\n  --bs-gray-300: #dee2e6;\n  --bs-gray-400: #ced4da;\n  --bs-gray-500: #adb5bd;\n  --bs-gray-600: #6c757d;\n  --bs-gray-700: #495057;\n  --bs-gray-800: #343a40;\n  --bs-gray-900: #212529;\n  --bs-primary: #0d6efd;\n  --bs-secondary: #6c757d;\n  --bs-success: #198754;\n  --bs-info: #0dcaf0;\n  --bs-warning: #ffc107;\n  --bs-danger: #dc3545;\n  --bs-light: #f8f9fa;\n  --bs-dark: #212529;\n  --bs-primary-rgb: 13, 110, 253;\n  --bs-secondary-rgb: 108, 117, 125;\n  --bs-success-rgb: 25, 135, 84;\n  --bs-info-rgb: 13, 202, 240;\n  --bs-warning-rgb: 255, 193, 7;\n  --bs-danger-rgb: 220, 53, 69;\n  --bs-light-rgb: 248, 249, 250;\n  --bs-dark-rgb: 33, 37, 41;\n  --bs-primary-text-emphasis: #052c65;\n  --bs-secondary-text-emphasis: #2b2f32;\n  --bs-success-text-emphasis: #0a3622;\n  --bs-info-text-emphasis: #055160;\n  --bs-warning-text-emphasis: #664d03;\n  --bs-danger-text-emphasis: #58151c;\n  --bs-light-text-emphasis: #495057;\n  --bs-dark-text-emphasis: #495057;\n  --bs-primary-bg-subtle: #cfe2ff;\n  --bs-secondary-bg-subtle: #e2e3e5;\n  --bs-success-bg-subtle: #d1e7dd;\n  --bs-info-bg-subtle: #cff4fc;\n  --bs-warning-bg-subtle: #fff3cd;\n  --bs-danger-bg-subtle: #f8d7da;\n  --bs-light-bg-subtle: #fcfcfd;\n  --bs-dark-bg-subtle: #ced4da;\n  --bs-primary-border-subtle: #9ec5fe;\n  --bs-secondary-border-subtle: #c4c8cb;\n  --bs-success-border-subtle: #a3cfbb;\n  --bs-info-border-subtle: #9eeaf9;\n  --bs-warning-border-subtle: #ffe69c;\n  --bs-danger-border-subtle: #f1aeb5;\n  --bs-light-border-subtle: #e9ecef;\n  --bs-dark-border-subtle: #adb5bd;\n  --bs-white-rgb: 255, 255, 255;\n  --bs-black-rgb: 0, 0, 0;\n  --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\";\n  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));\n  --bs-body-font-family: var(--bs-font-sans-serif);\n  --bs-body-font-size: 1rem;\n  --bs-body-font-weight: 400;\n  --bs-body-line-height: 1.5;\n  --bs-body-color: #212529;\n  --bs-body-color-rgb: 33, 37, 41;\n  --bs-body-bg: #fff;\n  --bs-body-bg-rgb: 255, 255, 255;\n  --bs-emphasis-color: #000;\n  --bs-emphasis-color-rgb: 0, 0, 0;\n  --bs-secondary-color: rgba(33, 37, 41, 0.75);\n  --bs-secondary-color-rgb: 33, 37, 41;\n  --bs-secondary-bg: #e9ecef;\n  --bs-secondary-bg-rgb: 233, 236, 239;\n  --bs-tertiary-color: rgba(33, 37, 41, 0.5);\n  --bs-tertiary-color-rgb: 33, 37, 41;\n  --bs-tertiary-bg: #f8f9fa;\n  --bs-tertiary-bg-rgb: 248, 249, 250;\n  --bs-heading-color: inherit;\n  --bs-link-color: #0d6efd;\n  --bs-link-color-rgb: 13, 110, 253;\n  --bs-link-decoration: underline;\n  --bs-link-hover-color: #0a58ca;\n  --bs-link-hover-color-rgb: 10, 88, 202;\n  --bs-code-color: #d63384;\n  --bs-highlight-bg: #fff3cd;\n  --bs-border-width: 1px;\n  --bs-border-style: solid;\n  --bs-border-color: #dee2e6;\n  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);\n  --bs-border-radius: 0.375rem;\n  --bs-border-radius-sm: 0.25rem;\n  --bs-border-radius-lg: 0.5rem;\n  --bs-border-radius-xl: 1rem;\n  --bs-border-radius-xxl: 2rem;\n  --bs-border-radius-2xl: var(--bs-border-radius-xxl);\n  --bs-border-radius-pill: 50rem;\n  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);\n  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);\n  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);\n  --bs-focus-ring-width: 0.25rem;\n  --bs-focus-ring-opacity: 0.25;\n  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);\n  --bs-form-valid-color: #198754;\n  --bs-form-valid-border-color: #198754;\n  --bs-form-invalid-color: #dc3545;\n  --bs-form-invalid-border-color: #dc3545;\n}\n\n[data-bs-theme=dark] {\n  color-scheme: dark;\n  --bs-body-color: #dee2e6;\n  --bs-body-color-rgb: 222, 226, 230;\n  --bs-body-bg: #212529;\n  --bs-body-bg-rgb: 33, 37, 41;\n  --bs-emphasis-color: #fff;\n  --bs-emphasis-color-rgb: 255, 255, 255;\n  --bs-secondary-color: rgba(222, 226, 230, 0.75);\n  --bs-secondary-color-rgb: 222, 226, 230;\n  --bs-secondary-bg: #343a40;\n  --bs-secondary-bg-rgb: 52, 58, 64;\n  --bs-tertiary-color: rgba(222, 226, 230, 0.5);\n  --bs-tertiary-color-rgb: 222, 226, 230;\n  --bs-tertiary-bg: #2b3035;\n  --bs-tertiary-bg-rgb: 43, 48, 53;\n  --bs-primary-text-emphasis: #6ea8fe;\n  --bs-secondary-text-emphasis: #a7acb1;\n  --bs-success-text-emphasis: #75b798;\n  --bs-info-text-emphasis: #6edff6;\n  --bs-warning-text-emphasis: #ffda6a;\n  --bs-danger-text-emphasis: #ea868f;\n  --bs-light-text-emphasis: #f8f9fa;\n  --bs-dark-text-emphasis: #dee2e6;\n  --bs-primary-bg-subtle: #031633;\n  --bs-secondary-bg-subtle: #161719;\n  --bs-success-bg-subtle: #051b11;\n  --bs-info-bg-subtle: #032830;\n  --bs-warning-bg-subtle: #332701;\n  --bs-danger-bg-subtle: #2c0b0e;\n  --bs-light-bg-subtle: #343a40;\n  --bs-dark-bg-subtle: #1a1d20;\n  --bs-primary-border-subtle: #084298;\n  --bs-secondary-border-subtle: #41464b;\n  --bs-success-border-subtle: #0f5132;\n  --bs-info-border-subtle: #087990;\n  --bs-warning-border-subtle: #997404;\n  --bs-danger-border-subtle: #842029;\n  --bs-light-border-subtle: #495057;\n  --bs-dark-border-subtle: #343a40;\n  --bs-heading-color: inherit;\n  --bs-link-color: #6ea8fe;\n  --bs-link-hover-color: #8bb9fe;\n  --bs-link-color-rgb: 110, 168, 254;\n  --bs-link-hover-color-rgb: 139, 185, 254;\n  --bs-code-color: #e685b5;\n  --bs-border-color: #495057;\n  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);\n  --bs-form-valid-color: #75b798;\n  --bs-form-valid-border-color: #75b798;\n  --bs-form-invalid-color: #ea868f;\n  --bs-form-invalid-border-color: #ea868f;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :root {\n    scroll-behavior: smooth;\n  }\n}\n\nbody {\n  margin: 0;\n  font-family: var(--bs-body-font-family);\n  font-size: var(--bs-body-font-size);\n  font-weight: var(--bs-body-font-weight);\n  line-height: var(--bs-body-line-height);\n  color: var(--bs-body-color);\n  text-align: var(--bs-body-text-align);\n  background-color: var(--bs-body-bg);\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\nhr {\n  margin: 1rem 0;\n  color: inherit;\n  border: 0;\n  border-top: var(--bs-border-width) solid;\n  opacity: 0.25;\n}\n\nh6, h5, h4, h3, h2, h1 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--bs-heading-color);\n}\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw);\n}\n@media (min-width: 1200px) {\n  h1 {\n    font-size: 2.5rem;\n  }\n}\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw);\n}\n@media (min-width: 1200px) {\n  h2 {\n    font-size: 2rem;\n  }\n}\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw);\n}\n@media (min-width: 1200px) {\n  h3 {\n    font-size: 1.75rem;\n  }\n}\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw);\n}\n@media (min-width: 1200px) {\n  h4 {\n    font-size: 1.5rem;\n  }\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n  cursor: help;\n  -webkit-text-decoration-skip-ink: none;\n  text-decoration-skip-ink: none;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\nol,\nul {\n  padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 0.875em;\n}\n\nmark {\n  padding: 0.1875em;\n  background-color: var(--bs-highlight-bg);\n}\n\nsub,\nsup {\n  position: relative;\n  font-size: 0.75em;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));\n  text-decoration: underline;\n}\na:hover {\n  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);\n}\n\na:not([href]):not([class]), a:not([href]):not([class]):hover {\n  color: inherit;\n  text-decoration: none;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: var(--bs-font-monospace);\n  font-size: 1em;\n}\n\npre {\n  display: block;\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n  font-size: 0.875em;\n}\npre code {\n  font-size: inherit;\n  color: inherit;\n  word-break: normal;\n}\n\ncode {\n  font-size: 0.875em;\n  color: var(--bs-code-color);\n  word-wrap: break-word;\n}\na > code {\n  color: inherit;\n}\n\nkbd {\n  padding: 0.1875rem 0.375rem;\n  font-size: 0.875em;\n  color: var(--bs-body-bg);\n  background-color: var(--bs-body-color);\n  border-radius: 0.25rem;\n}\nkbd kbd {\n  padding: 0;\n  font-size: 1em;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg,\nsvg {\n  vertical-align: middle;\n}\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--bs-secondary-color);\n  text-align: left;\n}\n\nth {\n  text-align: inherit;\n  text-align: -webkit-match-parent;\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n}\n\nlabel {\n  display: inline-block;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton:focus:not(:focus-visible) {\n  outline: 0;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n[role=button] {\n  cursor: pointer;\n}\n\nselect {\n  word-wrap: normal;\n}\nselect:disabled {\n  opacity: 1;\n}\n\n[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {\n  display: none !important;\n}\n\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n  -webkit-appearance: button;\n}\nbutton:not(:disabled),\n[type=button]:not(:disabled),\n[type=reset]:not(:disabled),\n[type=submit]:not(:disabled) {\n  cursor: pointer;\n}\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n  border: 0;\n}\n\nlegend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  margin-bottom: 0.5rem;\n  font-size: calc(1.275rem + 0.3vw);\n  line-height: inherit;\n}\n@media (min-width: 1200px) {\n  legend {\n    font-size: 1.5rem;\n  }\n}\nlegend + * {\n  clear: left;\n}\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0;\n}\n\n::-webkit-inner-spin-button {\n  height: auto;\n}\n\n[type=search] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n/* rtl:raw:\n[type=\"tel\"],\n[type=\"url\"],\n[type=\"email\"],\n[type=\"number\"] {\n  direction: ltr;\n}\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  -webkit-appearance: button;\n}\n\n::file-selector-button {\n  font: inherit;\n  -webkit-appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\niframe {\n  border: 0;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/*# sourceMappingURL=bootstrap-reboot.css.map */","// stylelint-disable scss/dimension-no-non-numeric-values\n\n// SCSS RFS mixin\n//\n// Automated responsive values for font sizes, paddings, margins and much more\n//\n// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)\n\n// Configuration\n\n// Base value\n$rfs-base-value: 1.25rem !default;\n$rfs-unit: rem !default;\n\n@if $rfs-unit != rem and $rfs-unit != px {\n  @error \"`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.\";\n}\n\n// Breakpoint at where values start decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {\n  @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n}\n\n// Resize values based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != number or $rfs-factor <= 1 {\n  @error \"`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.\";\n}\n\n// Mode. Possibilities: \"min-media-query\", \"max-media-query\"\n$rfs-mode: min-media-query !default;\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-rfs to false\n$enable-rfs: true !default;\n\n// Cache $rfs-base-value unit\n$rfs-base-value-unit: unit($rfs-base-value);\n\n@function divide($dividend, $divisor, $precision: 10) {\n  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);\n  $dividend: abs($dividend);\n  $divisor: abs($divisor);\n  @if $dividend == 0 {\n    @return 0;\n  }\n  @if $divisor == 0 {\n    @error \"Cannot divide by 0\";\n  }\n  $remainder: $dividend;\n  $result: 0;\n  $factor: 10;\n  @while ($remainder > 0 and $precision >= 0) {\n    $quotient: 0;\n    @while ($remainder >= $divisor) {\n      $remainder: $remainder - $divisor;\n      $quotient: $quotient + 1;\n    }\n    $result: $result * 10 + $quotient;\n    $factor: $factor * .1;\n    $remainder: $remainder * 10;\n    $precision: $precision - 1;\n    @if ($precision < 0 and $remainder >= $divisor * 5) {\n      $result: $result + 1;\n    }\n  }\n  $result: $result * $factor * $sign;\n  $dividend-unit: unit($dividend);\n  $divisor-unit: unit($divisor);\n  $unit-map: (\n    \"px\": 1px,\n    \"rem\": 1rem,\n    \"em\": 1em,\n    \"%\": 1%\n  );\n  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {\n    $result: $result * map-get($unit-map, $dividend-unit);\n  }\n  @return $result;\n}\n\n// Remove px-unit from $rfs-base-value for calculations\n@if $rfs-base-value-unit == px {\n  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);\n}\n@else if $rfs-base-value-unit == rem {\n  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == px {\n  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == \"em\" {\n  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));\n}\n\n// Calculate the media query value\n$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});\n$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);\n$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);\n\n// Internal mixin used to determine which media query needs to be used\n@mixin _rfs-media-query {\n  @if $rfs-two-dimensional {\n    @if $rfs-mode == max-media-query {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n    @else {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n  }\n  @else {\n    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {\n      @content;\n    }\n  }\n}\n\n// Internal mixin that adds disable classes to the selector if needed.\n@mixin _rfs-rule {\n  @if $rfs-class == disable and $rfs-mode == max-media-query {\n    // Adding an extra class increases specificity, which prevents the media query to override the property\n    &,\n    .disable-rfs &,\n    &.disable-rfs {\n      @content;\n    }\n  }\n  @else if $rfs-class == enable and $rfs-mode == min-media-query {\n    .enable-rfs &,\n    &.enable-rfs {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Internal mixin that adds enable classes to the selector if needed.\n@mixin _rfs-media-query-rule {\n\n  @if $rfs-class == enable {\n    @if $rfs-mode == min-media-query {\n      @content;\n    }\n\n    @include _rfs-media-query () {\n      .enable-rfs &,\n      &.enable-rfs {\n        @content;\n      }\n    }\n  }\n  @else {\n    @if $rfs-class == disable and $rfs-mode == min-media-query {\n      .disable-rfs &,\n      &.disable-rfs {\n        @content;\n      }\n    }\n    @include _rfs-media-query () {\n      @content;\n    }\n  }\n}\n\n// Helper function to get the formatted non-responsive value\n@function rfs-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: \"\";\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + \" 0\";\n    }\n    @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == \"number\", unit($value), false);\n\n      @if $unit == px {\n        // Convert to rem if needed\n        $val: $val + \" \" + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);\n      }\n      @else if $unit == rem {\n        // Convert to px if needed\n        $val: $val + \" \" + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);\n      } @else {\n        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n        $val: $val + \" \" + $value;\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// Helper function to get the responsive value calculated by RFS\n@function rfs-fluid-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: \"\";\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + \" 0\";\n    } @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == \"number\", unit($value), false);\n\n      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n      @if not $unit or $unit != px and $unit != rem {\n        $val: $val + \" \" + $value;\n      } @else {\n        // Remove unit from $value for calculations\n        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));\n\n        // Only add the media query if the value is greater than the minimum value\n        @if abs($value) <= $rfs-base-value or not $enable-rfs {\n          $val: $val + \" \" + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);\n        }\n        @else {\n          // Calculate the minimum value\n          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);\n\n          // Calculate difference between $value and the minimum value\n          $value-diff: abs($value) - $value-min;\n\n          // Base value formatting\n          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);\n\n          // Use negative value if needed\n          $min-width: if($value < 0, -$min-width, $min-width);\n\n          // Use `vmin` if two-dimensional is enabled\n          $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n          // Calculate the variable width between 0 and $rfs-breakpoint\n          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};\n\n          // Return the calculated value\n          $val: $val + \" calc(\" + $min-width + if($value < 0, \" - \", \" + \") + $variable-width + \")\";\n        }\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// RFS mixin\n@mixin rfs($values, $property: font-size) {\n  @if $values != null {\n    $val: rfs-value($values);\n    $fluid-val: rfs-fluid-value($values);\n\n    // Do not print the media query if responsive & non-responsive values are the same\n    @if $val == $fluid-val {\n      #{$property}: $val;\n    }\n    @else {\n      @include _rfs-rule () {\n        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);\n\n        // Include safari iframe resize fix if needed\n        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);\n      }\n\n      @include _rfs-media-query-rule () {\n        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);\n      }\n    }\n  }\n}\n\n// Shorthand helper mixins\n@mixin font-size($value) {\n  @include rfs($value);\n}\n\n@mixin padding($value) {\n  @include rfs($value, padding);\n}\n\n@mixin padding-top($value) {\n  @include rfs($value, padding-top);\n}\n\n@mixin padding-right($value) {\n  @include rfs($value, padding-right);\n}\n\n@mixin padding-bottom($value) {\n  @include rfs($value, padding-bottom);\n}\n\n@mixin padding-left($value) {\n  @include rfs($value, padding-left);\n}\n\n@mixin margin($value) {\n  @include rfs($value, margin);\n}\n\n@mixin margin-top($value) {\n  @include rfs($value, margin-top);\n}\n\n@mixin margin-right($value) {\n  @include rfs($value, margin-right);\n}\n\n@mixin margin-bottom($value) {\n  @include rfs($value, margin-bottom);\n}\n\n@mixin margin-left($value) {\n  @include rfs($value, margin-left);\n}\n","// scss-docs-start color-mode-mixin\n@mixin color-mode($mode: light, $root: false) {\n  @if $color-mode-type == \"media-query\" {\n    @if $root == true {\n      @media (prefers-color-scheme: $mode) {\n        :root {\n          @content;\n        }\n      }\n    } @else {\n      @media (prefers-color-scheme: $mode) {\n        @content;\n      }\n    }\n  } @else {\n    [data-bs-theme=\"#{$mode}\"] {\n      @content;\n    }\n  }\n}\n// scss-docs-end color-mode-mixin\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n  @if $font-size-root != null {\n    @include font-size(var(--#{$prefix}root-font-size));\n  }\n\n  @if $enable-smooth-scroll {\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n  margin: 0; // 1\n  font-family: var(--#{$prefix}body-font-family);\n  @include font-size(var(--#{$prefix}body-font-size));\n  font-weight: var(--#{$prefix}body-font-weight);\n  line-height: var(--#{$prefix}body-line-height);\n  color: var(--#{$prefix}body-color);\n  text-align: var(--#{$prefix}body-text-align);\n  background-color: var(--#{$prefix}body-bg); // 2\n  -webkit-text-size-adjust: 100%; // 3\n  -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox's gray color\n\nhr {\n  margin: $hr-margin-y 0;\n  color: $hr-color; // 1\n  border: 0;\n  border-top: $hr-border-width solid $hr-border-color;\n  opacity: $hr-opacity;\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n//    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top\n//    margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n  margin-top: 0; // 1\n  margin-bottom: $headings-margin-bottom;\n  font-family: $headings-font-family;\n  font-style: $headings-font-style;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n  color: var(--#{$prefix}heading-color);\n}\n\nh1 {\n  @extend %heading;\n  @include font-size($h1-font-size);\n}\n\nh2 {\n  @extend %heading;\n  @include font-size($h2-font-size);\n}\n\nh3 {\n  @extend %heading;\n  @include font-size($h3-font-size);\n}\n\nh4 {\n  @extend %heading;\n  @include font-size($h4-font-size);\n}\n\nh5 {\n  @extend %heading;\n  @include font-size($h5-font-size);\n}\n\nh6 {\n  @extend %heading;\n  @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `<p>`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n  margin-top: 0;\n  margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n  text-decoration: underline dotted; // 1\n  cursor: help; // 2\n  text-decoration-skip-ink: none; // 3\n}\n\n\n// Address\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n  padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n  margin-bottom: .5rem;\n  margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n  font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n  @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n  padding: $mark-padding;\n  background-color: var(--#{$prefix}highlight-bg);\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n  position: relative;\n  @include font-size($sub-sup-font-size);\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));\n  text-decoration: $link-decoration;\n\n  &:hover {\n    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);\n    text-decoration: $link-hover-decoration;\n  }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n  &,\n  &:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: $font-family-code;\n  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n  display: block;\n  margin-top: 0; // 1\n  margin-bottom: 1rem; // 2\n  overflow: auto; // 3\n  @include font-size($code-font-size);\n  color: $pre-color;\n\n  // Account for some code outputs that place code tags in pre tags\n  code {\n    @include font-size(inherit);\n    color: inherit;\n    word-break: normal;\n  }\n}\n\ncode {\n  @include font-size($code-font-size);\n  color: var(--#{$prefix}code-color);\n  word-wrap: break-word;\n\n  // Streamline the style when inside anchors to avoid broken underline and more\n  a > & {\n    color: inherit;\n  }\n}\n\nkbd {\n  padding: $kbd-padding-y $kbd-padding-x;\n  @include font-size($kbd-font-size);\n  color: $kbd-color;\n  background-color: $kbd-bg;\n  @include border-radius($border-radius-sm);\n\n  kbd {\n    padding: 0;\n    @include font-size(1em);\n    font-weight: $nested-kbd-font-weight;\n  }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n  margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n  vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: $table-cell-padding-y;\n  padding-bottom: $table-cell-padding-y;\n  color: $table-caption-color;\n  text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `<td>` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n  font-weight: $table-th-font-weight; // 1\n  text-align: inherit; // 2\n  text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n  display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0; // 1\n  font-family: inherit;\n  @include font-size(inherit);\n  line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n  text-transform: none;\n}\n// Set the cursor for non-`<button>` buttons\n//\n// Details at https://github.com/twbs/bootstrap/pull/30562\n[role=\"button\"] {\n  cursor: pointer;\n}\n\nselect {\n  // Remove the inheritance of word-wrap in Safari.\n  // See https://github.com/twbs/bootstrap/issues/24990\n  word-wrap: normal;\n\n  // Undo the opacity change from Chrome\n  &:disabled {\n    opacity: 1;\n  }\n}\n\n// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.\n// See https://stackoverflow.com/a/54997118\n\n[list]:not([type=\"date\"]):not([type=\"datetime-local\"]):not([type=\"month\"]):not([type=\"week\"]):not([type=\"time\"])::-webkit-calendar-picker-indicator {\n  display: none !important;\n}\n\n// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n//    controls in Android 4.\n// 2. Correct the inability to style clickable types in iOS and Safari.\n// 3. Opinionated: add \"hand\" cursor to non-disabled button elements.\n\nbutton,\n[type=\"button\"], // 1\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button; // 2\n\n  @if $enable-button-pointers {\n    &:not(:disabled) {\n      cursor: pointer; // 3\n    }\n  }\n}\n\n// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\n// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.\n\ntextarea {\n  resize: vertical; // 1\n}\n\n// 1. Browsers set a default `min-width: min-content;` on fieldsets,\n//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.\n//    So we reset that to ensure fieldsets behave more like a standard block element.\n//    See https://github.com/twbs/bootstrap/issues/12359\n//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.\n\nfieldset {\n  min-width: 0; // 1\n  padding: 0; // 2\n  margin: 0; // 2\n  border: 0; // 2\n}\n\n// 1. By using `float: left`, the legend will behave like a block element.\n//    This way the border of a fieldset wraps around the legend if present.\n// 2. Fix wrapping bug.\n//    See https://github.com/twbs/bootstrap/issues/29712\n\nlegend {\n  float: left; // 1\n  width: 100%;\n  padding: 0;\n  margin-bottom: $legend-margin-bottom;\n  @include font-size($legend-font-size);\n  font-weight: $legend-font-weight;\n  line-height: inherit;\n\n  + * {\n    clear: left; // 2\n  }\n}\n\n// Fix height of inputs with a type of datetime-local, date, month, week, or time\n// See https://github.com/twbs/bootstrap/issues/18842\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0;\n}\n\n::-webkit-inner-spin-button {\n  height: auto;\n}\n\n// 1. This overrides the extra rounded corners on search inputs in iOS so that our\n//    `.form-control` class can properly style them. Note that this cannot simply\n//    be added to `.form-control` as it's not specific enough. For details, see\n//    https://github.com/twbs/bootstrap/issues/11586.\n// 2. Correct the outline style in Safari.\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; // 1\n  outline-offset: -2px; // 2\n}\n\n// 1. A few input types should stay LTR\n// See https://rtlstyling.com/posts/rtl-styling#form-inputs\n// 2. RTL only output\n// See https://rtlcss.com/learn/usage-guide/control-directives/#raw\n\n/* rtl:raw:\n[type=\"tel\"],\n[type=\"url\"],\n[type=\"email\"],\n[type=\"number\"] {\n  direction: ltr;\n}\n*/\n\n// Remove the inner padding in Chrome and Safari on macOS.\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n// Remove padding around color pickers in webkit browsers\n\n::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n\n// 1. Inherit font family and line height for file input buttons\n// 2. Correct the inability to style clickable types in iOS and Safari.\n\n::file-selector-button {\n  font: inherit; // 1\n  -webkit-appearance: button; // 2\n}\n\n// Correct element displays\n\noutput {\n  display: inline-block;\n}\n\n// Remove border from iframe\n\niframe {\n  border: 0;\n}\n\n// Summary\n//\n// 1. Add the correct display in all browsers\n\nsummary {\n  display: list-item; // 1\n  cursor: pointer;\n}\n\n\n// Progress\n//\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\nprogress {\n  vertical-align: baseline;\n}\n\n\n// Hidden attribute\n//\n// Always hide an element with the `hidden` HTML attribute.\n\n[hidden] {\n  display: none !important;\n}\n","// stylelint-disable property-disallowed-list\n// Single side border-radius\n\n// Helper function to replace negative values with 0\n@function valid-radius($radius) {\n  $return: ();\n  @each $value in $radius {\n    @if type-of($value) == number {\n      $return: append($return, max($value, 0));\n    } @else {\n      $return: append($return, $value);\n    }\n  }\n  @return $return;\n}\n\n// scss-docs-start border-radius-mixins\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n  @if $enable-rounded {\n    border-radius: valid-radius($radius);\n  }\n  @else if $fallback-border-radius != false {\n    border-radius: $fallback-border-radius;\n  }\n}\n\n@mixin border-top-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n// scss-docs-end border-radius-mixins\n"]}


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Bootstrap Course </title>
 7 |     <link rel="stylesheet" href="layout.css">
 8 |     <link rel="stylesheet" href="/bootstrap course/css/bootstrap.css">
 9 | </head>
10 | <body>
11 |     <!-- For Bootstrap container and its break points -->
12 |     <!-- <div class="container">
13 |         <p> Container class</p>
14 |     </div>
15 |     <div class="container-fluid">
16 |         <p> Container -fluid class</p>
17 |     </div> -->
18 |     <!-- --------------------------------------------------------------- -->
19 |    <div class="container">
20 |     <div class="row">
21 |         <div class="col-1">1</div>
22 |         <div class="col-1">2</div>
23 |         <div class="col-1">3</div>
24 |         <div class="col-1">4</div>
25 |         <div class="col-1">5</div>
26 |         <div class="col-1">6</div>
27 |         <div class="col-1">7</div>
28 |         <div class="col-1">8</div>
29 |         <div class="col-1">9</div>
30 |         <div class="col-1">10</div>
31 |         <div class="col-1">11</div>
32 |         <div class="col-1">12</div>
33 |     </div>
34 |    </div>
35 |    <br>
36 |     <div class="container">
37 |         <div class="row">
38 |             <div class="col">
39 |                 <p>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?</p>
40 |             </div>
41 |             <div class="col">
42 |                 <p>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?</p>
43 | 
44 |             </div>
45 |             <div class="col">
46 |                 <p>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?</p>
47 | 
48 |             </div>
49 |             <div class="col">
50 |                 <p>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?</p>
51 | 
52 |             </div>
53 |         </div>
54 |     </div>
55 |     <br>
56 |           <div class="container">
57 |             <div class="row">
58 |                 <div class="col-3">[col -3]</div>
59 |                 <div class="col-9">[col-9]</div>
60 |             </div>
61 |           </div>
62 |           <br>
63 |           <div class="container">
64 |             <div class="row">
65 |                 <div class="col-6">[col-6]</div>
66 |                 <div class="col-6">[col-6]</div>
67 |             </div>
68 |           </div>
69 |       
70 |           
71 |       
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 
82 |     <!---  Bootstrap JS-->
83 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
84 |     <script src="/bootstrap course/js/bootstrap.js"></script>
85 | 
86 | </body>
87 | </html>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/flexbox/f.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Flexbox</title>
 7 |     <link rel="stylesheet" href="f.css">
 8 | </head>
 9 | <body>
10 |     <div class="parent">
11 |         <div class="child1">child1</div>
12 |         <div class="child2">child2</div>
13 |         <div class="child3">child3</div>
14 |         <!--<div class="child4">child4</div>-->
15 |     </div>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/flexbox_landingpage/fl.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>FlexBox_Landingpage</title>
 7 |     <link rel="stylesheet" href="fl.css">
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <div class="container">
12 |             <nav>
13 |                 <div class="logo">
14 |                     <img src="logo.jpg" alt="picture of logo">
15 |                 </div>
16 |                 <ul class="navbar">
17 |                     <li><a href=""> Home</a></li>
18 |                     <li><a href=""> About</a></li>
19 |                     <li><a href=""> Services</a></li>
20 |                     <li><a href=""> ContactUs </a></li>
21 |                 </ul>
22 |             </nav>
23 |         </div>
24 |     </header>
25 |     <main>
26 |         <div class="hero-section">
27 |             <img src="pic.jpg" alt="an image">
28 |             <div class="hero-section-content">
29 |                 <h1> Welcome To The Landing Page</h1>
30 |                 <p>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.</p>
31 |             </div>
32 |         </div>
33 |         <div class="gallery-section">
34 |             <div class="container">
35 |                 <h2>Gallery</h2>
36 |                 <ul class="gallery-list">
37 |                     <li><img src="pic2.jpg" alt="pic2"></li>
38 |                     <li><img src="pic2.jpg" alt="pic2"></li>
39 |                     <li><img src="pic2.jpg" alt="pic2"></li>
40 |                     <li><img src="pic2.jpg" alt="pic2"></li>
41 |                     <li><img src="pic2.jpg" alt="pic2"></li>
42 |                     <li><img src="pic2.jpg" alt="pic2"></li>
43 |                     <li><img src="pic2.jpg" alt="pic2"></li>
44 |                     <li><img src="pic2.jpg" alt="pic2"></li>
45 |                     <li><img src="pic2.jpg" alt="pic2"></li>
46 |                     <li><img src="pic2.jpg" alt="pic2"></li>
47 |                     <li><img src="pic2.jpg" alt="pic2"></li>
48 |                 </ul>
49 |             </div>
50 |         </div>
51 |     </main>
52 |                 
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/flexbox_landingpage/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/flexbox_landingpage/logo.jpg


--------------------------------------------------------------------------------
/flexbox_landingpage/pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/flexbox_landingpage/pic.jpg


--------------------------------------------------------------------------------
/flexbox_landingpage/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/flexbox_landingpage/pic2.jpg


--------------------------------------------------------------------------------
/js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/js_tasks/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_tasks/1/1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 |     <link rel="stylesheet" href="1.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |     <h3>Create a function that takes a string and returns a string in which each character is
12 |         repeated once : </h3>
13 |         <h4> doubleChar("String") ➞ "SSttrriinngg"
14 |             doubleChar("Hello World!") ➞ "HHeelllloo WWoorrlldd!!"
15 |             doubleChar("1234!_ ") ➞ "11223344!!__ "
16 |              </h4>
17 | 
18 |              <label>Input String :</label><br>
19 |              <input type="text" name="text" id="text"  placeholder="Enter the string Here"    >
20 |              <br>
21 |              <button onclick="repeat() "> Click me </button>
22 |              <h3 id="answer"> Repeated string would appear here</h3>
23 |     </div>
24 |     <script src="1.js"></script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/js_tasks/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<arr.length;i++){
13 |         newArr.push(arr[i].repeat(2))
14 |     }
15 |    // document.write(newArr.join(""))
16 |      document.getElementById("answer").innerText=`${newArr.join("")}`;
17 | }
18 | 
19 | 
20 | 
21 | 
22 | 
23 | 
24 | // function repeat(str){
25 | //     let arr=Array.from(str)
26 | //     let newArr=[]
27 | //     for(var i=0;i<arr.length;i++){
28 | //         newArr.push(arr[i].repeat(2))
29 | //     }
30 | //     console.log(newArr.join(""))
31 | // }
32 | // repeat("sad")


--------------------------------------------------------------------------------
/js_tasks/1/10.js:
--------------------------------------------------------------------------------
 1 | function totalPrice(groceries) {
 2 |     let total = 0;
 3 |   
 4 |     for (const item of groceries) {
 5 |       total += item.quantity * item.price;
 6 |     }
 7 |   
 8 |     return total;
 9 |   }
10 |   console.log(totalPrice([
11 |     { product: "Milk", quantity: 1, price: 10 },
12 |     { product: "Eggs", quantity: 12, price: 5 },
13 |     { product: "Bread", quantity: 2, price: 20 },
14 |     { product: "Cheese", quantity: 1, price: 30 }
15 |     ]));


--------------------------------------------------------------------------------
/js_tasks/1/2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h3>Write a JavaScript program to get the following output.</h3>
10 |         <h3>Input: "!trams era uoY"</h3>
11 |         <h3>Output: “You are smart</h3>
12 |         <input type="text" id="text">
13 |         <button onclick="reverse()">Change</button><br/>
14 |         <h3 id="ans"> Output will display here</h3>
15 |     <script>
16 |         function reverse(){
17 |             var str=document.getElementById("text").value;
18 |   var arr =  str.split("").reverse().join("");
19 |     document.getElementById("ans").innerHTML=arr;
20 | }
21 | 
22 |     </script>
23 |     
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/js_tasks/1/2.js:
--------------------------------------------------------------------------------
1 | function reverse(str){
2 |   var arr =  str.split("").reverse().join("");
3 |     console.log( arr);
4 | }
5 | reverse("hello");


--------------------------------------------------------------------------------
/js_tasks/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_tasks/1/4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |    <h3>Print the following Reverse Triangle pattern.</h3> 
10 |    <pre>
11 |         54321
12 |         5432
13 |         543
14 |         54
15 |         5
16 |     </pre>
17 | 
18 |     <script>
19 | 
20 | var i,j,k;
21 | for(i=1; i<=5; i++) // for number of level to print ,here 5 ie,i<=5
22 | {
23 |     
24 |       
25 |         for(k=5; k>=i; k--) //for the round of no.of stars to be printed
26 |         { 
27 |             document.write(k);
28 |         }
29 | 
30 |     document.write("<br>");
31 | }
32 | 
33 |     </script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/js_tasks/1/4.js:
--------------------------------------------------------------------------------
 1 | let n=5;
 2 | let string="";
 3 | for(i=0;i<n;i++){
 4 |     for(j=0;j<i;j++)
 5 |     {string+=" "};
 6 |     for(k=0;k<(2*i -1);k++)
 7 |     { string+="*"};
 8 |     string+="\n";
 9 | }
10 | console.log(string);


--------------------------------------------------------------------------------
/js_tasks/1/5.js:
--------------------------------------------------------------------------------
 1 | function multi(num,length){
 2 |     let output =[];
 3 |     for(let i=1;output.length < length;i++){
 4 |         output.push(num*i);
 5 |     }
 6 |     return output;
 7 | }
 8 | console.log(multi(3,4));
 9 | 
10 | // Create a function that takes two numbers as arguments (num, length) and returns an
11 | // array of multiples of num until the array length reaches length.
12 | // Examples
13 | // arrayOfMultiples(7, 5) ➞ [7, 14, 21, 28, 35]
14 | // arrayOfMultiples(12, 10) ➞ [12, 24, 36, 48, 60, 72, 84, 96, 108, 120]
15 | // arrayOfMultiples(17, 6) ➞ [17, 34, 51, 68, 85, 102]


--------------------------------------------------------------------------------
/js_tasks/1/6.js:
--------------------------------------------------------------------------------
 1 | function large(arr){
 2 |     let outarr=[];
 3 |     for( let subarr of arr){
 4 |         const largest=Math.max(...subarr);
 5 |         outarr.push(largest);
 6 |     }
 7 |     return outarr;
 8 | }
 9 | console.log(large([[4, 2, 7, 1], [20, 70, 40, 90], [1, 2, 0]]));
10 | 
11 | 
12 | // Create a function that takes an array of arrays with numbers. Return a new (single)
13 | // array with the largest numbers of each.
14 | // Examples
15 | // findLargest([[4, 2, 7, 1], [20, 70, 40, 90], [1, 2, 0]]) ➞ [7, 90, 2]
16 | // findLargest([[-34, -54, -74], [-32, -2, -65], [-54, 7, -43]]) ➞ [-34, -2, 7]
17 | // findLargest([[0.4321, 0.7634, 0.652], [1.324, 9.32, 2.5423, 6.4314], [9, 3, 6, 3]]) ➞
18 | // [0.7634, 9.32, 9]


--------------------------------------------------------------------------------
/js_tasks/1/7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h3>Print the following Reverse Triangle pattern</h3>
10 |     <pre>
11 | 54321
12 | 4321
13 | 321
14 | 21
15 | 1
16 |     </pre>
17 | 
18 |     <script>
19 |         var i,j,k;
20 |         for(i=0;i<=5;i++){
21 |             for(j=(5-i);j>=1;j--)
22 |             { document.write(j);}
23 |            
24 |             document.write("<br>");
25 |         }
26 |     
27 |     </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/js_tasks/1/8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h3>hollow triangle star patttern</h3>
10 |     <script>
11 |       var i,j,k;
12 |       for(i=1;i<=5;i++){
13 |         for(j=5;j>i;j--){
14 |             document.write(" &nbsp;");
15 |         }
16 |         for(k=1;k<=((2*i)-1);k++){
17 |             if(i==1||i==5||k==1||k==(2*i-1) )
18 |             {
19 |             document.write("*")
20 |             } else{
21 |                 document.write("&nbsp;&nbsp");
22 |             }
23 |         }
24 |         document.write("<br>")
25 |       }
26 |     </script>
27 | </body>
28 | </html>
29 | 
30 | 


--------------------------------------------------------------------------------
/js_tasks/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.age<minage){minage=member.age;}
 7 |         if(member.age>maxage){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_tasks/10 JS.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/js_tasks/10 JS.pdf


--------------------------------------------------------------------------------
/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 |  


--------------------------------------------------------------------------------
/margin_vs_padding/m.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Margin Vs Padding</title>
 7 |     <link rel="stylesheet" href="m.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="wrapper">
12 |             <div class="imgbox">
13 |                 <img class="img" src="path.jpg" alt="forest path">
14 |             </div>
15 |             <div class="contentbox">
16 |                 <h2>This is a heading</h2>
17 |                 <h4>Sub Heading</h4>
18 |                 <p>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?</p>
19 |             </div>
20 |         </div>
21 |         
22 |     </div>
23 |     
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/margin_vs_padding/path.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/margin_vs_padding/path.jpg


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/specificity/sp.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 |     <link rel="stylesheet" href="sp.css">
 8 | </head>
 9 | <body>
10 |    <div class="container">
11 |     <div class="one">
12 |         <h1>Section-1</h1>
13 |     </div>
14 |     <div class="two" >
15 |         <h1> Section-2</h1>
16 |     </div>
17 |     <div class="three">
18 |         <h1>Secton-3</h1>
19 |     </div>
20 | </div>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/specificity/sp.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/specificity/sp.js


--------------------------------------------------------------------------------
/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 */


--------------------------------------------------------------------------------
/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 */


--------------------------------------------------------------------------------
/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 */


--------------------------------------------------------------------------------
/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 */


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/tryout for bootsrap p1/p1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" href="p1.css">
  8 |     <link rel="stylesheet" href="./css/bootstrap.css">
  9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
 10 | </head>
 11 | <body>
 12 |     <!-----------------------------------      Navbar    ---------------------- -->
 13 | 
 14 |     <nav class="navbar navbar-expand-sm bg-dark fixed-top">
 15 |         <div class="container-fluid">
 16 |           <a class="navbar-brand text-white fw-bold " href="#">TASTY</a>
 17 |           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 18 |             <span class="navbar-toggler-icon"></span>
 19 |           </button>
 20 |           <div class="collapse navbar-collapse" id="navbarSupportedContent">
 21 |             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 22 |               <li class="nav-item">
 23 |                 <a class="nav-link active text-warning fw-bold" aria-current="page" href="#carouselExampleCaptions">Home</a>
 24 |               </li>
 25 |               <li class="nav-item">
 26 |                 <a class="nav-link text-warning fw-bold" href="#order">Orders</a>
 27 |               </li>
 28 |               <li class="nav-item dropdown">
 29 |                 <a class="nav-link dropdown-toggle text-warning fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 30 |                   Deals
 31 |                 </a>
 32 |                 <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 33 |                   <li><a class="dropdown-item " href="#">dsfsddf</a></li>
 34 |                   <li><a class="dropdown-item" href="#">Another action</a></li>
 35 |                   <li><hr class="dropdown-divider"></li>
 36 |                   <li><a class="dropdown-item" href="#">Something else here</a></li>
 37 |                 </ul>
 38 |               </li>
 39 |               <li class="nav-item">
 40 |                 <a class="nav-link  text-warning fw-bold" href="#footer" >Location</a>
 41 |               </li>
 42 |             </ul>
 43 |             <form class="d-flex" role="search">
 44 |               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
 45 |               <button class="btn btn-outline-warning text-light" type="submit">Search</button>
 46 |             </form>
 47 |           </div>
 48 |         </div>
 49 |       </nav>
 50 |       <!-- -------------------------------------   Carousel     ------------------------------------------>
 51 |       <div id="carouselExampleCaptions" class="carousel slide">
 52 |         <div class="carousel-indicators">
 53 |           <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
 54 |           <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
 55 |           <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
 56 |         </div>
 57 |         <div class="carousel-inner">
 58 |           <div class="carousel-item active">
 59 |             <img src="pic1.jpg" class="slide d-block w-100" alt="food1">
 60 |             <div class="carousel-caption d-none d-md-block">
 61 |               <h5 class="text-dark fw-bold bg-warning rounded-pill">First slide label</h5>
 62 |               <p class="text-dark fw-bold bg-warning rounded-pill">Some representative placeholder content for the first slide.</p>
 63 |             </div>
 64 |           </div>
 65 |           <div class="carousel-item">
 66 |             <img src="pic2.jpg" class="slide d-block w-100" alt="food2">
 67 |             <div class="carousel-caption d-none d-md-block">
 68 |               <h5 class="text-dark fw-bold bg-warning rounded-pill">Second slide label</h5>
 69 |               <p class="text-dark fw-bold bg-warning rounded-pill">Some representative placeholder content for the second slide.</p>
 70 |             </div>
 71 |           </div>
 72 |           <div class="carousel-item">
 73 |             <img src="pic3.jpg" class="slide d-block w-100" alt="food3">
 74 |             <div class="carousel-caption d-none d-md-block">
 75 |               <h5 class="text-dark fw-bold bg-warning rounded-pill">Third slide label</h5>
 76 |               <p class="text-dark fw-bold bg-warning rounded-pill">Some representative placeholder content for the third slide.</p>
 77 |             </div>
 78 |             
 79 |           </div>
 80 |         </div>
 81 |         <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
 82 |           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 83 |           <span class="visually-hidden">Previous</span>
 84 |         </button>
 85 |         <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
 86 |           <span class="carousel-control-next-icon" aria-hidden="true"></span>
 87 |           <span class="visually-hidden">Next</span>
 88 |         </button>
 89 |       </div>
 90 |       <!--Orders -->
 91 |       <div class="container" id="order">
 92 |         <h2 class=" ww text-white mt-1 border-3 text-center fw-bold bg-secondary rounded-pill" >Order Your Food Now !!</h2>
 93 | 
 94 |            <div class="row">
 95 |                 <div class="col-4"><div class="card" style="width: 18rem; ">
 96 |                     <img src="pic4.jpg" class="card-img-top" alt="...">
 97 |                     <div class="card-body">
 98 |                       <h5 class="card-title">Card title</h5>
 99 |                       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
100 |                       <a href="#" class="btn btn-primary">Go somewhere</a>
101 |                     </div>
102 |                   </div></div>
103 |                 <div class="col-4"><div class="card" style="width: 18rem;">
104 |                     <img src="pic1.jpg" class="card-img-top" alt="...">
105 |                     <div class="card-body">
106 |                       <h5 class="card-title">Card title</h5>
107 |                       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
108 |                       <a href="#" class="btn btn-primary">Go somewhere</a>
109 |                     </div>
110 |                   </div></div>
111 |                 <div class="col-4">
112 |                     <div class="card" style="width: 18rem;">
113 |                         <img src="pic2.jpg" class="card-img-top" alt="...">
114 |                         <div class="card-body">
115 |                           <h5 class="card-title">Card title</h5>
116 |                           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
117 |                           <a href="#" class="btn btn-primary">Go somewhere</a>
118 |                         </div>
119 |                       </div>
120 |                 </div>
121 |                 
122 |             </div>
123 |                 <div class="row">
124 |                     <div class="col-4"><div class="card" style="width: 18rem;">
125 |                         <img src="pic3.jpg" class="card-img-top" alt="...">
126 |                         <div class="card-body">
127 |                           <h5 class="card-title">Card title</h5>
128 |                           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
129 |                           <a href="#" class="btn btn-primary">Go somewhere</a>
130 |                         </div>
131 |                       </div></div>
132 |                     <div class="col-4"><div class="card" style="width: 18rem;">
133 |                         <img src="pic2.jpg" class="card-img-top" alt="...">
134 |                         <div class="card-body">
135 |                           <h5 class="card-title">Card title</h5>
136 |                           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
137 |                           <a href="#" class="btn btn-primary">Go somewhere</a>
138 |                         </div>
139 |                       </div></div>
140 |                     <div class="col-4"><div class="card" style="width: 18rem;">
141 |                         <img src="pic1.jpg" class="card-img-top" alt="...">
142 |                         <div class="card-body">
143 |                           <h5 class="card-title">Card title</h5>
144 |                           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
145 |                           <a href="#" class="btn btn-primary">Go somewhere</a>
146 |                         </div>
147 |                       </div></div>
148 |                     
149 |                 </div>
150 |         
151 |         </div>
152 | 
153 |         
154 |     </div>
155 | <!-- footer -->
156 | <div class="container-fluid bg-warning" id="footer">
157 |     <div class="row">
158 |         <h1 class="text-center">Location</h1>
159 |         <div class="col-6">
160 |             <h1 class="text-white"> Tasty foods restaurant</h1>
161 |             <h4 class="text-white">USA</h4>
162 |             <h4 class="text-white">12 Street</h4>
163 |             <p class="text-white"><i class="fas fa-phone"></i>&nbsp;+970 - XXXXXXX</p>
164 |         </div>
165 |         <div class="col-6">
166 |             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d198061.17426313536!2d-84.85223378289089!3d39.13592461819759!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x884051b1de3821f9%3A0x69fb7e8be4c09317!2sCincinnati%2C%20OH%2C%20USA!5e0!3m2!1sen!2sin!4v1692268972877!5m2!1sen!2sin" width="700" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
167 |         </div>
168 |     </div>
169 | </div>
170 | 
171 | 
172 |     <script src="./js/bootstrap.js"></script>
173 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
174 | 
175 | </body>
176 | </html>


--------------------------------------------------------------------------------
/tryout for bootsrap p1/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/tryout for bootsrap p1/pic1.jpg


--------------------------------------------------------------------------------
/tryout for bootsrap p1/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/tryout for bootsrap p1/pic2.jpg


--------------------------------------------------------------------------------
/tryout for bootsrap p1/pic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/tryout for bootsrap p1/pic3.jpg


--------------------------------------------------------------------------------
/tryout for bootsrap p1/pic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/tryout for bootsrap p1/pic4.jpg


--------------------------------------------------------------------------------
/verth.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 | 
10 | </body>
11 | <script src="verth.js"></script>
12 | </html>


--------------------------------------------------------------------------------
/verth.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SID41214/JavaScript_Introduction/d0824be8910f5e5a11b65a637d0937e481b52fc4/verth.js


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