Created
June 18, 2020 02:08
-
-
Save keidarcy/0bd19ea6e8589f9e61a720e44b14dbf4 to your computer and use it in GitHub Desktop.
little sass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $font-stack:Arial, Helvetica, sans-serif | |
| $light-color:#f4f4f4 | |
| $primary-color: #0e6cff | |
| // $primary-color: #e0ffff | |
| $secondary-color: #ff8700 | |
| @function set-text-color($color) | |
| @if(lightness($color) > 70) | |
| @return #333 | |
| @else | |
| @return #fff | |
| @mixin set-background($color) | |
| background-color: $color | |
| color: set-text-color($color) | |
| $spaceamounts: (1,2,3,4,5) | |
| @each $space in $spaceamounts | |
| .m-#{$space} | |
| margin: #{space}rem | |
| .my-#{$space} | |
| margin: #{$space}rem 0 | |
| .p-#{$space} | |
| padding: #{$space}rem | |
| .py-#{$space} | |
| padding: #{$space}rem 0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media(max-width: 700px) | |
| .showcase | |
| height: 400px | |
| &-content | |
| text-align: center | |
| img | |
| display: none |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container | |
| max-width: 1100px | |
| padding: 0 30px | |
| margin: 0 auto | |
| overflow: auto |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=ale=1.0" /> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="./css/style.css" /> | |
| </head> | |
| <body> | |
| <header class="showcase"> | |
| <div class="container"> | |
| <nav> | |
| <h1 class="logo">My Website</h1> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Services</a></li> | |
| </ul> | |
| </nav> | |
| <div class="showcase-content"> | |
| <div> | |
| <h1>Make Your Marketing Real</h1> | |
| <p class="my-1"> | |
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est | |
| eligendi tempore atque laborum. Quisquam nemo at non. Corrupti, | |
| vitae dolore. | |
| </p> | |
| <a href="#" class="btn-primary">Learn More</a> | |
| <a href="#" class="btn-secondary">Sign Up</a> | |
| </div> | |
| <img | |
| src="https://themesbrand.com/zooki/layouts/images/home-2-img.png" | |
| /> | |
| </div> | |
| </div> | |
| </header> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .m-1 { | |
| margin: spacerem; | |
| } | |
| .my-1 { | |
| margin: 1rem 0; | |
| } | |
| .p-1 { | |
| padding: 1rem; | |
| } | |
| .py-1 { | |
| padding: 1rem 0; | |
| } | |
| .m-2 { | |
| margin: spacerem; | |
| } | |
| .my-2 { | |
| margin: 2rem 0; | |
| } | |
| .p-2 { | |
| padding: 2rem; | |
| } | |
| .py-2 { | |
| padding: 2rem 0; | |
| } | |
| .m-3 { | |
| margin: spacerem; | |
| } | |
| .my-3 { | |
| margin: 3rem 0; | |
| } | |
| .p-3 { | |
| padding: 3rem; | |
| } | |
| .py-3 { | |
| padding: 3rem 0; | |
| } | |
| .m-4 { | |
| margin: spacerem; | |
| } | |
| .my-4 { | |
| margin: 4rem 0; | |
| } | |
| .p-4 { | |
| padding: 4rem; | |
| } | |
| .py-4 { | |
| padding: 4rem 0; | |
| } | |
| .m-5 { | |
| margin: spacerem; | |
| } | |
| .my-5 { | |
| margin: 5rem 0; | |
| } | |
| .p-5 { | |
| padding: 5rem; | |
| } | |
| .py-5 { | |
| padding: 5rem 0; | |
| } | |
| .container { | |
| max-width: 1100px; | |
| padding: 0 30px; | |
| margin: 0 auto; | |
| overflow: auto; | |
| } | |
| .btn-secondary, .btn-primary { | |
| display: inline-block; | |
| border-radius: 5px; | |
| padding: 8px 20px; | |
| margin: 3px; | |
| } | |
| .btn-secondary:hover, .btn-primary:hover { | |
| transform: scale(0.9); | |
| } | |
| .btn-primary { | |
| background-color: #418bff; | |
| color: #fff; | |
| } | |
| .btn-secondary { | |
| background-color: #ff8700; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| body { | |
| background: #f4f4f4; | |
| font-family: Arial, Helvetica, sans-serif; | |
| line-height: 1.6; | |
| } | |
| .showcase { | |
| background-color: #0e6cff; | |
| color: #fff; | |
| height: 600px; | |
| } | |
| .showcase nav { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .showcase nav ul { | |
| display: flex; | |
| list-style-type: none; | |
| } | |
| .showcase nav li { | |
| padding: 15px; | |
| } | |
| .showcase nav a { | |
| color: #fff; | |
| } | |
| .showcase nav a:hover { | |
| color: #ff8700; | |
| } | |
| .showcase-content { | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .showcase-content img { | |
| width: 50%; | |
| } | |
| .showcase-content h1 { | |
| font-size: 50px; | |
| line-height: 1.2; | |
| } | |
| .showcase-content p { | |
| margin: 20px 0; | |
| } | |
| @media (max-width: 700px) { | |
| .showcase { | |
| height: 400px; | |
| } | |
| .showcase-content { | |
| text-align: center; | |
| } | |
| .showcase-content img { | |
| display: none; | |
| } | |
| } | |
| /*# sourceMappingURL=style.css.map */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"version":3,"sourceRoot":"","sources":["../sass/_config.sass","../sass/_utilities.sass","../sass/_button.sass","../sass/style.sass","../sass/_mobile.sass"],"names":[],"mappings":"AAmBE;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AAPF;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AAPF;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AAPF;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AAPF;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AC1BJ;EACE;EACA;EACA;EACA;;;ACJF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EFIE,kBEFwB;EFGxB;;;AEDF;EAEE,kBFXgB;;;AGAlB;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE,YHZW;EGaX,aHdU;EGeV;;;AAEF;EHJE,kBAXc;EAYd;EGKA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE,OH9BY;;AG+BhB;EACE;EACA;EACA;EACA;;AAEA;EACE;;AACF;EACE;EACA;;AACF;EACE;;;AC/CN;EACE;IACE;;EAEA;IACE;;EAEA;IACE","file":"style.css"} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import 'config' | |
| @import 'utilities' | |
| @import 'button' | |
| * | |
| box-sizing: border-box | |
| margin: 0 | |
| padding: 0 | |
| a | |
| text-decoration: none | |
| body | |
| background: $light-color | |
| font-family: $font-stack | |
| line-height: 1.6 | |
| .showcase | |
| @include set-background($primary-color) | |
| height: 600px | |
| nav | |
| display: flex | |
| align-items: center | |
| justify-content: space-between | |
| ul | |
| display: flex | |
| list-style-type: none | |
| li | |
| padding: 15px | |
| a | |
| color: set-text-color($primary-color) | |
| // color: $light-color | |
| a:hover | |
| color: $secondary-color | |
| &-content | |
| height: 100% | |
| display: flex | |
| align-items: center | |
| justify-content: center | |
| img | |
| width: 50% | |
| h1 | |
| font-size: 50px | |
| line-height: 1.2 | |
| p | |
| margin: 20px 0 | |
| @import 'mobile' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment