This is a page built during free Code Camp course. It is to give a tribute to a person you admire.
A Pen by Ewa the doer on CodePen.
Last active
August 10, 2016 10:36
-
-
Save ewathedoer/5446e9fe5288ba301b21 to your computer and use it in GitHub Desktop.
Tribute Page
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
| <html lang="en"> | |
| <!-- This is a Tribute Page built for Free Code Camp course task --> | |
| <head> | |
| <title>Tribute to Luke Wroblewski</title> | |
| <meta name="author" content="the doer"> | |
| <meta name="description" content="The site made as a task in Tribute Page in FCC course"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row" id="headline"> | |
| <div class="col-xs-4 col-md-2 col-md-offset-2 vcenter"> | |
| <img id="photo" class="img-responsive" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/p/4/000/181/337/3e035f8.jpg" alt="Luke Wrobleski photo from his LinkedIn profile"> | |
| </div><div class="text-center col-xs-8 vcenter"> | |
| <div> | |
| <h1>Luke Wroblewski</h1> | |
| <h2>The man who <span>inspires users to become designers</span></h2> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="info-row" class="row"> | |
| <div id="info" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2"> | |
| <p> | |
| LukeW is an internationally recognized digital product leader who has designed and built software used by over a billion people worldwide. Luke is currently a Product Director at Google. He is a leader and mentor in the UX world. He changes the way we think about usable solutions. He's a great author and teacher. Luke is users' advocate. | |
| </p> | |
| </div> | |
| </div> | |
| <div id="link-row" class="row"> | |
| <div class="link col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-lg-2 col-lg-offset-3"> | |
| <a href="http://www.lukew.com/ff/" target="_blank">website</a> | |
| </div> | |
| <div class="link col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-lg-2"> | |
| <a href="https://www.linkedin.com/in/lukew" target="_blank"> | |
| linkedin</a> | |
| </div> | |
| <div class="link col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 col-lg-2"> | |
| <a href="https://twitter.com/lukew" target="_blank"> twitter</a> | |
| </div> | |
| </div> | |
| <footer class="text-center"> | |
| <ul> | |
| <li>Created by the doer</li> | |
| <li>during | |
| <a href="http://www.freecodecamp.com/" target="_blank"> | |
| FCC course | |
| </a> | |
| </li> | |
| </ul> | |
| </footer> | |
| </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
| /* | |
| color palette: | |
| accent color: #6fa601; | |
| text: #fff; | |
| */ | |
| body { | |
| color: #fff; | |
| background-color: #727272; | |
| font-family: Verdana,Helvetica Neue,Helvetica,Arial,sans-serif; | |
| } | |
| h1 { | |
| color: #6fa601; | |
| font-size: 4em; | |
| } | |
| h2 { | |
| color: #ee9d05; | |
| font-size: 1.5em; | |
| } | |
| h2 span { | |
| font-weight: bold; | |
| } | |
| p { | |
| font-size: 1.5em; | |
| line-height: 1.5em; | |
| } | |
| #headline { | |
| background-color: #121212; | |
| } | |
| #info { | |
| padding: 20px; | |
| } | |
| #info-row { | |
| margin: 40px 0; | |
| } | |
| #link-row { | |
| height: auto; | |
| } | |
| .link a { | |
| display: table-cell; | |
| height: 100%; | |
| vertical-align: middle; | |
| } | |
| .link { | |
| border: none; | |
| height: 200px; | |
| text-align: center; | |
| font-size: 3em; | |
| display: table; | |
| margin-bottom: 20px; | |
| } | |
| #link-row div a{ | |
| background-color: transparent; | |
| border: 1px solid #fff; | |
| border-radius: 10px; | |
| } | |
| #link-row div a:hover { | |
| background-color: #6fa601; | |
| color: #fff; | |
| border-color: #6fa601; | |
| } | |
| #link-row div a:visited { | |
| color: #fff; | |
| } | |
| footer { | |
| padding: 60px 0; | |
| margin-top: 20px; | |
| border-top: dashed 1px whitesmoke; | |
| color: lightgrey; | |
| } | |
| a { | |
| color: #fff; | |
| } | |
| a:hover, a:focus { | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| li { | |
| list-style-type: none; | |
| } | |
| #photo { | |
| padding: 10px 0; | |
| } | |
| .vcenter { | |
| display: inline-block; | |
| vertical-align: middle; | |
| float: none; | |
| } | |
| ul { | |
| padding: 0; | |
| } | |
| footer a:hover, | |
| footer a:focus { | |
| color: #6fa601; | |
| } | |
| /*media queries*/ | |
| @media screen and (max-width: 767px) { | |
| h1 { | |
| font-size: 1.5em; | |
| } | |
| h2 { | |
| font-size: 1em; | |
| } | |
| p { | |
| font-size: 1.2em; | |
| } | |
| footer li { | |
| font-size: 0.85em; | |
| } | |
| .link { | |
| font-size: 2em; | |
| height: 100px; | |
| } | |
| } | |
| @media screen and (min-width: 769px) { | |
| .link a { | |
| padding: 0 5px; | |
| } | |
| } | |
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
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
The project built with Bootstrap. This is a page built during free Code Camp course for a task called Tribute Page. The goal was to give a tribute to a person you admire.
A Pen by Ewa the doer on CodePen.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment