-
-
Save gkilmain/55265c1c4ca9cb24c550 to your computer and use it in GitHub Desktop.
kilmain
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
| @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300); | |
| body { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| background-color: #F6F8F8; | |
| font-size: 1.1em; | |
| //font-weight: bold; | |
| } | |
| .cf:before, .cf:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .cf:after { | |
| clear: both; | |
| } | |
| // img { | |
| // width: 100%; | |
| // height: auto; | |
| // } | |
| div { | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| nav { | |
| border-bottom: 5px solid #e74c3c; | |
| margin-bottom: 10px; | |
| } | |
| p:first-child { | |
| padding-top: 0; | |
| margin-top: 0; | |
| } | |
| p { | |
| color: #2c3e50; | |
| } |
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> | |
| <title></title> | |
| <link rel="stylesheet" type="text/css" href="css/styles.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <nav> | |
| <ul class="top-nav cf"> | |
| <li><a href="#">Github</a></li> | |
| </ul> | |
| </nav> | |
| <div class="cf"> | |
| <div class="col-40"> | |
| <!-- <img src="images/suitandtkie.jpg" width="480" height="640"> --> | |
| <div class="fake-image"></div> | |
| </div> | |
| <div class="col-60"> | |
| <p>Hello! I'm George Kilmain and I am a front-end developer. Let me elaborate: I am confident hand coding responsive pages with HTML5, CSS3, and JavaScript. I use SASS and jQuery daily and I am comfortable quickly prototyping pages with Bootstrap.</p> | |
| <p>Currently I am a contractor for Staples where I develop responsive landing pages. I work closely with Designers and project managers and do my best to deliver pixel perfect pages.</p> | |
| <p>I do have interests outside of technology. I'm an avid chess player and I wish I had more time to study the game. | |
| </p> | |
| <p>I'm experienced working on <a class="message-pop" href="#">large</a> and <a class="message-pop" href="#">small projects</a>. I love creating apps with plain old <a class="message-pop" href="#">JavaScript</a> or with the guidence of <a class="message-pop" href="#">Ruby on Rails</a>.</p> | |
| </div> | |
| </div> | |
| <div class="cf"> | |
| <div class="col-33"> | |
| <div class="default-showcase-blurb"> | |
| <p>First showcase</p> | |
| </div> | |
| <div class="tablet-showcase-blurb"> | |
| A blurb about this showcase when viewing on tablet | |
| </div> | |
| </div> | |
| <div class="col-33"> | |
| <div class="default-showcase-blurb"> | |
| <p>First showcase</p> | |
| </div> | |
| <div class="tablet-showcase-blurb"> | |
| A blurb about this showcase when viewing on tablet | |
| </div> | |
| </div> | |
| <div class="col-33 last"> | |
| <div class="default-showcase-blurb"> | |
| <p>First showcase</p> | |
| </div> | |
| <div class="tablet-showcase-blurb"> | |
| A blurb about this showcase when viewing on tablet | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <a class="contact-link" href="#">[email protected]</a> | |
| </div> | |
| </div> | |
| <script src="js/local.js"></script> | |
| </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
| @import 'base'; | |
| div.container { | |
| width: 100%; | |
| max-width: 960px; | |
| margin: 0 auto; | |
| margin-top: 25px; | |
| } | |
| div.col-40 { | |
| width: 40%; | |
| float: left; | |
| } | |
| div.col-60 { | |
| width: 60%; | |
| float: left; | |
| } | |
| div.col-33 { | |
| width: 32%; | |
| border: 1px solid #CCC; | |
| float: left; | |
| height: 200px; | |
| margin-top: 2%; | |
| margin-right: 1%; | |
| border-radius: 4px; | |
| div.default-showcase-blurb { | |
| width: 100%; | |
| } | |
| div.tablet-showcase-blurb { | |
| display: none; | |
| } | |
| } | |
| div.col-33.last { | |
| margin-right: 0; | |
| } | |
| ul.top-nav { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| li { | |
| float: left; | |
| } | |
| a { | |
| padding: 10px; | |
| line-height: 32px; | |
| } | |
| } | |
| a.contact-link { | |
| padding: 10px; | |
| line-height: 32px; | |
| } | |
| .fake-image { | |
| width: 95%; | |
| height: 400px; | |
| border: 1px solid #CCC; | |
| } | |
| a.message-pop:hover { | |
| text-decoration: none; | |
| display: inline-block; | |
| background-color: #f1c40f; | |
| } | |
| @media only screen and (max-width: 768px) { | |
| div.col-33 { | |
| width: 100%; | |
| float: none; | |
| display: block; | |
| margin: 5px 0 0 0; | |
| div.default-showcase-blurb { | |
| width: 50%; | |
| float: left; | |
| } | |
| div.tablet-showcase-blurb { | |
| display: block; | |
| float: right; | |
| width: 50%; | |
| border-left: 1px solid #000; | |
| } | |
| } | |
| div.col-33:first-child { | |
| width: 100%; | |
| float: none; | |
| display: block; | |
| margin: 10px 0 0 0; | |
| } | |
| } | |
| @media only screen and (max-width: 568px) { | |
| div.col-33 { | |
| div.default-showcase-blurb { | |
| width: 100%; | |
| float: none; | |
| } | |
| div.tablet-showcase-blurb { | |
| display: none; | |
| } | |
| } | |
| div.col-40 { | |
| display:none; | |
| } | |
| div.col-60 { | |
| width: 100%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment