-
-
Save oliverdelacruzm/7a997319674afbf4aece091de5e92233 to your computer and use it in GitHub Desktop.
Website Design System (by Oliver De La Cruz)
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 lang="e-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!--Google Fonts: Bungee Inline et IBM Plex Mono--> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="resources/css/style.css"> | |
| <title>Build a Website Design System</title> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="section-container header"> | |
| <h1 class="title">A Website Design System</h1> | |
| </div> | |
| </header> | |
| <section> | |
| <div class="section-container"> | |
| <h2>Colors</h2> | |
| <div class="colors"> | |
| <div class="color-1">Medium Dark Blue<br><br>#103583</div> | |
| <div class="color-2">White<br><br>#FFFFFF</div> | |
| <div class="color-3">Cyan Blue<br><br>#2f8fc8</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="section-container"> | |
| <h2>Fonts</h2> | |
| <div class="fonts-outer"> | |
| <div class="fonts"> | |
| <p class="font-1">IBM Plex Mono</p> | |
| <p class="ibm-line-1">Cheese is great.</p> | |
| <p class="ibm-line-2">Cheese is great.</p> | |
| <p class="ibm-line-3">Cheese is great.</p> | |
| <p class="ibm-line-4">Cheese is great.</p> | |
| </div> | |
| <div class="fonts"> | |
| <p class="font-2">Bungee Inline</p> | |
| <p class="bungee-line-1">And so is bread.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="section-container"> | |
| <h2>Text Styles</h2> | |
| <div class="text-styles"> | |
| <h1>H1: Main Page heading</h1> | |
| <ul> | |
| <li>Font weight: 400</li> | |
| <li>Font size: 50 px</li> | |
| <li>Font family: Bungee Inline</li> | |
| </ul> | |
| <h2>H2: Subheading</h2> | |
| <ul> | |
| <li>Font weight: 500</li> | |
| <li>Font size: 40 px</li> | |
| <li>Font family: IBM Plex Mono</li> | |
| </ul> | |
| <br> | |
| <p>P: Paragraph Text</p> | |
| <ul> | |
| <li>Font weight: 400</li> | |
| <li>Font size: 14 px</li> | |
| <li>Font family: IBM Plex Mono</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="footer-container">© <span class="name">Oliver De La Cruz</span></div> | |
| </footer> | |
| </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
| .section-container { | |
| border: 2px solid lightgrey; | |
| margin: 10px; | |
| } | |
| .section-container.header { | |
| background-color: rgba(211,211,211, .2); | |
| } | |
| h1.title { | |
| text-align: center; | |
| font-family: 'Bungee Inline', cursive; | |
| font-size: 50px; | |
| margin: 20px auto; | |
| color: #103583; | |
| } | |
| h1 { | |
| font-family: 'Bungee Inline', cursive; | |
| font-size: 50px; | |
| padding-left: 15px; | |
| margin-bottom: 5px; | |
| } | |
| h2 { | |
| font-family: 'Bungee Inline', cursive; | |
| font-size: 40px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| padding-left: 15px; | |
| font-weight: 500; | |
| margin-bottom: 5px; | |
| color: #2f8fc8; | |
| } | |
| .text-styles { | |
| padding-left: 15px; | |
| } | |
| .text-styles p { | |
| padding-left: 15px; | |
| } | |
| p, li{ | |
| font-size: 14px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| ul, li { | |
| margin-top: 0px; | |
| } | |
| p.font-2 { | |
| font-family: 'Bungee Inline', cursive; | |
| font-size: 18px; | |
| } | |
| p.font-1 { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 18px; | |
| } | |
| .fonts { | |
| display: inline-block; | |
| width: 29%; | |
| vertical-align: top; | |
| } | |
| .fonts-outer { | |
| text-align: center; | |
| } | |
| .ibm-line-1 { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 400; | |
| } | |
| .ibm-line-2 { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 500; | |
| } | |
| .ibm-line-3 { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .ibm-line-4 { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 700; | |
| } | |
| .bungee-line-1 { | |
| font-family: 'Bungee Inline', cursive; | |
| font-size: 14px; | |
| } | |
| .colors{ | |
| text-align: center; | |
| padding: 10px | |
| } | |
| .color-1, .color-2, .color-3 { | |
| display: inline-block; | |
| margin: 5px 10px; | |
| width: 28%; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border: 3px dotted lightgrey; | |
| border-radius: 12px; | |
| min-height: 60px; | |
| } | |
| .color-1 { | |
| background-color: #103583; | |
| color: white; | |
| font-weight: bold; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| .color-2 { | |
| background-color: #ffffff; | |
| font-family: 'IBM Plex Mono', monospace; | |
| color: black; | |
| } | |
| .color-3 { | |
| background-color: #2f8fc8; | |
| font-family: 'IBM Plex Mono', monospace; | |
| color: white; | |
| } | |
| .footer-container { | |
| border: 2px solid #d3d3d3; | |
| color: #2f8fc8; | |
| font-weight: bold; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| padding: 5px 15px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment