├── style.css ├── css-selector.html ├── text-with-css.html ├── 08.css-shadow └── readme.md ├── 01.get-start-css ├── style.css ├── image.webp ├── index.html ├── readme.md └── start-css.html ├── 05.css-list-table ├── readme.md ├── Readme.md ├── navigation.html ├── inline-navigation.html ├── block-navigation.html └── style.css ├── 09.css-transition └── readme.md ├── 14.css-filters └── readme.md ├── 03.box-layout ├── layout │ ├── readme.md │ ├── layout1.html │ ├── style.css │ ├── layout2.html │ ├── layout3.html │ └── layout4.html ├── layout.css ├── div-span.html ├── box-div.html ├── readme.md └── box-basic.html ├── 07.css-position ├── image │ ├── readme.md │ ├── banner.jpg │ ├── person_1.jpg │ ├── undraw_quick_chat_re_bit5.svg │ └── undraw_video_call_re_4p26.svg ├── profile.jpg ├── readme.md ├── README.md ├── website.html ├── sticky.html ├── style.css ├── index.html ├── 01.example.html └── profile.html ├── master.css ├── 16.css-user-interface ├── readme.md └── demo.html ├── 15.css-flex ├── banner.jpg ├── flex-items.md ├── index.html ├── navigation.html └── readme.md ├── 06.css-border ├── readme.md ├── border.html ├── card-demo.html ├── card.html ├── border.css └── index.html ├── 02.css-with-text ├── readme.md └── text-example.html ├── 04.css-background └── readme.md ├── 10.css-2d-transform ├── index.html ├── rotate.html ├── readme.md ├── scale.html └── skew.html ├── 12.css-animation ├── readme.md └── banner.md ├── 11.css-3d-transforms └── readme.md ├── 17.media ├── style.css ├── readme.md ├── col-example.html └── head.html ├── css-selector.md ├── LICENSE ├── all-css-properties.md ├── start-css.html ├── 18.css-gradient └── README.md ├── animation.md ├── README.md └── 13.css-multiple-columns └── readme.md /style.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /css-selector.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /text-with-css.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /08.css-shadow/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /01.get-start-css/style.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /05.css-list-table/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /09.css-transition/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /14.css-filters/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /03.box-layout/layout/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /07.css-position/image/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /master.css: -------------------------------------------------------------------------------- 1 | *{ margin:0; padding:0;} 2 | .body{ background:red;} 3 | -------------------------------------------------------------------------------- /16.css-user-interface/readme.md: -------------------------------------------------------------------------------- 1 | # resize : [horizontal,vertical,both] 2 | 3 | # overflow: auto; 4 | -------------------------------------------------------------------------------- /15.css-flex/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/css-master-guide/HEAD/15.css-flex/banner.jpg -------------------------------------------------------------------------------- /01.get-start-css/image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/css-master-guide/HEAD/01.get-start-css/image.webp -------------------------------------------------------------------------------- /07.css-position/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/css-master-guide/HEAD/07.css-position/profile.jpg -------------------------------------------------------------------------------- /07.css-position/image/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/css-master-guide/HEAD/07.css-position/image/banner.jpg -------------------------------------------------------------------------------- /07.css-position/image/person_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punitkatiyar/css-master-guide/HEAD/07.css-position/image/person_1.jpg -------------------------------------------------------------------------------- /05.css-list-table/Readme.md: -------------------------------------------------------------------------------- 1 | # CSS Navigation with Display Property 2 | 3 | > inline 4 | 5 | > block 6 | 7 | > none 8 | 9 | 10 | -------------------------------------------------------------------------------- /07.css-position/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Position 2 | 3 | > ## static 4 | 5 | > ## relative 6 | 7 | > ## absoute 8 | 9 | > ## fixed 10 | 11 | > ## sticky 12 | 13 | -------------------------------------------------------------------------------- /15.css-flex/flex-items.md: -------------------------------------------------------------------------------- 1 | # Flex Item 2 | 3 | > order 4 | 5 | > flex-grow 6 | 7 | > flex-shrink 8 | 9 | > flex-basis 10 | 11 | > flex 12 | 13 | > align-self 14 | -------------------------------------------------------------------------------- /07.css-position/README.md: -------------------------------------------------------------------------------- 1 | # 🤖 CSS Position 2 | 3 | > Default div : **static** 4 | 5 | > Parent : **relative** 6 | 7 | > Child : **absolute** 8 | 9 | > Self : **fixed** 10 | 11 | > After Scroll **sticky** 12 | 13 | 14 | -------------------------------------------------------------------------------- /06.css-border/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Border Property 2 | 3 | > ## border 4 | 5 | > ## border-style 6 | 7 | > ## border-color 8 | 9 | > ## border-top 10 | 11 | > ## border-right 12 | 13 | > ## border-bottom 14 | 15 | > ## border-left 16 | 17 | > ## border-radius 18 | 19 | > ## border-image 20 | 21 | 22 | -------------------------------------------------------------------------------- /02.css-with-text/readme.md: -------------------------------------------------------------------------------- 1 | # CSS With Text 📰 2 | 3 | 1. text-align:; 4 | 5 | 2. color: ; 6 | 7 | 3. font-size: ; 8 | 9 | 4. font-family: ; 10 | 11 | 5. letter-spacing: ; 12 | 13 | 6. word-spacing: ; 14 | 15 | 7. text-transform: ; 16 | 17 | 8. text-shadow: ; 18 | 19 | 9. text-decoration: ; 20 | 21 | 10. line-height: ; 22 | 23 | 11. font-weight: ; 24 | 25 | 12. font: ; 26 | 27 | -------------------------------------------------------------------------------- /03.box-layout/layout.css: -------------------------------------------------------------------------------- 1 | .bg1{ background-color: red;} 2 | .bg2{ background-color: green;} 3 | .fl{ float: left;} 4 | .fr{ float: right;} 5 | .new{ float: left; margin-left: 1%;} 6 | .clr{ clear: both;} 7 | .col-2{ width: 49.50%; height: 100px; margin-top: 10px;} 8 | .col-3{ width: 32.65%; height: 100px; margin-top: 10px;} 9 | .col-4{ width: 24.25%; height: 100px; margin-top: 10px;} 10 | -------------------------------------------------------------------------------- /04.css-background/readme.md: -------------------------------------------------------------------------------- 1 | # css background cheet sheet 2 | 3 | ## CSS Background Image 4 | 5 | > background-image : url() 6 | 7 | > background-size : cover | contain 8 | 9 | > background-repeat: repeat | no-repeat 10 | 11 | > background-position : top | right | botton | left | center 12 | 13 | > background-attachment: fixed; 14 | 15 | ## Use Multiple Background Image In CSS 16 | 17 | > background: url(banner1.jpg) right bottom no-repeat, url(user.jpeg) left top repeat; 18 | 19 | > background-blend-mode: multiply; 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /10.css-2d-transform/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /07.css-position/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 |
18 | chat box 19 | 20 | 21 | -------------------------------------------------------------------------------- /16.css-user-interface/demo.html: -------------------------------------------------------------------------------- 1 |

2 | See the Pen 3 | CSS Noise Gradient (shadow) by Jimmy Chion (@cjimmy) 4 | on CodePen. 5 |

6 | 7 | -------------------------------------------------------------------------------- /10.css-2d-transform/rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /05.css-list-table/navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /12.css-animation/readme.md: -------------------------------------------------------------------------------- 1 | # CSS 3 Animation 2 | 3 | > ## @keyframes 4 | 5 | > ## animation-name 6 | 7 | > ## animation-duration 8 | 9 | > ## animation-delay 10 | 11 | > ## animation-iteration-count 12 | 13 | 16 | 17 | # from and to 18 | 19 | ``` 20 | @keyframe sample{ 21 | form{} 22 | to{} 23 | } 24 | ``` 25 | 26 | ## Example Of Animation 27 | 28 | ``` 29 | animation-name: example; 30 | animation-duration: 4s; 31 | animation-delay: 2s; 32 | ``` 33 | ### UseFull Link Resource 34 | 35 |
36 | 37 | > https://animate.style/ 38 | 39 | > https://animista.net/ 40 | 41 | > https://css.master.co/docs/animation 42 | 43 | 44 | -------------------------------------------------------------------------------- /03.box-layout/layout/layout1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Layout 1 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /11.css-3d-transforms/readme.md: -------------------------------------------------------------------------------- 1 | # CSS 3D Transform 2 | 3 | > rotateX(150deg) 4 | 5 | > rotateY(150deg) 6 | 7 | > rotateZ(150deg) 8 | 9 | ## 3D View Example 10 | 11 | ``` 12 | 30 | ``` 31 | -------------------------------------------------------------------------------- /06.css-border/border.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /17.media/style.css: -------------------------------------------------------------------------------- 1 | *{ margin: 0; padding: 0;} 2 | .clr{ clear: both;} 3 | .head{ background-color: royalblue;} 4 | .logo{ float: left; width: 15%; margin-left: 5%;} 5 | .logo a{ text-decoration: none; font-size: 2rem;} 6 | nav{ float: right; width: 75%; margin-right: 5%;} 7 | nav ul{ text-align: right;} 8 | nav ul li{ display: inline;} 9 | nav ul li a{ text-decoration: none; color: white; padding: 2%; line-height: 50px;} 10 | .menu{ float: right; display: none;} 11 | .menu:hover nav{display: block;background-color: tomato;} 12 | @media(max-width:750px) 13 | { 14 | .logo{ width: 80%;} 15 | .menu{ display: block;} 16 | nav{ display: none;} 17 | nav ul li{ display: block;} 18 | 19 | 20 | 21 | } -------------------------------------------------------------------------------- /03.box-layout/layout/style.css: -------------------------------------------------------------------------------- 1 | *{ margin: 0;} 2 | .bg{ background-color: whitesmoke;} 3 | .bg1{ background-color: royalblue;} 4 | .bg2{ background-color: tomato;} 5 | .bg3{ background-color: yellowgreen;} 6 | .bg4{ background-color: violet;} 7 | 8 | 9 | .fl{ float: left;} 10 | .fr{ float: right;} 11 | .new{ float: left; margin-left: 1%;} 12 | .clr{ clear: both;} 13 | 14 | .mb-1{ margin-bottom: 10px;} 15 | 16 | .row{ margin-bottom: 10px;} 17 | .col-4{ width: 24.25%; height: 250px;} 18 | 19 | 20 | 21 | .head{ height: 100px;} 22 | .nav{ height: 40px;} 23 | .banner{ height: 550px;} 24 | .mid{ min-height: 600px;} 25 | .mid-left{width:75%; min-height: 600px;} 26 | .mid-right{ width:24.25%; min-height: 600px;} 27 | .footer{ height: 80px;} -------------------------------------------------------------------------------- /03.box-layout/layout/layout2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Layout 1 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /17.media/readme.md: -------------------------------------------------------------------------------- 1 | ``` 2 | *{ margin: 0; box-sizing: border-box;} 3 | .wrapper{ width: 80%; margin: auto;} 4 | .mb{ margin-bottom: 1vh;} 5 | .bg-info{ background-color: lightblue;} 6 | .bg-primary{ background-color: royalblue;} 7 | .bg-orange{ background-color: tomato;} 8 | .h-1{ height: 10vh;} 9 | .h-4{ height:40vh;} 10 | .row{ display: flex; flex-wrap: wrap;} 11 | .col-1 {width: 8.33%;} 12 | .col-2 {width: 16.66%;} 13 | .col-3 {width: 25%;} 14 | .col-4 {width: 33.33%;} 15 | .col-5 {width: 41.66%;} 16 | .col-6 {width: 50%;} 17 | .col-7 {width: 58.33%;} 18 | .col-8 {width: 66.66%;} 19 | .col-9 {width: 75%;} 20 | .col-10 {width: 83.33%;} 21 | .col-11 {width: 91.66%;} 22 | .col-12 {width: 100%;} 23 | @media(max-width:650px) 24 | { 25 | 26 | [class*="col-"] { 27 | width:100%; 28 | } 29 | 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /06.css-border/card-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Demo One 8 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /07.css-position/sticky.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 |
27 | chat box 28 | 29 | 30 | -------------------------------------------------------------------------------- /10.css-2d-transform/readme.md: -------------------------------------------------------------------------------- 1 | # CSS 2D Transform Methods 2 | 3 | **CSS (Cascading Style Sheets) is primarily a 2D styling language, meaning it deals with the layout and presentation of elements in two dimensions. However, CSS can be used to create effects that simulate a third dimension or give the illusion of depth. For true 3D transformations and animations, additional technologies such as WebGL or CSS 3D transforms are often used.** 4 | 5 |
6 | 7 | > translate(x,y) 8 | 9 | > rotate( 25deg) 10 | 11 | > scaleX() 12 | 13 | > scaleY() 14 | 15 | > scale() 16 | 17 | > skewX() 18 | 19 | > skewY() 20 | 21 | > skew() 22 | 23 | > matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) 24 | 25 | ## Example Of matrix 26 | 27 | ``` 28 | div { 29 | transform: matrix(1, -0.3, 0, 1, 0, 0); 30 | } 31 | ``` 32 | 33 | 34 | -------------------------------------------------------------------------------- /06.css-border/card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | card basic 8 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /03.box-layout/div-span.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 29 | 30 | 31 | 32 | 33 |

Google

34 | 35 | 36 | -------------------------------------------------------------------------------- /03.box-layout/box-div.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /05.css-list-table/inline-navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | demi link 13 | demi link 14 | demi link 15 | demi link 16 | demi link 17 |
18 | 19 |
20 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05.css-list-table/block-navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | demi link 13 | demi link 14 | demi link 15 | demi link 16 | demi link 17 |
18 | 19 |
20 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /17.media/col-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /css-selector.md: -------------------------------------------------------------------------------- 1 | # CSS Selectors 2 | 3 | **CSS selectors are used to select and apply styles to specific HTML elements.** 4 | 5 | - **Element Selector:** This selector targets all instances of a specific HTML element on the page. 6 | 7 | ``` 8 | p { 9 | color: blue; 10 | } 11 | 12 | ``` 13 | 14 | - **Class Selector:** This selector targets all elements that have a specific class attribute value. 15 | 16 | ``` 17 | .myClass { 18 | text-align:center; 19 | } 20 | 21 | ``` 22 | 23 | - **ID Selector:** This selector targets a single element with a specific ID attribute value. 24 | 25 | ``` 26 | #myId { 27 | background-color: royalblue; 28 | } 29 | ``` 30 | 31 | - **Descendant Selector:** This selector targets elements that are descendants of a specific parent element. 32 | 33 | ``` 34 | .parentElement li { 35 | list-style: none; 36 | } 37 | ``` 38 | 39 | - **Attribute Selector:** This selector targets elements with a specific attribute value. 40 | 41 | ``` 42 | input[type="text"] { 43 | color:red; 44 | } 45 | ``` 46 | 47 | 48 | -------------------------------------------------------------------------------- /03.box-layout/layout/layout3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Layout 1 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /06.css-border/border.css: -------------------------------------------------------------------------------- 1 | *{ margin: 0; box-sizing: border-box;} 2 | div{ 3 | width: 220px; 4 | height: 220px; 5 | background-color: tomato; 6 | margin: 1%; 7 | float: left; 8 | } 9 | .b1{ 10 | border: 5px; 11 | border-style:solid; 12 | border-color: royalblue; 13 | } 14 | .b2{ 15 | border:10px solid royalblue; 16 | } 17 | .b3{ 18 | border-left:10px solid royalblue; 19 | border-right:10px solid royalblue; 20 | border-top:10px solid greenyellow; 21 | border-bottom:10px solid greenyellow; 22 | } 23 | .b4{ 24 | border:10px dashed royalblue; 25 | } 26 | .b5{ 27 | border:10px dotted royalblue; 28 | } 29 | .b6{ 30 | border:10px double royalblue; 31 | } 32 | 33 | .b7{ 34 | /* 35 | top :left right 36 | bottom : right left 37 | */ 38 | border-radius:50% ; 39 | border:10px solid royalblue; 40 | } 41 | .b8{ 42 | border-radius: 20px 50px 20px 50px; 43 | } 44 | .b9{ 45 | border-radius: 0px 0px 50px 0px; 46 | } 47 | .b10{ 48 | border-radius: 0px 50% 0px 50%; 49 | } -------------------------------------------------------------------------------- /07.css-position/style.css: -------------------------------------------------------------------------------- 1 | *{ margin:0 ; padding: 0; box-sizing: border-box;} 2 | .bg1{background-color: royalblue;} 3 | .bg2{background-color: tomato;} 4 | .bg3{background-color: teal;} 5 | .bg4{background-color: hotpink;} 6 | 7 | .head{ 8 | width: 100%; 9 | height: 10vh; 10 | background-color:teal; 11 | position: fixed; 12 | top: 0; 13 | } 14 | .header{ 15 | width: 100%; 16 | height: 10vh; 17 | position: sticky; 18 | top: 0; 19 | } 20 | .banner{ 21 | height: 90vh; 22 | background-color: tomato; 23 | 24 | } 25 | .menu{ 26 | height: 10vh; 27 | background-color: #404040; 28 | } 29 | .mid{ 30 | height: 100vh; 31 | background-color: gold; 32 | } 33 | .footer{ 34 | height: 8vh; 35 | background-color: #404040; 36 | } 37 | 38 | .chat{ width: 150px; height: 150px; position: fixed; bottom: 15vh; right: 5%; 39 | animation-name: chat; 40 | animation-duration: 3s; 41 | } 42 | 43 | @keyframes chat{ 44 | from{ width:150px; height:150px;} 45 | to{ width:100px; height:100px;} 46 | 47 | } -------------------------------------------------------------------------------- /15.css-flex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 20 | 21 | 22 |
23 |

1

24 |

2

25 |

3

26 |

4

27 |

5

28 |

6

29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /17.media/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Punit Katiyar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /01.get-start-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 25 | 26 | 27 | 28 |

CSS Text Style

29 | 30 |

Way To Apply CSS

31 |
    32 |
  1. Inline
    2. 33 |
  2. Internal
    3. 34 |
  3. External
    4. 35 |
36 | 37 | -------------------------------------------------------------------------------- /01.get-start-css/readme.md: -------------------------------------------------------------------------------- 1 | # 🎨 CSS : Cascading Style Sheet Language 2 | 3 | > Use to Presentation Of Markup Language. 4 | 5 | **CSS stands for Cascading Style Sheets. It is a language used to describe the presentation and formatting of HTML (Hypertext Markup Language) documents, which are commonly used for creating websites and web applications. CSS is used to control how elements on a webpage are displayed, including their layout, colors, fonts, and spacing.** 6 | 7 |
8 | 9 | ### 🖥 CSS Syntax 10 | 11 | 12 | - #### start with style attribute (style = " ") associated with html tag 13 | - #### property name : Value or key : value 14 | 15 | ### 🖥 Method OF CSS Implementation 16 |
    17 |
  1. Inline
    2. 18 |
  2. Internal Type
    3. 19 |
  3. External Type
    4. 20 |
21 | 22 | ### 🖥 TYPE OF Selectors 23 |
    24 |
  1. Tag Selector
    2. 25 |
  2. Attribute Selector
    3. 26 |
  3. class Selector
    4. 27 |
  4. id Selector
    5. 28 |
29 | 30 | ## Difference between class and id ? 31 | 32 |
33 | 34 | Click To show code 35 | 36 | Show Result 37 | -------------------------------------------------------------------------------- /all-css-properties.md: -------------------------------------------------------------------------------- 1 | ``` 2 | color: aqua; 3 | text-align: center; 4 | font-size: 10rem; 5 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 6 | font-style: italic; 7 | font-weight: bold; 8 | line-height: 1.2; 9 | text-transform: capitalize; 10 | word-spacing: 5px; 11 | letter-spacing: 5px; 12 | text-shadow: 2px 2px 2px black; 13 | text-decoration:; 14 | width: 100%; 15 | height: 10vh; 16 | background: ; 17 | background-color: aqua; 18 | background-image: url(); 19 | background-size: ; 20 | background-repeat: ; 21 | background-position: ; 22 | float: left ; 23 | clear: both; 24 | margin: ; 25 | margin-top: ; 26 | margin-right: ; 27 | margin-bottom: ; 28 | margin-left: ; 29 | padding: ; 30 | padding-top: ; 31 | padding-right: ; 32 | padding-bottom: ; 33 | padding-left: ; 34 | border:10px; 35 | border-style: solid ; 36 | border-color: aqua; 37 | box-sizing: border-box; 38 | border-radius: ; 39 | position: ; 40 | top:; 41 | right: ; 42 | bottom: ; 43 | left: ; 44 | box-shadow: 2px 2px 2px red; 45 | display: ; 46 | ``` 47 | -------------------------------------------------------------------------------- /03.box-layout/layout/layout4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Layout 1 9 | 10 | 11 | 12 | 13 |
14 |
15 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /10.css-2d-transform/scale.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 27 | 28 | 29 |
30 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi ipsum tempora doloribus magni totam esse consequatur aspernatur, quae aperiam corporis corrupti odit id dolore nihil natus porro deleniti inventore! Quibusdam repellendus soluta corporis, natus error temporibus accusantium perferendis ea aspernatur consectetur corrupti est, iusto minus aperiam commodi perspiciatis ratione distinctio. 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /07.css-position/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 36 | 37 | 38 |
39 |
40 | 41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /10.css-2d-transform/skew.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 28 | 29 | 30 |
31 | 32 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi ipsum tempora doloribus magni totam esse consequatur aspernatur, quae aperiam corporis corrupti odit id dolore nihil natus porro deleniti inventore! Quibusdam repellendus soluta corporis, natus error temporibus accusantium perferendis ea aspernatur consectetur corrupti est, iusto minus aperiam commodi perspiciatis ratione distinctio. 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /05.css-list-table/style.css: -------------------------------------------------------------------------------- 1 | *{ margin: 0; padding: 0;} 2 | 3 | .head{ 4 | width: 100%; 5 | height: 10vh; 6 | background-color: gold; 7 | position: relative; 8 | } 9 | #logo{ font-size: 2rem; color: white; text-decoration: none; position: absolute; left: 5%; top: 3vh;} 10 | 11 | 12 | .head ul{ position: absolute; right: 5%; top: 8vh; width: 70%; text-align: right;} 13 | 14 | .head ul li{ 15 | display: inline; 16 | padding: 1% 4%; 17 | background-color: tomato; 18 | border-radius: 20px; 19 | border:5px solid white; 20 | } 21 | .head ul li a{ color: white; text-decoration: none;} 22 | 23 | .head ul li:hover{ background-color: #404040;} 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | .nav{ 32 | /* width: 100%;*/ 33 | /* height: 10vh; */ 34 | padding: 2% 5%; 35 | background-color: #404040; 36 | margin-bottom: 1vh; 37 | } 38 | .nav a{ 39 | text-decoration: none; 40 | color: white; 41 | text-transform: capitalize; 42 | margin-right: 2%; 43 | 44 | } 45 | 46 | .nav ul li{list-style: none; display: inline;} 47 | .nav ul li a{ color: gold; font-weight: 400;} 48 | 49 | .nav-block{ width: 20%; padding: 2%; background-color: tomato; margin-bottom: 1vh;} 50 | 51 | .nav-block a{ display: block; background-color: white; margin-bottom: 1vh; padding: 5%; text-decoration: none; color: #404040;} 52 | 53 | .nav-block ul li{ list-style: none;} 54 | -------------------------------------------------------------------------------- /07.css-position/01.example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 39 | 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /start-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 30 | 31 | 32 | 33 |

css syntax

34 |
35 |
    36 |
  1. what is css
    2. 37 |
  2. how to use css
    3. 38 |
  3. 39 | how many way to use css 40 | 45 | 46 | 47 |
    4. 48 | 49 |
  4. css selector 50 |
    51 | 61 |
    5. 62 |
63 |
64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /18.css-gradient/README.md: -------------------------------------------------------------------------------- 1 | # CSS Gradients 2 | 3 | ## Linear Gradients 4 | 5 | > background-image: linear-gradient(tomato, gold); 6 | 7 | > background-image: linear-gradient(to right, tomato, gold); 8 | 9 | > background-image: linear-gradient(to bottom right, tomato, gold); 10 | 11 | > background-image: linear-gradient(180deg, tomato, gold); 12 | 13 | > background-image: linear-gradient(to right, rgba(255, 99, 71, 0.50), rgba(255, 215, 0, 0.50), rgba(65, 105, 225, 0.80), rgba(0, 128, 128, 0.70)); 14 | 15 | > background-image: repeating-linear-gradient(red, green 10%, yellow 20%); 16 | 17 | ## Radial Gradients 18 | 19 | > background-image: radial-gradient(tomato, gold, green); 20 | 21 | > background-image: radial-gradient(tomato 10%, gold 20%, green 50%); 22 | 23 | > background-image: radial-gradient(circle, tomato, gold, green); 24 | 25 | > background-image: radial-gradient(closest-side at 60% 50%, tomato, gold, green); 26 | 27 | > background-image: repeating-radial-gradient(red, green 10%, yellow 20%); 28 | 29 | ## Conic Gradients 30 | 31 | > background-image: conic-gradient(tomato, gold, green, royalblue); 32 | 33 | > background-image: conic-gradient(tomato 45deg, gold 90deg, green 120deg, royalblue 250deg); 34 | 35 | > background-image: conic-gradient(tomato, gold, green, royalblue); 36 | 37 | > background-image: conic-gradient(red 0deg, red 90deg, teal 90deg, teal 180deg, red 180deg, red 270deg, royalblue 270deg); 38 | 39 | > background-image: conic-gradient(from 90deg, rgba(255, 99, 71, 0.50), rgba(255, 215, 0, 0.50), rgba(65, 105, 225, 0.80), rgba(0, 128, 128, 0.70)); 40 | 41 | > background-image: conic-gradient(at 60% 40%, rgba(255, 99, 71, 0.50), rgba(255, 215, 0, 0.50), rgba(65, 105, 225, 0.80), rgba(0, 128, 128, 0.70)); 42 | 43 | -------------------------------------------------------------------------------- /animation.md: -------------------------------------------------------------------------------- 1 | # css3 animation 2 | 3 | 4 | 5 | 
 6 |  .banner {
 7 |             position: relative;
 8 |             width: 100%;
 9 |             height: 80vh;
10 |             background-image: url(https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg);
11 |             background-size: cover;
12 |             animation-name: slide;
13 |             animation-duration: 10s;
14 |             animation-iteration-count: infinite;
15 |         }
16 | 
17 |         .banner h1,
18 |         h2 {
19 |             position: absolute;
20 |             font-size: 4rem;
21 |             color: white;
22 |             padding: 1%;
23 |             background: rgba(65, 105, 225, 0.50);
24 |             border-left: 10px solid tomato;
25 |             transform: skewX(150deg);
26 |         }
27 | 
28 |         .p1 {
29 |             top: 10px;
30 |             left: 150px;
31 |         }
32 | 
33 |         .p2 {
34 |             top: 200px;
35 |             left: 250px;
36 |         }
37 | 
38 |         @keyframes slide {
39 |             0% {
40 |                 background-image: url(https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg);
41 |             }
42 | 
43 |             25% {
44 |                 background-image: url(https://images.pexels.com/photos/925786/pexels-photo-925786.jpeg);
45 |             }
46 | 
47 |             50% {
48 |                 background-image: url(https://images.pexels.com/photos/1586973/pexels-photo-1586973.jpeg);
49 |             }
50 | 
51 |             75% {
52 |                 background-image: url(https://images.pexels.com/photos/1015568/pexels-photo-1015568.jpeg);
53 |             }
54 | 
55 |             100% {
56 |                 background-image: url(https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg);
57 |             }
58 | 
59 |         }
60 | 
61 |
62 | -------------------------------------------------------------------------------- /12.css-animation/banner.md: -------------------------------------------------------------------------------- 1 | # css3 animation 2 | 3 | 4 | 5 | ``` 6 | .banner { 7 | position: relative; 8 | width: 100%; 9 | height: 80vh; 10 | background-image: url(https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg); 11 | background-size: cover; 12 | animation-name: slide; 13 | animation-duration: 10s; 14 | animation-iteration-count: infinite; 15 | } 16 | 17 | .banner h1, 18 | h2 { 19 | position: absolute; 20 | font-size: 4rem; 21 | color: white; 22 | padding: 1%; 23 | background: rgba(65, 105, 225, 0.50); 24 | border-left: 10px solid tomato; 25 | transform: skewX(150deg); 26 | } 27 | 28 | .p1 { 29 | top: 10px; 30 | left: 150px; 31 | } 32 | 33 | .p2 { 34 | top: 200px; 35 | left: 250px; 36 | } 37 | 38 | @keyframes slide { 39 | 0% { 40 | background-image: url(https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg); 41 | } 42 | 43 | 25% { 44 | background-image: url(https://images.pexels.com/photos/925786/pexels-photo-925786.jpeg); 45 | } 46 | 47 | 50% { 48 | background-image: url(https://images.pexels.com/photos/1586973/pexels-photo-1586973.jpeg); 49 | } 50 | 51 | 75% { 52 | background-image: url(https://images.pexels.com/photos/1015568/pexels-photo-1015568.jpeg); 53 | } 54 | 55 | 100% { 56 | background-image: url(https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg); 57 | } 58 | 59 | } 60 | 61 | ``` 62 | -------------------------------------------------------------------------------- /01.get-start-css/start-css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Start CSS 9 | 39 | 40 | 41 | 42 | 43 | 49 |

Welcome to css

50 |

Lorem ipsum dolor sit amet.

51 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.

52 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.

53 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.

54 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.

55 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.

56 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.

57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /07.css-position/profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 43 | 44 | 45 |
46 |

Welcome to CSS Basic Banner

47 | person 48 | 49 |
50 |
51 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /03.box-layout/readme.md: -------------------------------------------------------------------------------- 1 | # Box Layout Using CSS 2 | 3 | > ## width :px % 4 | 5 | > ## height :px vh 6 | 7 | > ## background-color : color-name | hex | rgb | hsl | rgba | hsla 8 | 9 | > ## background-image :url(); 10 | 11 | > ## float : left | right 12 | 13 | > ## clear : both 14 | 15 | > ## margin :top | right | bottom | left 16 | 17 | > ## padding :top | right | bottom | left 18 | > 19 | 20 | 21 | ## Exampe two 22 | ``` 23 | 24 | 25 | 26 | 27 | 28 | Nested Div Example 2 29 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | 74 | 75 | 76 | ``` 77 | -------------------------------------------------------------------------------- /03.box-layout/box-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Box Basic 9 | 69 | 70 | 71 | 72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /15.css-flex/navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 50 | 51 | 52 |
53 | Site Name 54 | 61 | 62 |
63 | 64 |
65 |

1

66 |

2

67 |

3

68 |

4

69 |

1

70 |

2

71 |

3

72 |

4

73 | 74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /15.css-flex/readme.md: -------------------------------------------------------------------------------- 1 | ``` 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Flex Master Guide 9 | 74 | 75 | 76 | 93 | 94 | 95 | ``` 96 | -------------------------------------------------------------------------------- /06.css-border/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Border Example 8 | 108 | 109 | 110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /02.css-with-text/text-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Text Example 9 | 10 | 11 | 12 | 41 | 42 | 43 | 44 |

Css with heading tag ⌚️

45 |

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a 46 | markup language such as HTML. CSS is a cornerstone technology of the World Wide Web,

47 |

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a 48 | markup language such as HTML. CSS is a cornerstone technology of the World Wide Web,

49 |

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a 50 | markup language such as HTML. CSS is a cornerstone technology of the World Wide Web,

51 |

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a 52 | markup language such as HTML. CSS is a cornerstone technology of the World Wide Web,

53 |

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a 54 | markup language such as HTML. CSS is a cornerstone technology of the World Wide Web,

55 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, pariatur dolore ad saepe nostrum 56 | voluptate 57 | quisquam impedit asperiores atque doloribus iste, facere officia delectus quis molestiae nam necessitatibus 58 | error eaque corporis! Eveniet, voluptatum sunt accusantium sapiente illo cupiditate provident fugiat explicabo 59 | quod maiores quae a deserunt odio ipsum, labore animi! Odio nesciunt quibusdam ducimus magnam dolorum iure 60 | tempora unde. Voluptatum enim natus inventore. Et sunt deleniti ducimus totam maxime, porro nam esse fuga 61 | obcaecati voluptates. Dicta exercitationem dolore ipsum possimus quaerat iusto, ab expedita id natus commodi! 62 | Facilis placeat eligendi iste repellat maxime. Corporis architecto quasi tempore illo magni magnam quos in, 63 | consequatur molestiae laboriosam unde omnis soluta inventore vel alias. Similique amet quae quidem iste deserunt 64 | ullam deleniti odio aspernatur quaerat! Ducimus beatae voluptates, maiores delectus quis eligendi cumque velit 65 | atque natus consequuntur consequatur provident! Quod asperiores nulla corporis doloribus libero aut molestiae 66 | amet est ipsam iure aperiam odit harum unde explicabo tempora quo, aspernatur, officiis dolorem voluptatibus 67 | sit. Neque perferendis officia corrupti fuga libero quis omnis dolores possimus repudiandae repellendus 68 | architecto, cumque esse ut, aut natus aliquid ipsum voluptatibus excepturi dignissimos sapiente dolor quidem? 69 | Explicabo hic eaque illo esse libero, quasi possimus iusto vel voluptatum provident dolore voluptatibus?

70 | Logo Example 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /07.css-position/image/undraw_quick_chat_re_bit5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Master Guide 🥇 2 | 3 | **CSS stands for Cascading Style Sheets, and it is a language used to describe the presentation of HTML (Hypertext Markup Language) and XML (Extensible Markup Language) documents. CSS is used to control the layout, fonts, colors, and other visual aspects of web pages and user interfaces.** 4 | 5 | ## CSS provides several methods to define the styles. 6 | 7 | > Inline Styles 8 | 9 | > Internal Style Sheets 10 | 11 | > External Style Sheets 12 | 13 |
14 | 15 | ## Inline Styles: 16 | 17 | **This method allows you to apply styles directly to an HTML element using the style attribute. This method is useful for making quick, one-off style changes.** 18 | 19 | ``` 20 |

This heading containt red color

21 | ``` 22 |
23 | 24 | ## Internal Style Sheets: 25 | 26 | **This method allows you to define the styles within the < head > section of your HTML document, using the < style > tag. This method is useful when you want to apply styles to a specific page only.** 27 | 28 | ``` 29 | 30 | 35 | 36 | ``` 37 |
38 | 39 | ## External Style Sheets: 40 | 41 | **In this method, you can define the styles in a separate CSS file, which is then linked to your HTML document using the tag. This method allows you to maintain consistent styles across multiple pages.** 42 | 43 | ``` 44 | 45 | 46 | 47 | 48 | ``` 49 | 50 | 51 | ### CSS File Code Like 52 | 53 | ``` 54 | /* Element Selector */ 55 | h1 { 56 | font-size: 24px; 57 | } 58 | 59 | /* Class Selector */ 60 | .myClass { 61 | background-color: #fff; 62 | } 63 | 64 | /* ID Selector */ 65 | #myId { 66 | border: 1px solid black; 67 | } 68 | 69 | ``` 70 | 71 |
72 | 73 | ## CSS Function 74 | 75 | **CSS functions are built-in functions that allow you to perform calculations, manipulate values, and apply complex effects to your styles. CSS functions take one or more input values and return a modified value that can be used in your styles.** 76 | 77 | ### 1. calc() - performs basic arithmetic operations on values and units. 78 | 79 | ``` 80 | width: calc(50% - 20px); 81 | ``` 82 | ### 2. var() - allows you to use variables to define and reuse values. 83 | 84 | ``` 85 | --primary-color: #007bff; 86 | color: var(--primary-color); 87 | 88 | ``` 89 | ### 3. rgb() / rgba() - defines a color using red, green, blue and optionally an alpha value. 90 | 91 | ``` 92 | background-color: rgba(255, 0, 0, 0.5); 93 | ``` 94 | 95 | ### 4. hsl() / hsla() - defines a color using hue, saturation, lightness and optionally an alpha value. 96 | 97 | ``` 98 | color: hsl(120, 100%, 50%); 99 | ``` 100 | 101 | ### 5. url() - defines the location of an external resource such as an image or a font. 102 | 103 | ``` 104 | background-image: url("background.png"); 105 | ``` 106 | 107 | ### 6. attr() - retrieves the value of an HTML attribute and uses it in the style. 108 | 109 | ``` 110 | content: attr(title); 111 | ``` 112 | 113 | ### 7. linear-gradient() / radial-gradient() - creates a gradient background using one or more colors. 114 | 115 | ``` 116 | background-image: linear-gradient(to right, red, orange, yellow, green); 117 | ``` 118 | 119 | ### 8. min() / max() - returns the minimum or maximum value from a list of inputs. 120 | 121 | ``` 122 | width: min(50%, 200px); 123 | ``` 124 | 125 | ### 9. clamp() - restricts a value between a minimum and maximum value 126 | 127 | ``` 128 | font-size: clamp(16px, 2.5vw, 24px); 129 | ``` 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 |
140 | 141 | - css syntax 142 | 143 | - css text property 144 | - create article using html css 145 | - text logo using css 146 | - css box layout 147 | - css window 8 start menu 148 | - nested box layout 149 | 150 | - > css border 151 | 152 | - > css position 153 | 154 | - > css navigation 155 | 156 | # 🧑🏼‍💻 CSS3 Module For Development 157 | 158 | > text-shadow and box-shadow 159 | 160 | > border-radius 161 | 162 | > border-image 163 | 164 | > background-image 165 | 166 | > css 2d and 3d 167 | 168 | > css animation 169 | 170 | > css flex layout 171 | 172 | # 🧑🏼‍💻 ref website 173 | 174 | >https://coolors.co/palettes/trending 175 | 176 | >https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=none 177 | 178 | > https://webcode.tools/ 179 | 180 | > https://animista.net/ 181 | 182 | 183 |
184 | Back To Home Page 185 |
186 | 187 | 192 |

okay

193 | 194 | -------------------------------------------------------------------------------- /13.css-multiple-columns/readme.md: -------------------------------------------------------------------------------- 1 | # css multiple column 2 | 3 | > ## column-count 4 | 5 | > ## column-gap 6 | 7 | > ## column-rule-style 8 | 9 | > ## column-rule-width 10 | 11 | > ## column-rule-color 12 | 13 | > ## column-rule 14 | 15 | > ## column-span 16 | 17 | > ## column-width 18 | 19 | ## Example 20 | 21 | ``` 22 | 23 | 24 | 25 | 26 | 27 | Document 28 | 55 | 56 | 57 |
58 | 59 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, iusto.

60 | 61 | 62 | 63 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis minus doloribus maxime eos ratione beatae voluptates excepturi quod deleniti! A debitis voluptatibus quae sit eius qui labore fuga dignissimos accusantium illum inventore maiores error facilis laudantium, temporibus quas possimus beatae omnis ex vitae accusamus culpa, autem, eligendi quibusdam! Corrupti harum explicabo eos perferendis eum mollitia, eligendi quod reprehenderit nobis non ea minus impedit nam itaque numquam fuga officiis debitis, molestiae perspiciatis illo repudiandae inventore quaerat dolorem! Cumque aliquam doloremque nemo, eum explicabo qui natus maxime eligendi dolor dignissimos impedit veritatis exercitationem nisi, at reiciendis iusto ratione repellat culpa voluptas corporis tempore beatae officiis vel excepturi? Rem dolorum eveniet maxime tempore fugit quaerat repellat, doloremque distinctio, explicabo mollitia quod natus vero architecto ex at. Rem saepe cumque eaque maxime placeat aliquam enim voluptate earum? Dolorum dolore iure repellat, placeat labore excepturi sint assumenda dolorem, quasi aliquid laboriosam corrupti veritatis modi omnis doloribus unde ut possimus blanditiis quia at consequatur cum quaerat. Cupiditate, quam! Blanditiis dolorum autem alias placeat, quod facilis ea aut, perferendis eius accusantium, officiis optio veniam illum beatae! Nemo non eum sunt optio aspernatur expedita ea aut quidem ipsa repellendus! Deleniti alias, rerum iure velit ab dolorum voluptatibus, vero pariatur incidunt saepe cupiditate distinctio vel repellendus, explicabo ipsam maxime consequatur voluptate cum nihil praesentium ducimus reiciendis nemo blanditiis? Omnis mollitia, expedita exercitationem ipsam soluta eos tempora sint! Nulla eaque cumque quo neque, tempora, molestias, vel totam natus in amet sequi non eveniet repellendus. Magni dignissimos qui nemo, illum saepe assumenda quos itaque modi maiores corrupti, libero quibusdam? Quod enim necessitatibus id sit. Praesentium excepturi, error corrupti esse ullam rem enim! Explicabo odit eos voluptas? Obcaecati, minus. Quod possimus fugiat nesciunt sit deleniti tenetur minima. Rem asperiores at enim reiciendis illo praesentium assumenda blanditiis, voluptas nesciunt nam repellat mollitia quisquam ex, perferendis commodi soluta iste architecto laborum tempore ipsum aliquam sunt sed. Doloremque asperiores consectetur omnis quas doloribus? Maxime officia, nostrum perspiciatis magnam, recusandae cupiditate laudantium eaque provident minima sed commodi explicabo soluta neque ea optio natus, id molestias sint tempore repellendus! Laborum dolore nostrum repellendus reprehenderit iure totam ipsam ab rerum quae dicta id obcaecati sunt rem, provident sequi delectus accusamus modi. Consequuntur quod enim numquam tempora perspiciatis cupiditate maxime dolor commodi earum inventore! Excepturi eius sed earum, provident, doloremque quidem a mollitia corrupti expedita porro doloribus nobis hic iste nam, veniam consequuntur? Aliquid eaque corporis error dolor sunt saepe voluptatibus, amet maxime libero. Beatae, consequuntur! Repellat perferendis recusandae cum quia culpa enim obcaecati laboriosam, nam totam doloremque corporis natus dolore nostrum numquam necessitatibus laudantium officia, sint, ducimus voluptate architecto quae quas alias in. Perspiciatis facilis autem aut reprehenderit harum et sint tenetur, necessitatibus quasi dolorum accusamus dolores deleniti adipisci natus aliquid eligendi. Sequi ab dolorum explicabo in necessitatibus odio deserunt excepturi autem nisi sit veniam, magnam ea itaque numquam, architecto error tempore omnis iste voluptates. Natus fuga eaque, vitae consectetur labore eos ab nesciunt molestias? Fugiat consequuntur voluptatem aspernatur sapiente fugit ex temporibus quos corporis ab! Voluptatem neque sint inventore. Obcaecati veritatis sit illo placeat inventore id consequatur eos dolorem tempora incidunt voluptas vero sunt alias sed, cupiditate quisquam expedita, eligendi rerum laboriosam explicabo ducimus. Nesciunt suscipit nulla atque rem eos repellat, vel provident officiis adipisci. Soluta aliquid deleniti cumque, fuga fugit animi quos quidem hic quis, vero minus. Natus, ullam enim accusantium ad facilis aliquid consequuntur illo cupiditate nesciunt delectus, quod rerum possimus iusto sunt commodi aliquam architecto ex perferendis alias dolorem eveniet ea praesentium molestiae sint. Nulla totam aut soluta aliquam, nostrum unde voluptate reiciendis provident, cumque amet sed officia doloribus doloremque impedit maiores numquam voluptas. 64 | 65 |
66 | 67 | 68 | 69 | ``` 70 | -------------------------------------------------------------------------------- /07.css-position/image/undraw_video_call_re_4p26.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------