-
-
Save codecademydev/cf0444129bf9fe0285a5c97aadd2f4b1 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> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>My Website Style Guide</title> | |
| <link rel="stylesheet" href="style.css" type="text/css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400&family=Mali:wght@300;400;600&family=Poppins:ital,wght@0,200;0,500;1,300&display=swap" rel="stylesheet"> | |
| </head> | |
| <h1>My Website Style Guide</h1> | |
| <div class="box"> | |
| <h2>Colours</h2> | |
| <div class="colours"> | |
| <div class="cyan colour"> | |
| <p>Cyan</p> | |
| <br> | |
| <p>00ffff</p> | |
| </div> | |
| <div class="yellow colour"> | |
| <p>Pink</p> | |
| <br> | |
| <p>#FFF700</p> | |
| </div> | |
| <div class="green colour"> | |
| <p>Mint Green</p> | |
| <br> | |
| <p>#4fe0b0</p> | |
| </div> | |
| <div class="purple colour"> | |
| <p>Mauve</p> | |
| <br> | |
| <p>#e0b0ff</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="box box-2"> | |
| <h2>Fonts</h2> | |
| <div class="fonts"> | |
| <div class="mono font"> | |
| <h3>Mono Font</h3> | |
| <p class="p1">This font would be used for subheadings</p> | |
| <p class="p2">This font is in italics</p> | |
| <p class="p3"> Font For Titles</p> | |
| </div> | |
| <div class="mali font"> | |
| <h3> Mali Font</h3> | |
| <p class="p1">This font could be used for quotes</p> | |
| <p class="p2">Another quote style</p> | |
| <p class="p3"> Important quote</p> | |
| </div> | |
| <div class="poppins font"> | |
| <h3>Poppins Font</h3> | |
| <p class="p1">main body of text</p> | |
| <p class="p2">main body of text, also</p> | |
| <p class="p3">bold main body of text</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="box box-3"> | |
| <h2>Text</h2> | |
| <div class="text"> | |
| <div class="text text-1"> | |
| <h1>H1: Main page heading</h1> | |
| <ul> | |
| <li>Font-weight: 700 (bold)</li> | |
| <li>Font-size: 45px</li> | |
| <li>Font-family: "B612 Mono";</li> | |
| </ul> | |
| <h2>H2: Subheading</h2> | |
| <ul> | |
| <li>Font-weight: 400</li> | |
| <li>Font-size: 30px</li> | |
| <li>Font-family: "B612 Mono";</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text text-2"> | |
| <p>P: Paragraph text</p> | |
| <ul> | |
| <li>Font-weight: 300 </li> | |
| <li>Font-size: 16px</li> | |
| <li>Font-family: Poppins</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <body> | |
| </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
| *{ | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| vertical-align: baseline; | |
| } | |
| h1{ | |
| font-size: 45px; | |
| text-align: center; | |
| } | |
| body{ | |
| margin: 0 10%; | |
| background-color: mistyrose; | |
| } | |
| p, h1, h2{ | |
| font-family: "mukta" | |
| } | |
| .box{ | |
| border: 3px gray inset; | |
| margin-bottom: 20px; | |
| background-color: lavender; | |
| } | |
| .box-3{ | |
| width: 45%; | |
| position: absolute; | |
| display: inline-block; | |
| margin-left: 20px; | |
| } | |
| .box-2{ | |
| width: 45%; | |
| position: relative; | |
| display: inline-block; | |
| background-color: tan; | |
| } | |
| .colours, .box h2, .fonts, .text{ | |
| margin: 5px 10px; | |
| } | |
| .colour{ | |
| width: 18% ; | |
| position: relative; | |
| display: inline-block; | |
| padding: 25px; | |
| } | |
| .cyan{ | |
| background-color: #00ffff; | |
| } | |
| .yellow{ | |
| background-color: #fff700; | |
| } | |
| .green{ | |
| background-color: #4fe0b0; | |
| } | |
| .purple{ | |
| background-color: #e0b0ff; | |
| } | |
| .font, .p1, .p2, .p3, h2, h3, .box h2{ | |
| margin-bottom: 25px; | |
| } | |
| .mono p, .mono h3{ | |
| font-family: "B612 Mono"; | |
| } | |
| p{ | |
| font-size: 16px; | |
| } | |
| .mono .p1{ | |
| font-weight: 400; | |
| } | |
| .mono .p2{ | |
| font-weight: 400; | |
| font-style: italic; | |
| } | |
| .mono .p3{ | |
| font-weight: 700; | |
| font-size: 20px; | |
| } | |
| .mono{ | |
| background-color: mintcream; | |
| padding: 10px; | |
| } | |
| h3{ | |
| font-size: 22px; | |
| } | |
| h2{ | |
| font-size: 30px; | |
| } | |
| .mali p, .mali h3{ | |
| font-family: "mali";} | |
| .mali{ | |
| background-color: lavender; | |
| padding: 10px; | |
| } | |
| .mali .p1{ | |
| font-weight: 300; | |
| } | |
| .mali .p2{ | |
| font-weight: 400; | |
| } | |
| .mali .p3{ | |
| font-weight: 600; | |
| font-size: 20px; | |
| font-style: bold; | |
| } | |
| .poppins p, .poppins h3{ | |
| font-family: "poppins";} | |
| .poppins{ | |
| background-color: ivory; | |
| padding: 10px; | |
| } | |
| .poppins .p1{ | |
| font-weight: 200; | |
| } | |
| .poppins .p2{ | |
| font-weight: 300; | |
| font-style: italic; | |
| } | |
| .poppins .p3{ | |
| font-weight: 500; | |
| font-size: 20px; | |
| } | |
| .text p{ | |
| color: navy; | |
| padding-left: 10px; | |
| } | |
| .text-2{ | |
| padding: 25px; | |
| background-color: white; | |
| } | |
| li{ | |
| margin: 25px; | |
| padding-left: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment