Last active
August 29, 2015 14:22
-
-
Save starryeyez024/b0905759c9e76669d1e6 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| <div class="region-content"> | |
| <h2>Hello World! | |
| </h2> | |
| <div id="block-block-1" class="block"> | |
| Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a> | |
| </div> | |
| <div id="block-block-5" class="block"> | |
| Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a> | |
| </div> | |
| <div id="block-block-7" class="block"> | |
| Lorem Ipsum Tres <a>Click me</a> | |
| </div> | |
| <span></span> | |
| </div> | |
| <footer class="footer" id="footer">Copyright 2015</footer> |
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
| // ---- | |
| // Sass (v3.4.13) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // HTML & CSS QUIZ! | |
| // Solve each objective; use Google if you like! | |
| // Objective #1 Fix any problems this CSS could cause on redhat.com. | |
| // Objective #2 Fix the HTML errors | |
| // Objective #3 Make the code (CSS & HTML) tidy and DRY! | |
| $gray: #ccc; | |
| $red: #c00; | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: helvetica; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #c00; | |
| } | |
| h1 { | |
| font-size: 15em; | |
| font-weight: bold; | |
| color: red | |
| } | |
| .block { | |
| float: left; | |
| background: #000; | |
| color: white; | |
| padding: 5px; | |
| width: 100%; | |
| } | |
| @media screen (max-width: 960px) { | |
| .region-content { | |
| width: 1200px; | |
| background-image: url(http://www.redhat.local/profiles/rh/themes/redhatdotcom/img/bkgd/bkgd-ltc-mountains_trees_stream-2000x680.jpg); | |
| background-repeat: no-repeat; | |
| background-position: 0 0; | |
| #block-block-7 { | |
| background: #ccc; | |
| } | |
| #block-block-5 { | |
| background: #ccc; | |
| } | |
| #block-block-1 { | |
| background: $gray; | |
| } | |
| .block { | |
| width: 33%; | |
| margin: 1.5%; | |
| } | |
| } | |
| } | |
| #footer { | |
| margin: 0 0 0 0; | |
| margin-top: 1em; | |
| } |
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
| Invalid CSS after "@media screen ": expected "{", was "(max-width: 960..." |
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
| <div class="region-content"> | |
| <h2>Hello World! | |
| </h2> | |
| <div id="block-block-1" class="block"> | |
| Lorem Ipsum Uno <a href="http://www.redhat.com">Click me</a> | |
| </div> | |
| <div id="block-block-5" class="block"> | |
| Lorem Ipsum Dos <a href="http://www.redhat.com">Click me</a> | |
| </div> | |
| <div id="block-block-7" class="block"> | |
| Lorem Ipsum Tres <a>Click me</a> | |
| </div> | |
| <span></span> | |
| </div> | |
| <footer class="footer" id="footer">Copyright 2015</footer> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment