-
-
Save codecademydev/74d74f9666b3d982b072a7650c76b051 to your computer and use it in GitHub Desktop.
Codecademy export
This file contains 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> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <h1>My Website Style Guide</h1> | |
| <div class="container"> | |
| <h1>Colors</h1> | |
| <div class="boxes"> | |
| <div class="cool-blue"> | |
| <p>Cool Blue</p> | |
| <p>#2d5dcc</p> | |
| </div> | |
| <div class="pink"> | |
| <p>Pink</p> | |
| <p>#d957d9</p> | |
| </div> | |
| <div class="mint-green"> | |
| <p>Mint Green</p> | |
| <p>#4fe0b0</p> | |
| </div> | |
| <div class="beige"> | |
| <p>Beige</p> | |
| <p>#efd9ca</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h1>Fonts</h1> | |
| <div class="fonts"> | |
| <div class="srccode-pro"> | |
| <h2 id="srccodepro-font">Source Code Pro</h2> | |
| <p>The quick brown fox jumps over the lazy dog.</p> | |
| <p><b>The quick brown fox jumps over the lazy dog.</b></p> | |
| <p><i>The quick brown fox jumps over the lazy dog.</i></p> | |
| </div> | |
| <div class="nunito-sans"> | |
| <h2 id="nunitosans-font">Nunito Sans</h2> | |
| <p>The quick brown fox jumps over the lazy dog.</p> | |
| <p><b>The quick brown fox jumps over the lazy dog.</b></p> | |
| <p><i>The quick brown fox jumps over the lazy dog.</i></p> | |
| </div> | |
| <div class="poppins"> | |
| <h2 id="poppins-font">Poppins</h2> | |
| <p>The quick brown fox jumps over the lazy dog.</p> | |
| <p><b>The quick brown fox jumps over the lazy dog.</b></p> | |
| <p><i>The quick brown fox jumps over the lazy dog.</i></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h1>Text Styles</h1> | |
| <div class="text-styles"> | |
| <div class="main-heading"> | |
| <h1>H1: Main page heading</h1> | |
| <ul> | |
| <li>Font-weight: 700 (bold)</li> | |
| <li>Font-size: 26px</li> | |
| <li>Font-family: Nunito Sans</li> | |
| </ul> | |
| </div> | |
| <div class="sub-heading"> | |
| <h2>H2: Subheading</h2> | |
| <ul> | |
| <li>Font-weight: 500</li> | |
| <li>Font-size: 18px</li> | |
| <li>Font-family: Poppins</li> | |
| </ul> | |
| </div> | |
| <div class="p-text"> | |
| <p>P: Paragraph text</p> | |
| <ul> | |
| <li>Font-weight: 400 (regular)</li> | |
| <li>Font-size: 14px</li> | |
| <li>Font-family: Poppins</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| /********** GLOBAL SECTION **********/ | |
| html, body { | |
| padding: 0 70px; | |
| margin: 0 auto; | |
| } | |
| .container { | |
| border: 2px solid lightgrey; | |
| padding: 0 10px; | |
| margin: 10px 0; | |
| } | |
| h1 { /*My Website Style Guide*/ | |
| font-family: 'Nunito Sans', sans-serif; | |
| font-weight: 700; | |
| font-size: 26px; | |
| } | |
| .container h1 { /*Colors, Fonts, Text Styles*/ | |
| font-family: 'Nunito Sans', sans-serif; | |
| font-weight: 700; | |
| font-size: 18px; | |
| } | |
| /********** COLORS SECTION **********/ | |
| .container .boxes { | |
| font-family: 'Poppins'; | |
| font-weight: 400; | |
| font-size: 14px; | |
| text-align: center; | |
| display: inline; | |
| padding: 50px 40px; | |
| margin: 40px 10px; | |
| } | |
| .container .cool-blue { | |
| background-color: #2d5dcc; | |
| color: white; | |
| } | |
| .container .pink { | |
| background-color: #d957d9; | |
| } | |
| .container .mint-green { | |
| background-color: #4fe0b0; | |
| } | |
| .container .beige { | |
| background-color: #efd9ca; | |
| } | |
| /********** FONTS SECTION **********/ | |
| .container .fonts { | |
| display: inline-block; | |
| position: relative; | |
| margin: 40px; | |
| } | |
| /* source-code-pro */ | |
| #srccodepro-font { | |
| font-family: 'Source Code Pro', monospace; | |
| font-weight: 400; | |
| font-size: 18px; | |
| text-decoration: underline; | |
| } | |
| .srccode-pro p { | |
| font-family: 'Source Code Pro', monospace; | |
| font-weight: 400; | |
| font-size: 14px; | |
| } | |
| /* nutito-sans */ | |
| #nunitosans-font { | |
| font-family: 'Nunito Sans', sans-serif; | |
| font-weight: 400; | |
| text-decoration: underline; | |
| font-size: 18px; | |
| } | |
| .nunito-sans p { | |
| font-family: 'Nunito Sans', sans-serif; | |
| font-weight: 400; | |
| font-size: 14px; | |
| } | |
| /* poppins */ | |
| #poppins-font { | |
| font-family: Poppins, sans-serif; | |
| font-weight: 400; | |
| text-decoration: underline; | |
| font-size: 18px; | |
| } | |
| .poppins p { | |
| font-family: Poppins, sans-serif; | |
| font-weight: 400; | |
| font-size: 14px; | |
| } | |
| /********** TEXT STYLES SECTION **********/ | |
| .container .text-styles { | |
| padding: 0 auto; | |
| margin: 0 auto; | |
| } | |
| .container .main-heading h1 { | |
| font-family: 'Nunito Sans', sans-serif; | |
| font-weight: 700; | |
| font-size: 26px; | |
| } | |
| .container .sub-heading h2 { | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 500; | |
| font-size: 18px; | |
| } | |
| .container .p-text p { | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 400; | |
| font-size: 14px; | |
| } | |
| ul li { | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 400; | |
| font-size: 14px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment