├── Finished ├── 1. Variables │ ├── Images │ │ ├── four.jpg │ │ ├── images-credits.txt │ │ ├── one.jpg │ │ ├── three.jpg │ │ └── two.jpg │ ├── index.css │ ├── index.css.map │ ├── index.html │ └── index.scss ├── 10. Portfolio Site │ ├── Images │ │ ├── Projects │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ └── 9d9769144508357.628db230127df.png │ │ ├── clients │ │ │ ├── alex-mccarthy-RGKdWJOUFH0-unsplash.jpg │ │ │ ├── ali-morshedlou-WMD64tMfc4k-unsplash.jpg │ │ │ └── nasik-lababan-AY2dgFfdqVk-unsplash.jpg │ │ └── simon-de-vries-UQluWXKUn7A-unsplash.jpg │ ├── components │ │ ├── _about.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _nav.scss │ │ ├── _projects.scss │ │ ├── _resets.scss │ │ ├── _reviews.scss │ │ └── _variables.scss │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 11. Awesome Header │ ├── index.html │ ├── meysam-jarahkar-LI7jB1925j0-unsplash.jpg │ └── style.scss ├── 2. Nesting │ ├── README.md │ ├── index.html │ ├── sebastian-svenson-d2w-_1LJioQ-unsplash.jpg │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 3. Imports and Partials │ ├── README.md │ ├── components │ │ ├── _cards.scss │ │ ├── _footer.scss │ │ ├── _gallery.scss │ │ ├── _header.scss │ │ ├── _nav.scss │ │ ├── _resets.scss │ │ └── _responsiveness.scss │ ├── images.txt │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 4. Mixins │ ├── README.md │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 5. Extends │ ├── README.md │ ├── images.txt │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 6. Sass Operators │ ├── README.md │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 7. Sass Functions │ ├── README.md │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── 8. Interpolation │ ├── README.md │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss └── 9. Directive │ ├── 1. If and Else │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss │ ├── 2. For Loop │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss │ ├── 3. Each Loop │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss │ └── 4. While Loop │ ├── index.html │ ├── style.css │ ├── style.css.map │ └── style.scss ├── README.md ├── Starter ├── 1. Variables │ ├── Images │ │ ├── four.jpg │ │ ├── images-credits.txt │ │ ├── one.jpg │ │ ├── three.jpg │ │ └── two.jpg │ ├── index.html │ └── index.scss ├── 10. Portfolio Site │ ├── Images │ │ ├── Projects │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ └── 9d9769144508357.628db230127df.png │ │ ├── clients │ │ │ ├── alex-mccarthy-RGKdWJOUFH0-unsplash.jpg │ │ │ ├── ali-morshedlou-WMD64tMfc4k-unsplash.jpg │ │ │ └── nasik-lababan-AY2dgFfdqVk-unsplash.jpg │ │ └── simon-de-vries-UQluWXKUn7A-unsplash.jpg │ ├── index.html │ └── style.scss ├── 11. Awesome Header │ ├── index.html │ ├── meysam-jarahkar-LI7jB1925j0-unsplash.jpg │ └── style.scss ├── 2. Nesting │ ├── README.md │ ├── index.html │ ├── sebastian-svenson-d2w-_1LJioQ-unsplash.jpg │ └── style.scss ├── 3. Imports and Partials │ ├── README.md │ ├── images.txt │ ├── index.html │ └── style.scss ├── 4. Mixins │ ├── README.md │ ├── index.html │ └── style.scss ├── 5. Extends │ ├── README.md │ ├── images.txt │ ├── index.html │ └── style.scss ├── 6. Sass Operators │ ├── README.md │ ├── index.html │ └── style.scss ├── 7. Sass Functions │ ├── README.md │ ├── index.html │ └── style.scss ├── 8. Interpolation │ ├── README.md │ ├── index.html │ └── style.scss └── 9. Directives │ ├── 1. If and Else │ ├── index.html │ └── style.scss │ ├── 2. For Loop │ ├── index.html │ └── style.scss │ ├── 3. Each Loop │ ├── index.html │ └── style.scss │ └── 4. While Loop │ ├── index.html │ └── style.scss └── course-thumb.png /Finished/1. Variables/Images/four.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/1. Variables/Images/four.jpg -------------------------------------------------------------------------------- /Finished/1. Variables/Images/images-credits.txt: -------------------------------------------------------------------------------- 1 | IMAGE ONE 👇 2 | 3 | https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80 4 | 5 | 6 | IMAGE TWO 👇 7 | 8 | https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 9 | 10 | IMAGE THREE 👇 11 | 12 | https://images.unsplash.com/photo-1489980557514-251d61e3eeb6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 13 | 14 | 15 | IMAGE FOUR 👇 16 | 17 | https://images.unsplash.com/photo-1484515991647-c5760fcecfc7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=449&q=80 -------------------------------------------------------------------------------- /Finished/1. Variables/Images/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/1. Variables/Images/one.jpg -------------------------------------------------------------------------------- /Finished/1. Variables/Images/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/1. Variables/Images/three.jpg -------------------------------------------------------------------------------- /Finished/1. Variables/Images/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/1. Variables/Images/two.jpg -------------------------------------------------------------------------------- /Finished/1. Variables/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"); 2 | body { 3 | background: linear-gradient(rgba(165, 170, 233, 0.8), #8c9af6); 4 | } 5 | 6 | .container { 7 | display: flex; 8 | flex-wrap: wrap; 9 | justify-content: center; 10 | align-items: center; 11 | font-family: "Roboto", sans-serif; 12 | } 13 | 14 | .card { 15 | background: #c8deff; 16 | max-width: 280px; 17 | padding: 20px; 18 | line-height: 24px; 19 | margin: 4rem; 20 | position: relative; 21 | } 22 | 23 | .img { 24 | width: 70px; 25 | height: 70px; 26 | border-radius: 100%; 27 | border: 5px solid white; 28 | position: absolute; 29 | right: -30px; 30 | bottom: 110px; 31 | } 32 | 33 | .img-one { 34 | background: url("Images/one.jpg") no-repeat center/cover; 35 | } 36 | 37 | .img-two { 38 | background: url("Images/two.jpg") no-repeat center/cover; 39 | } 40 | 41 | .img-three { 42 | background: url("Images/three.jpg") no-repeat center/cover; 43 | } 44 | 45 | .img-four { 46 | background: url("Images/four.jpg") no-repeat center/cover; 47 | }/*# sourceMappingURL=index.css.map */ -------------------------------------------------------------------------------- /Finished/1. Variables/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAQ,wFAAA;AAMR;EACE,8DAAA;ACJF;;ADOA;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;EACA,iCAXU;ACOZ;;ADOA;EACE,mBAjBW;EAkBX,gBAAA;EACA,aAAA;EACA,iBAAA;EACA,YAAA;EACA,kBAAA;ACJF;;ADOA;EACE,WAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;ACJF;;ADOA;EACE,wDAAA;ACJF;;ADMA;EACE,wDAAA;ACHF;;ADKA;EACE,0DAAA;ACFF;;ADIA;EACE,yDAAA;ACDF","file":"index.css"} -------------------------------------------------------------------------------- /Finished/1. Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Variables 7 | 8 | 9 | 10 |
11 |
12 |
13 |

14 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ex quod 15 | exercitationem praesentium consectetur rem! 16 |

17 |
18 |
19 |
20 |

21 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ex quod 22 | exercitationem praesentium consectetur rem! 23 |

24 |
25 |
26 |
27 |

28 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ex quod 29 | exercitationem praesentium consectetur rem! 30 |

31 |
32 |
33 |
34 |

35 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ex quod 36 | exercitationem praesentium consectetur rem! 37 |

38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /Finished/1. Variables/index.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"); 2 | 3 | $main-color: #c8deff; 4 | $bg-image-center: no-repeat center/cover; 5 | $main-font: "Roboto", sans-serif; 6 | 7 | body { 8 | background: linear-gradient(#a5aae9cc, #8c9af6); 9 | } 10 | 11 | .container { 12 | display: flex; 13 | flex-wrap: wrap; 14 | justify-content: center; 15 | align-items: center; 16 | font-family: $main-font; 17 | } 18 | 19 | .card { 20 | background: $main-color; 21 | max-width: 280px; 22 | padding: 20px; 23 | line-height: 24px; 24 | margin: 4rem; 25 | position: relative; 26 | } 27 | 28 | .img { 29 | width: 70px; 30 | height: 70px; 31 | border-radius: 100%; 32 | border: 5px solid white; 33 | position: absolute; 34 | right: -30px; 35 | bottom: 110px; 36 | } 37 | 38 | .img-one { 39 | background: url("Images/one.jpg") $bg-image-center; 40 | } 41 | .img-two { 42 | background: url("Images/two.jpg") $bg-image-center; 43 | } 44 | .img-three { 45 | background: url("Images/three.jpg") $bg-image-center; 46 | } 47 | .img-four { 48 | background: url("Images/four.jpg") $bg-image-center; 49 | } 50 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/1.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/2.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/3.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/4.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/5.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/6.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/7.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/8.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/Projects/9d9769144508357.628db230127df.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/Projects/9d9769144508357.628db230127df.png -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/10. Portfolio Site/Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_about.scss: -------------------------------------------------------------------------------- 1 | .about { 2 | height: 80vh; 3 | display: flex; 4 | flex-direction: column; 5 | flex-wrap: wrap; 6 | justify-content: flex-end; 7 | align-items: flex-start; 8 | font-family: $primary-font; 9 | margin-top: 23rem; 10 | padding: 3rem 5rem; 11 | 12 | p { 13 | line-height: 1.7; 14 | color: #e8d4ef; 15 | width: 400px; 16 | 17 | span { 18 | padding: 5px; 19 | background: $gradient; 20 | border-radius: 100px; 21 | } 22 | } 23 | 24 | .two { 25 | align-self: flex-end; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | margin-top: 10rem; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-around; 6 | align-items: center; 7 | color: #fff; 8 | 9 | h1 { 10 | font-size: 2rem; 11 | } 12 | 13 | p { 14 | max-width: 400px; 15 | font-family: $primary-font; 16 | line-height: 25px; 17 | } 18 | 19 | .about-company { 20 | display: flex; 21 | flex-wrap: wrap; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .footer-container { 27 | margin-right: 40px; 28 | margin-top: 20px; 29 | 30 | h1 { 31 | margin-bottom: 50px; 32 | } 33 | 34 | p { 35 | font-family: $primary-font; 36 | margin-bottom: 20px; 37 | } 38 | } 39 | 40 | @media screen and (max-width: 1000px) { 41 | height: 80vh; 42 | margin-top: 20rem; 43 | } 44 | 45 | @media screen and (max-width: 800px) { 46 | height: 140vh; 47 | margin-top: 30rem; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_header.scss: -------------------------------------------------------------------------------- 1 | .frame-container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 80vh; 6 | 7 | .gradient { 8 | width: 72%; 9 | height: 76%; 10 | position: absolute; 11 | bottom: 74px; 12 | background: $gradient; 13 | border-radius: 10px; 14 | } 15 | 16 | header { 17 | width: 70%; 18 | height: 90%; 19 | margin-top: 2rem; 20 | background-image: url(Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg); 21 | background-size: cover; 22 | background-position: 0 -280px; 23 | background-repeat: no-repeat; 24 | position: relative; 25 | 26 | @media screen and (max-width: 700px) { 27 | background-position: center; 28 | } 29 | 30 | .social { 31 | height: 100%; 32 | width: 10%; 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: center; 36 | color: #fff; 37 | margin-left: 10px; 38 | text-align: center; 39 | 40 | .fa-brands { 41 | margin-bottom: 10px; 42 | } 43 | 44 | .line { 45 | margin: 0 auto; 46 | width: 4px; 47 | border-radius: 10px; 48 | height: 20%; 49 | background: #ae81bf; 50 | margin-bottom: 20px; 51 | } 52 | } 53 | 54 | h1 { 55 | margin-left: 50px; 56 | color: white; 57 | font-size: 5rem; 58 | font-family: $main-font; 59 | font-weight: normal; 60 | transform: translateY(-50px); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_nav.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 50vh; 3 | background: linear-gradient(to right, #4f2d62, #ac39ea); 4 | 5 | nav { 6 | display: flex; 7 | justify-content: flex-end; 8 | font-family: $primary-font; 9 | 10 | ul { 11 | margin-right: 40px; 12 | margin-top: 20px; 13 | 14 | li { 15 | display: inline; 16 | list-style: none; 17 | margin-left: 30px; 18 | 19 | a { 20 | text-decoration: none; 21 | color: #fff; 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_projects.scss: -------------------------------------------------------------------------------- 1 | .projects { 2 | .title { 3 | margin-left: 50px; 4 | margin-top: 8rem; 5 | color: white; 6 | font-size: 4rem; 7 | font-family: $main-font; 8 | font-weight: normal; 9 | transform: translateY(-50px); 10 | 11 | span { 12 | background: $label-color; 13 | } 14 | } 15 | 16 | .images-container { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | img { 24 | width: 170px; 25 | height: 100vh; 26 | margin: 30px 10px; 27 | } 28 | 29 | .img-one { 30 | transform: translateY(200px); 31 | } 32 | .img-two { 33 | transform: translateY(150px); 34 | } 35 | .img-three { 36 | transform: translateY(100px); 37 | } 38 | 39 | @media screen and (max-width: 680px) { 40 | .img-one { 41 | margin-bottom: 6rem; 42 | } 43 | .img-two { 44 | margin-bottom: 6rem; 45 | } 46 | .img-three { 47 | margin-bottom: 6rem; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_resets.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_reviews.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | .clients { 4 | height: 100vh; 5 | margin-top: 15rem; 6 | 7 | h1 { 8 | text-align: right; 9 | margin-right: 4rem; 10 | margin-top: 8rem; 11 | color: white; 12 | font-size: 4rem; 13 | font-family: Branden Raulner; 14 | font-weight: normal; 15 | transform: translateY(-50px); 16 | 17 | span { 18 | background: $label-color; 19 | } 20 | } 21 | 22 | section.cards-container { 23 | .cards { 24 | display: flex; 25 | flex-wrap: wrap; 26 | justify-content: center; 27 | align-items: center; 28 | 29 | .card { 30 | background: #2b252e; 31 | padding: 40px; 32 | color: #fff; 33 | line-height: 1.5; 34 | margin: 10px; 35 | 36 | p { 37 | width: 200px; 38 | font-family: "Roboto", sans-serif; 39 | color: rgb(197, 197, 197); 40 | } 41 | 42 | .user-info { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | 47 | .user-img { 48 | margin-right: 20px; 49 | width: 50px; 50 | height: 50px; 51 | border-radius: 100px; 52 | background: url(Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg) 53 | $bg-image-cover; 54 | } 55 | 56 | .user-img-two { 57 | background: url(Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg) 58 | $bg-image-cover; 59 | } 60 | .user-img-three { 61 | background: url(Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg) 62 | $bg-image-cover; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/components/_variables.scss: -------------------------------------------------------------------------------- 1 | $bg-image-cover: no-repeat center/cover; 2 | $label-color: #ae81bf64; 3 | $main-font: Branden Raulner; 4 | $primary-font: "Roboto", sans-serif; 5 | $gradient: linear-gradient(to left, #35d08f, #e32e64); 6 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio 7 | 8 | 15 | 16 | 17 |
18 | 26 | 27 |
28 |
29 |
30 | 37 | 38 |

39 | ALEX
40 | MERSON 41 |

42 |
43 |
44 |
45 | 46 |
47 |

48 | HuXn Is a Software Engineer, and also a UI/UX lover he has 49 | worked with lots of popular & unpopular technologies, frameworks, and 50 | libraries such as React, Angular, Vue, and countless other 51 |

52 |

53 | Not only Frameworks and libraries but also different 54 | programming languages like Python, JavaScript, Golang, TypeScript, Java, 55 | C, C++, etc. 56 |

57 |

58 | He is also known as HuXn WebDev on YouTube where he shares 59 | all of his knowledge with the world totally for free. 60 |

61 |
62 | 63 |
64 |

65 | RECENT
66 | PROJECTS 67 |

68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 |
76 |
77 | 78 | 79 | 80 | 81 |
82 |
83 |
84 | 85 |
86 |

87 | CLIENTS
88 | REVIEWS 89 |

90 | 91 |
92 |
93 |
94 |

95 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab 96 | aliquam, dolores quaerat facilis rem iure asperiores odio enim 97 | dolorum ut repellat dolore. 98 |

99 |
100 | 101 | 108 |
109 |
110 |

111 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab 112 | aliquam, dolores quaerat facilis rem iure asperiores odio enim 113 | dolorum ut repellat dolore. 114 |

115 |
116 | 117 | 124 |
125 |
126 |

127 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab 128 | aliquam, dolores quaerat facilis rem iure asperiores odio enim 129 | dolorum ut repellat dolore. 130 |

131 |
132 | 133 | 140 |
141 |
142 |
143 |
144 | 145 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | .container { 9 | height: 50vh; 10 | background: linear-gradient(to right, #4f2d62, #ac39ea); 11 | } 12 | .container nav { 13 | display: flex; 14 | justify-content: flex-end; 15 | font-family: "Roboto", sans-serif; 16 | } 17 | .container nav ul { 18 | margin-right: 40px; 19 | margin-top: 20px; 20 | } 21 | .container nav ul li { 22 | display: inline; 23 | list-style: none; 24 | margin-left: 30px; 25 | } 26 | .container nav ul li a { 27 | text-decoration: none; 28 | color: #fff; 29 | } 30 | 31 | .frame-container { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | height: 80vh; 36 | } 37 | .frame-container .gradient { 38 | width: 72%; 39 | height: 76%; 40 | position: absolute; 41 | bottom: 74px; 42 | background: linear-gradient(to left, #35d08f, #e32e64); 43 | border-radius: 10px; 44 | } 45 | .frame-container header { 46 | width: 70%; 47 | height: 90%; 48 | margin-top: 2rem; 49 | background-image: url(Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg); 50 | background-size: cover; 51 | background-position: 0 -280px; 52 | background-repeat: no-repeat; 53 | position: relative; 54 | } 55 | @media screen and (max-width: 700px) { 56 | .frame-container header { 57 | background-position: center; 58 | } 59 | } 60 | .frame-container header .social { 61 | height: 100%; 62 | width: 10%; 63 | display: flex; 64 | flex-direction: column; 65 | justify-content: center; 66 | color: #fff; 67 | margin-left: 10px; 68 | text-align: center; 69 | } 70 | .frame-container header .social .fa-brands { 71 | margin-bottom: 10px; 72 | } 73 | .frame-container header .social .line { 74 | margin: 0 auto; 75 | width: 4px; 76 | border-radius: 10px; 77 | height: 20%; 78 | background: #ae81bf; 79 | margin-bottom: 20px; 80 | } 81 | .frame-container header h1 { 82 | margin-left: 50px; 83 | color: white; 84 | font-size: 5rem; 85 | font-family: Branden Raulner; 86 | font-weight: normal; 87 | transform: translateY(-50px); 88 | } 89 | 90 | .about { 91 | height: 80vh; 92 | display: flex; 93 | flex-direction: column; 94 | flex-wrap: wrap; 95 | justify-content: flex-end; 96 | align-items: flex-start; 97 | font-family: "Roboto", sans-serif; 98 | margin-top: 23rem; 99 | padding: 3rem 5rem; 100 | } 101 | .about p { 102 | line-height: 1.7; 103 | color: #e8d4ef; 104 | width: 400px; 105 | } 106 | .about p span { 107 | padding: 5px; 108 | background: linear-gradient(to left, #35d08f, #e32e64); 109 | border-radius: 100px; 110 | } 111 | .about .two { 112 | align-self: flex-end; 113 | } 114 | 115 | .projects .title { 116 | margin-left: 50px; 117 | margin-top: 8rem; 118 | color: white; 119 | font-size: 4rem; 120 | font-family: Branden Raulner; 121 | font-weight: normal; 122 | transform: translateY(-50px); 123 | } 124 | .projects .title span { 125 | background: rgba(174, 129, 191, 0.3921568627); 126 | } 127 | .projects .images-container { 128 | display: flex; 129 | flex-direction: column; 130 | justify-content: center; 131 | align-items: center; 132 | } 133 | .projects img { 134 | width: 170px; 135 | height: 100vh; 136 | margin: 30px 10px; 137 | } 138 | .projects .img-one { 139 | transform: translateY(200px); 140 | } 141 | .projects .img-two { 142 | transform: translateY(150px); 143 | } 144 | .projects .img-three { 145 | transform: translateY(100px); 146 | } 147 | @media screen and (max-width: 680px) { 148 | .projects .img-one { 149 | margin-bottom: 6rem; 150 | } 151 | .projects .img-two { 152 | margin-bottom: 6rem; 153 | } 154 | .projects .img-three { 155 | margin-bottom: 6rem; 156 | } 157 | } 158 | 159 | .clients { 160 | height: 100vh; 161 | margin-top: 15rem; 162 | } 163 | .clients h1 { 164 | text-align: right; 165 | margin-right: 4rem; 166 | margin-top: 8rem; 167 | color: white; 168 | font-size: 4rem; 169 | font-family: Branden Raulner; 170 | font-weight: normal; 171 | transform: translateY(-50px); 172 | } 173 | .clients h1 span { 174 | background: rgba(174, 129, 191, 0.3921568627); 175 | } 176 | .clients section.cards-container .cards { 177 | display: flex; 178 | flex-wrap: wrap; 179 | justify-content: center; 180 | align-items: center; 181 | } 182 | .clients section.cards-container .cards .card { 183 | background: #2b252e; 184 | padding: 40px; 185 | color: #fff; 186 | line-height: 1.5; 187 | margin: 10px; 188 | } 189 | .clients section.cards-container .cards .card p { 190 | width: 200px; 191 | font-family: "Roboto", sans-serif; 192 | color: rgb(197, 197, 197); 193 | } 194 | .clients section.cards-container .cards .card .user-info { 195 | display: flex; 196 | align-items: center; 197 | justify-content: center; 198 | } 199 | .clients section.cards-container .cards .card .user-info .user-img { 200 | margin-right: 20px; 201 | width: 50px; 202 | height: 50px; 203 | border-radius: 100px; 204 | background: url(Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg) no-repeat center/cover; 205 | } 206 | .clients section.cards-container .cards .card .user-info .user-img-two { 207 | background: url(Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg) no-repeat center/cover; 208 | } 209 | .clients section.cards-container .cards .card .user-info .user-img-three { 210 | background: url(Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg) no-repeat center/cover; 211 | } 212 | 213 | footer { 214 | margin-top: 10rem; 215 | display: flex; 216 | flex-wrap: wrap; 217 | justify-content: space-around; 218 | align-items: center; 219 | color: #fff; 220 | } 221 | footer h1 { 222 | font-size: 2rem; 223 | } 224 | footer p { 225 | max-width: 400px; 226 | font-family: "Roboto", sans-serif; 227 | line-height: 25px; 228 | } 229 | footer .about-company { 230 | display: flex; 231 | flex-wrap: wrap; 232 | justify-content: center; 233 | align-items: center; 234 | } 235 | footer .footer-container { 236 | margin-right: 40px; 237 | margin-top: 20px; 238 | } 239 | footer .footer-container h1 { 240 | margin-bottom: 50px; 241 | } 242 | footer .footer-container p { 243 | font-family: "Roboto", sans-serif; 244 | margin-bottom: 20px; 245 | } 246 | @media screen and (max-width: 1000px) { 247 | footer { 248 | height: 80vh; 249 | margin-top: 20rem; 250 | } 251 | } 252 | @media screen and (max-width: 800px) { 253 | footer { 254 | height: 140vh; 255 | margin-top: 30rem; 256 | } 257 | } 258 | 259 | body { 260 | background: #211f22; 261 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","components/_resets.scss","style.css","components/_nav.scss","components/_variables.scss","components/_header.scss","components/_about.scss","components/_projects.scss","components/_reviews.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ,wGAAA;ACAR;EACE,SAAA;EACA,UAAA;EACA,sBAAA;ACEF;;ACLA;EACE,YAAA;EACA,uDAAA;ADQF;ACNE;EACE,aAAA;EACA,yBAAA;EACA,iCCJW;AFYf;ACNI;EACE,kBAAA;EACA,gBAAA;ADQN;ACNM;EACE,eAAA;EACA,gBAAA;EACA,iBAAA;ADQR;ACNQ;EACE,qBAAA;EACA,WAAA;ADQV;;AG5BA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;AH+BF;AG7BE;EACE,UAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;EACA,sDDPO;ECQP,mBAAA;AH+BJ;AG5BE;EACE,UAAA;EACA,WAAA;EACA,gBAAA;EACA,qEAAA;EACA,sBAAA;EACA,6BAAA;EACA,4BAAA;EACA,kBAAA;AH8BJ;AG5BI;EAVF;IAWI,2BAAA;EH+BJ;AACF;AG7BI;EACE,YAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;AH+BN;AG7BM;EACE,mBAAA;AH+BR;AG5BM;EACE,cAAA;EACA,UAAA;EACA,mBAAA;EACA,WAAA;EACA,mBAAA;EACA,mBAAA;AH8BR;AG1BI;EACE,iBAAA;EACA,YAAA;EACA,eAAA;EACA,4BDvDM;ECwDN,mBAAA;EACA,4BAAA;AH4BN;;AIvFA;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,eAAA;EACA,yBAAA;EACA,uBAAA;EACA,iCFJa;EEKb,iBAAA;EACA,kBAAA;AJ0FF;AIxFE;EACE,gBAAA;EACA,cAAA;EACA,YAAA;AJ0FJ;AIxFI;EACE,YAAA;EACA,sDFdK;EEeL,oBAAA;AJ0FN;AItFE;EACE,oBAAA;AJwFJ;;AK/GE;EACE,iBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,4BHJQ;EGKR,mBAAA;EACA,4BAAA;ALkHJ;AKhHI;EACE,6CHVQ;AF4Hd;AK9GE;EACE,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;ALgHJ;AK7GE;EACE,YAAA;EACA,aAAA;EACA,iBAAA;AL+GJ;AK5GE;EACE,4BAAA;AL8GJ;AK5GE;EACE,4BAAA;AL8GJ;AK5GE;EACE,4BAAA;AL8GJ;AK3GE;EACE;IACE,mBAAA;EL6GJ;EK3GE;IACE,mBAAA;EL6GJ;EK3GE;IACE,mBAAA;EL6GJ;AACF;;AM1JA;EACE,aAAA;EACA,iBAAA;AN6JF;AM3JE;EACE,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,4BAAA;EACA,mBAAA;EACA,4BAAA;AN6JJ;AM3JI;EACE,6CJhBQ;AF6Kd;AMxJI;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;AN0JN;AMxJM;EACE,mBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;AN0JR;AMxJQ;EACE,YAAA;EACA,iCAAA;EACA,yBAAA;AN0JV;AMvJQ;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;ANyJV;AMvJU;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,6FAAA;ANyJZ;AMrJU;EACE,8FAAA;ANuJZ;AMpJU;EACE,6FAAA;ANsJZ;;AOlNA;EACE,iBAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,mBAAA;EACA,WAAA;APqNF;AOnNE;EACE,eAAA;APqNJ;AOlNE;EACE,gBAAA;EACA,iCLXW;EKYX,iBAAA;APoNJ;AOjNE;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;APmNJ;AOhNE;EACE,kBAAA;EACA,gBAAA;APkNJ;AOhNI;EACE,mBAAA;APkNN;AO/MI;EACE,iCL/BS;EKgCT,mBAAA;APiNN;AO7ME;EAvCF;IAwCI,YAAA;IACA,iBAAA;EPgNF;AACF;AO9ME;EA5CF;IA6CI,aAAA;IACA,iBAAA;EPiNF;AACF;;AFrPA;EACE,mBAAA;AEwPF","file":"style.css"} -------------------------------------------------------------------------------- /Finished/10. Portfolio Site/style.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | @import "./components/resets"; 4 | @import "./components/variables"; 5 | @import "./components/nav"; 6 | @import "./components/header"; 7 | @import "./components/about"; 8 | @import "./components/projects"; 9 | @import "./components/reviews"; 10 | @import "./components/footer"; 11 | 12 | body { 13 | background: #211f22; 14 | } 15 | -------------------------------------------------------------------------------- /Finished/11. Awesome Header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Awesome Header 7 | 8 | 9 | 16 | 17 | 18 | 31 | 32 |
33 |
34 |
35 |

BADGE

36 |

I'm a software engineer and UI/UX lover.

37 |
38 |
39 |

TOOLS

40 |

41 | I've worked with lots of popular & unpopular technologies, 42 | frameworks, and libraries. 43 |

44 |
45 |
46 |

Languages

47 |
48 |

JS

49 |

Golang

50 |

Python

51 |

Java

52 |

Dart

53 |

C++

54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 | 62 |
63 |
64 |

Previous Work

65 |

Previously I've worked with FQ8, Xerus, 2FGC

66 |
67 |
68 |

Hobbies

69 |
70 |

Cricket

71 |

Football

72 |

Swimming

73 |

Reading

74 |

Writing

75 |

Coding

76 |
77 |
78 |
79 |

Location

80 |

Downtown San Francisco

81 |
82 |
83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /Finished/11. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/11. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg -------------------------------------------------------------------------------- /Finished/11. Awesome Header/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: radial-gradient(#fff0f0, #f6fdff); 9 | } 10 | 11 | nav { 12 | display: flex; 13 | justify-content: space-around; 14 | align-items: center; 15 | margin-top: 2rem; 16 | 17 | .icons i { 18 | margin-left: 20px; 19 | font-size: 20px; 20 | cursor: pointer; 21 | } 22 | 23 | ul li { 24 | display: inline; 25 | margin-left: 20px; 26 | list-style: none; 27 | a { 28 | text-decoration: none; 29 | font-family: sans-serif; 30 | color: #181818; 31 | } 32 | } 33 | } 34 | 35 | main { 36 | display: flex; 37 | justify-content: space-around; 38 | align-items: center; 39 | flex-wrap: wrap; 40 | margin: 6rem; 41 | } 42 | 43 | .image-container { 44 | background: #fff; 45 | border-radius: 200px; 46 | padding: 20px; 47 | box-shadow: 4px 4px 10px -4px #ccc; 48 | 49 | .image { 50 | background: url(meysam-jarahkar-LI7jB1925j0-unsplash.jpg); 51 | background-repeat: no-repeat; 52 | background-size: cover; 53 | background-position: center; 54 | width: 300px; 55 | height: 500px; 56 | border-radius: 200px; 57 | } 58 | } 59 | 60 | .content { 61 | margin: 3rem 0; 62 | font-family: sans-serif; 63 | 64 | .badge-label { 65 | margin-bottom: 20px; 66 | font-size: 1.4rem; 67 | } 68 | 69 | p.info { 70 | width: 300px; 71 | color: #4a4a4a; 72 | line-height: 1.5; 73 | } 74 | } 75 | 76 | .pills-container { 77 | display: grid; 78 | grid-template-columns: 100px 100px 100px; 79 | gap: 10px; 80 | .pill { 81 | border: 2px solid white; 82 | box-shadow: 4px 4px 10px -4px #ccc; 83 | 84 | padding: 10px 20px; 85 | 86 | border-radius: 100px; 87 | width: 100px; 88 | text-align: center; 89 | } 90 | } 91 | 92 | .content2 { 93 | text-align: right; 94 | 95 | .info { 96 | transform: translateX(20px); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /Finished/2. Nesting/README.md: -------------------------------------------------------------------------------- 1 | # Nesting 2 | 3 | ## 👇 Sass lets you nest CSS selectors in the same way as HTML. 4 | 5 | ```scss 6 | nav { 7 | ul { 8 | margin: 0; 9 | padding: 0; 10 | list-style: none; 11 | } 12 | li { 13 | display: inline-block; 14 | } 15 | a { 16 | display: block; 17 | padding: 6px 12px; 18 | text-decoration: none; 19 | } 20 | } 21 | ``` 22 | 23 | ### 👆 Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector. 24 | -------------------------------------------------------------------------------- /Finished/2. Nesting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Nesting 7 | 8 | 9 | 10 |
11 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Finished/2. Nesting/sebastian-svenson-d2w-_1LJioQ-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/2. Nesting/sebastian-svenson-d2w-_1LJioQ-unsplash.jpg -------------------------------------------------------------------------------- /Finished/2. Nesting/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | background-image: url(sebastian-svenson-d2w-_1LJioQ-unsplash.jpg); 9 | background-position: right; 10 | background-size: cover; 11 | background-repeat: no-repeat; 12 | height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: flex-end; 16 | } 17 | .container ul { 18 | font-family: sans-serif; 19 | margin-bottom: 1.5rem; 20 | } 21 | .container ul li { 22 | display: inline; 23 | list-style: none; 24 | } 25 | .container ul li a { 26 | color: white; 27 | margin: 20px; 28 | text-decoration: none; 29 | padding-bottom: 5px; 30 | } 31 | .container ul li a:hover { 32 | border-bottom: 1px solid white; 33 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/2. Nesting/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;ACCF;;ADEA;EACE,iEAAA;EACA,0BAAA;EACA,sBAAA;EACA,4BAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,yBAAA;ACAF;ADEE;EACE,uBAAA;EACA,qBAAA;ACAJ;ADEI;EACE,eAAA;EACA,gBAAA;ACAN;ADEM;EACE,YAAA;EACA,YAAA;EACA,qBAAA;EACA,mBAAA;ACAR;ADGM;EACE,8BAAA;ACDR","file":"style.css"} -------------------------------------------------------------------------------- /Finished/2. Nesting/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | background-image: url(sebastian-svenson-d2w-_1LJioQ-unsplash.jpg); 9 | background-position: right; 10 | background-size: cover; 11 | background-repeat: no-repeat; 12 | height: 100vh; 13 | 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: flex-end; 17 | 18 | ul { 19 | font-family: sans-serif; 20 | margin-bottom: 1.5rem; 21 | 22 | li { 23 | display: inline; 24 | list-style: none; 25 | 26 | a { 27 | color: white; 28 | margin: 20px; 29 | text-decoration: none; 30 | padding-bottom: 5px; 31 | } 32 | 33 | a:hover { 34 | border-bottom: 1px solid white; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/README.md: -------------------------------------------------------------------------------- 1 | # Partials 2 | 3 | ### Sass keeps the CSS code DRY (Don't Repeat Yourself). One way to write DRY code is to keep related code in separate files. You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. 4 | 5 | ### 👇 The @import directive allows you to include the content of one file in another. 6 | 7 | ```scss 8 | @import "variables"; 9 | @import "colors"; 10 | @import "reset"; 11 | ``` 12 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_cards.scss: -------------------------------------------------------------------------------- 1 | // BACKGROUND / SECTION 2 | .card { 3 | height: 80vh; 4 | display: flex; 5 | flex-wrap: wrap; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | .card-content { 10 | width: 400px; 11 | height: 300px; 12 | padding: 20px; 13 | margin: 0 6rem; 14 | font-family: sans-serif; 15 | 16 | h1 { 17 | font-size: 3rem; 18 | font-family: serif; 19 | } 20 | 21 | p { 22 | margin: 20px 0; 23 | margin-bottom: 40px; 24 | line-height: 1.5rem; 25 | } 26 | 27 | a { 28 | text-decoration: none; 29 | color: #fff; 30 | background: #000; 31 | padding: 10px 20px; 32 | margin-bottom: 20px; 33 | } 34 | } 35 | 36 | .card-img { 37 | width: 400px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_footer.scss: -------------------------------------------------------------------------------- 1 | // Footer 2 | footer { 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | 8 | input { 9 | padding: 10px 20px; 10 | margin-bottom: 20px; 11 | } 12 | 13 | textarea { 14 | padding: 20px; 15 | width: 420px; 16 | height: 200px; 17 | margin-bottom: 20px; 18 | } 19 | 20 | a { 21 | text-decoration: none; 22 | color: #fff; 23 | background: #000; 24 | padding: 10px 20px; 25 | font-family: sans-serif; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_gallery.scss: -------------------------------------------------------------------------------- 1 | // Gallery 2 | .gallery { 3 | margin-top: 6rem; 4 | 5 | h1 { 6 | text-align: center; 7 | font-family: sans-serif; 8 | margin-bottom: 5rem; 9 | } 10 | 11 | .images { 12 | display: flex; 13 | flex-wrap: wrap; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .gallery-img { 19 | width: 300px; 20 | margin: 20px; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_header.scss: -------------------------------------------------------------------------------- 1 | // Header Area 2 | main { 3 | background: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"); 4 | background-position: center; 5 | background-size: cover; 6 | background-repeat: no-repeat; 7 | height: 100vh; 8 | 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | text-align: center; 14 | 15 | h1 { 16 | font-size: 3rem; 17 | color: #fff; 18 | } 19 | 20 | p { 21 | max-width: 600px; 22 | margin: 10px; 23 | } 24 | 25 | button { 26 | background: transparent; 27 | border: none; 28 | background: #fff; 29 | padding: 10px 20px; 30 | cursor: pointer; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_nav.scss: -------------------------------------------------------------------------------- 1 | // Navigation 2 | nav { 3 | display: flex; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 15px; 7 | font-family: sans-serif; 8 | position: fixed; 9 | width: 100%; 10 | background: white; 11 | 12 | .logo-container { 13 | margin-left: 40px; 14 | } 15 | 16 | ul { 17 | margin-right: 40px; 18 | 19 | li { 20 | display: inline; 21 | list-style: none; 22 | margin-left: 30px; 23 | a { 24 | text-decoration: none; 25 | color: #000; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_resets.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/components/_responsiveness.scss: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 750px) { 2 | .card { 3 | height: 100vh; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/images.txt: -------------------------------------------------------------------------------- 1 | https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80 2 | 3 | 4 | IMAGE ONE 👇 5 | 6 | https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1158&q=80 7 | 8 | IMAGE TWO 👇 9 | 10 | https://images.unsplash.com/photo-1603574670812-d24560880210?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80 11 | 12 | IMAGE THREE 👇 13 | 14 | https://images.unsplash.com/photo-1484766280341-87861644c80d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80 15 | 16 | IMAGE FOUR 👇 17 | 18 | https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 19 | 20 | IMAGE FIVE 👇 21 | 22 | https://images.unsplash.com/photo-1420745981456-b95fe23f5753?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 23 | 24 | IMAGE SIX 👇 25 | 26 | https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 27 | 28 | IMAGE SEVEN 👇 29 | 30 | https://images.unsplash.com/photo-1580137189272-c9379f8864fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 31 | 32 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SnapShot 7 | 8 | 9 | 10 | 22 | 23 | 24 |
25 |
26 |

LET'S TAKE A SNAPSHOT

27 |

28 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum 29 | blanditiis ullam praesentium quam dolor adipisci! Debitis, maxime. 30 |

31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 |

BACKGROUND

40 |

41 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, hic 42 | accusamus veniam suscipit voluptate consequatur facilis tempore 43 | cupiditate 44 |

45 | Learn More 46 |
47 | 48 | 52 |
53 | 54 |
55 | 59 |
60 |

FOUNDER

61 |

62 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, hic 63 | accusamus veniam suscipit voluptate consequatur facilis tempore 64 | cupiditate 65 |

66 | Learn More 67 |
68 |
69 | 70 |
71 |

CHECKOUT OUR AWESOME GALLERY

72 | 73 |
74 | 78 | 79 | 83 | 84 | 88 | 89 | 93 | 94 | 98 |
99 |
100 | 101 | 102 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | nav { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | padding: 15px; 12 | font-family: sans-serif; 13 | position: fixed; 14 | width: 100%; 15 | background: white; 16 | } 17 | nav .logo-container { 18 | margin-left: 40px; 19 | } 20 | nav ul { 21 | margin-right: 40px; 22 | } 23 | nav ul li { 24 | display: inline; 25 | list-style: none; 26 | margin-left: 30px; 27 | } 28 | nav ul li a { 29 | text-decoration: none; 30 | color: #000; 31 | } 32 | 33 | main { 34 | background: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"); 35 | background-position: center; 36 | background-size: cover; 37 | background-repeat: no-repeat; 38 | height: 100vh; 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: center; 42 | align-items: center; 43 | text-align: center; 44 | } 45 | main h1 { 46 | font-size: 3rem; 47 | color: #fff; 48 | } 49 | main p { 50 | max-width: 600px; 51 | margin: 10px; 52 | } 53 | main button { 54 | background: transparent; 55 | border: none; 56 | background: #fff; 57 | padding: 10px 20px; 58 | cursor: pointer; 59 | } 60 | 61 | .card { 62 | height: 80vh; 63 | display: flex; 64 | flex-wrap: wrap; 65 | justify-content: center; 66 | align-items: center; 67 | } 68 | .card .card-content { 69 | width: 400px; 70 | height: 300px; 71 | padding: 20px; 72 | margin: 0 6rem; 73 | font-family: sans-serif; 74 | } 75 | .card .card-content h1 { 76 | font-size: 3rem; 77 | font-family: serif; 78 | } 79 | .card .card-content p { 80 | margin: 20px 0; 81 | margin-bottom: 40px; 82 | line-height: 1.5rem; 83 | } 84 | .card .card-content a { 85 | text-decoration: none; 86 | color: #fff; 87 | background: #000; 88 | padding: 10px 20px; 89 | margin-bottom: 20px; 90 | } 91 | .card .card-img { 92 | width: 400px; 93 | } 94 | 95 | .gallery { 96 | margin-top: 6rem; 97 | } 98 | .gallery h1 { 99 | text-align: center; 100 | font-family: sans-serif; 101 | margin-bottom: 5rem; 102 | } 103 | .gallery .images { 104 | display: flex; 105 | flex-wrap: wrap; 106 | justify-content: center; 107 | align-items: center; 108 | } 109 | .gallery .gallery-img { 110 | width: 300px; 111 | margin: 20px; 112 | } 113 | 114 | footer { 115 | height: 100vh; 116 | display: flex; 117 | justify-content: center; 118 | align-items: center; 119 | } 120 | footer input { 121 | padding: 10px 20px; 122 | margin-bottom: 20px; 123 | } 124 | footer textarea { 125 | padding: 20px; 126 | width: 420px; 127 | height: 200px; 128 | margin-bottom: 20px; 129 | } 130 | footer a { 131 | text-decoration: none; 132 | color: #fff; 133 | background: #000; 134 | padding: 10px 20px; 135 | font-family: sans-serif; 136 | } 137 | 138 | @media screen and (max-width: 750px) { 139 | .card { 140 | height: 100vh; 141 | } 142 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["components/_resets.scss","style.css","components/_nav.scss","components/_header.scss","components/_cards.scss","components/_gallery.scss","components/_footer.scss","components/_responsiveness.scss"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACCF;;ACHA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,aAAA;EACA,uBAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;ADMF;ACJE;EACE,iBAAA;ADMJ;ACHE;EACE,kBAAA;ADKJ;ACHI;EACE,eAAA;EACA,gBAAA;EACA,iBAAA;ADKN;ACJM;EACE,qBAAA;EACA,WAAA;ADMR;;AE7BA;EACE,iLAAA;EACA,2BAAA;EACA,sBAAA;EACA,4BAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;AF+BF;AE7BE;EACE,eAAA;EACA,WAAA;AF+BJ;AE5BE;EACE,gBAAA;EACA,YAAA;AF8BJ;AE3BE;EACE,uBAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;AF6BJ;;AGzDA;EACE,YAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;AH4DF;AG1DE;EACE,YAAA;EACA,aAAA;EACA,aAAA;EACA,cAAA;EACA,uBAAA;AH4DJ;AG1DI;EACE,eAAA;EACA,kBAAA;AH4DN;AGzDI;EACE,cAAA;EACA,mBAAA;EACA,mBAAA;AH2DN;AGxDI;EACE,qBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;AH0DN;AGtDE;EACE,YAAA;AHwDJ;;AI3FA;EACE,gBAAA;AJ8FF;AI5FE;EACE,kBAAA;EACA,uBAAA;EACA,mBAAA;AJ8FJ;AI3FE;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;AJ6FJ;AI1FE;EACE,YAAA;EACA,YAAA;AJ4FJ;;AK9GA;EACE,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ALiHF;AK/GE;EACE,kBAAA;EACA,mBAAA;ALiHJ;AK9GE;EACE,aAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ALgHJ;AK7GE;EACE,qBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,uBAAA;AL+GJ;;AMvIA;EACE;IACE,aAAA;EN0IF;AACF","file":"style.css"} -------------------------------------------------------------------------------- /Finished/3. Imports and Partials/style.scss: -------------------------------------------------------------------------------- 1 | @import "components/resets"; 2 | @import "components/nav"; 3 | @import "components/header"; 4 | @import "components/cards"; 5 | @import "components/gallery"; 6 | @import "components/footer"; 7 | @import "components/responsiveness"; 8 | -------------------------------------------------------------------------------- /Finished/4. Mixins/README.md: -------------------------------------------------------------------------------- 1 | # Sass Mixins 2 | 3 | ### The @mixin directive lets you create CSS code that is to be reused throughout the website. 4 | 5 | ### The @include directive is created to let you use (include) the mixin. 6 | 7 | # Defining a Mixin 8 | 9 | ```scss 10 | @mixin important-text { 11 | color: red; 12 | font-size: 25px; 13 | font-weight: bold; 14 | border: 1px solid blue; 15 | } 16 | ``` 17 | 18 | # Using a Mixin 19 | 20 | ### The @include directive is used to include a mixin. 21 | 22 | ```scss 23 | .danger { 24 | @include important-text; 25 | background-color: green; 26 | } 27 | ``` 28 | -------------------------------------------------------------------------------- /Finished/4. Mixins/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mixins 7 | 8 | 9 | 10 |
11 |
12 |
13 |

$19.50

14 |

Basic

15 |

16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas 17 | voluptatibus eveniet dicta molestiae iusto harum. 18 |

19 | 20 |
21 |
22 |
23 |
24 |

$29.50

25 |

Standard

26 |

27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas 28 | voluptatibus eveniet dicta molestiae iusto harum. 29 |

30 | 31 |
32 |
33 |
34 |
35 |

$39.50

36 |

Premium

37 |

38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas 39 | voluptatibus eveniet dicta molestiae iusto harum. 40 |

41 | 42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /Finished/4. Mixins/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .cards { 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | } 14 | 15 | .card { 16 | width: 300px; 17 | padding: 20px; 18 | background: linear-gradient(to bottom, #ec4bd2, rgba(235, 75, 208, 0.3647058824)); 19 | border-radius: 10px; 20 | color: #fff; 21 | margin: 10px; 22 | } 23 | .card .card-content { 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: space-around; 27 | align-items: center; 28 | text-align: center; 29 | font-family: sans-serif; 30 | height: 70%; 31 | } 32 | .card .card-content .price { 33 | font-size: 3rem; 34 | } 35 | .card .card-content .price span { 36 | font-size: 1.4rem; 37 | } 38 | .card .card-content .price .card-name { 39 | font-size: 2rem; 40 | } 41 | .card .card-content .price .card-info { 42 | font-size: 14px; 43 | padding: 0 20px; 44 | line-height: 1.4; 45 | } 46 | .card .card-content button { 47 | background: #141414; 48 | color: #fff; 49 | font-weight: bold; 50 | padding: 10px 20px; 51 | width: 140px; 52 | border-radius: 100px; 53 | cursor: pointer; 54 | } 55 | 56 | .card-two { 57 | background: linear-gradient(to bottom, #2cdb60, rgba(105, 197, 8, 0.3647058824)); 58 | } 59 | 60 | .card-three { 61 | background: linear-gradient(to bottom, rgba(6, 13, 163, 0.3647058824), #4ba1ec); 62 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/4. Mixins/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;ACCF;;AD+BA;EACE,aAAA;EACA,eAAA;EACA,uBAAA;EACA,mBAAA;EACA,aAAA;AC5BF;;AD+BA;EAzBE,YAAA;EACA,aAAA;EACA,iFAAA;EACA,mBAAA;EACA,WAAA;EAuBA,YAAA;ACxBF;AD0BE;EArBA,aAAA;EACA,sBAAA;EACA,6BAAA;EACA,mBAAA;EACA,kBAAA;EACA,uBAAA;EACA,WAAA;ACFF;ADoBI;EACE,eAAA;AClBN;ADmBM;EACE,iBAAA;ACjBR;ADoBM;EACE,eAAA;AClBR;ADqBM;EACE,eAAA;EACA,eAAA;EACA,gBAAA;ACnBR;ADsBI;EA1DF,mBAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;ACuCF;;ADmBA;EACE,gFAAA;AChBF;;ADmBA;EACE,+EAAA;AChBF","file":"style.css"} -------------------------------------------------------------------------------- /Finished/4. Mixins/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | // Creating Mixins 8 | @mixin button-styles { 9 | background: #141414; 10 | color: #fff; 11 | font-weight: bold; 12 | padding: 10px 20px; 13 | width: 140px; 14 | border-radius: 100px; 15 | cursor: pointer; 16 | } 17 | 18 | @mixin card-basic-styles { 19 | width: 300px; 20 | padding: 20px; 21 | background: linear-gradient(to bottom, #ec4bd2, #eb4bd05d); 22 | border-radius: 10px; 23 | color: #fff; 24 | } 25 | 26 | @mixin card-content-styles { 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: space-around; 30 | align-items: center; 31 | text-align: center; 32 | font-family: sans-serif; 33 | height: 70%; 34 | } 35 | 36 | .cards { 37 | display: flex; 38 | flex-wrap: wrap; 39 | justify-content: center; 40 | align-items: center; 41 | height: 100vh; 42 | } 43 | 44 | .card { 45 | @include card-basic-styles; 46 | margin: 10px; 47 | 48 | .card-content { 49 | @include card-content-styles; 50 | 51 | .price { 52 | font-size: 3rem; 53 | span { 54 | font-size: 1.4rem; 55 | } 56 | 57 | .card-name { 58 | font-size: 2rem; 59 | } 60 | 61 | .card-info { 62 | font-size: 14px; 63 | padding: 0 20px; 64 | line-height: 1.4; 65 | } 66 | } 67 | button { 68 | @include button-styles; 69 | } 70 | } 71 | } 72 | 73 | .card-two { 74 | background: linear-gradient(to bottom, #2cdb60, #69c5085d); 75 | } 76 | 77 | .card-three { 78 | background: linear-gradient(to bottom, #060da35d, #4ba1ec); 79 | } 80 | -------------------------------------------------------------------------------- /Finished/5. Extends/README.md: -------------------------------------------------------------------------------- 1 | # Sass @extend Directive 2 | 3 | ### The @extend directive lets you share a set of CSS properties from one selector to another. 4 | 5 | ### The @extend directive is useful if you have almost identically styled elements that only differ in some small details. 6 | 7 | ```scss 8 | .button-basic { 9 | border: none; 10 | padding: 15px 30px; 11 | text-align: center; 12 | font-size: 16px; 13 | cursor: pointer; 14 | } 15 | 16 | .button-report { 17 | @extend .button-basic; 18 | background-color: red; 19 | } 20 | 21 | .button-submit { 22 | @extend .button-basic; 23 | background-color: green; 24 | color: white; 25 | } 26 | ``` 27 | -------------------------------------------------------------------------------- /Finished/5. Extends/images.txt: -------------------------------------------------------------------------------- 1 | IMAGE ONE 👇 2 | 3 | https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 4 | 5 | IMAGE TWO 👇 6 | 7 | https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80 8 | 9 | 10 | IMAGE THREE 👇 11 | 12 | https://images.unsplash.com/photo-1657299170932-e75407883a6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80 13 | 14 | 15 | IMAGE FOUR 👇 16 | 17 | https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2053&q=80 18 | 19 | IMAGE FIVE 👇 20 | 21 | https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 22 | -------------------------------------------------------------------------------- /Finished/5. Extends/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @extends 7 | 8 | 9 | 10 |
11 |

OUR MENUS

12 |

13 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta 14 | distinctio officiis asperiores hic blanditiis explicabo ipsa placeat 15 |

16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |

Lunch Menu

24 |

25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 26 | beatae corrupti, dolorum temporibus accusantium minus natus a 27 | expedita eaque asperiores, itaque dolore optio rerum laborum fugit 28 | eligendi reiciendis deserunt quibusdam? 29 |

30 | Learn More 31 | View Menu 32 |
33 |
34 |
35 |
36 |
37 |

Breakfast Menu

38 |

39 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 40 | beatae corrupti, dolorum temporibus accusantium minus natus a 41 | expedita eaque asperiores, itaque dolore optio rerum laborum fugit 42 | eligendi reiciendis deserunt quibusdam? 43 |

44 | Learn More 45 | View Menu 46 |
47 |
48 |
49 |
50 |
51 |

Dinner Menu

52 |

53 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 54 | beatae corrupti, dolorum temporibus accusantium minus natus a 55 | expedita eaque asperiores, itaque dolore optio rerum laborum fugit 56 | eligendi reiciendis deserunt quibusdam? 57 |

58 | Learn More 59 | View Menu 60 |
61 |
62 |
63 |
64 |
65 |

Lunch Menu

66 |

67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid 68 | beatae corrupti, dolorum temporibus accusantium minus natus a 69 | expedita eaque asperiores, itaque dolore optio rerum laborum fugit 70 | eligendi reiciendis deserunt quibusdam? 71 |

72 | Learn More 73 | View Menu 74 |
75 |
76 |
77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /Finished/5. Extends/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .flex-center, .container .cards, header { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | flex-wrap: wrap; 13 | font-family: sans-serif; 14 | } 15 | 16 | header { 17 | height: 50vh; 18 | background: linear-gradient(rgba(0, 0, 0, 0.179), rgba(0, 0, 0, 0.65)), url("https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"); 19 | background-repeat: no-repeat; 20 | background-size: cover; 21 | color: #fff; 22 | } 23 | header p { 24 | margin-top: 20px; 25 | max-width: 500px; 26 | text-align: center; 27 | } 28 | 29 | .container { 30 | height: 100vh; 31 | } 32 | .container .cards { 33 | flex-direction: row; 34 | } 35 | .container .cards .card { 36 | border: 0.6px solid rgb(168, 168, 168); 37 | width: 500px; 38 | height: 500px; 39 | padding: 20px; 40 | margin: 20px; 41 | font-family: sans-serif; 42 | } 43 | .container .cards .card .card-img, .container .cards .card .img-four, .container .cards .card .img-three, .container .cards .card .img-two { 44 | background-image: url("https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80"); 45 | background-repeat: no-repeat; 46 | background-size: cover; 47 | width: 100%; 48 | height: 200px; 49 | margin-bottom: 20px; 50 | } 51 | .container .cards .card .img-two { 52 | background-image: url("https://images.unsplash.com/photo-1657299170932-e75407883a6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"); 53 | } 54 | .container .cards .card .img-three { 55 | background-image: url("https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2053&q=80"); 56 | } 57 | .container .cards .card .img-four { 58 | background-image: url("https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"); 59 | } 60 | .container .cards .card p { 61 | margin-bottom: 2rem; 62 | max-width: 300px; 63 | line-height: 1.4; 64 | color: rgb(96, 96, 96); 65 | } 66 | .container .cards .card .card-title { 67 | margin-bottom: 20px; 68 | color: rgb(28, 28, 28); 69 | } 70 | .container .cards .card .btn-primary { 71 | text-decoration: none; 72 | color: #515151; 73 | border: 1px solid #515151; 74 | padding: 10px 20px; 75 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/5. Extends/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;ACCF;;ADEA;EACE,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,uBAAA;ACCF;;ADEA;EACE,YAAA;EAGA,6OAAA;EAEA,4BAAA;EACA,sBAAA;EACA,WAAA;ACFF;ADIE;EACE,gBAAA;EACA,gBAAA;EACA,kBAAA;ACFJ;;ADMA;EACE,aAAA;ACHF;ADKE;EAEE,mBAAA;ACJJ;ADMI;EACE,sCAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,uBAAA;ACJN;ADMM;EACE,oLAAA;EACA,4BAAA;EACA,sBAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;ACJR;ADOM;EAEE,uLAAA;ACNR;ADSM;EAEE,uLAAA;ACRR;ADUM;EAEE,uLAAA;ACTR;ADYM;EACE,mBAAA;EACA,gBAAA;EACA,gBAAA;EACA,sBAAA;ACVR;ADaM;EACE,mBAAA;EACA,sBAAA;ACXR;ADcM;EACE,qBAAA;EACA,cAAA;EACA,yBAAA;EACA,kBAAA;ACZR","file":"style.css"} -------------------------------------------------------------------------------- /Finished/5. Extends/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .flex-center { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | flex-wrap: wrap; 13 | font-family: sans-serif; 14 | } 15 | 16 | header { 17 | height: 50vh; 18 | @extend .flex-center; 19 | 20 | background: linear-gradient(rgba(0, 0, 0, 0.179), rgba(0, 0, 0, 0.65)), 21 | url("https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"); 22 | background-repeat: no-repeat; 23 | background-size: cover; 24 | color: #fff; 25 | 26 | p { 27 | margin-top: 20px; 28 | max-width: 500px; 29 | text-align: center; 30 | } 31 | } 32 | 33 | .container { 34 | height: 100vh; 35 | 36 | .cards { 37 | @extend .flex-center; 38 | flex-direction: row; 39 | 40 | .card { 41 | border: 0.6px solid rgb(168, 168, 168); 42 | width: 500px; 43 | height: 500px; 44 | padding: 20px; 45 | margin: 20px; 46 | font-family: sans-serif; 47 | 48 | .card-img { 49 | background-image: url("https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80"); 50 | background-repeat: no-repeat; 51 | background-size: cover; 52 | width: 100%; 53 | height: 200px; 54 | margin-bottom: 20px; 55 | } 56 | 57 | .img-two { 58 | @extend .card-img; 59 | background-image: url("https://images.unsplash.com/photo-1657299170932-e75407883a6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"); 60 | } 61 | 62 | .img-three { 63 | @extend .card-img; 64 | background-image: url("https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2053&q=80"); 65 | } 66 | .img-four { 67 | @extend .card-img; 68 | background-image: url("https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"); 69 | } 70 | 71 | p { 72 | margin-bottom: 2rem; 73 | max-width: 300px; 74 | line-height: 1.4; 75 | color: rgb(96, 96, 96); 76 | } 77 | 78 | .card-title { 79 | margin-bottom: 20px; 80 | color: rgb(28, 28, 28); 81 | } 82 | 83 | .btn-primary { 84 | text-decoration: none; 85 | color: #515151; 86 | border: 1px solid #515151; 87 | padding: 10px 20px; 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /Finished/6. Sass Operators/README.md: -------------------------------------------------------------------------------- 1 | # Operators? 2 | 3 | ### Operator is a symbol that tells the compiler to perform specific mathematical, conditional, or logical functions. It is a symbol that operates on a value or a variable. 4 | 5 | # Equality Operator 6 | 7 | ### The equality operators return whether or not two values are the same 8 | 9 | ```scss 10 | .selector { 11 | padding: 10px == 10px; // true 12 | padding: 10px == 10em; // false 13 | padding: 10px != 10px; // false 14 | padding: 10px != 10em; // true 15 | } 16 | ``` 17 | 18 | # Relational Operator 19 | 20 | ### Relational operators are those which compare the values of two numbers. They tell whether one number is smaller or greater than or equal to the other number. They automatically convert numbers into compatible units. 21 | 22 | ```scss 23 | .selector { 24 | margin: 100 > 50; // true 25 | margin: 10px < 17px; // true 26 | margin: 96px >= 1in; // true 27 | margin: 1000ms <= 1s; // true 28 | } 29 | ``` 30 | 31 | # Boolean Operator 32 | 33 | ### A boolean refers to a value that is either true or false 34 | 35 | - (and) If both conditions are true then the value will be true, otherwise FALSE. 36 | - (or) If either conditions are true then the value will be true, otherwise FALSE. 37 | - (not) Returns the opposite value. 38 | 39 | ```scss 40 | .selector { 41 | ------------------------------------------------ 42 | // both conditions are true so the answer will be true. 43 | margin: arial == "arial" and 10px == 10; 44 | // One condition is false so the answer will be false. 45 | margin: arial == "arial" and 10px == 20; 46 | ------------------------------------------------ 47 | // One condition is true so the answer will be true. 48 | margin: arial == "arial" or 10px == 20; 49 | // Both conditions are false so the answer is false. 50 | margin: arial == "roboto" or 10px == 20; 51 | ------------------------------------------------ 52 | 53 | ------------------------------------------------ 54 | margin: not 10px == 10px; // false 55 | margin: not 10px == 20px; // true 56 | ------------------------------------------------ 57 | } 58 | ``` 59 | -------------------------------------------------------------------------------- /Finished/6. Sass Operators/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Finished/6. Sass Operators/index.html -------------------------------------------------------------------------------- /Finished/6. Sass Operators/style.css: -------------------------------------------------------------------------------- 1 | .selector { 2 | padding: false; 3 | padding: false; 4 | padding: false; 5 | padding: true; 6 | padding: false; 7 | padding: false; 8 | padding: true; 9 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/6. Sass Operators/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EAeE,cAAA;EACA,cAAA;EACA,cAAA;EAEA,aAAA;EACA,cAAA;EAEA,cAAA;EACA,aAAA;ACfF","file":"style.css"} -------------------------------------------------------------------------------- /Finished/6. Sass Operators/style.scss: -------------------------------------------------------------------------------- 1 | .selector { 2 | // EQUALITY OPERATORS 3 | // padding: 10px == 10px; 4 | // padding: 10px == 10em; 5 | // padding: 10px == 20px; 6 | // font-family: "arial" == arial; 7 | // padding: (6px 20px 10px) == (6px 8px 10px); 8 | 9 | // RELATIONAL OPERATORS 10 | // padding: 10px > 30px; 11 | // padding: 10px < 30px; 12 | // padding: 10px >= 30px; 13 | // padding: 10px <= 30px; 14 | 15 | // BOOLEAN OPERATORS 16 | padding: arial == "arial" and 10px == 10; 17 | padding: arial == "arial" and 10px == 20px; 18 | padding: arial == "roboto" and 10px == 20px; 19 | 20 | padding: arial == "arial" or 10px == 20px; 21 | padding: arial == "playfair" or 10px == 20px; 22 | 23 | padding: not 10px == 10px; 24 | padding: not 10px != 10px; 25 | } 26 | -------------------------------------------------------------------------------- /Finished/7. Sass Functions/README.md: -------------------------------------------------------------------------------- 1 | # Sass Functions 2 | 3 | ### Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. 4 | 5 | ### They make it easy to abstract out common formulas and behaviors in a readable way. 6 | 7 | ```scss 8 | @function pow($base, $exponent) { 9 | $result: 1; 10 | @for $_ from 1 through $exponent { 11 | $result: $result * $base; 12 | } 13 | @return $result; 14 | } 15 | 16 | .sidebar { 17 | float: left; 18 | margin-left: pow(4, 3) * 1px; 19 | } 20 | ``` 21 | 22 | # Built-in Functions? 23 | 24 | ### Learn About Built-in Functions here 👇 25 | 26 | ```scss 27 | // 👉 https://www.koderhq.com/tutorial/sass/native-functions/ 28 | ``` 29 | -------------------------------------------------------------------------------- /Finished/7. Sass Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Functions 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Finished/7. Sass Functions/style.css: -------------------------------------------------------------------------------- 1 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/7. Sass Functions/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"style.css"} -------------------------------------------------------------------------------- /Finished/7. Sass Functions/style.scss: -------------------------------------------------------------------------------- 1 | // .selector { 2 | // // MATH FUNCTIONS 3 | // // padding: max(10px, 50px, 20px, 60px, 2px); 4 | // // padding: min(10px, 50px, 20px, 60px, 2px); 5 | // // padding: random(); 6 | // // padding: random(10); 7 | // // padding: unit(20em); 8 | // // padding: unitless(20); 9 | 10 | // } 11 | 12 | // STRING FUNCTIONS 13 | // .selector { 14 | // font-family: quote(arial); 15 | // font-family: unquote(arial); 16 | // font-family: to-upper-case("huxn"); 17 | // font-family: to-lower-case("HUXN"); 18 | // font-family: str-length("HuXn"); 19 | // font-family: str-index("HuXn", "X"); 20 | // font-family: str-insert("HuXn", "X", 4); 21 | // font-family: unique-id(); 22 | // } 23 | 24 | // COLOR FUNCTIONS 25 | // $inital-color: blue; 26 | 27 | // .container { 28 | // width: 600px; 29 | // height: 100px; 30 | // background: darken($inital-color, 40); 31 | // background: lighten($inital-color, 30); 32 | // background: adjust-hue($inital-color, 90); 33 | // background: mix($inital-color, red, 70); 34 | // } 35 | 36 | // -------------------------- 37 | // $list: 20px 10px 30px; 38 | 39 | // .selector { 40 | // padding: length($list); 41 | // padding: nth($list, 3); 42 | // padding: set-nth($list, 3, 2em); 43 | // padding: join((10px, 20px, 30px), (40px 50px, 60px)); 44 | // padding: join((10px, 20px, 30px), (40px 50px, 60px), space); 45 | // padding: append($list, 60px); 46 | // } 47 | 48 | // --------------------------------- 49 | // Maps 50 | 51 | // $font-weights: ( 52 | // "regular": 400, 53 | // "medium": 500, 54 | // "bold": 700, 55 | // ); 56 | 57 | // .selector { 58 | // font-weight: map-get($font-weights, "medium"); 59 | // font-weight: map-keys($font-weights); 60 | // font-weight: map-values($font-weights); 61 | // font-weight: map-has-key($font-weights, "huxn"); 62 | // } 63 | 64 | // ----------------------------------------------- 65 | 66 | // CREATING CUSTOM FUNCTIONS 67 | // EXAMPLE 1 68 | // $one: 100px; 69 | // $two: 100px; 70 | 71 | // @function add($numberOne, $numberTwo) { 72 | // @return $numberOne + $numberTwo; 73 | // } 74 | 75 | // section { 76 | // width: add(10, 40); 77 | // } 78 | 79 | // EXAMPLE 2 80 | // @function randomColor() { 81 | // @return rgb(random(255), random(255), random(255)); 82 | // } 83 | 84 | // section { 85 | // width: 100px; 86 | // height: 100px; 87 | // background: randomColor(); 88 | // } 89 | -------------------------------------------------------------------------------- /Finished/8. Interpolation/README.md: -------------------------------------------------------------------------------- 1 | # Interpolation 2 | 3 | ### Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{}. 4 | -------------------------------------------------------------------------------- /Finished/8. Interpolation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Interpolation 7 | 8 | 9 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Finished/8. Interpolation/style.css: -------------------------------------------------------------------------------- 1 | li { 2 | width: 100px; 3 | height: 100px; 4 | list-style-type: none; 5 | margin: 5px; 6 | text-align: center; 7 | } 8 | 9 | .one { 10 | background: red; 11 | } 12 | 13 | .two { 14 | background: blue; 15 | } 16 | 17 | .three { 18 | background: green; 19 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/8. Interpolation/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAIA;EACE,YAAA;EACA,aAAA;EACA,qBAAA;EACA,WAAA;EACA,kBAAA;ACHF;;ADMA;EACE,eAbI;ACUN;;ADKA;EACE,gBAfI;ACaN;;ADIA;EACE,iBAjBM;ACgBR","file":"style.css"} -------------------------------------------------------------------------------- /Finished/8. Interpolation/style.scss: -------------------------------------------------------------------------------- 1 | $one: red; 2 | $two: blue; 3 | $three: green; 4 | 5 | li { 6 | width: 100px; 7 | height: 100px; 8 | list-style-type: none; 9 | margin: 5px; 10 | text-align: center; 11 | } 12 | 13 | .#{one} { 14 | background: $one; 15 | } 16 | .#{two} { 17 | background: $two; 18 | } 19 | .#{three} { 20 | background: $three; 21 | } 22 | -------------------------------------------------------------------------------- /Finished/9. Directive/1. If and Else/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Conditional Statments 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Finished/9. Directive/1. If and Else/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | background: teal; 3 | width: 0px; 4 | height: 0px; 5 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/9. Directive/1. If and Else/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AA8EA;EACE,gBAAA;EAkBA,UAAA;EACA,WAAA;AC9FF","file":"style.css"} -------------------------------------------------------------------------------- /Finished/9. Directive/1. If and Else/style.scss: -------------------------------------------------------------------------------- 1 | // Conditional Stamtent 2 | 3 | // IF 4 | 5 | // $value: 5; 6 | 7 | // p { 8 | // @if 1 + 1 == 2 { 9 | // background: teal; 10 | // } 11 | 12 | // @if 10 > 3 { 13 | // background: pink; 14 | // } 15 | 16 | // @if $value < 6 { 17 | // color: blue; 18 | // } 19 | // } 20 | 21 | // $value: 2; 22 | 23 | // p { 24 | // @if $value == 1 { 25 | // color: blue; 26 | // } @else if $value > 5 and $value < 10 { 27 | // color: teal; 28 | // } @else { 29 | // color: red; 30 | // } 31 | // } 32 | 33 | // ---------- USING WITH MIXINS 34 | // @mixin styles($value) { 35 | // width: $value + px; 36 | // height: $value + px; 37 | 38 | // @if $value > 0 and $value <= 20 { 39 | // color: orange; 40 | // } @else if $value > 20 and $value <= 50 { 41 | // color: teal; 42 | // } @else { 43 | // color: purple; 44 | // } 45 | // } 46 | 47 | // .selector { 48 | // @include styles(15); 49 | // @include styles(25); 50 | // @include styles(100); 51 | // } 52 | 53 | // ------------------- FUNCTIONS 54 | $one: 100px; 55 | $two: 4; 56 | 57 | @function math($opt, $num1, $num2) { 58 | @if $opt == "add" { 59 | @return $num1 + $num2; 60 | } 61 | 62 | @if $opt == "subtract" { 63 | @return $num1 - $num2; 64 | } 65 | 66 | @if $opt == "multiplay" { 67 | @return $num1 * $num2; 68 | } 69 | 70 | @if $opt == "divide" { 71 | @return $num1 / $num2; 72 | } 73 | 74 | @if $opt == "mod" { 75 | @return $num1 % $num2; 76 | } 77 | } 78 | 79 | section { 80 | background: teal; 81 | // Add 82 | // width: math("add", $one, $two); 83 | // height: math("add", $one, $two); 84 | 85 | // Subtract 86 | // width: math("subtract", $one, $two); 87 | // height: math("subtract", $one, $two); 88 | 89 | // Multiplay 90 | // width: math("multiplay", $one, $two); 91 | // height: math("multiplay", $one, $two); 92 | 93 | // Divide 94 | // width: math("divide", $one, $two); 95 | // height: math("divide", $one, $two); 96 | 97 | // MOD 98 | width: math("mod", $one, $two); 99 | height: math("mod", $one, $two); 100 | } 101 | -------------------------------------------------------------------------------- /Finished/9. Directive/2. For Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | For Loop 7 | 8 | 9 | 10 | 20 | 21 |
1
22 |
2
23 |
3
24 |
4
25 |
5
26 | 27 | 28 | -------------------------------------------------------------------------------- /Finished/9. Directive/2. For Loop/style.css: -------------------------------------------------------------------------------- 1 | .list-1 { 2 | width: 100px; 3 | background: #007100; 4 | margin: 1; 5 | padding: 10px; 6 | } 7 | 8 | .list-2 { 9 | width: 200px; 10 | background: #006100; 11 | margin: 2; 12 | padding: 20px; 13 | } 14 | 15 | .list-3 { 16 | width: 300px; 17 | background: #005200; 18 | margin: 3; 19 | padding: 30px; 20 | } 21 | 22 | .list-4 { 23 | width: 400px; 24 | background: #004300; 25 | margin: 4; 26 | padding: 40px; 27 | } 28 | 29 | .list-5 { 30 | width: 500px; 31 | background: #003400; 32 | margin: 5; 33 | padding: 50px; 34 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/9. Directive/2. For Loop/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAWE;EACE,YAAA;EACA,mBAAA;EACA,SAJa;EAKb,aAAA;ACVJ;;ADME;EACE,YAAA;EACA,mBAAA;EACA,SAJa;EAKb,aAAA;ACHJ;;ADDE;EACE,YAAA;EACA,mBAAA;EACA,SAJa;EAKb,aAAA;ACIJ;;ADRE;EACE,YAAA;EACA,mBAAA;EACA,SAJa;EAKb,aAAA;ACWJ;;ADfE;EACE,YAAA;EACA,mBAAA;EACA,SAJa;EAKb,aAAA;ACkBJ","file":"style.css"} -------------------------------------------------------------------------------- /Finished/9. Directive/2. For Loop/style.scss: -------------------------------------------------------------------------------- 1 | // @for $index from 1 through 10 { 2 | // .box-#{$index} { 3 | // width: 100px * $index; 4 | // // RANDOM COLORS 5 | // background: rgb(random(255), random(255), random(255)); 6 | // margin: $index; 7 | // padding: 5px * $index; 8 | // } 9 | // } 10 | 11 | @for $index from 1 through 5 { 12 | .list-#{$index} { 13 | width: 100px * $index; 14 | background: darken(green, $index * 3%); 15 | margin: $index; 16 | padding: 10px * $index; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Finished/9. Directive/3. Each Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Each Loop 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Finished/9. Directive/3. Each Loop/style.css: -------------------------------------------------------------------------------- 1 | .green { 2 | background: green; 3 | } 4 | 5 | .teal { 6 | background: teal; 7 | } 8 | 9 | .yellowgreen { 10 | background: yellowgreen; 11 | } 12 | 13 | .yellow { 14 | background: yellow; 15 | } 16 | 17 | body { 18 | display: flex; 19 | } 20 | 21 | div { 22 | flex: 1 1 auto; 23 | height: 100vh; 24 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/9. Directive/3. Each Loop/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAGE;EACE,iBAJK;ACET;;ADCE;EACE,gBAJK;ACMT;;ADHE;EACE,uBAJK;ACUT;;ADPE;EACE,kBAJK;ACcT;;ADNA;EACE,aAAA;ACSF;;ADNA;EACE,cAAA;EACA,aAAA;ACSF","file":"style.css"} -------------------------------------------------------------------------------- /Finished/9. Directive/3. Each Loop/style.scss: -------------------------------------------------------------------------------- 1 | $colors: green teal yellowgreen yellow; 2 | 3 | @each $color in $colors { 4 | .#{$color} { 5 | background: $color; 6 | } 7 | } 8 | 9 | body { 10 | display: flex; 11 | } 12 | 13 | div { 14 | flex: 1 1 auto; 15 | height: 100vh; 16 | } 17 | -------------------------------------------------------------------------------- /Finished/9. Directive/4. While Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | While Loop 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Finished/9. Directive/4. While Loop/style.css: -------------------------------------------------------------------------------- 1 | .selector-10 { 2 | padding-left: 10px; 3 | } 4 | 5 | .selector-20 { 6 | padding-left: 20px; 7 | } 8 | 9 | .selector-30 { 10 | padding-left: 30px; 11 | } 12 | 13 | .selector-40 { 14 | padding-left: 40px; 15 | } 16 | 17 | .selector-50 { 18 | padding-left: 50px; 19 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Finished/9. Directive/4. While Loop/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAGE;EACE,kBAAA;ACFJ;;ADCE;EACE,kBAAA;ACEJ;;ADHE;EACE,kBAAA;ACMJ;;ADPE;EACE,kBAAA;ACUJ;;ADXE;EACE,kBAAA;ACcJ","file":"style.css"} -------------------------------------------------------------------------------- /Finished/9. Directive/4. While Loop/style.scss: -------------------------------------------------------------------------------- 1 | $i: 10; 2 | 3 | @while $i <= 50 { 4 | .selector-#{$i} { 5 | padding-left: 1px * $i; 6 | } 7 | $i: $i + 10; 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/README.md -------------------------------------------------------------------------------- /Starter/1. Variables/Images/four.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/1. Variables/Images/four.jpg -------------------------------------------------------------------------------- /Starter/1. Variables/Images/images-credits.txt: -------------------------------------------------------------------------------- 1 | IMAGE ONE 👇 2 | 3 | https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80 4 | 5 | 6 | IMAGE TWO 👇 7 | 8 | https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 9 | 10 | IMAGE THREE 👇 11 | 12 | https://images.unsplash.com/photo-1489980557514-251d61e3eeb6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 13 | 14 | 15 | IMAGE FOUR 👇 16 | 17 | https://images.unsplash.com/photo-1484515991647-c5760fcecfc7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=449&q=80 -------------------------------------------------------------------------------- /Starter/1. Variables/Images/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/1. Variables/Images/one.jpg -------------------------------------------------------------------------------- /Starter/1. Variables/Images/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/1. Variables/Images/three.jpg -------------------------------------------------------------------------------- /Starter/1. Variables/Images/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/1. Variables/Images/two.jpg -------------------------------------------------------------------------------- /Starter/1. Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Variables 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/1. Variables/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/1. Variables/index.scss -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/1.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/2.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/3.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/4.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/5.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/6.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/7.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/8.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/Projects/9d9769144508357.628db230127df.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/Projects/9d9769144508357.628db230127df.png -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/clients/alex-mccarthy-RGKdWJOUFH0-unsplash.jpg -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/clients/ali-morshedlou-WMD64tMfc4k-unsplash.jpg -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/clients/nasik-lababan-AY2dgFfdqVk-unsplash.jpg -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/10. Portfolio Site/Images/simon-de-vries-UQluWXKUn7A-unsplash.jpg -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/10. Portfolio Site/style.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | body { 4 | background: #211f22; 5 | } 6 | -------------------------------------------------------------------------------- /Starter/11. Awesome Header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Awesome Header 7 | 8 | 9 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Starter/11. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/11. Awesome Header/meysam-jarahkar-LI7jB1925j0-unsplash.jpg -------------------------------------------------------------------------------- /Starter/11. Awesome Header/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/11. Awesome Header/style.scss -------------------------------------------------------------------------------- /Starter/2. Nesting/README.md: -------------------------------------------------------------------------------- 1 | # Nesting 2 | 3 | ## 👇 Sass lets you nest CSS selectors in the same way as HTML. 4 | 5 | ```scss 6 | nav { 7 | ul { 8 | margin: 0; 9 | padding: 0; 10 | list-style: none; 11 | } 12 | li { 13 | display: inline-block; 14 | } 15 | a { 16 | display: block; 17 | padding: 6px 12px; 18 | text-decoration: none; 19 | } 20 | } 21 | ``` 22 | 23 | ### 👆 Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector. 24 | -------------------------------------------------------------------------------- /Starter/2. Nesting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Nesting 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/2. Nesting/sebastian-svenson-d2w-_1LJioQ-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/2. Nesting/sebastian-svenson-d2w-_1LJioQ-unsplash.jpg -------------------------------------------------------------------------------- /Starter/2. Nesting/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /Starter/3. Imports and Partials/README.md: -------------------------------------------------------------------------------- 1 | # Partials 2 | 3 | ### Sass keeps the CSS code DRY (Don't Repeat Yourself). One way to write DRY code is to keep related code in separate files. You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. 4 | 5 | ### 👇 The @import directive allows you to include the content of one file in another. 6 | 7 | ```scss 8 | @import "variables"; 9 | @import "colors"; 10 | @import "reset"; 11 | ``` 12 | -------------------------------------------------------------------------------- /Starter/3. Imports and Partials/images.txt: -------------------------------------------------------------------------------- 1 | https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80 2 | 3 | 4 | IMAGE ONE 👇 5 | 6 | https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1158&q=80 7 | 8 | IMAGE TWO 👇 9 | 10 | https://images.unsplash.com/photo-1603574670812-d24560880210?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80 11 | 12 | IMAGE THREE 👇 13 | 14 | https://images.unsplash.com/photo-1484766280341-87861644c80d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80 15 | 16 | IMAGE FOUR 👇 17 | 18 | https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 19 | 20 | IMAGE FIVE 👇 21 | 22 | https://images.unsplash.com/photo-1420745981456-b95fe23f5753?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 23 | 24 | IMAGE SIX 👇 25 | 26 | https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 27 | 28 | IMAGE SEVEN 👇 29 | 30 | https://images.unsplash.com/photo-1580137189272-c9379f8864fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 31 | 32 | -------------------------------------------------------------------------------- /Starter/3. Imports and Partials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SnapShot 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/3. Imports and Partials/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/3. Imports and Partials/style.scss -------------------------------------------------------------------------------- /Starter/4. Mixins/README.md: -------------------------------------------------------------------------------- 1 | # Sass Mixins 2 | 3 | ### The @mixin directive lets you create CSS code that is to be reused throughout the website. 4 | 5 | ### The @include directive is created to let you use (include) the mixin. 6 | 7 | # Defining a Mixin 8 | 9 | ```scss 10 | @mixin important-text { 11 | color: red; 12 | font-size: 25px; 13 | font-weight: bold; 14 | border: 1px solid blue; 15 | } 16 | ``` 17 | 18 | # Using a Mixin 19 | 20 | ### The @include directive is used to include a mixin. 21 | 22 | ```scss 23 | .danger { 24 | @include important-text; 25 | background-color: green; 26 | } 27 | ``` 28 | -------------------------------------------------------------------------------- /Starter/4. Mixins/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mixins 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/4. Mixins/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /Starter/5. Extends/README.md: -------------------------------------------------------------------------------- 1 | # Sass @extend Directive 2 | 3 | ### The @extend directive lets you share a set of CSS properties from one selector to another. 4 | 5 | ### The @extend directive is useful if you have almost identically styled elements that only differ in some small details. 6 | 7 | ```scss 8 | .button-basic { 9 | border: none; 10 | padding: 15px 30px; 11 | text-align: center; 12 | font-size: 16px; 13 | cursor: pointer; 14 | } 15 | 16 | .button-report { 17 | @extend .button-basic; 18 | background-color: red; 19 | } 20 | 21 | .button-submit { 22 | @extend .button-basic; 23 | background-color: green; 24 | color: white; 25 | } 26 | ``` 27 | -------------------------------------------------------------------------------- /Starter/5. Extends/images.txt: -------------------------------------------------------------------------------- 1 | IMAGE ONE 👇 2 | 3 | https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 4 | 5 | IMAGE TWO 👇 6 | 7 | https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80 8 | 9 | 10 | IMAGE THREE 👇 11 | 12 | https://images.unsplash.com/photo-1657299170932-e75407883a6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80 13 | 14 | 15 | IMAGE FOUR 👇 16 | 17 | https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2053&q=80 18 | 19 | IMAGE FIVE 👇 20 | 21 | https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80 22 | -------------------------------------------------------------------------------- /Starter/5. Extends/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @extends 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/5. Extends/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /Starter/6. Sass Operators/README.md: -------------------------------------------------------------------------------- 1 | # Operators? 2 | 3 | ### Operator is a symbol that tells the compiler to perform specific mathematical, conditional, or logical functions. It is a symbol that operates on a value or a variable. 4 | 5 | # Equality Operator 6 | 7 | ### The equality operators return whether or not two values are the same 8 | 9 | ```scss 10 | .selector { 11 | padding: 10px == 10px; // true 12 | padding: 10px == 10em; // false 13 | padding: 10px != 10px; // false 14 | padding: 10px != 10em; // true 15 | } 16 | ``` 17 | 18 | # Relational Operator 19 | 20 | ### Relational operators are those which compare the values of two numbers. They tell whether one number is smaller or greater than or equal to the other number. They automatically convert numbers into compatible units. 21 | 22 | ```scss 23 | .selector { 24 | margin: 100 > 50; // true 25 | margin: 10px < 17px; // true 26 | margin: 96px >= 1in; // true 27 | margin: 1000ms <= 1s; // true 28 | } 29 | ``` 30 | 31 | # Boolean Operator 32 | 33 | ### A boolean refers to a value that is either true or false 34 | 35 | - (and) If both conditions are true then the value will be true, otherwise FALSE. 36 | - (or) If either conditions are true then the value will be true, otherwise FALSE. 37 | - (not) Returns the opposite value. 38 | 39 | ```scss 40 | .selector { 41 | ------------------------------------------------ 42 | // both conditions are true so the answer will be true. 43 | margin: arial == "arial" and 10px == 10; 44 | // One condition is false so the answer will be false. 45 | margin: arial == "arial" and 10px == 20; 46 | ------------------------------------------------ 47 | // One condition is true so the answer will be true. 48 | margin: arial == "arial" or 10px == 20; 49 | // Both conditions are false so the answer is false. 50 | margin: arial == "roboto" or 10px == 20; 51 | ------------------------------------------------ 52 | 53 | ------------------------------------------------ 54 | margin: not 10px == 10px; // false 55 | margin: not 10px == 20px; // true 56 | ------------------------------------------------ 57 | } 58 | ``` 59 | -------------------------------------------------------------------------------- /Starter/6. Sass Operators/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/6. Sass Operators/index.html -------------------------------------------------------------------------------- /Starter/6. Sass Operators/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/6. Sass Operators/style.scss -------------------------------------------------------------------------------- /Starter/7. Sass Functions/README.md: -------------------------------------------------------------------------------- 1 | # Sass Functions 2 | 3 | ### Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. 4 | 5 | ### They make it easy to abstract out common formulas and behaviors in a readable way. 6 | 7 | ```scss 8 | @function pow($base, $exponent) { 9 | $result: 1; 10 | @for $_ from 1 through $exponent { 11 | $result: $result * $base; 12 | } 13 | @return $result; 14 | } 15 | 16 | .sidebar { 17 | float: left; 18 | margin-left: pow(4, 3) * 1px; 19 | } 20 | ``` 21 | 22 | # Built-in Functions? 23 | 24 | ### Learn About Built-in Functions here 👇 25 | 26 | ```scss 27 | // 👉 https://www.koderhq.com/tutorial/sass/native-functions/ 28 | ``` 29 | -------------------------------------------------------------------------------- /Starter/7. Sass Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Functions 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Starter/7. Sass Functions/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/7. Sass Functions/style.scss -------------------------------------------------------------------------------- /Starter/8. Interpolation/README.md: -------------------------------------------------------------------------------- 1 | # Interpolation 2 | 3 | ### Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{}. 4 | -------------------------------------------------------------------------------- /Starter/8. Interpolation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Interpolation 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/8. Interpolation/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/8. Interpolation/style.scss -------------------------------------------------------------------------------- /Starter/9. Directives/1. If and Else/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Conditional Statments 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/9. Directives/1. If and Else/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/9. Directives/1. If and Else/style.scss -------------------------------------------------------------------------------- /Starter/9. Directives/2. For Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | For Loop 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Starter/9. Directives/2. For Loop/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/9. Directives/2. For Loop/style.scss -------------------------------------------------------------------------------- /Starter/9. Directives/3. Each Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Each Loop 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Starter/9. Directives/3. Each Loop/style.scss: -------------------------------------------------------------------------------- 1 | $colors: green teal yellowgreen yellow; 2 | 3 | @each $color in $colors { 4 | .#{$color} { 5 | background: $color; 6 | } 7 | } 8 | 9 | body { 10 | display: flex; 11 | } 12 | 13 | div { 14 | flex: 1 1 auto; 15 | height: 100vh; 16 | } 17 | -------------------------------------------------------------------------------- /Starter/9. Directives/4. While Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | While Loop 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Starter/9. Directives/4. While Loop/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/Starter/9. Directives/4. While Loop/style.scss -------------------------------------------------------------------------------- /course-thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Sass-Masterclass/4e0970a49182b2402aefa5dabad151c552af5d59/course-thumb.png --------------------------------------------------------------------------------