├── .gitignore
├── CSS Notes.pdf
├── Course Code
    ├── css
    │   ├── level 1
    │   │   └── external styling.css
    │   ├── level 5
    │   │   ├── display_block.css
    │   │   ├── display_inline.css
    │   │   ├── display_inline_block.css
    │   │   ├── display_none.css
    │   │   ├── positions.css
    │   │   ├── unit_em.css
    │   │   ├── unit_percentage.css
    │   │   ├── unit_rem.css
    │   │   └── z-index.css
    │   └── level 6
    │   │   ├── flex_wrap.css
    │   │   ├── flexbox_align_content.css
    │   │   ├── flexbox_align_items.css
    │   │   ├── flexbox_align_self.css
    │   │   ├── flexbox_direction.css
    │   │   ├── flexbox_flex_shrink.css
    │   │   ├── flexbox_items_order.css
    │   │   ├── flexbox_justify_content.css
    │   │   ├── float.css
    │   │   └── grid.css
    ├── html
    │   ├── level 1
    │   │   ├── class selector.html
    │   │   ├── color.html
    │   │   ├── descendant selector.html
    │   │   ├── element selector.html
    │   │   ├── external styling.html
    │   │   ├── group selector.html
    │   │   ├── id class.html
    │   │   ├── id selector.html
    │   │   ├── inline styling.html
    │   │   ├── internal styling.html
    │   │   └── universal selector.html
    │   ├── level 2
    │   │   ├── alpha.html
    │   │   ├── background color.html
    │   │   ├── background-image.html
    │   │   ├── height_width.html
    │   │   ├── hex.html
    │   │   ├── rgb.html
    │   │   └── visibility.html
    │   ├── level 3
    │   │   ├── font_family.html
    │   │   ├── font_size.html
    │   │   ├── font_style.html
    │   │   ├── font_weight.html
    │   │   ├── icons.html
    │   │   ├── line_height.html
    │   │   ├── text_align.html
    │   │   ├── text_decoration.html
    │   │   ├── text_decoration_color.html
    │   │   ├── text_decoration_style.html
    │   │   └── text_transform.html
    │   ├── level 4
    │   │   ├── border.html
    │   │   ├── border_radius.html
    │   │   ├── box_sizing.html
    │   │   ├── margin.html
    │   │   └── padding.html
    │   ├── level 5
    │   │   ├── display_block.html
    │   │   ├── display_inline.html
    │   │   ├── display_inline_block.html
    │   │   ├── display_none.html
    │   │   ├── position.html
    │   │   ├── unit_em.html
    │   │   ├── unit_percentage.html
    │   │   ├── unit_rem.html
    │   │   ├── unit_vh_vw.html
    │   │   └── z-index.html
    │   ├── level 6
    │   │   ├── flex_wrap.html
    │   │   ├── flexbox_align_content.html
    │   │   ├── flexbox_align_items.html
    │   │   ├── flexbox_align_self.html
    │   │   ├── flexbox_direction.html
    │   │   ├── flexbox_flex_shrink.html
    │   │   ├── flexbox_items_order.html
    │   │   ├── flexbox_justify_content.html
    │   │   ├── float.html
    │   │   ├── grid.html
    │   │   ├── media_query_combination.html
    │   │   ├── media_query_max_width.html
    │   │   ├── media_query_min_width.html
    │   │   └── media_query_width.html
    │   └── level 7
    │   │   ├── animation.html
    │   │   ├── animation_percentage.html
    │   │   ├── pseudo_classes.html
    │   │   ├── transform_rotate.html
    │   │   ├── transform_scale.html
    │   │   ├── transform_skew.html
    │   │   ├── transform_translate.html
    │   │   └── transition.html
    ├── images
    │   └── css.png
    └── index.html
├── Practise Sets
    ├── .DS_Store
    ├── Set 1
    │   ├── index.css
    │   └── index.html
    ├── Set 2
    │   ├── index.html
    │   └── jeans.webp
    ├── Set 3
    │   ├── index.css
    │   └── index.html
    ├── Set 4
    │   └── index.html
    ├── Set 5
    │   ├── index.css
    │   └── index.html
    ├── Set 6
    │   ├── bharat.jpeg
    │   ├── index.css
    │   └── index.html
    └── Set 7
    │   └── index.html
├── Project Myntra Clone
    ├── images
    │   ├── banner.jpg
    │   ├── categories
    │   │   ├── 1.jpg
    │   │   ├── 10.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   ├── 6.jpg
    │   │   ├── 7.jpg
    │   │   ├── 8.jpg
    │   │   └── 9.jpg
    │   ├── myntra_logo.webp
    │   └── offers
    │   │   ├── 1.png
    │   │   ├── 10.png
    │   │   ├── 11.png
    │   │   ├── 12.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   ├── 4.png
    │   │   ├── 5.png
    │   │   ├── 6.png
    │   │   ├── 7.png
    │   │   ├── 8.png
    │   │   └── 9.png
    ├── index.css
    └── index.html
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/CSS Notes.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/CSS Notes.pdf


--------------------------------------------------------------------------------
/Course Code/css/level 1/external styling.css:
--------------------------------------------------------------------------------
1 | h1 {
2 |     color: red;
3 | }
4 | 
5 | p {
6 |     color: green;
7 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/display_block.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |     height: 100px;
 3 |     width: 100px;
 4 |     background-color: blueviolet;
 5 |     margin: 10px;
 6 |     text-align: center;
 7 |     border: 5px solid black;
 8 |     border-radius: 10px;
 9 | 
10 |     display: block;
11 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/display_inline.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |     height: 100px;
 3 |     width: 100px;
 4 |     background-color: blueviolet;
 5 |     margin: 10px;
 6 |     text-align: center;
 7 |     border: 5px solid black;
 8 |     border-radius: 10px;
 9 | 
10 |     display: inline;
11 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/display_inline_block.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |     height: 100px;
 3 |     width: 100px;
 4 |     background-color: blueviolet;
 5 |     margin: 10px;
 6 |     text-align: center;
 7 |     border: 5px solid black;
 8 |     border-radius: 10px;
 9 | 
10 |     display: inline-block;
11 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/display_none.css:
--------------------------------------------------------------------------------
 1 | .box {
 2 |     height: 100px;
 3 |     width: 100px;
 4 |     background-color: blueviolet;
 5 |     margin: 10px;
 6 |     text-align: center;
 7 |     border: 5px solid black;
 8 |     border-radius: 10px;
 9 | }
10 | 
11 | #div2 {
12 |     display: none;
13 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/positions.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |     height: 70px;
 3 |     width: 70px;
 4 |     background-color: red;
 5 |     border: 5px solid black;
 6 |     margin: 100px;
 7 | }
 8 | #div1 {
 9 |     position: static;
10 | }
11 | #div2 {
12 |     position: relative;
13 |     top: 20px;
14 |     left: 90px;
15 | }
16 | #div3 {
17 |     position: fixed;
18 |     top: 20px;
19 |     left: 90px;
20 | }
21 | #div4 {
22 |     position: absolute;
23 |     top: 200px;
24 |     left: 200px;
25 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/unit_em.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-size: 100px;
 3 | }
 4 | 
 5 | #first {
 6 |     height: 200px;
 7 |     width: 200px;
 8 |     background-color: aqua;
 9 |     font-size: 25px;
10 | }
11 | 
12 | #second {
13 |     background-color: blueviolet;
14 |     width: 70%;
15 |     height: 50%;
16 |     font-size: 2em;
17 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/unit_percentage.css:
--------------------------------------------------------------------------------
 1 | #first {
 2 |     height: 200px;
 3 |     width: 200px;
 4 |     background-color: aqua;
 5 |     font-size: 25px;
 6 | }
 7 | 
 8 | #second {
 9 |     background-color: blueviolet;
10 |     width: 50%;
11 |     height: 30%;
12 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/unit_rem.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-size: 50px;
 3 | }
 4 | 
 5 | #first {
 6 |     height: 200px;
 7 |     width: 200px;
 8 |     background-color: aqua;
 9 |     font-size: 10px;
10 | }
11 | 
12 | #second {
13 |     background-color: blueviolet;
14 |     width: 70%;
15 |     height: 50%;
16 |     font-size: 2rem;
17 | }


--------------------------------------------------------------------------------
/Course Code/css/level 5/z-index.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     position: relative;
 3 |   }
 4 |   .box1, .box2 {
 5 |     position: absolute;
 6 |     border: 3px solid black;
 7 |     width: 100px;
 8 |     height: 100px;
 9 |     text-align: center;
10 |     font-size: 25px;
11 |   }
12 |   .box1 {
13 |     background-color: red;
14 |     left: 20px;
15 |     top: 60px;
16 |     z-index: 2;
17 |   }
18 |   .box2 {
19 |     background-color: aqua;
20 |     left: 60px;
21 |     top: 20px;
22 |     z-index: 1;
23 |   }


--------------------------------------------------------------------------------
/Course Code/css/level 6/flex_wrap.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 100px;
 7 |     width: 100px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 250px;
14 |     width: 335px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     flex-wrap: wrap;
21 | }
22 | 
23 | #box1 { background-color: aqua;}
24 | #box2 { background-color: blueviolet;}
25 | #box3 { background-color: yellow;}
26 | #box4 { background-color: tomato;}


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_align_content.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 75px;
 7 |     width: 75px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 300px;
14 |     width: 400px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     flex-direction: row;
21 |     justify-content: center;
22 |     flex-wrap: wrap;
23 |     align-content: center;
24 | }
25 | 
26 | #box1 { background-color: aqua;}
27 | #box2 { background-color: blueviolet;}
28 | #box3 { background-color: yellow;}
29 | #box4 { background-color: hotpink;}
30 | #box5 { background-color: gold}
31 | #box6 { background-color: lightslategray;}


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_align_items.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 75px;
 7 |     width: 75px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 300px;
14 |     width: 400px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     flex-direction: row;
21 |     justify-content: center;
22 |     align-items: center;
23 | }
24 | 
25 | #box1 { background-color: aqua;}
26 | #box2 { background-color: blueviolet;}
27 | #box3 { background-color: yellow;}


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_align_self.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 75px;
 7 |     width: 75px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 300px;
14 |     width: 400px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     flex-direction: row;
21 |     justify-content: center;
22 |     flex-wrap: wrap;
23 |     align-items: start;
24 | }
25 | 
26 | #box1 { background-color: aqua;}
27 | #box2 { background-color: blueviolet;}
28 | #box4 { background-color: hotpink;}
29 | #box3 { 
30 |     background-color: yellow;
31 |     align-self: center;
32 | }


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_direction.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 100px;
 7 |     width: 100px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 150px;
14 |     width: 600px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     flex-direction: row-reverse;
21 | }
22 | 
23 | #box1 { background-color: aqua;}
24 | #box2 { background-color: blueviolet;}
25 | #box3 { background-color: yellow;}
26 | #box4 { background-color: tomato;}


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_flex_shrink.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 75px;
 7 |     width: 75px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 150px;
14 |     width: 500px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     justify-content: space-between;
21 | }
22 | 
23 | #box1 { background-color: aqua;}
24 | #box2 { background-color: blueviolet;}
25 | #box3 {
26 |     background-color: yellow;
27 |     flex-grow: 4;
28 | }
29 | #box4 { background-color: tomato;}


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_items_order.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 75px;
 7 |     width: 75px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 150px;
14 |     width: 600px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     justify-content: space-between;
21 | }
22 | 
23 | #box1 {
24 |     background-color: aqua;
25 |     order: 3
26 | }
27 | #box2 {
28 |     background-color: blueviolet;
29 |     order: 1;
30 | }
31 | #box3 {
32 |     background-color: yellow;
33 |     order: 4;
34 | }
35 | #box4 {
36 |     background-color: tomato;
37 |     order: 2;
38 | }


--------------------------------------------------------------------------------
/Course Code/css/level 6/flexbox_justify_content.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | .box {
 6 |     height: 75px;
 7 |     width: 75px;
 8 |     border: 3px solid black;
 9 |     margin-right: 5px;
10 | }
11 | #heading {margin-left: 50px;}
12 | #container {
13 |     height: 150px;
14 |     width: 600px;
15 |     padding: 10px;
16 |     margin: 20px;
17 |     border: 3px solid black;
18 | 
19 |     display: flex;
20 |     justify-content: space-between;
21 | }
22 | 
23 | #box1 { background-color: aqua;}
24 | #box2 { background-color: blueviolet;}
25 | #box3 { background-color: yellow;}
26 | #box4 { background-color: tomato;}


--------------------------------------------------------------------------------
/Course Code/css/level 6/float.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     height: 110px;
 3 |     width: 300px;
 4 |     border: 1px solid #000;
 5 | }
 6 | 
 7 | .box {
 8 |     width: 100px;
 9 |     height: 100px;
10 |     margin: 5px;
11 | }
12 | 
13 | .box1 {
14 |     background-color: red;
15 |     float: right;
16 | }
17 | 
18 | .box2 {
19 |     background-color: blue;
20 |     float: left;
21 | }


--------------------------------------------------------------------------------
/Course Code/css/level 6/grid.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     display: grid;
 3 |     grid-template-columns: 50px 50px;
 4 |     grid-template-rows: 50px 50px;
 5 |   }
 6 |   
 7 |   .item1 {
 8 |     grid-column: 1 / 2;
 9 |     grid-row: 1 / 2;
10 |     background-color: lightblue;
11 |   }
12 |   
13 |   .item2 {
14 |     grid-column: 2 / 2;
15 |     grid-row: 1 / 2;
16 |     background-color: lightgreen;
17 |   }
18 |   
19 |   .item3 {
20 |     grid-column: 1 / 2;
21 |     grid-row: 2 / 2;
22 |     background-color: lightpink;
23 |   }
24 |   
25 |   .item4 {
26 |     grid-column: 2 / 2;
27 |     grid-row: 2 / 2;
28 |     background-color: lightyellow;
29 |   }


--------------------------------------------------------------------------------
/Course Code/html/level 1/class selector.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Class selector</title>
 5 |     <style>
 6 |         #first { color: red; }
 7 |         .second { color: green; }
 8 |     </style>
 9 | </head>
10 | <body>
11 |     <div id="first">First Div</div>
12 |     <div class="second">Second Div</div>
13 |     <div class="second">Third Div</div>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/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 |     <style>
 8 |         h1 {
 9 |             color: green;
10 |         }
11 |         p {
12 |             color: red;
13 |         }
14 |     </style>
15 | </head>
16 | <body>
17 |     <h1>Learning Color</h1>
18 |     <p>This is my first paragraph</p>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/descendant selector.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Descendant selector</title>
 5 |     <style>
 6 |         div p { color: red }
 7 |         p { color: blue }
 8 |     </style>
 9 | </head>
10 | <body>
11 |     <div>
12 |         <p>
13 |             Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, optio?
14 |         </p>
15 |     </div>
16 |     <p>
17 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, optio?
18 |     </p>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/element selector.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Element Selector</title>
 5 |     <style>
 6 |         h1 {
 7 |             color: red
 8 |         }
 9 |     </style>
10 | </head>
11 | <body>
12 |     <h1>Universal Selector</h1>
13 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, nisi.</p>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/external styling.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>External Styling</title>
 5 |     <link rel="stylesheet" href="../css/external styling.css">
 6 | </head>
 7 | <body>
 8 |     <h1>External Styling</h1>
 9 |     <p>Paragraph is green</p>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/group selector.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Group selector</title>
 5 |     <style>
 6 |         h1, h2, h3 {
 7 |             color: red
 8 |         }
 9 |     </style>
10 | </head>
11 | <body>
12 |     <h1>Heading 1</h1>
13 |     <h2>Heading 2</h2>
14 |     <h3>Heading 3</h3>
15 |     <h4>Heading 4</h4>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/id class.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Attributes</title>
 5 | </head>
 6 | <body>
 7 |     <h1 id="top_heading">Id and Class</h1>
 8 |     <p class="article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, nisi.</p>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/id selector.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Id selector</title>
 5 |     <style>
 6 |         #first { color: red; }
 7 |         #second { color: green; }
 8 |     </style>
 9 | </head>
10 | <body>
11 |     <div id="first">First Div</div>
12 |     <div id="second">Second Div</div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/inline styling.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Inline Styling</title>
 5 | </head>
 6 | <body>
 7 |     <h1 style="color: red;">Inline Styling</h1>
 8 |     <p style="color: green;">Paragraph is green</p>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/internal styling.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Internal Styling</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Internal Styling</h1>
 8 |     <p>Paragraph is green</p>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 1/universal selector.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Universal Selector</title>
 5 |     <style>
 6 |         * {
 7 |             color: red
 8 |         }
 9 |     </style>
10 | </head>
11 | <body>
12 |     <h1>Universal Selector</h1>
13 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, nisi.</p>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/alpha.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Alpha Channel</title>
 5 | </head>
 6 | <body>
 7 |     <h1 style="color: rgb(255,0,0,0.1);">First</div>
 8 |     <h1 style="color: rgb(255,0,0,0.25);">First</div>
 9 |     <h1 style="color: rgb(255,0,0,0.5);">First</div>
10 |     <h1 style="color: rgb(255,0,0,0.75);">First</div>
11 |     <h1 style="color: rgb(255,0,0,1.0);">First</div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/background color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Background Color</title>
 5 |     <style>
 6 |         #first { color: black; background-color: rgba(98, 217, 58, 0.1); }
 7 |         #second { color: black; background-color: green; }
 8 |         button { color: black; background-color: blue; }
 9 |     </style>
10 | </head>
11 | <body>
12 |     <div id="first">First</div>
13 |     <div id="second">Second</div>
14 |     <button>Click Me</button>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/background-image.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Background Image</title>
 5 |     <style>
 6 |         #box1 {
 7 |             background-image: url(../../images/css.png);
 8 |             height: 500px;
 9 |             width: 500px;
10 |         }
11 |     </style>
12 | </head>
13 | <body>
14 |     <div id="box1"></div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/height_width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Height</title>
 5 |     <style>
 6 |         .box { height: 40px; width: 40px;}
 7 |         #box1 {background-color: red;}
 8 |         #box2 {background-color: blue;}
 9 |         #box3 {background-color: green;}
10 |     </style>
11 | </head>
12 | <body>
13 |     <div id="box1" class="box">Box 1</div> <br>
14 |     <div id="box2" class="box">Box 2</div> <br>
15 |     <div id="box3" class="box">Box 3</div>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/hex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Hex Color</title>
 5 | </head>
 6 | <body>
 7 |     <div style="background-color: #ff0000">First</div>
 8 |     <div style="background-color: #00ff00">Second</div>
 9 |     <div style="background-color: #0000ff">Third</div>
10 |     <div style="background-color: #402ae9">Fourth</div>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/rgb.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>RGB Color</title>
 5 | </head>
 6 | <body>
 7 |     <div style="background-color: rgb(255,0,0);">First</div>
 8 |     <div style="background-color: rgb(0,255,0);">Second</div>
 9 |     <div style="background-color: rgb(0,0,255);">Third</div>
10 |     <div style="background-color: rgb(29, 133, 48);">Fourth</div>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 2/visibility.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Visibility</title>
 5 |     <style>
 6 |         .box { height: 40px; width: 40px;}
 7 |         #box1 {background-color: red; visibility: hidden;}
 8 |         #box2 {background-color: green; visibility: visible;}
 9 |     </style>
10 | </head>
11 | <body>
12 |     <div id="box1" class="box">Box 1</div> <br>
13 |     <div id="box2" class="box">Box 2</div> <br>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/font_family.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Font Family</title>
 5 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 6 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 | <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
 8 |     <style>
 9 |         #first {font-family: Arial, Helvetica, sans-serif;}
10 |         #second {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
11 |         #third {font-family: 'Oswald', sans-serif;}
12 |     </style>
13 | </head>
14 | <body>
15 |     <p id="first">Lorem ipsum dolor sit amet</p>
16 |     <p id="second">Lorem ipsum dolor sit amet</p>
17 |     <p id="third">Lorem ipsum dolor sit amet</p>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/font_size.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Font Size</title>
 5 |     <style>
 6 |         #first {font-size: 5px;}
 7 |         #second {font-size: 15px;}
 8 |         #third {font-size: 25px;}
 9 |         #fourth {font-size: 35px;}
10 |     </style>
11 | </head>
12 | <body>
13 |     <p id="first">Lorem ipsum dolor sit amet</p>
14 |     <p id="second">Lorem ipsum dolor sit amet</p>
15 |     <p id="third">Lorem ipsum dolor sit amet</p>
16 |     <p id="fourth">Lorem ipsum dolor sit amet</p>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/font_style.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Font Style</title>
 5 |     <style>
 6 |         #first {font-style: italic;}
 7 |         #second {font-style: oblique;}
 8 |         #third {font-style: normal;}
 9 |     </style>
10 | </head>
11 | <body>
12 |     <p id="first">Lorem ipsum dolor sit amet</p>
13 |     <p id="second">Lorem ipsum dolor sit amet</p>
14 |     <p id="third">Lorem ipsum dolor sit amet</p>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/font_weight.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Font Weight</title>
 5 |     <style>
 6 |         #first {font-weight: 100;}
 7 |         #second {font-weight: 400;}
 8 |         #third {font-weight: 600;}
 9 |         #fourth {font-weight: 900;}
10 |     </style>
11 | </head>
12 | <body>
13 |     <p id="first">Lorem ipsum dolor sit amet</p>
14 |     <p id="second">Lorem ipsum dolor sit amet</p>
15 |     <p id="third">Lorem ipsum dolor sit amet</p>
16 |     <p id="fourth">Lorem ipsum dolor sit amet</p>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/icons.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Icons</title>
 5 |     <script src="https://kit.fontawesome.com/43290fa92d.js" crossorigin="anonymous"></script>
 6 | </head>
 7 | <body>
 8 |     <i class="fa-solid fa-house"></i>
 9 |     <i class="fa-brands fa-facebook"></i>
10 |     <i class="fa-brands fa-tiktok"></i>
11 |     <i class="fa-solid fa-poo" style="font-size: 40px;"></i>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/line_height.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Line Height</title>
 5 |     <style>
 6 |         #first { line-height: 6px; }
 7 |         #second { line-height: 30px; }
 8 |     </style>
 9 | </head>
10 | <body>
11 |     <p id="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam facere maxime autem, culpa</p> <hr>
12 |     <p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam facere maxime autem, culpa</p>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/text_align.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Text Align</title>
 5 |     <style>
 6 |         .box {height: 75px; width: 75px;}
 7 |         #box1 {background-color: red; text-align: center;}
 8 |         #box2 {background-color: green; text-align: left;}
 9 |         #box3 {background-color: blue; text-align: right;}
10 |     </style>
11 | </head>
12 | <body>
13 |     <h3 id="box1" class="box">Box1</h3>
14 |     <h3 id="box2" class="box">Box2</h3>
15 |     <h3 id="box3" class="box">Box3</h3>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/text_decoration.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Text Decoration</title>
 5 |     <style>
 6 |         #box1 {text-decoration: underline;}
 7 |         #box2 {text-decoration: overline;}
 8 |         #box3 {text-decoration: line-through;}
 9 |     </style>
10 | </head>
11 | <body>
12 |     <h3 id="box1" class="box">Box1</h3>
13 |     <h3 id="box2" class="box">Box2</h3>
14 |     <h3 id="box3" class="box">Box3</h3> <hr>
15 |     <a href="#">Link1</a> <br>
16 |     <a href="#" style="text-decoration: none;">Link2</a>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/text_decoration_color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Text Decoration Style</title>
 5 |     <style>
 6 |         .box {text-decoration: underline;}
 7 |         #box1 {text-decoration-color: red;}
 8 |         #box2 {text-decoration-color: blue;}
 9 |         #box3 {text-decoration-color: green;}
10 |         #box4 {text-decoration-color: rgb(86, 20, 86);}
11 |     </style>
12 | </head>
13 | <body>
14 |     <h3 id="box1" class="box">Box1</h3>
15 |     <h3 id="box2" class="box">Box2</h3>
16 |     <h3 id="box3" class="box">Box3</h3>
17 |     <h3 id="box4" class="box">Box4</h3>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/text_decoration_style.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Text Decoration Style</title>
 5 |     <style>
 6 |         .box {text-decoration: underline;}
 7 |         #box1 {text-decoration-style: dashed;}
 8 |         #box2 {text-decoration-style: double;}
 9 |         #box3 {text-decoration-style: solid;}
10 |         #box4 {text-decoration-style: wavy;}
11 |     </style>
12 | </head>
13 | <body>
14 |     <h3 id="box1" class="box">Box1</h3>
15 |     <h3 id="box2" class="box">Box2</h3>
16 |     <h3 id="box3" class="box">Box3</h3>
17 |     <h3 id="box4" class="box">Box4</h3>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 3/text_transform.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Text Transform</title>
 5 |     <style>
 6 |         #box1 {text-transform: uppercase;}
 7 |         #box2 {text-transform: lowercase;}
 8 |         #box3 {text-transform: capitalize;}
 9 |         #box4 {text-transform: none;}
10 |     </style>
11 | </head>
12 | <body>
13 |     <h3 id="box1" class="box">First box</h3>
14 |     <h3 id="box2" class="box">Second box</h3>
15 |     <h3 id="box3" class="box">Third box</h3>
16 |     <h3 id="bo43" class="box">Fourth box</h3>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 4/border.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Border</title>
 5 |     <style>
 6 |         * { margin: 0; padding: 0; }
 7 |         #button1 {
 8 |             height: 100px; width: 100px;
 9 |             border: 5px dashed black;
10 |             background-color: aquamarine;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <button id="button1">Click Me</button>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 4/border_radius.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Border Radius</title>
 5 |     <style>
 6 |         * { margin: 0; padding: 0; }
 7 |         #button1 {
 8 |             height: 100px; width: 100px;
 9 |             border: 5px solid black;
10 |             border-radius: 30px;
11 |             background-color: aquamarine;
12 |         }
13 |     </style>
14 | </head>
15 | <body>
16 |     <button id="button1">Click Me</button>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 4/box_sizing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Box Sizing</title>
 5 |     <style>
 6 |         * { margin: 0; padding: 0; }
 7 |         button {
 8 |             height: 100px; width: 100px;
 9 |             border: 4px solid black;
10 |             background-color: aquamarine;
11 |         }
12 |         #button1 { box-sizing: border-box; }
13 |         #button2 { box-sizing: content-box; }
14 |     </style>
15 | </head>
16 | <body>
17 |     <button id="button1">Click Me</button>
18 |     <button id="button2">Click Me</button>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 4/margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>margin</title>
 5 |     <style>
 6 |         * { margin: 0; padding: 0; }
 7 |         #button1 {
 8 |             margin: 15px 10px 5px 20px;
 9 |             padding: 10px;
10 |             background-color: aquamarine;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <button id="button1">Click Me</button>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 4/padding.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Padding</title>
 5 |     <style>
 6 |         * { margin: 0; padding: 0; }
 7 |         #button1 {
 8 |             padding: 5px 10px 15px 20px;
 9 |             background-color: aquamarine;
10 |         }
11 |     </style>
12 | </head>
13 | <body>
14 |     <button id="button1">Click Me</button>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/display_block.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Display Block</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/display_block.css">
 6 | </head>
 7 | <body>
 8 |     <div id="parent">
 9 |         <div id="div1" class="box">box1</div>
10 |         <div id="div2" class="box">box2</div>
11 |         <div id="div3" class="box">box3</div>
12 |     </div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/display_inline.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Display Inline</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/display_inline.css">
 6 | </head>
 7 | <body>
 8 |     <div id="parent">
 9 |         <div id="div1" class="box">box1</div>
10 |         <div id="div2" class="box">box2</div>
11 |         <div id="div3" class="box">box3</div>
12 |     </div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/display_inline_block.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Display Inline Block</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/display_inline_block.css">
 6 | </head>
 7 | <body>
 8 |     <div id="parent">
 9 |         <div id="div1" class="box">box1</div>
10 |         <div id="div2" class="box">box2</div>
11 |         <div id="div3" class="box">box3</div>
12 |     </div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/display_none.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Display None</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/display_none.css">
 6 | </head>
 7 | <body>
 8 |     <div id="parent">
 9 |         <div id="div1" class="box">box1</div>
10 |         <div id="div2" class="box">box2</div>
11 |         <div id="div3" class="box">box3</div>
12 |     </div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/position.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Position</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/positions.css">
 6 | </head>
 7 | <body>
 8 |     <div id="div1">1 Static</div>
 9 |     <div id="div2">2 Relative</div>
10 |     <div id="div3">3 Fixed</div>
11 |     <div id="div4">4 Absolute</div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/unit_em.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Unit Em</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/unit_em.css">
 6 | </head>
 7 | <body>
 8 |     Body
 9 |     <div id="first">
10 |         first
11 |         <div id="second">
12 |             second
13 |         </div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/unit_percentage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Unit Percentage</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/unit_percentage.css">
 6 | </head>
 7 | <body>
 8 |     <div id="first">
 9 |         first
10 |         <div id="second">
11 |             second
12 |         </div>
13 |     </div>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/unit_rem.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Unit Rem</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/unit_rem.css">
 6 | </head>
 7 | <body>
 8 |     Body
 9 |     <div id="first">
10 |         first
11 |         <div id="second">
12 |             second
13 |         </div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/unit_vh_vw.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Unit VH and VW</title>
 5 |     <style>
 6 |         #first {
 7 |             height: 50vh;
 8 |             width: 90vw;
 9 |             background-color: red;
10 |         }
11 |     </style>
12 | </head>
13 | <body>
14 |     <div id="first"></div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 5/z-index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Z-Index</title>
 5 |     <link rel="stylesheet" href="../../css/level 5/z-index.css">
 6 | </head>
 7 | <body>
 8 |     <div class="container">
 9 |         <div class="box1">Z-index 2</div>
10 |         <div class="box2">Z-index 1</div>
11 |     </div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flex_wrap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flexbox Wrap</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flex_wrap.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flex Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_align_content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flex Align Content</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_align_content.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flexbox Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |         <div id="box5" class="box">Flex Item 5</div>
15 |         <div id="box6" class="box">Flex Item 6</div>
16 |     </div>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_align_items.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flex Align Items</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_align_items.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flexbox Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |     </div>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_align_self.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flex Align Self</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_align_self.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flexbox Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_direction.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flexbox Direction</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_direction.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flex Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_flex_shrink.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flex Shrink</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_flex_shrink.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flexbox Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_items_order.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flex Items order</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_items_order.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flexbox Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/flexbox_justify_content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Flex Justify Content</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/flexbox_justify_content.css">
 6 | </head>
 7 | <body>
 8 |     <h1 id="heading">Flexbox Container</h1>
 9 |     <div id="container">
10 |         <div id="box1" class="box">Flex Item 1</div>
11 |         <div id="box2" class="box">Flex Item 2</div>
12 |         <div id="box3" class="box">Flex Item 3</div>
13 |         <div id="box4" class="box">Flex Item 4</div>
14 |     </div>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/float.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Float Property</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/float.css">
 6 | </head>
 7 | <body>
 8 |     <div class="container">
 9 |         <div class="box box1"></div>
10 |         <div class="box box2"></div>
11 |     </div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/grid.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Grid</title>
 5 |     <link rel="stylesheet" href="../../css/level 6/grid.css">
 6 | </head>
 7 | <body>
 8 | 
 9 | <div class="container">
10 |   <div class="item1">Item 1</div>
11 |   <div class="item2">Item 2</div>
12 |   <div class="item3">Item 3</div>
13 |   <div class="item4">Item 4</div>
14 | </div>
15 | 
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Course Code/html/level 6/media_query_combination.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Media Query</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 100px;
 8 |             width: 100px;
 9 |             background-color: lightsalmon;
10 |         }
11 |         @media screen and (min-width: 250px)
12 |          and (max-width: 300px) {
13 |             .box {
14 |                 border-radius: 50%;
15 |             }
16 |         }
17 |     </style>
18 | </head>
19 | <body>
20 |     <div class="box"></div>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/media_query_max_width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Media Query</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 100px;
 8 |             width: 100px;
 9 |             background-color: lightsalmon;
10 |         }
11 |         @media screen and (max-width: 250px) {
12 |             .box {
13 |                 height: 50px;
14 |                 width: 50px;
15 |             }
16 |         }
17 |     </style>
18 | </head>
19 | <body>
20 |     <div class="box"></div>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/media_query_min_width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Media Query</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 100px;
 8 |             width: 100px;
 9 |             background-color: lightsalmon;
10 |         }
11 |         @media screen and (min-width: 300px) {
12 |             .box {
13 |                 height: 150px;
14 |                 width: 150px;
15 |             }
16 |         }
17 |     </style>
18 | </head>
19 | <body>
20 |     <div class="box"></div>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 6/media_query_width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Media Query</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 100px;
 8 |             width: 100px;
 9 |             background-color: lightsalmon;
10 |         }
11 |         @media screen and (width: 250px) {
12 |             .box {
13 |                 border: 5px solid red;
14 |             }
15 |         }
16 |     </style>
17 | </head>
18 | <body>
19 |     <div class="box"></div>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Animation</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 75px;
 8 |             width: 75px;
 9 |             border: 1px solid black;
10 |             border-radius: 5px;
11 |             position: absolute;
12 |             left: 10;
13 |             background-color: lime;
14 | 
15 |             animation-name: ghumakkad;
16 |             animation-duration: 4s;
17 |             animation-timing-function: ease-in-out;
18 |             animation-delay: 0s;
19 |             animation-iteration-count: 4;
20 | 
21 |             animation-direction: alternate;
22 | 
23 |             /* animation: ghumakkad 4s ease-in-out 0s 4 alternate; */
24 |         }
25 | 
26 |         @keyframes ghumakkad {
27 |             from {left: 10px}
28 |             to {left: 300px}
29 |         }
30 |     </style>
31 | </head>
32 | <body>
33 |     <div class="box">Animation</div>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/animation_percentage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Animation</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 75px;
 8 |             width: 75px;
 9 |             border: 1px solid black;
10 |             border-radius: 5px;
11 |             position: absolute;
12 |             left: 10;
13 |             background-color: lime;
14 | 
15 |             animation-name: ghumakkad;
16 |             animation-duration: 4s;
17 |             animation-timing-function: ease-in-out;
18 |             animation-delay: 0s;
19 |             animation-iteration-count: 6;
20 | 
21 |             animation-direction: alternate;
22 | 
23 |             /* animation: ghumakkad 4s ease-in-out 0s 4 alternate; */
24 |         }
25 | 
26 |         @keyframes ghumakkad {
27 |             0% {left: 10px; top: 0px}
28 |             50% { left: 150px; top: 100px }
29 |             100% {left: 300px; top: 0px}
30 |         }
31 |     </style>
32 | </head>
33 | <body>
34 |     <div class="box">Animation</div>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/pseudo_classes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Pseudo Classes</title>
 5 |     <style>
 6 |         .btn {
 7 |             height: 20px;
 8 |             width: 70px;
 9 |             border: 1px solid blue;
10 |             border-radius: 5px;
11 |             background-color: aliceblue;
12 |         }
13 |         .btn:hover {
14 |             height: 25px;
15 |             width: 80px;
16 |             border: 1px solid red;
17 |         }
18 |         .btn:active {
19 |             height: 25px;
20 |             width: 80px;
21 |             border: 1px solid red;
22 |             background-color: indianred;
23 |         }
24 |     </style>
25 | </head>
26 | <body>
27 |     <button class="btn">Click Me</button>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/transform_rotate.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Transform Rotate</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 50px;
 8 |             width: 50px;
 9 |             padding: 5px;
10 |             margin: 20px;
11 |             border: 1px solid black;
12 |             border-radius: 5px;
13 |             transition-property: all;
14 |             transition-duration: 1s;
15 |             transition-timing-function: ease-in-out;
16 |         }
17 |         #box1 { background-color: lime;}
18 |         #box1:hover { transform: rotate(45deg); }
19 |         #box2 { background-color: blueviolet;}
20 |         #box2:hover { transform: rotate(180deg); }
21 |         #box3 { background-color: indianred;}
22 |         #box3:hover { transform: rotatex(45deg); }
23 |         #box4 { background-color: violet;}
24 |         #box4:hover { transform: rotatey(45deg); }
25 |     </style>
26 | </head>
27 | <body>
28 |     <div id="box1" class="box">45 <sup>deg</sup></div>
29 |     <div id="box2" class="box">180 <sup>deg</sup></div>
30 |     <div id="box3" class="box">x 45 <sup>deg</sup></div>
31 |     <div id="box4" class="box">y 45 <sup>deg</sup></div>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/transform_scale.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Transform Scale</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 50px;
 8 |             width: 50px;
 9 |             padding: 5px;
10 |             margin: 50px;
11 |             border: 1px solid black;
12 |             border-radius: 5px;
13 |             transition-property: all;
14 |             transition-duration: 1s;
15 |             transition-timing-function: ease-in-out;
16 |         }
17 |         #box1 { background-color: lime;}
18 |         #box1:hover { transform: scale(2); }
19 |         #box2 { background-color: blueviolet;}
20 |         #box2:hover { transform: scale(4); }
21 |         #box3 { background-color: indianred;}
22 |         #box3:hover { transform: scalex(2); }
23 |         #box4 { background-color: violet;}
24 |         #box4:hover { transform: scaley(3); }
25 |     </style>
26 | </head>
27 | <body>
28 |     <div id="box1" class="box">Scale Twice</div>
29 |     <div id="box2" class="box">Scale 4 times</div>
30 |     <div id="box3" class="box">Scale X Twice</div>
31 |     <div id="box4" class="box">Scale Y Twice</div>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/transform_skew.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Transform Skew</title>
 5 |     <style>
 6 |         .box {
 7 |             display: inline-block;
 8 |             height: 75px;
 9 |             width: 75px;
10 |             padding: 5px;
11 |             margin: 50px;
12 |             border: 1px solid black;
13 |             border-radius: 5px;
14 |             transition-property: all;
15 |             transition-duration: 1s;
16 |             transition-timing-function: ease-in-out;
17 |         }
18 |         #box1 { background-color: lime;}
19 |         #box1:hover { transform: skew(45deg); }
20 |         #box2 { background-color: blueviolet;}
21 |         #box2:hover { transform: skew(90deg); }
22 |     </style>
23 | </head>
24 | <body>
25 |     <div id="box1" class="box">Translate 50px</div>
26 |     <div id="box2" class="box">Translate 50px, 50px</div>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/transform_translate.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Transform Translate</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 75px;
 8 |             width: 75px;
 9 |             padding: 5px;
10 |             margin: 50px;
11 |             border: 1px solid black;
12 |             border-radius: 5px;
13 |             transition-property: all;
14 |             transition-duration: 1s;
15 |             transition-timing-function: ease-in-out;
16 |         }
17 |         #box1 { background-color: lime;}
18 |         #box1:hover { transform: translate(50px); }
19 |         #box2 { background-color: blueviolet;}
20 |         #box2:hover { transform: translate(50px, 50px); }
21 |         #box3 { background-color: indianred;}
22 |         #box3:hover { transform: translatex(50px); }
23 |         #box4 { background-color: violet;}
24 |         #box4:hover { transform: translatey(50px); }
25 |     </style>
26 | </head>
27 | <body>
28 |     <div id="box1" class="box">Translate 50px</div>
29 |     <div id="box2" class="box">Translate 50px, 50px</div>
30 |     <div id="box3" class="box">Translate X 50px</div>
31 |     <div id="box4" class="box">Translate Y 50px</div>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Course Code/html/level 7/transition.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Transition Property</title>
 5 |     <style>
 6 |         .btn {
 7 |             height: 20px;
 8 |             width: 70px;
 9 |             border: 1px solid blue;
10 |             border-radius: 5px;
11 |             background-color: aliceblue;
12 |             transition-property: all;
13 |             transition-duration: 1s;
14 |             transition-timing-function: ease-in-out;
15 |             transition-delay: 1s;
16 |             /*transition: all 1s ease-in-out 1s;*/
17 |         }
18 |         .btn:hover {
19 |             height: 25px;
20 |             width: 80px;
21 |             border: 1px solid red;
22 |         }
23 |         .btn:active {
24 |             height: 25px;
25 |             width: 80px;
26 |             border: 1px solid red;
27 |             background-color: indianred;
28 |         }
29 |     </style>
30 | </head>
31 | <body>
32 |     <button class="btn">Click Me</button>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/Course Code/images/css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Course Code/images/css.png


--------------------------------------------------------------------------------
/Course Code/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Learning CSS</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Learning CSS</h1>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Practise Sets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Practise Sets/.DS_Store


--------------------------------------------------------------------------------
/Practise Sets/Set 1/index.css:
--------------------------------------------------------------------------------
1 | /* This is my comment */
2 | #heading {
3 |     color:lightslategray
4 | }


--------------------------------------------------------------------------------
/Practise Sets/Set 1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practise Set 1</title>
 5 |     <link rel="stylesheet" href="index.css">
 6 |     <style>
 7 |         /*this is my comment*/
 8 |         #heading {
 9 |             color: blueviolet;
10 |         }
11 | 
12 |         #div_22 {
13 |             color: red
14 |         }
15 |         p {
16 |             color:bisque
17 |         }
18 |         .special_heading {
19 |             color: darkgreen;
20 |         }
21 | 
22 |         #first, #second {
23 |             color:dodgerblue
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 |     <h1 style="color: red;">This is my heading</h1>
29 |     <hr>
30 |     <div id="heading" style="color: gold;"> Heading </div>
31 |     <hr>
32 |     <div id="div_22">Div</div>
33 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, cum?</p>
34 |     <h2 class="special_heading">heading 2</h2>
35 |     <hr>
36 |     <div id="first">First</div>
37 |     <div id="second">Second</div>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/Practise Sets/Set 2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practice Set 2</title>
 5 |     <style>
 6 |         * {
 7 |             margin: 0;
 8 |             padding: 0;
 9 |         }
10 |         #bar {
11 |             background-color: aquamarine;
12 |             color: rgba(103, 18, 18, 0.8);
13 |         }
14 |         main {
15 |             height: 500px;
16 |             background-color: blanchedalmond;
17 |         }
18 |         #product {
19 |             width: 200px;
20 |             height: 400px;
21 |             /* background-color: green;
22 |             background-image: url(jeans.webp);
23 |             background-repeat: no-repeat;
24 |             background-position: center;*/
25 |             background: green url('jeans.webp') no-repeat center; 
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 |     <header>
31 |         <div id="bar">This is my nav bar</div>
32 |     </header>
33 |     <main>
34 |         <div id="product">Product 1</div>
35 |     </main>
36 |     <footer>
37 | 
38 |     </footer>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/Practise Sets/Set 2/jeans.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Practise Sets/Set 2/jeans.webp


--------------------------------------------------------------------------------
/Practise Sets/Set 3/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: 'Times New Roman', Times, serif;
 5 | }
 6 | #nav h1 {
 7 |     background-color: powderblue;
 8 |     text-align: center;
 9 |     text-transform: capitalize;
10 | }
11 | #inner {
12 |     font-size: 10px;
13 | }
14 | #outer {
15 |     font-size: 25px;
16 | }


--------------------------------------------------------------------------------
/Practise Sets/Set 3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practise set 3</title>
 5 |     <script src="https://kit.fontawesome.com/43290fa92d.js" crossorigin="anonymous"></script>
 6 |     <link rel="stylesheet" href="index.css">
 7 | </head>
 8 | <body>
 9 |     <div id="nav">
10 |         <h1>navigation home</h1>
11 |     </div>
12 |     <div id="outer">
13 |         Outer
14 |         <div id="inner">
15 |             Inner
16 |         </div>
17 |     </div>
18 |     <i class="fa-brands fa-linkedin"></i>
19 |     <i class="fa-brands fa-github"></i>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Practise Sets/Set 4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practise Set 4</title>
 5 |     <style>
 6 |         .box {
 7 |             height: 100px;
 8 |             width: 100px;
 9 |             padding: 5px;
10 |             margin: 5px;
11 |             border: 2px dotted red;
12 |             background-color: blue;
13 |         }
14 |         #first_button {
15 |             height: 70px;
16 |             width: 70px;
17 |             padding: 10px 15px;
18 |             margin: 100px;
19 |             border: 2px dotted red;
20 |             border-radius: 35px;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 |     <div class="box" style="box-sizing: content-box;">Box1</div>
26 |     <div class="box"  style="box-sizing: border-box;">Box2</div>
27 |     <button id="first_button">Click me</button>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Practise Sets/Set 5/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0px;
 3 |     padding: 0px;
 4 | }
 5 | nav {
 6 |     padding: 5px;
 7 | }
 8 | nav a {
 9 |     text-decoration: none;
10 |     margin-left: 55px;
11 |     padding: 5px;
12 | }
13 | header {
14 |     background-color: palegreen;
15 |     height: 30px;
16 | }
17 | #second {
18 |     height: 50px;
19 |     width: 50px;
20 |     background-color: green;
21 |     border-radius: 50%;
22 | }
23 | .box {
24 |     height: 100px;
25 |     width: 100px;
26 |     background-color: violet;
27 |     margin: 5px;
28 |     display: inline-block;
29 | }
30 | #box2 {
31 |     z-index: 2;
32 |     position: absolute;
33 |     left: 20px;
34 | }
35 | #container {
36 |     border: 3px solid;
37 |     margin: 5px;
38 | }
39 | #box4 {
40 |     position: fixed;
41 |     right: 10px;
42 | }
43 | footer {
44 |     position: fixed;
45 |     bottom: 0px;
46 |     background-color: mediumaquamarine;
47 | }


--------------------------------------------------------------------------------
/Practise Sets/Set 5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practise Set 5</title>
 5 |     <link rel="stylesheet" href="index.css">
 6 | </head>
 7 | <body>
 8 |     <header>
 9 |         <nav>
10 |             <a href="#">Home</a>
11 |             <a href="#">Products</a>
12 |             <a href="#">Contact</a>
13 |             <a href="#">Help</a>
14 |         </nav>
15 |     </header>
16 |     <main>
17 |         <div id="second"></div>
18 |         <div id="container">
19 |             <div id="box1" class="box">Box 1</div>
20 |             <div id="box2" class="box">Box 2</div>
21 |             <div id="box3" class="box">Box 3</div>
22 |         </div>
23 | 
24 |         <div id="box4" class="box">Box 4</div>
25 |     </main>
26 |     <footer>
27 |         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti recusandae eligendi soluta qui inventore blanditiis necessitatibus temporibus voluptatibus pariatur voluptas magni autem ipsam accusantium, architecto sit delectus odio debitis optio, laborum distinctio deserunt culpa ex. Voluptas sequi dolor architecto ducimus a voluptates amet aperiam, iste impedit inventore debitis porro perferendis!
28 |     </footer>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Practise Sets/Set 6/bharat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Practise Sets/Set 6/bharat.jpeg


--------------------------------------------------------------------------------
/Practise Sets/Set 6/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | nav a {
 6 |     text-decoration: none;
 7 | }
 8 | img {
 9 |     height: 100px;
10 | }
11 | #image_container {
12 |     border: 2px solid black;
13 |     height: 150px;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 | }
18 | nav {
19 |     display: flex;
20 |     justify-content: space-around;
21 |     height: 25px;
22 |     padding-top: 5px;
23 | }
24 | header {
25 |     background-color: moccasin;
26 | }
27 | 
28 | #box_container {
29 |     border: 2px solid black;
30 |     display: flex;
31 |     justify-content: space-around;
32 |     height: 80px;
33 |     width: 400px;
34 | }
35 | #box2 {
36 |     flex-grow: 1;
37 |     flex-shrink: 1;
38 | }
39 | 
40 | .box {
41 |     height: 75px;
42 |     width: 75px;
43 |     border: 2px solid red;
44 |     flex-shrink: 0;
45 | }
46 | 
47 | #media_box {
48 |     height: 50px;
49 |     width: 50px;
50 |     background-color: darkseagreen;
51 |     border: 2px solid black;
52 | }
53 | 
54 | @media screen and (min-width: 300px) and (max-width: 400px) {
55 |     #media_box {
56 |         background-color: red;
57 |     }
58 | }
59 | 
60 | @media screen and (min-width: 400px) {
61 |     #media_box {
62 |         background-color: blue;
63 |     }
64 | }


--------------------------------------------------------------------------------
/Practise Sets/Set 6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practise Set 6</title>
 5 |     <link rel="stylesheet" href="index.css">
 6 | </head>
 7 | <body>
 8 |     <header>
 9 |         <nav>
10 |             <a href="#">Home</a>
11 |             <a href="#">Product</a>
12 |             <a href="#">Contact Us</a>
13 |             <a href="#">Support</a>
14 |         </nav>
15 |     </header>
16 |     <main>
17 |         <div id="image_container">
18 |             <img src="bharat.jpeg" alt="Map of Bharat">
19 |         </div>
20 |         <div id="box_container">
21 |             <div id="box1" class="box">Box1</div>
22 |             <div id="box2" class="box">Box2</div>
23 |             <div id="box3" class="box">Box3</div>
24 |         </div>
25 |         <br><br><hr>
26 |         <div id="media_box">Media Box</div>
27 | 
28 |     </main>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Practise Sets/Set 7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Practise Set 7</title>
 5 |     <style>
 6 |         .progress-container {
 7 |             width: 90%;
 8 |             height: 25px;
 9 |             background-color: gainsboro;
10 | 
11 |             border: 2px solid black;
12 |             border-radius: 20px;
13 |             position: relative;
14 |             left: 4%;
15 |         }
16 |         .progress-bar {
17 |             background-color: mediumorchid;
18 |             height: 100%;
19 |             border-radius: 20px;
20 | 
21 |             animation: animate_progress 3s;
22 |         }
23 |         @keyframes animate_progress {
24 |             0% {width: 0%;}
25 |             90% {width: 95%;}
26 |             95% {width: 70%;}
27 |             100% {width: 100%;}
28 |         }
29 |     </style>
30 | </head>
31 | <body>
32 |     <div class="progress-container">
33 |         <div class="progress-bar">
34 |         </div>
35 |     </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Project Myntra Clone/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/banner.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/1.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/10.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/2.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/3.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/4.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/5.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/6.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/7.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/8.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/categories/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/categories/9.jpg


--------------------------------------------------------------------------------
/Project Myntra Clone/images/myntra_logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/myntra_logo.webp


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/1.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/10.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/11.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/12.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/2.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/3.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/4.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/5.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/6.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/7.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/8.png


--------------------------------------------------------------------------------
/Project Myntra Clone/images/offers/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Complete-Coding/CSS_Complete_YouTube/9187773420f2fd9c246d1734393310489d7883d9/Project Myntra Clone/images/offers/9.png


--------------------------------------------------------------------------------
/Project Myntra Clone/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: Assistant,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  5 |     box-sizing: border-box;
  6 | }
  7 | header {
  8 |     display: flex;
  9 |     background-color: #ffffff;
 10 |     height: 80px;
 11 |     justify-content: space-between;
 12 |     align-items: center;
 13 |     border-bottom: 1px solid #b6b1b1;
 14 | }
 15 | .myntra_home {
 16 |     height: 45px;
 17 | }
 18 | .logo_container {
 19 |     margin-left: 4%;
 20 | }
 21 | .action_bar {
 22 |     margin-right: 4%;
 23 | }
 24 | .nav_bar {
 25 |     display: flex;
 26 |     min-width: 500px;
 27 |     justify-content: space-evenly;
 28 | }
 29 | .nav_bar a {
 30 |     font-size: 14px;
 31 |     letter-spacing: .3px;
 32 |     color: #282c3f;
 33 |     font-weight: 700;
 34 |     text-transform: uppercase;
 35 |     text-decoration: none;
 36 |     padding: 28px 0;
 37 |     border-bottom: 5px solid #ffffff;
 38 | }
 39 | .nav_bar a:hover {
 40 |     border-bottom: 4px solid #f54e77;
 41 | }
 42 | 
 43 | .nav_bar a sup {
 44 |     color: #ff3f6c;
 45 |     font-size: 10px;
 46 | }
 47 | 
 48 | .search_bar {
 49 |     height: 40px;
 50 |     min-width: 200px;
 51 |     width: 30%;
 52 |     display: flex;
 53 |     align-items: center;
 54 | }
 55 | .search_icon {
 56 |     box-sizing: content-box;
 57 |     height: 20px;
 58 |     padding: 10px;
 59 | 
 60 |     background-color: #f5f5f6;
 61 |     color: #282c3f;
 62 |     font-weight: 300;
 63 |     border-radius: 4px 0 0 4px;
 64 | }
 65 | .search_input {
 66 |     color: #696e79;
 67 |     background-color: #f5f5f6;
 68 |     flex-grow: 1;
 69 |     height: 40px;
 70 |     border: 0;
 71 |     border-radius: 0 4px 4px 0;
 72 | }
 73 | 
 74 | .action_bar {
 75 |     display: flex;
 76 |     min-width: 200px;
 77 |     justify-content: space-evenly;
 78 | }
 79 | 
 80 | .action_container {
 81 |     display: flex;
 82 |     flex-direction: column;
 83 |     align-items: center;
 84 | }
 85 | 
 86 | /* Main section */
 87 | .banner_container {
 88 |     margin: 40px 0;
 89 | }
 90 | .banner_image {
 91 |     width: 100%;
 92 | }
 93 | 
 94 | .category_heading {
 95 |     text-transform: uppercase;
 96 |     color: #3e4152;
 97 |     letter-spacing: .15em;
 98 |     font-size: 1.8em;
 99 |     margin: 50px 0 10px 30px;
100 |     max-height: 5em;
101 |     font-weight: 700;
102 | }
103 | 
104 | .category_items {
105 |     display: flex;
106 |     flex-wrap: wrap;
107 |     justify-content: space-evenly;
108 | }
109 | 
110 | .sale_item {
111 |     width: 250px;
112 | }
113 | 
114 | .footer_container {
115 |     padding: 30px 0px 40px 0px;
116 |     background: #FAFBFC;
117 |     display: flex;
118 |     justify-content: space-evenly;
119 | }
120 | 
121 | .footer_column {
122 |     display: flex;
123 |     flex-direction: column;
124 | }
125 | 
126 | .footer_column h3 {
127 |     color: #282c3f;
128 |     font-size: 14px;
129 |     margin-bottom: 25px;
130 | }
131 | 
132 | .footer_column a {
133 |     color: #696b79;
134 |     font-size: 15px;
135 |     text-decoration: none;
136 |     padding-bottom: 5px;
137 | }
138 | 
139 | .copyright {
140 |     color: #94969f;
141 |     text-align: end;
142 |     padding: 15px;
143 | }


--------------------------------------------------------------------------------
/Project Myntra Clone/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <title>Myntra Clone</title>
  5 |     <link rel="stylesheet" href="index.css">
  6 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  7 | </head>
  8 | <body>
  9 |     <header>
 10 |         <div class="logo_container">
 11 |             <a href="#"><img class="myntra_home" src="images/myntra_logo.webp" alt="Myntra Home"></a>
 12 |         </div>
 13 |         <nav class="nav_bar">
 14 |             <a href="#">Men</a>
 15 |             <a href="#">Women</a>
 16 |             <a href="#">Kids</a>
 17 |             <a href="#">Home & Living</a>
 18 |             <a href="#">Beauty</a>
 19 |             <a href="#">Studio <sup>New</sup></a>
 20 |         </nav>
 21 |         <div class="search_bar">
 22 |             <span class="material-symbols-outlined search_icon">search</span>
 23 |             <input class="search_input" placeholder="Search for products, brands and more">
 24 |         </div>
 25 |         <div class="action_bar">
 26 |             <div class="action_container">
 27 |                 <span class="material-symbols-outlined action_icon">person</span>
 28 |                 <span class="action_name">Profile</span>
 29 |             </div>
 30 | 
 31 |             <div class="action_container">
 32 |                 <span class="material-symbols-outlined action_icon">favorite</span>
 33 |                 <span class="action_name">Wishlist</span>
 34 |             </div>
 35 | 
 36 |             <div class="action_container">
 37 |                 <span class="material-symbols-outlined action_icon">shopping_bag</span>
 38 |                 <span class="action_name">Bag</span>
 39 |             </div>
 40 |         </div>
 41 |     </header>
 42 |     <main>
 43 |         <div class="banner_container">
 44 |             <img class="banner_image" src="images/banner.jpg" alt="Main Banner">
 45 |         </div>
 46 |         <div class="category_heading">MEDAL WORTHY BRANDS TO BAG</div>
 47 |         <div class="category_items">
 48 |             <a href="#"><img class="sale_item" src="images/offers/1.png"></a>
 49 |             <a href="#"><img class="sale_item" src="images/offers/2.png"></a>
 50 |             <a href="#"><img class="sale_item" src="images/offers/3.png"></a>
 51 |             <a href="#"><img class="sale_item" src="images/offers/4.png"></a>
 52 |             <a href="#"><img class="sale_item" src="images/offers/5.png"></a>
 53 |             <a href="#"><img class="sale_item" src="images/offers/6.png"></a>
 54 |             <a href="#"><img class="sale_item" src="images/offers/7.png"></a>
 55 |             <a href="#"><img class="sale_item" src="images/offers/8.png"></a>
 56 |             <a href="#"><img class="sale_item" src="images/offers/9.png"></a>
 57 |             <a href="#"><img class="sale_item" src="images/offers/10.png"></a>
 58 |             <a href="#"><img class="sale_item" src="images/offers/11.png"></a>
 59 |             <a href="#"><img class="sale_item" src="images/offers/12.png"></a>
 60 |         </div>
 61 | 
 62 |         <div class="category_heading">SHOP BY CATEGORY</div>
 63 |         <div class="category_items">
 64 |             <a href="#"><img class="sale_item" src="images/categories/1.jpg"></a>
 65 |             <a href="#"><img class="sale_item" src="images/categories/2.jpg"></a>
 66 |             <a href="#"><img class="sale_item" src="images/categories/3.jpg"></a>
 67 |             <a href="#"><img class="sale_item" src="images/categories/4.jpg"></a>
 68 |             <a href="#"><img class="sale_item" src="images/categories/5.jpg"></a>
 69 |             <a href="#"><img class="sale_item" src="images/categories/6.jpg"></a>
 70 |             <a href="#"><img class="sale_item" src="images/categories/7.jpg"></a>
 71 |             <a href="#"><img class="sale_item" src="images/categories/8.jpg"></a>
 72 |             <a href="#"><img class="sale_item" src="images/categories/9.jpg"></a>
 73 |             <a href="#"><img class="sale_item" src="images/categories/10.jpg"></a>
 74 |         </div>
 75 |     </main>
 76 |     <footer>
 77 |         <div class="footer_container">
 78 |             <div class="footer_column">
 79 |                 <h3>ONLINE SHOPPING</h3>
 80 | 
 81 |                 <a href="#">Men</a>
 82 |                 <a href="#">Women</a>
 83 |                 <a href="#">Kids</a>
 84 |                 <a href="#">Home & Living</a>
 85 |                 <a href="#">Beauty</a>
 86 |                 <a href="#">Gift Card</a>
 87 |                 <a href="#">Myntra Insider</a>
 88 |             </div>
 89 | 
 90 |             <div class="footer_column">
 91 |                 <h3>ONLINE SHOPPING</h3>
 92 | 
 93 |                 <a href="#">Men</a>
 94 |                 <a href="#">Women</a>
 95 |                 <a href="#">Kids</a>
 96 |                 <a href="#">Home & Living</a>
 97 |                 <a href="#">Beauty</a>
 98 |                 <a href="#">Gift Card</a>
 99 |                 <a href="#">Myntra Insider</a>
100 |             </div>
101 | 
102 |             <div class="footer_column">
103 |                 <h3>ONLINE SHOPPING</h3>
104 | 
105 |                 <a href="#">Men</a>
106 |                 <a href="#">Women</a>
107 |                 <a href="#">Kids</a>
108 |                 <a href="#">Home & Living</a>
109 |                 <a href="#">Beauty</a>
110 |                 <a href="#">Gift Card</a>
111 |                 <a href="#">Myntra Insider</a>
112 |             </div>
113 |         </div>
114 |         <hr>
115 | 
116 |         <div class="copyright">
117 |             © 2023 www.myntra.com. All rights reserved.
118 |         </div>
119 |     </footer>
120 | </body>
121 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Complete YouTube
2 | 
3 | ![Thumbnail](https://github.com/KG-Coding-with-Prashant-Sir/CSS_Complete_YouTube/assets/102736197/529aed4c-d035-4a4a-bbe3-55472b6a6e82)
4 | 


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