Created
July 10, 2017 19:24
-
-
Save pzp1997/2bfec5683e3d02a1e376fa52eaafa9ba to your computer and use it in GitHub Desktop.
Flexbox redesign of palmerpaul.com homepage. https://jsfiddle.net/pzp1997/unucxb46/1/
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> | |
| <head> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Lobster|Roboto|Rubik:500" rel="stylesheet"> | |
| <link href="site.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <nav> | |
| <a class="logo" href="/">PALMER <span class="orange">PAUL</span></a> | |
| <div class="navbar-right pull-right"> | |
| <a href="#">About</a> | |
| <a class="active" href="#">Blog</a> | |
| <a href="#">Contact</a> | |
| <a href="#">Resume</a> | |
| <a href="https://github.com/pzp1997">GitHub</a> | |
| </div> | |
| </nav> | |
| <main class="text-center"> | |
| <h1 class="big-text"> | |
| PALMER <span class="orange">PAUL</span> | |
| </h1> | |
| <h3 class="tagline"> | |
| Software Engineer <span class="orange">&&</span> Undergraduate Student | |
| </h3> | |
| </main> | |
| <hr> | |
| <footer> | |
| <div class="pull-left social-links"> | |
| </div> | |
| <div class="pull-right text-right"> | |
| <small> | |
| © Palmer Paul 2015-2017 | |
| <br> (<a href="#">view source code</a>.) | |
| </small> | |
| </div> | |
| </footer> | |
| </div> | |
| </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
| html, | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #333; | |
| color: #ddd; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| height: 100%; | |
| box-sizing: border-box; | |
| margin: 0 10% 0 10%; | |
| padding: 10px; | |
| } | |
| main { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| flex-grow: 1; | |
| height: 100%; | |
| } | |
| a { | |
| color: orange; | |
| text-decoration: none; | |
| } | |
| nav { | |
| margin-bottom: 8px; | |
| } | |
| nav a { | |
| text-decoration: none; | |
| } | |
| .navbar-right a { | |
| color: #aaa; | |
| padding: 0 5px 8px 5px; | |
| } | |
| .navbar-right a.active { | |
| color: #ddd; | |
| border-bottom: 2px #ffa500 solid; | |
| } | |
| .navbar-right a:hover { | |
| border-bottom: 2px #ffa500 solid; | |
| } | |
| .logo { | |
| color: #ddd; | |
| font-size: 18px; | |
| font-family: 'Rubik', sans-serif; | |
| } | |
| .pull-left { | |
| float: left; | |
| } | |
| .pull-right { | |
| float: right | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .orange { | |
| color: #ffa500; | |
| } | |
| .big-text { | |
| margin: 0; | |
| font-size: 48px; | |
| font-family: 'Rubik', sans-serif; | |
| } | |
| .tagline { | |
| margin: 0; | |
| font-size: 24px; | |
| font-family: 'Lobster', cursive; | |
| } | |
| hr { | |
| width: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment